Различные спец эффекты на сайте всегда манят определенный круг посетителей, задерживают внимание на блоке и дают не только вчитаться в текст, но и просто поиграться. В конструкторе сайта много различных виджетов с эффектами и анимациями, но речь пойдет о таком виде анимации как "перевертыш" (другое название: флип, сальто, переброс, переворачивать, пролистать). Данный вид анимации сменяет один контент, на другой с помощью эффекта смены контента в виде перелистывания или сальто. Для такого эффекта в нашем конструкторе сайта есть виджет "Флип-бокс".
Виджет "Флип бокс" предназначен для вывода контента в виде двух карточек. Одна карточка с изображением, заголовком и текстом, а вторая карточка тоже с такими же составляющими, но с кнопкой действия (например купить). При наведении на блок виджета, одна карточка сменяется другой. Доступны различные спецэффекты для смены, такие как сальто, смещение, сдвиг, увеличение, уменьшение и растворение.
Выше представлен виджет по умолчанию. Для данного виджета возможно изменить все стили текста, блока и изображения. Вместо изображения возможно выбрать иконку с персональными настройками. Ниже опишем настройки, опции и свойства виджета "Флип-бокс".
Содержимое
- Передняя часть
- Графический элемент - в качестве графического элемента вы можете выбрать изображение или иконку. После выбора типа граф элемента вы можете изменить его свойства и опции. Для изображения это выбор размера, а для иконки это выбор иконки и ее вид (вписанная или обрамленная).
- Заголовок и описание - выводимый текстовый контент для лицевой части виджета.
- Фон - если переключится на вкладку Фон , то можно выбрать подходящий фон для лицевой части (цвет или изображение). При выборе изображения доступны стандартные свойства управления фоном.
- Задняя часть
- Графический элемент - Изображение или иконка в качестве граф элемента.
- Заголовок и описание - Текстовый контент для задней части виджета.
- Текст кнопки -Текст на кнопке, например Купить.
- Ссылка - Ссылка на кнопке. При нажатии на шестренку доступны дополнительные параметры.
- Фон - переключившись на вкладку фон можно установить фон для задней части (цвет или изображение).
- Настройки
- Высота - высота блока виджета (высоту можно задать в px и в vh)
- Скругление - скругление углов виджета
- Эффект при смене - эффекты анимации при смене карточек блока (Flip - сальто, Slide - эффект слайда т.е перекрывает слайд поверх, Push - сдвигает карточку, Zoom In - увеличивается, Zoom Out - уменьшается, Fade - исчезает)
- Направление при смене - настройка направления смены для некоторых эффектов анимации (влево, вправо, вниз, вверх)
- Глубина 3D - включения глубины 3d , которая видна при смене карточек (доступна не для всех эффектов)
Стиль
- Передняя часть
Для карточки доступны изменение свойств отступов, выравнивание по вертикали и горизонтали, а так же указания типа границы и ее свойств.
Для иконки возможно изменить отступы, изменить цвет, размер иконки , угол иконки (повернуть ее).
Заголовок - отступы, цвет и типографика, все это меняется для заголовка.
Если выбрано изображение как графический элемент, то для него возможно установить отступы, размер в % и прозрачность.
В описании можно поменять цвет и типографику.
- Задняя часть
Доступны все свойства описанные выше, но с одним дополнительным отличием. Добавляется раздел управления свойствами кнопки. Для нее доступны изменения размера кнопки, типографики, цвета, фона кнопки, цвет и толщина границы, а так же скругление углов.
=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================