Самые красивые информационные блоки 2018 года (плагин + css)
В прошлый раз мы писали об ифонмационных блоках, которые мы выводили при помощи HTML и CSS без помощи плагинов. Теперь мы рассмотрим брлее красивый и удобный вариант при помощи плагина Standout Color Boxes and Buttons
Но на этом не всё. Плагин позволяет выводить собственный шортод [ color-box color=”mycustomcolor” ] для этого в настройках необходимо просто прписать свой css.
Советую все шорткоды вывести кнопками в редакторе статей и страниц.
[color-box color=”mycustomcolor”]Советуем прочитать статью: Дополнительные кнопки в редакторе страниц и записей [/color-box]
А вот приведены блоки, которые работают через дополнительный CSS, который одновременно выводит свой блок шорткодом [ color-box color=”mycustomcolor” ] (как указан выше с ссылкой на статью про кнопки в редакторе) и даёт тень стандартным блокам:
[color-box color=”blue”]Красивые информационные блоки на сайт 2018[/color-box]
[color-box color=”gray”]Красивые информационные блоки на сайт 2018[/color-box]
[color-box color=”green”]Красивые информационные блоки на сайт 2018[/color-box]
[color-box color=”purple”]Красивые информационные блоки на сайт 2018[/color-box]
[color-box color=”red”]Красивые информационные блоки на сайт 2018[/color-box]
[color-box color=”yellow”]Красивые информационные блоки на сайт 2018[/color-box]
[color-box color=”orange”]Красивые информационные блоки на сайт 2018[/color-box]
[color-box color=”pink”]Красивые информационные блоки на сайт 2018[/color-box]
[color-box color=”bluebell”]Красивые информационные блоки на сайт 2018[/color-box]
Этот код можно взять с этой страницы имея доступ VIP. Это будет благодарностью за труды. Код приведён ниже.
[wpa access_id=”1″ text=”Внимание! данный контент скрыт, приобретите доступ!”]
.scbb-content-box {
border: 1px solid #33bbff;
border-left: 20px solid #33bbff;
-moz-box-shadow: 0 0 6px #ccc;
-webkit-box-shadow: 0 0 6px #ccc;
box-shadow: 0 0 6px #ccc;
padding: 15px 25px 15px 30px;
color: #000;
font-size: 1.1em;
margin-top: 15px;
background: #e9f8ff;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
[/wpa]
Введите этот код в настройки плагина, сделайте выводи шорткодов в редакторе и пользуйтесь с удовольствием!
Автор публикации
Комментарии 0