Как создать поле функции в WordPress с элементом

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

Создание привлекательных функциональных коробок сегодня не сложно. Elementor-это мощный и известный плагин Builder Page Page, который облегчил дизайн веб-сайта. Даже те, кто когда -то не знал, теперь могут разработать стильные веб -страницы с элементом.

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

Почему вы должны подумать о создании ящиков?

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

• Выделите ключевые функции

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

• Сообщить ценности

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

• Создать последовательный макет

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

• Укрепить идентичность бренда

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

• Улучшить читаемость контента

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

Предварительные запросы для создания ящика для функций

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

• Элементар
• HappyAddons

Почему HappyAddons?

Ключевая причина, по которой Элементар сегодня популярен, заключается в том, что у него отличная коллекция мощных аддонов. Каждый из них поставляется со многими дополнительными функциями и виджетами для дальнейшего расширения мощности плагина Core Elementor. HappyAddons - такой аддон.

HappyAddons имеет более 130 виджетов, богатых функциями, 28+ захватывающими функциями, 100+ предварительно разработанными шаблонами и строителем тем. Надеюсь, вы знаете, что бесплатная версия Elementor не предлагает много расширенных функций и виджетов. Но если вы действительно для получения комплексного бесплатного варианта, HappyAddons может быть умным выбором.

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

Как создать поле функции в WordPress: пошаговый учебник

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

Шаг 01: Откройте пост или страницу с помощью Canvas Elementor

Откройте сообщение или страницу, где вы хотите создать поле функции.

Шаг 02: Выберите макет столбца

Выберите макет столбца, как вы хотите. Для этого урока мы выберем трехколонный макет.

Шаг 03: Перетащите подходящий виджет на холст

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

Найдите виджет информационного окна на панели Elementor. Перетащите его на подходящий столбец на холсте.

Вы увидите, что виджет информационного окна был добавлен в Canvas Elementor.

Исследуйте, как встроить Google Sheets в таблицу WordPress и сделать его сортировкой.

Шаг 04: Выберите предустановку для виджета на информационное поле

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

Большинство виджетов HappyAddons включают несколько пресетов. Например, виджет информационного окна имеет двенадцать пресетов . Просто выберите желаемую предустановку.

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

Шаг 05: Добавьте значок/изображение в поле функции

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

Разверните раздел значка/изображения . Нажмите на значок под типом медиа . Он откроет библиотеку значков.

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

Вы увидите, что значок добавлен в поле функции, как мы сделали.

Узнайте, как добавить флип -коробку в WordPress.

Шаг 06: Добавьте заголовок и описание в поле функции

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

Расширить раздел заголовка и описания . Напишите желаемое название и описание в соответствующие поля в разделе. Вы увидите, что изменения появляются в поле функции на холсте Elementor. Наконец, центрально выравнивает заголовок и описание.

Шаг 07: Настройте настройки кнопки

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

Шаг 08: стилизовать поле функции

Приходите на вкладку «Стили» . Вы получите параметры для настройки каждого отдельного элемента в поле функции с вкладки. Ты можешь

# Стилизовать значок/изображение

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

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

# Стилизовать заголовок и описание

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

# Кнопка стилизации функции

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

Шаг 09: Добавьте цвет фона во весь поле функции

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

Выберите весь виджет , нажав на значок карандаша. Перейдите на вкладку «Усовершенствованный»> «Фоновый раздел» .

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

Шаг 10: дублировать поле функции

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

Щелкните правой кнопкой мыши значок контейнера , чтобы выбрать все поле функции.

Откроется список. Нажмите на дубликат опции в списке.

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

Теперь вы должны удалить пустые коробки с макета.

Точно так же щелкните правой кнопкой мыши значок контейнера пустой коробки. Затем выберите опцию «Удалить» в списке. Сделайте то же самое, чтобы удалить все пустые коробки.

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

# Редактировать контент в полевых ячеях

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

Шаг 11: Сделайте функциональные ящики с мобильным характеристиком

Если вы не сделаете свои функциональные ящики с мобильными, они сломаются или станут грязными, когда сайт посещается с устройств с небольшим экраном. Elementor предоставляет способ сделать ваши страницы мобильными.

Нажмите « Адаптирующий режим» в нижней части панели Elementor. Это добавит верхнюю панель на холсте, откуда вы можете переключиться, чтобы исследовать, как выглядит страница на разных размерах экрана.

Если их макеты не выглядят хорошо на определенном размере экрана, вы можете изменить их стилизации с вкладки «Стиль», пока они не поступят для этого соответствующего размера экрана.

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

Шаг 12: Предварительный просмотр полевых ящиков

Приходите к фронте страницы и проверьте, хорошо ли выглядит поле функции, и его кнопка работает или нет. Надеюсь, это будет хорошо сработать с вашей стороны.

Подводить итоги!

Надеюсь, вам понравился этот урок. Функции сегодня уже не просто простые веб -элементы, которые вы можете пропустить Полем Если вы можете разработать и поставить их хорошо, они могут создать долгосрочное впечатление о ваших продуктах и ​​услугах в сознании клиентов. Таким образом, есть несколько факторов, которые вы должны рассмотреть при разработке функциональных ящиков.

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