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

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

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

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

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

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

Активировать промокод на 15%

Плагин Special Text Boxes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также смотрите расширенную подборку плагинов для соз0дания блоков внимания на WP.

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