Web5X Блог

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

Web5X Блог

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

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

Флип-бокс — виджет Elementor Pro

Обновлено: 21.02.2018
0 комментариев
флип-бокс elementor конструктор сайта

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

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

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

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

Содержимое

- Передняя часть

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

- Задняя часть

  • Графический элемент - Изображение или иконка в качестве граф элемента.
  • Заголовок и описание - Текстовый контент для задней части виджета.
  • Текст кнопки -Текст на кнопке, например Купить.
  • Ссылка - Ссылка на кнопке. При нажатии на шестренку доступны дополнительные параметры.
  • Фон - переключившись на вкладку фон можно установить фон для задней части (цвет или изображение).

- Настройки

  • Высота - высота блока виджета (высоту можно задать в px и в vh)
  • Скругление - скругление углов виджета
  • Эффект при смене - эффекты анимации при смене карточек блока (Flip - сальто, Slide - эффект слайда т.е перекрывает слайд поверх, Push - сдвигает карточку, Zoom In - увеличивается, Zoom Out - уменьшается, Fade - исчезает)
  • Направление при смене - настройка направления смены для некоторых эффектов анимации (влево, вправо, вниз, вверх)
  • Глубина 3D - включения глубины 3d , которая видна при смене карточек (доступна не для всех эффектов)

 

Стиль

- Передняя часть

Для карточки доступны изменение свойств отступов, выравнивание по вертикали и горизонтали, а так же указания типа границы и ее свойств.

Для иконки возможно изменить отступы, изменить цвет,  размер иконки , угол иконки (повернуть ее).

Заголовок - отступы, цвет и типографика, все это меняется для заголовка.

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

В описании можно поменять цвет и типографику.

- Задняя часть

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

 

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

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

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

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