Как красиво оформить участок статьи в WordPress

Всем привет! Каждый блоггер, оформляя свои статьи, ждет, что их будут прочитывать до конца. При этом необходимо учитывать очень много факторов: от размера и цвета шрифта до оформления картинок и других медийных элементов.

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

Как оформить цитату в Вордпресс:

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

Участок, который был выделен, заключается в контейнер цитаты <blockquote>…</blockquote> и оформляется в соответствие со стилями, заданными в теме. Например, в моей теме стили цитаты вот такие:

Если вы знаете CSS, то сможете с легкостью изменить и настроить оформление цитаты под свой вкус. Для тех кто не знает, могу предложить интересные варианты:

.stl1 {
background-position: 20px 50%;
background-repeat: no-repeat;
border: 1px solid #b3876c;
-moz-box-shadow: 1px 1px 1px 1px #999;
-webkit-box-shadow: #999 1px 1px 1px 1px;
box-shadow: 1px 1px 1px 1px #999;
text-align: justify;
background-color: #FFD4A0;
background-image: url(https://samsebewebmaster.ru/wp-content/uploads/vip.jpg);
padding: 20px 20px 20px 80px !important;
}

Вот так будет выглядеть ваша цитата

Второй вариант эффектного оформления блока цитаты:

.stl2  {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(https://samsebewebmaster.ru/wp-content/uploads/2014/11/цитата-2.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}

Вот так будет выглядеть ваша цитата

Эти стили необходимо добавить в файл CSS, а участок, который надо выделить, заключаем в теги:

для первого варианта:

<blockquote class="stl1">Тут пишем текст цитаты</blockquote>

для второго варианта: 

<blockquote class="stl2">Тут пишем текст цитаты</blockquote>

Или же просто меняем стиль стандартной цитаты на понравившийся.