Хотите добавить на свой сайт WordPress функциональные окна с красивыми иконками??
Вы можете использовать функциональные блоки, чтобы подчеркнуть основные преимущества товара или услуги. Это также отличный способ представить особенности новым клиентам, чтобы они могли решить, подходит ли им этот продукт или услуга.
В этой статье мы покажем вам, как добавить функциональные блоки с иконками на ваш сайт WordPress.
Что такое поля с иконками?
Большинство посетителей не будет читать каждое слово на вашем сайте WordPress, особенно если страница очень много текста.
Вместо этого ваши посетители будут быстро сканировать страницу, чтобы найти нужную информацию. Это означает, что вам нужно представить важную информацию в удобном для сканирования и увлекательном виде.
Вот почему многие бизнес-сайты имеют большое изображение или слайдер в верхней части веб-страницы с кнопкой призыва к действию.
Чуть ниже вы можете использовать блоки характеристик для демонстрации наиболее важных особенностей продукта или услуги. На следующем изображении вы можете увидеть, как WPForms использует функциональные блоки, чтобы подчеркнуть самые большие преимущества плагина.
Вы даже можете добавить призыв к действию, чтобы пользователи могли узнать больше о конкретном продукте.
С учетом сказанного, давайте покажем вам, как добавить функциональные блоки с иконками в WordPress, используя два разных метода. Просто используйте быстрые ссылки ниже, чтобы сразу перейти к методу, который вы хотите использовать.
- Способ 1. Добавление блоков с иконками с помощью редактора блоков WordPress
- Метод 2. Добавление блоков с иконками с помощью плагина WordPress Page Builder
Метод 1. Добавление блоков с иконками с помощью редактора блоков WordPress
Вы можете добавить функциональные блоки с иконками на свой сайт WordPress с помощью блока колонок. Если вы только начинаете работать с редактором блоков, ознакомьтесь с нашим руководством по использованию редактора блоков WordPress.
Сначала вам нужно открыть страницу, на которой вы хотите добавить поле поиска. Затем нажмите на значок добавления блока ‘+’, чтобы открыть редактор блоков.
Далее, введите ‘Columns’ в поле поиска.
Когда появится нужный блок, нажмите, чтобы добавить его на страницу.
Теперь WordPress покажет все различные блоки колонок. Цифры — это то, сколько места в блоке занимает каждая колонка. Например, «50/50» — это две колонки, каждая из которых занимает 50% доступной ширины.
В этом руководстве мы выберем блок колонок «33/33/33′», поскольку он дает нам три колонки одинаковой ширины, но вы можете использовать любой макет, который вам нравится.
После этого вы можете продолжить и добавить иконки в колонки.
Самый простой способ сделать это — использовать шрифты иконок, которые представляют собой изменяемые по размеру символы, не замедляющие работу вашего сайта. Мы рекомендуем использовать Font Awesome, так как у них одна из самых больших коллекций бесплатных иконок. Для более подробной информации смотрите наше руководство о том, как добавить шрифты иконок в вашу тему WordPress.
После этого вы можете легко добавить шрифты иконок в колонку, нажав на значок «+» в этой колонке.
В появившемся всплывающем окне найдите блок шорткода и нажмите на него, чтобы добавить его в свой макет.
После этого вы можете ввести следующий шорткод, но не забудьте заменить «bus» на название иконки, которую вы хотите использовать:
Чтобы увидеть полный список доступных иконок, просто перейдите в библиотеку иконок Font Awesome.
Когда вы найдете иконку, которая вам нравится, щелкните ее, чтобы увидеть название иконки.
Например, на следующем изображении мы видим иконку под названием «адресная книга».’
Теперь вы можете добавить это название к шорткоду.
Чтобы узнать больше о работе с шорткодами, пожалуйста, ознакомьтесь с нашим руководством для начинающих о том, как добавить шорткод в WordPress.
Если вы уже сохранили свои иконки в виде изображений, то вместо использования шорткода можно добавить блок изображения.
Чтобы сделать это, просто нажмите на ‘+’ в первой колонке, а затем добавьте блок ‘Image’ вместо блока шорткода.
Теперь вы можете выбрать изображение из медиатеки или загрузить новый файл с вашего компьютера.
После того как вы добавили все иконки, следующим шагом будет добавление текста в функциональное поле.
Для этого нажмите на кнопку «+» в блоке «Колонки». Затем добавьте блок «Абзац».
После этого просто введите текст в блок абзацев.
Вы можете добавить значки и текст в колонки, повторив вышеописанный процесс.
Иногда вы можете захотеть, чтобы ваш блок функций состоял из нескольких строк.
Просто щелкните блок «Колонки», а затем выберите три точки на панели инструментов. Затем вы можете нажать на ‘Дублировать.’
Это создаст копию блока «Колонки».
Теперь вы можете добавить значки и текст, выполнив те же действия, что и выше.
Вы также можете добавить на страницу другой контент, например, изображение продаваемого продукта или категории и теги.
Когда вы будете довольны тем, как выглядит страница, просто нажмите на кнопку «Обновить» или «Опубликовать» в верхней части экрана.
Теперь ваши функциональные блоки с иконками будут работать в реальном времени.
Вот пример того, что увидят люди, когда посетят ваш блог WordPress.
Метод 2. Добавление функциональных блоков с иконками с помощью плагина WordPress Page Builder
Один из самых простых и удобных для новичков способов добавления функциональных блоков с иконками в WordPress — это использование SeedProd.
SeedProd — это лучший на рынке конструктор страниц WordPress, позволяющий создавать пользовательские страницы в WordPress с помощью конструктора перетаскивания.
SeedProd имеет более 180 профессионально разработанных шаблонов, которые вы можете использовать для быстрого создания красивых страниц. Подобно редактору блоков WordPress, SeedProd позволяет легко добавлять функциональные блоки на ваши страницы.
В нем также есть целая библиотека иконок, которые вы можете добавить в свои функциональные блоки одним щелчком мыши, и он имеет больше возможностей для настройки, чем редактор блоков.
Вот пример функционального блока, созданного с использованием готовых блоков и иконок SeedProd.
Первое, что вам нужно сделать, это установить и активировать плагин. Для более подробной информации смотрите наше руководство для начинающих о том, как установить плагин WordPress.
Примечание: Существует бесплатная версия SeedProd, но мы будем использовать версию Pro, так как она имеет больше возможностей. Если вы используете маркетинг по электронной почте для продвижения своих продуктов, то SeedProd также интегрируется со многими лучшими сервисами маркетинга по электронной почте.
После активации перейдите по ссылке SeedProd » Настройки и введите свой лицензионный ключ.
Вы можете найти эту информацию, войдя в свой аккаунт SeedProd.
После этого перейдите по ссылке SeedProd » Посадочные страницы и нажмите на «Добавить новую посадочную страницу.’
На следующем экране вы можете выбрать шаблон. Вы можете настроить любой из этих шаблонов с помощью конструктора SeedProd, но все же хорошей идеей будет выбрать дизайн шаблона, который соответствует вашим целям.
Все шаблоны SeedProd организованы по различным типам кампаний, таким как «Скоро придут» и «Выдавливание лидов». Вы даже можете использовать шаблоны SeedProd для улучшения вашей страницы 404.
В этом руководстве мы будем использовать «Пустой шаблон», но вы можете использовать любой шаблон по своему усмотрению.
Чтобы выбрать шаблон, просто наведите на него курсор и нажмите на значок ‘Галочка’.
Появится всплывающее окно, в котором вы можете дать странице имя. Название страницы также будет являться URL-адресом страницы, но вы можете изменить эту ссылку, если хотите. Например, вы можете захотеть улучшить SEO вашего WordPress, включив некоторые релевантные ключевые слова.
После этого нажмите кнопку «Сохранить и начать редактирование страницы».
Это откроет шаблон в удобном редакторе страниц SeedProd.
Поскольку мы используем пустой шаблон, вам нужно начать с выбора макета. Для этого просто нажмите на любой из макетов колонок.
После этого найдите блок «Иконка» в меню слева.
Теперь вы можете перетащить этот блок на первую пустую колонку.
Это добавит блок «Иконка» в ваш макет с уже выбранной по умолчанию иконкой.
Чтобы изменить иконку, нажмите на нее и выберите кнопку «Выбрать изображение».
Откроется библиотека иконок с сотнями иконок на выбор. Вы можете использовать строку поиска для поиска конкретной иконки или просмотреть весь список.
Когда вы найдете изображение, которое хотите использовать, просто наведите на него курсор и нажмите кнопку ‘Plus’, чтобы добавить его на вашу страницу.
Чтобы настроить значок, просто нажмите на него, чтобы выбрать.
Теперь вы можете настроить этот значок с помощью параметров в левом меню, включая изменение его выравнивания, размера, цвета и т.д.
После этого добавьте блок «Текст» под иконкой.
Просто найдите блок «Текст» в левом меню, а затем поместите его под вашей иконкой с помощью перетаскивания.
Чтобы добавить текст, щелкните, чтобы выделить блок. Затем вы можете ввести текст в небольшой текстовый редактор в левом меню.
Здесь вы можете добавить ссылки, изменить выравнивание текста, изменить цвет текста и многое другое.
Для настройки других столбцов просто выполните те же действия, что и выше.
Если вы хотите добавить еще один ряд полей с иконками, наведите курсор мыши на раздел и нажмите кнопку «Дублировать ряд».
Вы можете дублировать этот раздел столько раз, сколько захотите, чтобы быстро создать больше функциональных блоков с иконками.
Затем вы можете добавить новые значки и текст, следуя вышеописанному процессу.
Вы можете продолжить работу над страницей, добавляя новые блоки и настраивая эти блоки в левом меню.
Когда вы будете довольны тем, как выглядит страница, нажмите кнопку «Сохранить». Затем вы можете выбрать «Опубликовать», чтобы сделать страницу активной.
Мы надеемся, что эта статья помогла вам узнать, как добавить функциональные блоки с иконками в WordPress. Вы также можете ознакомиться с нашим руководством о том, как создать информационный бюллетень по электронной почте, и с подборкой лучших программ для чата для малого бизнеса.
Источник: www.wpbeginner.com