Ключевые выводы
- Виджет таблицы цен главных дополнений поставляет пять шаблонов таблиц цен Elementor в раскрывающемся списке "Макет": по умолчанию, содержимое с выравниванием по левому краю, округленный стол, стол с изображением BG и шаблон Skew BG.
- Переключение раскрывающегося списка "Макет" сохраняет имя плана, цену, функции и кнопку на месте, поэтому один набор контента можно просмотреть во всех пяти проектах менее чем за минуту.
- Библиотека шаблонов главных дополнений имеет готовые разделы цен, включая темные, двухплановые, четырехплановые и переключатели счетов, которые импортируются на любую страницу Elementor из редактора.
- Каждый пример таблицы цен на этой странице имеет один и тот же порядок: имя плана, для кого он предназначен, цена и период, три-семь строк функций, одна кнопка и дополнительная строка доверия.
- Темная таблица цен лучше всего читается с одним ярким акцентом только на выделенном плане; в приведенных ниже примерах для этой единственной карты используется зеленый, голубой или розовый цвет.
- Для ежемесячного и ежегодного включения раздела цен необходимы два набора карт и виджет Toggle Content от Master Addons Pro.
Шаблон таблицы цен Элементор сохраняет вам часть работы, которая занимает больше всего времени: дизайнерские решения. макеты виджетов ниже дают вам форму карты в один клик, а готовые разделы дают вам целый блок цен с заголовком, переключателем и картами уже расположены. в любом случае вы заменяете названия плана, цены и функции и сохраняете дизайн.
На этой странице собраны двенадцать примеров таблиц цен, созданных с помощью Мастер Аддоны для Элементора. первые пять - это собственные макеты виджета с точными используемыми настройками, поэтому вы можете воспроизвести каждый из них. Следующие семь - это разделы из библиотеки шаблонов, выбранные для охвата общих форм страниц ценообразования: три плана, два плана, четыре плана, темнота, свет и переключатель выставления счетов.
Оглавление
Как использовать эти шаблоны
На этой странице есть два вида шаблонов. Примеры с 1 по 5 - это макеты виджетов: сбросить Виджет таблицы цен в контейнер выберите макет из раскрывающегося списка и скопируйте настройки, перечисленные в каждом примере. Примеры с 6 по 12 представляют собой полные разделы: откройте Библиотека шаблонов, импортировать раздел, и редактировать текст на месте.
Настройки, перечисленные для каждого макета, - это те, которые меняют внешний вид. все остальное по умолчанию. цвета даны в виде шестнадцатеричных значений, поэтому вы можете вставить их на вкладку "Стиль", и все пять карт макета используют одно и то же содержимое: план стоимостью 29 долларов с тремя функциями и кнопка “Get started”.
Пять макетов виджетов таблицы цен
1. По умолчанию
Макет по умолчанию - это тот, с которого нужно начать Заголовок центрирован, цена находится под именем, а функции и кнопка следуют в теле. Он работает для любого количества планов и является самым безопасным выбором для ряда из трех столбцов.
- Макет: Дефолт
- Цветовая схема заголовка: Пользовательский, градиент от #6938EF до #B497FF при 135 градусах
- Цвет заголовка и цены: #FFFFFF; подзаголовок и период: #E4DBFF
- Значок функции: проверить, #6938EF; текст функции: #1A1033
- Кнопка: фон #F1EEFF, текст #6938EF, радиус 6 px
- Дополнительная информация: “Отменить в любое время”, #6B7280
2. Содержимое, выравнивающее влево
Содержимое левого выравнивания перемещает имя, цену и функции на левый край. Он читается быстрее, когда имена планов длинные или когда карта находится рядом с абзацем текста, и соответствует страницам цен в редакционном стиле, где все остальное остается выровненным.
- Макет: Содержимое левого выравнивания
- Все цвета, как в Default
- Выравнивание кнопок: влево, с левой подкладкой 24 шт. на нижнем колонтитуле
3. Округленный стол
Округленный стол помещает цену внутри большого круга в заголовке, что делает число первым, что видит каждый. ему нужен более высокий заголовок, поэтому дайте ему одинаковый счет функции на каждой карте или строка будет выглядеть неравномерно Желтый подчеркивание на строках функций является частью макета.
- Макет: Округленный стол
- Градиент заголовка, как в случае по умолчанию; круговой градиент от #F50A7F до #FF6FB1 при 135 градусах или оставьте его на оттенке по умолчанию
- Текст функций: #1A1033, цвет подчеркивания #FFD600 (по умолчанию макет)
4. Таблица с изображением BG
Стол с BG Image заполняет всю карту изображением, градиентом, видео или слайд-шоу, с заголовком и функциями, плавающими сверху. Он подходит для одного избранного плана или страницы цен на визуальный продукт. панели функций нужен темный полупрозрачный фон, чтобы текст оставался читаемым на любой фотографии.
- Макет: Стол с изображением BG
- Фон: Изображение, центр положения, размер обложки
- Фон функций: rgba(20, 10, 45, 0,6); текст функций: #FFFFFF
- Градиент заголовка, как в случае по умолчанию, с непрозрачностью 70 процентов, поэтому фотография видна насквозь
5. Косой узор BG
Косой BG Pattern разрезает заголовок под углом и добавляет две белые полосы, что дает движение карты без изображения. Используйте один акцентный цвет; градиент борется с полосами. Это макет, который чаще всего выбирают для одной карты на целевой странице.
- Макет: Косой узор BG
- Цветовая схема заголовка: Пользовательский, сплошной #6938EF
- Радиус карты: 20 шт.; фон карты #FFFFFFF
- Подчеркните функцию, кнопку, как в случае по умолчанию
6. Три плана с выделенной средней картой
Стандартный ценовой ряд SaaS: три виджета Ценового стола в трехколоночном контейнере, средний поднят. на поднятой карте используется Таблица основного света, лента с чтением “Самый популярный”, сплошная розовая кнопка вместо контура и переключатель Продажи с $69 в качестве первоначальной цены и $49 в качестве текущей. На внешних картах используется более светлый цвет корпуса, поэтому средний стоит вперед.
- Контейнер: три детских контейнера шириной 31,5 процента, зазор 28 шт., выравнивание. Элементы: растяжение
- Средняя карта: Выделить стол на; лента“Самая популярная”, вертикальная 18, горизонтальная -10; фон кнопки #F50A7F, текст #FFFFFF
- Внешние карты: фон тела #F6F5FA; средняя карта: #FFFFF с тенью 0 24px 60px rgba (105, 56, 239, 0,28)
7. Темная четырехплановая таблица цен
Четыре плана на черном фоне, с одним известковым акцентом на выделенной границе плана и теге. функции идентичны по картам, что является осознанным выбором: разница между планами только цена и читатель предназначен для выбора по бюджету. кнопки используют виджет Creative Button, поэтому эффекты наведения приходят из этого виджета, а не из пользовательского CSS.
Используйте этот шаблон, когда планы отличаются ограничениями, а не функциями. Жирный текст функции на первой карточке и обычный текст на других - единственная визуальная иерархия, поэтому сохраняйте его таким образом.
8. Темные цены SaaS с индивидуальным планом
Из набора шаблонов Finix в этом разделе показано, как обращаться с планом без фиксированной цены Третья карта печатает “Custom” где число будет и меняет текст кнопки на “Talk на us”.Описание в одну строку под каждой ценой объясняет, для кого план, а сноска под строкой охватывает выставление счетов и годовую скидку в одном предложении.
Слабые концентрические круги за картами - это изображение фона раздела, а не часть виджета. Замените изображение или удалите его, и карты останутся такими, какие они есть.
9. Двухплановая таблица цен на свет
Два плана - это решение "да" или "нет", поэтому такой макет делает платную карту невозможной для пропуска: вся карта заполнена цветом акцента, а кнопка переворачивается в темный. серые значки чеков на основных функциях отметки карты, которые не включены, что позволяет обеим картам сохранять одни и те же четыре строки.
Используйте это, когда есть бесплатный уровень и один платный уровень. С тремя или более планами полноцветная карта становится слишком громкой.
10. Ценовые карты с переключателем выставления счетов
В этом разделе уже построен ежемесячный и годовой тумблер. коммутатором является виджет Toggle Content от Master Addons Pro, и каждое состояние загружает сохраненную строку цен. карты печатают “billed monthly” или “billebilled ежегодно” под ценой, чтобы читатель знал, какое состояние отображается. Импортируйте его, откройте Шаблоны > Сохраненные шаблоны и отредактируйте там две строки цен. чтобы построить то же самое с нуля, включая уловку шаблона типа Раздела, следуйте инструкциям ежемесячное и ежегодное руководство по переключению.
11. Четырехплановое сравнение с клещами признаков
Когда планы различаются по функциям, а не по ограничениям, тики и крестики позволяют читателю сканировать столбец. Прошло около семи строк, а таблица сравнения выполняет эту работу лучше, чем карты. все четыре карты несут одни и те же семь строк в одном и том же порядке, и значок меняется в зависимости от плана. выделенный план заполнен акцентом цвета, с белой кнопкой, и сидит третьим, а не вторым, потому что страница ожидает, что большинство читателей выберут более высокий уровень.
12. Темные цены с ежемесячным и годовым переключением
Темный раздел со светлыми картами является обратной пример 7, и он делает карты самой яркой вещью на странице, Переключатель находится между заголовком и картами, заметка для каждого пользователя под каждым именем плана устанавливает ожидания, и “Нет кредитной карты требуется” под каждой кнопкой удаляет последнее возражение Декоративные формы в углах являются раздела фоновые элементы.
Как импортировать раздел цен
- Откройте страницу в Elementor и щелкните значок шаблона "Мастер-аддоны" в редакторе или откройте "Шаблоны" > "Мастер-шаблоны дополнений".
- Поиск “pricing”, предварительный просмотр раздела и нажмите Импорт. разделы, построенные с помощью виджетов Pro, нуждаются в Master Addons Pro активны.
- Раздел приземляется там, где был ваш курсор Редактировать текст каждой карты в панели; дизайн остается.
- Для разделов с переключателем отредактируйте две ценовые строки в разделе "Шаблоны" > "Сохраненные шаблоны".
выше руководство по импорту шаблонов охватывает кнопку редактора, экран "Импорт страниц" и то, что происходит с импортированной копией.
Хотите все пять макетов, ничего не импортируя? выше Виджет таблицы цен есть их в одном раскрывающемся списке, и Библиотека шаблонов имеет полные разделы, показанные выше.
Часто задаваемые вопросы
Есть ли у Elementor шаблоны таблиц цен?
В библиотеке шаблонов Elementor есть блоки ценообразования для пользователей Pro, а виджет Price Table - Pro тоже.На бесплатном Elementor шаблоны ценообразования приходят из дополнения: виджет Master Addons Pricing Table имеет пять макетов, а его Библиотека шаблонов - полные разделы ценообразования.
Сколько планов должно быть в шаблоне таблицы цен?
Три - самое безопасное число, и четыре работает, когда один план - это индивидуальный или корпоративный уровень. Примеры выше показывают два, три и четыре плана; за четыре, бок о бок карты перестают помещаться на экране ноутбука.
Могу ли я изменить макет после сборки стола?
Да. выпадающий макет в виджете таблицы цен главных дополнений переключается между пятью дизайнами и сохраняет имя плана, цену, функции и кнопку на месте. меняются только настройки стиля, которые принадлежат макету, такие как круг или перекос.
Как составить темную таблицу цен в Элементоре?
Установите фон раздела на черный или темно-синий, дайте каждой карте темно-серый корпус с однопиксельной светлой рамкой и используйте один акцентный цвет для границы, бирки и кнопки выделенной карты.Примеры 7, 8, 10 и 12 выше показывают четыре версии этого.
Отзывчивы ли примеры таблиц цен?
Да. карты складываются в один столбец на телефонах. поместите выделенный план первым или вторым в порядок контейнеров для мобильных устройств, держите списки функций примерно в пяти строках и проверьте таблицу на точке останова мобильного устройства в режиме реагирования Elementor перед публикацией.
Заключительные мысли
Двенадцать шаблонов приходят по двум маршрутам.Пять макетов виджетов покрывают форму карты и принимают по одному выпадающему изменению каждый. семь разделов библиотеки охватывают формы страницы: три плана с выделенным средним, темный четырехплановый, SaaS с пользовательским ярусом, двухплановый свет, переключатель для выставления счетов, четырехплановые тики и крестики, и темный со светлыми картами. каждый сохраняет порядок, который работает: имя, для кого он, цена, короткий список функций, одна кнопка.
Начните с макета или раздела, ближайшего к вашим планам Страница виджета таблицы цен, изменить текст, и проверить его на телефоне, прежде чем он будет запущен.
Связанное чтение
- Дизайн таблицы цен: 10 советов с примерами
- Библиотека шаблонов главных аддонов
- Комплекты шаблонов Elementor
- Шаблоны разделов Элементор
- Документация виджета таблицы цен
- Как добавить ежемесячный и ежегодный переключение в таблицу цен Elementor
- Таблица цен Elementor по сравнению со сравнительной таблицей: что использовать
- Как составить прайс-лист или меню в Elementor
