Пропустить

Как добавить функциональность со значком коробки на WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Вы хотите добавить поле функций со значком на своей домашней странице?

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

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

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге

Тогда вернемся к тому, почему мы здесь.

featureboxes

Что такое окно с иконками?

Большинство людей, которые посещают веб-сайт, не читают его полностью. Как люди, мы становимся профессиональными сканерами.

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

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

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

Вот конкретный пример:

Как добавить блок функций на главной странице вашего блога WordPress

Первое, что вам нужно сделать, это установить и активировать плагин Advanced WP Столбцы, Для получения более подробной информации смотрите наше руководство по Как установить или добавить плагин на WordPress

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

После активации плагина вам необходимо получить доступ к Настройки> Расширенные колонки WP Для настройки плагина.

Просто прокрутите вниз до опции " колонка Класс И введите текст как "mycolumns" (Мы вернемся). Не забудьте нажать кнопку «Сохранить», чтобы сохранить настройки.

colclass

Тогда все, что вам нужно сделать, это добавить значки SVG в ваши функциональные блоки. Для этого я предлагаю вам установить и активировать плагин WP SVG Иконка.

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

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

Если вы не можете увидеть эту опцию, вы должны расширить кнопки панели инструментов.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

newbuttons

Первое, что вам нужно сделать, это нажать на кнопку " Advanced WP Столбцы». Это покажет всплывающее окно, где вы можете нажать на «Пустой» и выберите количество столбцов, которые вы хотите добавить.

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

Вы заметите, что столбцы были добавлены в визуальный редактор. Следующим шагом является добавление значков над текстом.

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

addingicons

В этом окне вы сможете выбрать значок, который хотите добавить. Затем нажмите кнопку «span», чтобы ваш контент был добавлен в элемент «<span>».

Наконец, нажмите на кнопку значок вставкиMsgstr "Вы заметите, что иконка SVG была добавлена ​​в редактор. В зависимости от имени иконки шорткод будет выглядеть так:

[wp-svg-icons icon = "rocket" wrap = "span"]

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

Вы готовы закончить работу, однако, если заметите, что значки очень маленькие.

featureboxes-SmallIcons

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

span.wp-SVG-rocket.rocket {размер шрифта: 100px; Span.wp-svg-cloud.cloud} {размер шрифта: 100px; } Span.wp-SVG-headphones.headphones {размер шрифта: 100px; .mycolumns} {границы: твердый 1px #eee; мин-высота: 250px; обивка-топ: 20px важно; }

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

featureboxesfinal

Не забывайте, что мы написали учебник, который позволит вам улучшить свои навыки CSS, Вы также можете использовать более продвинутую страницу компоновщика, такую ​​как Visual Composer, для которой мы написали довольно подробный урок.

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля
чирикать
Регистрация2