Красивые блоки для сайта в стиле WP — Note


В этой публикации пойдет речь о том, как реализовать красивые блоки для сайта. Наверняка вы не раз замечали на некоторых сайтах, в публикациях такие блоки. В них размещены цитаты, предупреждения, подсказки и многое другое.

Эти блоки предназначены для выделения какого-то важного контента и за счет красивого оформления должны сразу привлекать внимание. Да и сама страница с таким блоком приобретает более симпатичный вид.

На картинке обратите внимание на названия блоков. Ниже этими названиями будут обозначены отдельные классы CSS, чтобы не запутаться в итоге, какой блок выводить у себя на сайте.

Вот и я захотел выводить такие красивые блоки. Но так-как писать свой CSS код мне в тот момент было не когда я решил установить плагин WP-Note, который и выводит такие вставки в контент.

красивые блоки для сайта

Внимание !

Устанавливайте на сайт только протестированные на совместимость с вашей обновленной версией движка плагины. Смотрите время обновления таковых.

Но увидев на страничке зтого плагина то, что он уже два года не обновлялся, желание устанавливать его как-то сразу пропало само собой.

красивый-блок-div

И все-же я решил сакчать этот плагин и тупо вытащить из него стили. Ведь эти вставки по сути обычный, только стилизованный красивый блок div, только выводится будет он не шорткодом, а копи-пастом, напрямую, при публикации статьи. Ну а в чем разница? Или так добавлять шорткод, или блок div?.

Вообщем вот эти стили добавляйте в файл style.cssкод вывода красивых блоков для сайта.

Я не стал публиковать HTML и CSS код блоков по отдельности, а просто закомментировал, думаю разберетесь.

< --! HTML -->
<div class="note"><div class="noteclassic">Классический блок</div></div> < --! блокнот -->
<div class="note"><div class="noteimportant">Ключевая фраза</div></div> < --! ключи -->
<div class="note"><div class="notewarning">Блок внимание</div></div> < --! знак внимание -->
<div class="note"><div class="notetip">Блок подсказка</div></div> < --! лампочка -->
<div class="note"><div class="notehelp">Блок help</div></div> < --! вопрос -->

Я данный HTML код просто скопировал и пользуясь приграммой мульти-копи-паст просто добавляю в нужное место публикации. Можно так-же вывести нужные кнопки прямо в визуальный редактор WordPress.

/*
CSS код
*/
.note
{
text-align: center;
}
.noteclassic, .noteimportant, .notewarning, .notetip,.notehelp{
width: 80%;
margin-top:2em;
margin-left: auto;
margin-right: auto;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
padding: 15px 20px 15px 80px;
margin: 0px 0px 0px 0px;
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
/*IE min-height hack*/
min-height:40px;
height:auto !important;
height:40px;
overflow:visible;
position:relative;
bottom:6px;
right: 6px;
border: 1px solid #999999;
/*Set the position of the background image*/
background-position: 20px 50%;
background-repeat: no-repeat;
text-align: justify;
}
.noteclassic, .noteimportant, .notewarning, .notetip,.notehelp{
/* IE5 hack */
\margin: 0px 0px -3px 0px;
ma\rgin: 0px 0px 0px 0px;
}
.noteclassic {
background-color: #EEF;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/note.png);
}
.noteimportant {
background-color: #FFC;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/important.png);
}
.notewarning {
background-color: #FDD;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/warning.png);
}
.notetip {
background-color: #E4F6F8;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/tip.png);
}
.notehelp {
background-color: #D8F3C9;
background-image: url(/krasivye-bloki-dlya-sajta-v-stile-wp-note/images/help.png);
}

В нужные места в CSS пропишите ваш путь к картинкам.

И напоследок, чтобы красивые блоки для сайта выводились с картинками скачайте архив, распакуйте его, поместите в домашний каталог вашего сайта, или в папку с темой, не важно, главное правильно прописать путь к картинкам. Все, красивые блоки div теперь можно добавлять в любые публикации.
Cкачать архив с картинками для блоков с Яндекс Диска
Если вам пригодилась статья «Красивые блоки для сайта в стиле WP-Note», жмите кнопки соц. сетей, так-же оформите подписку на новые публикации.

Домашнии парник для рассады парник для рассады домашний. Смотрите информацию купить справку с места работы для визы с подтверждением на сайте.


Похожие по Тегам статьи


8 thoughts on “Красивые блоки для сайта в стиле WP — Note

  1. Александр Ризун

    Отличное решение! И плагин не нужен, и блоки есть. Возьму на заметку, спасибо!

    1. Егор Автор записи

      Ну да, 8) и блоки на месте, и плагина нет.
      На самом деле это простейшее решение. Да простят меня разработчики. Хотя если бы обновили вовремя, может быть и плагином установил.

  2. Дмитрий

    Вообще css штука хорошая много чего интересного можно сделать, а так информационные блоки очень красивые.

  3. Егор Автор записи

    Сейчас браузеры стали понимать CSS-3. Но все-же JawaScript они понимают пока лучше.

  4. Паша

    Егор, скажите пожалуйста как Вы делаете инфоблоки с полоской сбоку?
    Ну очень красиво выглядит, хочу себе такие же ))

    1. Егор Автор записи

      Здравствуйте, Павел. Это секрет фирмы!!!
      А если серьезно, вам HTML, CSS коды блоков нужны?
      Напишите мне в контактах, я вам на почту скину ссылку на готовые коды.

  5. Паша

    Егор, большое спасибо!)
    Буду прикручивать себе на сайт.