Как на WordPress-сайте добавить стилизованные блоки контента?

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

Как добавить стилизованные блоки контента?

Среди встроенных инструментов для стилизации блоков WordPress предлагает только выделение цитат. Но этого часто бывает недостаточно.

Цитата в контенте записи

Например, Вы пишете заметку о правилах поведения пешеходов на дороге. Тут следует обратить внимание читателя на светофор, “зебру”, знак. Помимо этого, нужно выделить действия, угрожающие жизни пешехода. Было бы неплохо эти два блока выделить по разному, давая читателю четко понять его действия в той или иной ситуации. Для решения задачи воспользуемся сторонним решением — бесплатным плагином Special Text Boxes.

Если Вы используете тему Root, то нет необходимости устанавливать какие-либо плагины, — красивые стилизованные блоки уже встроены и доступны в визуальном редакторе!

Плагин Special Text Boxes

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

Раздел меню плагина Special Text Boxes

Рассмотрим темы оформления стилизованных блоков, которые предлагает плагин. Для этого нужно перейти STB -> Темы.

Темы оформления стилизованных блоков в плагине Special Text Boxes

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

Теперь собственно посмотрим, какие именно блоки доступны для вставки в плагине. Для этого следует перейти STB -> Стили.

Виды стилизованных блоков в плагине Special Text Boxes

Как видно, доступно 7 разных блоков, которых в принципе будет достаточно для выделения контента любой тематики.

Если в блоке Вам необходимо изменить какой-либо элемент, то для этого нужно выделить блок и под его названием нажать появившуюся кнопку Изменить.

Изменение стилизованного блока в плагине Special Text Boxes

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

Изменение стилизованного блока в плагине Special Text Boxes

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

Плагин также предлагает дополнительные настройки, касающиеся самого процесса вставки и размещения стилизованного блока в контенте. Для этого существует раздел STB -> Параметры.

Параметры стилизованных блоков в плагине Special Text Boxes

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

Теперь попробуем вставить стилизованный блок в контент. Для этого открываем на редактирование запись и страницу.

Страница редактирования записи

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

Вставка стилизованного блока в контент записи

В окне первым делом нужно выбрать тип блока (поле ID блока). Остальные параметры подразумевают настройку визуального отображения блока, позволяя выбрать цвет его рамки, сворачивание, тень и пр. Для вставки следует нажать кнопку Вставить. В итоге в контент будут добавлены специальные шорткоды.

Контент записи

После обновления записи или страницы (кнопка Обновить) можно смотреть результат на сайте.

Страница записи на сайте

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.