Карта, которая переворачивается при наведении курсора, показывает вдвое больше содержимого в том же пространстве. Бесплатный Виджет Flipbox в Мастер-аддоны для Elementor дает вам двустороннюю рамку: лицевую сторону со значком, заголовком и описанием, а также заднюю сторону, которая открывается собственным текстом и кнопкой.
Вы выбираете анимацию, заполняете оба лица, добавляете кнопку, затем стилизуете каждую сторону. есть 22 эффекта переворота: 6 в бесплатном плагине и еще 16 с Master Addons Pro, от простого Fade до 3D Cube. это руководство проходит через каждый параметр в виджете.
Что делает виджет Flipbox #
Виджет строит флип-карту из двух лиц. The Передняя Коробка это то, что посетители видят первыми: значок или изображение, заголовок и описание. Наведите на него курсор, и карта перевернется на Задняя коробка, который имеет свой собственный заголовок, описание и кнопку, которая может ссылаться в любом месте.
Три вкладки запускают все это. Содержание удерживает анимацию, передний и задний текст, а также кнопку. Стиль обрабатывает высоту коробки, границы, цвета и типографику каждого лица. Продвинутый это обычное расстояние и видимость Элементора.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Текст и значки для обоих лиц, а также ссылка на кнопку на обратной стороне.
Как добавить виджет Flipbox #
В редакторе Elementor откройте Элементы панель и поиск Флипбокс, или прокрутите в раздел Главные дополнения (виджеты несут фиолетовый значок МА). перетащите его на страницу, и он загружается образцом спереди и сзади, который вы можете редактировать.
Установите стиль анимации #
Открыть Содержание вкладка. Стиль Пресет раздел держит Вариация дизайна и Стиль анимации, а под ним расположены разделы "Передняя коробка", "Задняя коробка" и "Кнопка действия".
The Стиль анимации раскрывающийся является забавной частью. он несет 22 варианта, поэтому одна и та же карта может перевернуть, выцветать, скользить, или куб свой путь к задней поверхности. перевернуть горизонтально, перевернуть вертикально, выцветать, перевернуть коробку, перевернуть коробку выцветать и выцветать вверх бесплатно; остальные нуждаются в Pro.
- Переверните по горизонтали и переверните по вертикали: классический переворот карты по каждой оси.
- Куб (сверху вниз, сверху вниз, слева направо, справа влево): вращение трехмерного куба между гранями (Pro).
- Затухание и затухание (бесплатно), 3d переворачивание и переворачивание (Pro): более мягкие раскрытия, когда хочется чего-то тонкого.
- Направления скольжения и диагональ (Pro): вдавите заднюю грань сбоку или в угол.
Настройте переднюю коробку #
Открыть Передняя Коробка раздел. это лицо, которое люди видят перед тем, как зависать, поэтому оно должно заслужить переворот.
- Стиль и значок: выберите значок из библиотеки. изображение на лицевой стороне поставляется с вариацией дизайна Front Image в Pro.
- Название и описание: заголовок и текст, каждый с опцией "Письмо с искусственным интеллектом".
- Выравнивание и название HTML-тег: выровняйте содержимое и установите уровень заголовка (от H1 до H6).
Настройте заднюю коробку #
Открыть Задняя коробка раздел для лица, которое переворачивается в поле зрения. он принимает те же поля, что и передняя часть, поэтому короткий тизер спереди может привести к реальным деталям на задней части.
- Значок: отдельный значок для задней грани.
- Название и описание: заголовок и текст на обратной стороне.
- Выравнивание и HTML-тег: планировка и уровень заголовка спины.
Добавить кнопку действия #
The Кнопка Действия раздел живет на задней стороне. Установите этикетку и место, куда она указывает, чтобы наведение на курсор могло привести прямо к продукту, форме или другой странице.
- Текст кнопки: лейбл, например "Начни или узнай больше".
- Ссылка на: URL-адрес кнопки открывается с обычными параметрами ссылки Elementor.
Стиль флип-карты #
Открыть Стиль вкладка. Генерал раздел устанавливает границу и, наиболее важные здесь условия, Высота флип-бокса, что дает обеим сторонам один фиксированный размер.
Под Генералом вы отделяетесь Передняя Коробка и Задняя коробка разделы. каждый имеет свой собственный цвет фона или изображение, цвета заголовка и описания, типографику и цвет значков, поэтому два лица не могут выглядеть одинаково, если хотите.
Обычные случаи использования #
- Сервисные карты со значком спереди и деталями плюс кнопка сзади.
- Члены команды показ фотографии спереди и биографии на флипе.
- Основные моменты продукта это раскрывает цену и кнопку "Купить" при наведении курсора.
- Особенности сетки где каждая карта переходит к краткому объяснению.
- Портфельные плитки с миниатюрой спереди и звеном проекта сзади.
Советы по работе с виджетом Flipbox #
- Установите фиксированную высоту. Высота флип-бокса сохраняет обе стороны одинакового размера, поэтому карта не прыгает при перевороте. Оставьте его неустановленным, и более длинная задняя поверхность изменит размер карты в середине ховера, что выглядит как выключенное.
- Держите текст обратной стороны коротким. Задняя часть быстро переворачивается, поэтому плотная линия и кнопка читаются лучше, чем полный абзац.
- Сопоставьте анимацию с настроением. Затухание подходит спокойной странице, смелому герою идут 3D Flip и Cube.
- Сравните два лица. Другой цвет фона на спине делает переворот очевидным с первого взгляда.
- Всегда связывайте кнопку. Кнопка на задней стороне - это выигрыш, поэтому укажите ее на следующем шаге.
Смотрите видеоурок #
Предпочитаете следовать на экране? Видеоурок ниже проходит через элемент Flipbox от начала до конца, показывая, как стили анимации, передние и задние лица, а также стили работают в редакторе Elementor.
Часто задаваемые вопросы #
Что такое виджет Flipbox в главных аддонах?
Это виджет Элементор, который строит двустороннюю карту. лицевая сторона показывает значок, заголовок, и описание, и на наведении он переворачивается на заднюю сторону с собственным текстом и кнопкой. все устанавливается с панели Элементор без кода.
Сколько флип-анимаций есть у виджета Flipbox?
Выпадающий стиль анимации включает в себя 22 эффекта, 6 свободных и 16 с Pro, такие как Flip Horizontal, Flip Vertical, Fade, Fade Up, Rollover, 3d Flip, варианты Cube, направления скольжения и Diagonal. вы выбираете по одной на карту, чтобы контролировать, как появляется задняя грань.
Могу ли я добавить кнопку на флип-карту?
Да. раздел "Кнопка действия" на вкладке "Содержимое" устанавливает метку кнопки и ее ссылку. Кнопка находится на задней стороне, поэтому она показывает, когда карта переворачивается, что делает ее естественным местом для отправки посетителей на продукт или форму.
Могу ли я использовать изображение вместо значка на лицевой стороне?
Да. используйте вариант дизайна переднего изображения, опцию Master Addons Pro, чтобы поместить изображение на лицевую сторону. вкладка Стиль также позволяет установить фоновое изображение для любого лица, поэтому флип-карты с изображением легко собрать.
Как сохранить обе стороны флип-карты одинакового размера?
Установите высоту флип-бокса в разделе "Общие" на вкладке "Стиль". Это дает обеим сторонам одну фиксированную высоту, поэтому карта остается одинакового размера до и после флипа вместо изменения размера, чтобы соответствовать содержимому каждой стороны.
Завершая #
Виджет Flipbox превращает плоскую карту в интерактивную: выберите анимацию, заполните лицевую и заднюю стороны, свяжите кнопку, а затем стилизуйте каждую сторону. Чтобы узнать о связанных виджетах, см Виджет информационного ящика и Виджет "Член команды", просмотр всего Виджеты и расширения Master Addgetsи посмотрите Страница виджета Flipbox для демо и сравнения с Elementor Pro Flip Box.
