Флипбокс

Карта, которая переворачивается при наведении курсора, показывает вдвое больше содержимого в том же пространстве. The Флипбокс виджет в Мастер-аддоны для Elementor дает вам двустороннюю рамку: лицевую сторону со значком, заголовком и описанием, а также заднюю сторону, которая открывается собственным текстом и кнопкой.

Вы выбираете анимацию, заполняете оба лица, добавляете кнопку, затем стилизуете каждую сторону. существует более тридцати эффектов переворота, от простого Fade до полного 3D Cube. это руководство проходит через каждую настройку в виджете.

Что делает виджет Flipbox #

Виджет строит флип-карту из двух лиц. The Передняя Коробка это то, что посетители видят первыми: значок или изображение, заголовок и описание. Наведите на него курсор, и карта перевернется на Задняя коробка, который имеет свой собственный заголовок, описание и кнопку, которая может ссылаться в любом месте.

Три вкладки запускают все это. Содержание удерживает анимацию, передний и задний текст, а также кнопку. Стиль обрабатывает высоту коробки, границы, цвета и типографику каждого лица. Продвинутый это обычное расстояние и видимость Элементора.

Прежде чем начать #

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Текст и значки для обоих лиц, а также ссылка на кнопку на обратной стороне.

Как добавить виджет Flipbox #

В редакторе Elementor откройте Элементы панель и поиск Флипбокс, или прокрутите в раздел Главные дополнения (виджеты несут фиолетовый значок МА). перетащите его на страницу, и он загружается образцом спереди и сзади, который вы можете редактировать.

Установите стиль анимации #

Открыть Содержание вкладка. Стиль Пресет раздел держит Вариация дизайна и Стиль анимации, а под ним расположены разделы "Передняя коробка", "Задняя коробка" и "Кнопка действия".

The Стиль анимации раскрывающийся - это забавная часть. Он содержит более тридцати вариантов, поэтому одна и та же карта может переворачиваться, исчезать, скользить или кубически доходить до задней поверхности.

• Переверните по горизонтали и переверните по вертикали: классический переворот карты по каждой оси.
• Куб (сверху вниз, сверху вниз, слева, справа): трехмерное вращение куба между гранями.
• 3d Флип, Затухание, Затухание, Ролловер: более мягкие раскрытия, когда хочется чего-то тонкого.
• Направления скольжения и диагональ: вдавите заднюю грань сбоку или в угол.

Настройте переднюю коробку #

Открыть Передняя Коробка раздел. это лицо, которое люди видят перед тем, как зависать, поэтому оно должно заслужить переворот.

• Стиль и значок: выберите значок из библиотеки или переключите его на изображение.
• Название и описание: заголовок и текст, каждый с опцией "Письмо с искусственным интеллектом".
• Выравнивание и название HTML-тег: выровняйте содержимое и установите уровень заголовка (от H1 до H6).

Настройте заднюю коробку #

Открыть Задняя коробка раздел для лица, которое переворачивается в поле зрения. он принимает те же поля, что и передняя часть, поэтому короткий тизер спереди может привести к реальным деталям на задней части.

• Значок: отдельный значок для задней грани.
• Название и описание: заголовок и текст на обратной стороне.
• Выравнивание и HTML-тег: планировка и уровень заголовка спины.

Добавить кнопку действия #

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

• Текст кнопки: лейбл, например "Начни или узнай больше".
• Ссылка на: URL-адрес кнопки открывается с обычными параметрами ссылки Elementor.

Стиль флип-карты #

Открыть Стиль вкладка. Генерал раздел устанавливает границу и, наиболее важные здесь условия, Высота флип-бокса, что дает обеим сторонам один фиксированный размер.

Под Генералом вы отделяетесь Передняя Коробка и Задняя коробка разделы. каждый имеет свой собственный цвет фона или изображение, цвета заголовка и описания, типографику и цвет значков, поэтому два лица не могут выглядеть одинаково, если хотите.

Обычные случаи использования #

• Сервисные карты со значком спереди и деталями плюс кнопка сзади.
• Члены команды показ фотографии спереди и биографии на флипе.
• Основные моменты продукта это раскрывает цену и кнопку "Купить" при наведении курсора.
• Особенности сетки где каждая карта переходит к краткому объяснению.
• Портфельные плитки с миниатюрой спереди и звеном проекта сзади.

Советы по работе с виджетом Flipbox #

• Установите фиксированную высоту. Высота флип-бокса сохраняет обе стороны одинакового размера, поэтому карта не прыгает при перевороте. Оставьте его неустановленным, и более длинная задняя поверхность изменит размер карты в середине ховера, что выглядит как выключенное.
• Держите текст обратной стороны коротким. Задняя часть быстро переворачивается, поэтому плотная линия и кнопка читаются лучше, чем полный абзац.
• Сопоставьте анимацию с настроением. Затухание подходит спокойной странице, смелому герою идут 3D Flip и Cube.
• Сравните два лица. Другой цвет фона на спине делает переворот очевидным с первого взгляда.
• Всегда связывайте кнопку. Кнопка на задней стороне - это выигрыш, поэтому укажите ее на следующем шаге.

Смотрите видеоурок #

Предпочитаете следовать на экране? Видеоурок ниже проходит через элемент Flipbox от начала до конца, показывая, как стили анимации, передние и задние лица, а также стили работают в редакторе Elementor.

Часто задаваемые вопросы #

Завершая #

Виджет Flipbox превращает плоскую карту в интерактивную: выберите анимацию, заполните лицевую и заднюю стороны, свяжите кнопку, а затем стилизуйте каждую сторону. Чтобы узнать о связанных виджетах, см Виджет информационного ящика и Виджет "Член команды", просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.