Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Таблица цен — виджет Elementor Pro

Обновлено: 20.02.2018
0 комментариев
заставка - таблица цен - конструктор сайта

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

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

пример - таблица цен - конструктор сайтапример - таблица цен - конструктор сайта

конструктор сайта - виджет - таблица цен

Вот так просто выглядит виджет по умолчанию (просто одна колонка). Настроек и опций у данного виджета очень много, т.е изменить тексты и стиль можно каждого элемента в отдельности (тексты, цвета, фоны). Давайте рассмотрим настройки и свойства виджета. Вкладку "Содержимое" мы рассмотрим подробно, а вот стили только поверхностно.

Содержимое

- Шапка

  • Заголовок - заголовок таблицы цен.
  • Подзаголовок - его подзаголовок (используется как дополнительное описание)

- Ценообразование

  • Символ валюты - символ валюты рядом с ценой (возможность выбора любой валюты)
  • Цена - отображаемая цена таблицы
  • Распродажа - при включении опции "Распродажа" появляются дополнительные свойства для ввода стоимости строй цены т.е перечеркнутой.
  • Период - описание периода стоимости т.е текст под ценой

- Свойства

  • Текст - текст элемента сравнения (свойство)
  • Иконка - иконка для свойства.
  • Цвет иконки - цвет для иконки.

- Нижний колонтитул

  • Текст кнопки - свой текст для кнопки , например "Купить"
  • Ссылка - ссылка для кнопки
  • Дополнительная информация - информация под кнопкой (при необходимости)

- Лента

  • Пок. - опция включения или выключения ленты (показать или скрыть)
  • Заголовок -  текст на ленте.
  • Позиция по горизонтали - позиция ленты (слева или справа)

 

Стиль

- Шапка
Изменение стилей для шапки (цвет фона и отступы), заголовок и подзаголовок (цвет и типографика)

- Ценообразование
Возможность изменить свойства стилей для блока стоимости, такие как цвет фона и отступы блока ценообразования,  цвет текста и ее типографика, символ валюты и ее дробная часть (размер и выравнивание по вертикали),  период (цвет, типографика и расположение снизу и справа)

- Свойства
Цвет фона блока свойств, отступы, цвет текста, типографика, выравнивание и ширина. Если включить опцию "Разделитель" то возможно задать любые свойства для линии, такие как : толщина, тип, цвет, ширину и отступы между разделителями.

- Нижний колонтитул
Цвет фона и отступы для блока нижнего колонтитула. Для кнопки возможно задать цвет текста, фон кнопки ее размер, тип границы, толщину границы, скругление улов и ее цвет. А для дополнительной информации (та что под кнопкой) возможно задать цвет, типографику и отступы снаружи.

- Лента
Цвет фона ленты, цвет текста ленты, ее типографика, расстояние от угла и тень для ленты.

 

=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

0 комментариев

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