Elementor: Как добавить ценовую сетку

Хотите добавить сетку цен в Elementor ?

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

Читайте также: Как создать округлое изображение в Elementor 

Сам виджет «Таблица цен» доступен только на Elementor. Pro Итак, чтобы иметь возможность использовать его, вам нужно использовать Elementor Про. В этой статье мы добавим виджет «Таблица цен» непосредственно в область редактирования.

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

Добавьте ценовую сетку из предопределенного шаблона

Elementor предлагает вам на выбор около 14 дизайнов блоков ценовой сетки. Опять же, вам необходимо использовать Elementor Pro, чтобы использовать шаблоны, поскольку ценовая сетка доступна только в Elementor Pro. Чтобы использовать шаблон блока ценовой сетки, щелкните значок папки в поле редактирования, чтобы открыть библиотеку шаблонов.

В появившейся библиотеке шаблонов щелкните вкладку блоки и в категориях выберите Цены в раскрывающемся меню, чтобы отфильтровать модели. Выберите понравившуюся модель и нажмите на кнопку ВСТАВЛЯТЬ чтобы импортировать его в редактор Elementor.

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

Добавить ценовую сетку с нуля

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

См. Также: Как создать раздел члена команды с помощью Elementor

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

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

• заголовок

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

• Цены

Вы можете открыть этот блок, чтобы изменить цену пакета. Вы можете активировать опцию Распродажа если пакет продается. Если у вас есть знания о настраиваемых полях WordPress, вы также можете добавить динамическую цену, щелкнув значок базы данных. данные на поле Цены.

• Особенности

Вы можете открыть этот блок, чтобы добавить функции, которые вы хотите предложить в пакете. По умолчанию у вас есть три функции. Вы можете открыть объект для редактирования. Чтобы добавить новую функцию, вы можете просто нажать на кнопку ДОБАВИТЬ ЭЛЕМЕНТ.

Читайте также: 7 творческих способов использования Elementor Popup Builder  

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

• нижний колонтитул

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

• лента

Вы можете добавить к своему столу теги распродажи, например, «ПРОДАЖА», «СПЕЦИАЛЬНОЕ», «ГОРЯЧЕЕ ПРЕДЛОЖЕНИЕ». Если вы хотите добавить тег продажи или любой другой тег, вы можете открыть блок лента и активируйте опцию Отображать. Вы можете добавить свой любимый ярлык в поле Название и выставляем позицию на опции Позиция.

Настройка сетки

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

• заголовок : Вы можете открыть этот блок, чтобы настроить заголовок таблицы. Вы можете установить такие вещи, как фон заголовка, типографику (семейство шрифтов, размер шрифта, стиль шрифта) заголовка и описания, а также цвет текста заголовка и описания.
• Цены: Вы можете открыть этот блок, чтобы настроить раздел цен. Вы можете установить такие параметры, как цвет фона, типографика, цвет текста, символ валюты и положение и т. Д.
• Особенности : Вы можете открыть этот блок, чтобы настроить раздел сущностей. Вы можете установить такие параметры, как фон, цвет текста, типографику, выравнивание, включение / выключение разделителя и т. Д.
• нижний колонтитул : Вы можете открыть этот блок, чтобы настроить раздел нижнего колонтитула. Вы можете определить такие элементы, как фон, размер кнопки, цвет кнопки, типографику текста кнопки и т. Д.
• Лента: Этот блок появится только в том случае, если вы активируете опцию лента под вкладкой Содержание. Вы можете открыть этот блок, чтобы настроить ленту, например цвет, цвет текста и типографику.

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

В конце

Elementor Pro поставляется с виджетом «Таблица цен», который позволяет легко добавлять ценовую сетку на страницу или в шаблон. Некоторые дополнения, такие как Счастливые аддоны, Основные дополнения и JandElements - также имеют одинаковые виджеты с разными вариантами стилизации.

Получить Elementor Pro сейчас !!!

Заключение

Вот! Вот и все, что касается этой статьи, в которой показано, как добавить ценовую сетку в Elementor. Если у вас есть вопросы о том, как туда добраться fдайте нам знать в Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...