Каждому известно, что оформление информации является важнейшей задачей любого веб-ресурса, будь то блог, лендинг на платформе WordPress или интернет-магазин. Эстетически оформленные блоки контента способствуют лучшему восприятию материала посетителями, что, в свою очередь, повышает шанс на их возвращение на сайт.
Для добавления стилизованных блоков контента на WordPress-сайт можно использовать несколько методов. Один из самых простых способов – это использование встроенного редактора Gutenberg, который позволяет создавать и редактировать блоки с помощью готовых стилей.
Также вы можете воспользоваться плагинами, такими как Elementor или WPBakery, которые предлагают множество шаблонов и элементов дизайна, что позволяет создать уникальное оформление для каждой страницы.
Не забывайте о кастомизации CSS. Если у вас есть навыки работы с CSS, вы можете создавать свои собственные стили для блоков контента, добавляя к ним оригинальность и улучшая визуальное восприятие. В разделе ‘Внешний вид’ -> ‘Настроить’ вы найдете возможность добавления пользовательского CSS код.
Кроме того, следите за тем, чтобы блоки контента были адаптивными, чтобы они нормально отображались как на десктопах, так и на мобильных устройствах. Проверьте, как ваши стилизованные блоки выглядят на различных экранах и внесите корректировки, если это необходимо.
Таким образом, наличие хорошо оформленных и стилизованных блоков может существенно повысить уровень взаимодействия пользователей с вашим контентом и улучшить общую эстетику сайта. Экспериментируйте с форматами, и ваши усилия не останутся незамеченными!
Как добавить стилизованные блоки контента?
Среди стандартных инструментов для стилизации WordPress предлагает только выделение цитат, однако этого зачастую оказывается недостаточно.
К примеру, в заметке о правилах дорожного поведения пешеходов важно акцентировать внимание на таких элементах, как светофор, «зебра» или дорожные знаки. Также необходимо выделить действия, которые могут угрожать жизни пешеходов. Будет полезно различными способами оформить эти два блока, чтобы читатель ясно понимал, как поступить в каждой конкретной ситуации. Для этого можно воспользоваться бесплатным плагином Special Text Boxes.
Если вам нравится тема Root, установка дополнительных плагинов не потребуется — в ней уже имеются встроенные красиво оформленные блоки, доступные в визуальном редакторе!
Активировать промокод на 10%
Плагин Special Text Boxes
Первое, что нужно сделать — установить и активировать плагин. Давайте рассмотрим, какие функции он предоставляет. После активации в администраторском меню появится отдельный раздел STB:
Давайте рассмотрим варианты оформления стилизованных блоков, которые предоставляет данный плагин. Для этого необходимо перейти в раздел STB -> Темы.
Вы можете заметить, что доступно три различных темы. Чтобы активировать одну из них, просто нажмите кнопку Установить под выбранной темой.
Теперь перейдем к тому, какие именно блоки можно вставить с помощью плагина. Для этого следует открыть раздел STB -> Стили.
Как видно, доступны семь различных типов блоков, чего вполне достаточно для того, чтобы выделить контент различных тематик.
Если вам нужно внести изменения в конкретный элемент блока, выделите его и нажмите на появившуюся кнопку Изменить под его названием.
В результате вы окажетесь на странице конфигурации блока, где сможете внести изменения в различные его элементы, такие как название, цветовая палитра и иконка.
Чтобы сохранить внесенные изменения, необходимо кликнуть на кнопку Сохранить.
Кроме того, плагин предоставляет дополнительные параметры, касающиеся процесса внедрения и позиционирования стилизованного блока в контенте. Для этого существует раздел STB -> Параметры.
По сути, стандартные настройки, предлагаемые тут, вполне подходят для корректного внедрения и отображения блоков. Если потребуется внести изменения, плагин предлагает ясное и детальное пояснение для каждой опции.
Теперь давайте попробуем вставить стилизованный блок в контент. Для этого откройте запись или страницу для редактирования.
Обратите внимание, что в визуальном редакторе появилась едва заметная кнопка. Стоит отметить, что в данный момент она остается неактивной, поскольку текст для стилизации еще не выделен. Выделите нужный фрагмент и нажмите на кнопку. В результате откроется окно, в котором плагин попросит вас задать необходимые параметры.
В открывшемся окне в первую очередь необходимо выбрать тип блока (в поле ID блока). Остальные настройки позволят вам отрегулировать визуальные параметры блока, такие как цвет рамки, возможность сворачивания, тень и так далее. Для добавления блока нужно нажать на кнопку Вставить. В результате в контент будут помещены специальные шорткоды.
После того как вы обновите запись или страницу (нажмите кнопку Обновить), вы сможете увидеть изменения на сайте.
Не забывайте проверять адаптивность стилизованных блоков на мобильных устройствах. Это чрезвычайно важно для удобства пользователей, особенно если ваш сайт имеет высокую посещаемость с мобильных устройств. Вы можете использовать инструменты разработчика в браузере, чтобы протестировать, как будут выглядеть ваши блоки на различных экранах.
Также стоит обратить внимание на SEO, когда вы добавляете стилизованные блоки. Убедитесь, что вы не перегружаете ваши записи слишком большим количеством визуальных элементов, так как это может влиять на время загрузки страницы. Используйте легкие изображения и оптимизируйте размеры графики.
Наконец, эксперименты с различными стилями и цветами блоков могут улучшить визуальное восприятие вашего контента. Попробуйте разные сочетания и выберите те, которые лучше всего подходят к вашей общей теме и стилю сайта.