Виджет флип-бокса Elementor с анимацией флип-карты Hover
Флипбокс - это виджет флип-бокса Master Addons для Elementor, без необходимости Elementor Pro. На лицевой стороне отображается значок или изображение с заголовком и коротким текстом, а при наведении карта поворачивается на заднюю поверхность с более подробной информацией и кнопкой действия. виджет поставляется с дизайном значков по умолчанию и передней панели и 6 анимациями: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade и Fade Up. Мастер Аддоны Про добавляет дизайн Front Image и Diagonal и еще 16 анимаций, включая Cube, Rollover и 3D Flip, всего на 22. у самого Elementor есть только флип-бокс в Elementor Pro.
Вариации дизайна и флип-анимации
Вариация дизайна устанавливает расположение лицевой стороны: значок по умолчанию и лицевая сторона поставляются с виджетом, переднее изображение и диагональ need Pro. Стиль анимации устанавливает, как карта поворачивается. Включено: переверните по горизонтали, переверните по вертикали, выцветайте, переверните коробку, переверните коробку. Pro добавляет четыре направления кубика, затухание скрытия, затухание скрытия, четыре направления скольжения, два диагональных слайда, затухание, нананан, переворот и 3D-перевертывание, которое имеет свою собственную настройку направления.
- Всего 22 анимации: 6 включены и 16 с Pro.
- Флип выполняется при наведении курсора на рабочем столе и при нажатии на сенсорные экраны.
- Используйте одну анимацию в каждом разделе, чтобы ряд карт казался последовательным.
Двусторонний конструктор контента
выше Передняя Коробка и Задняя коробка у каждого есть свой значок с видом по умолчанию, в стопке или рамке и формой круга или квадрата, заголовком, описанием, выравниванием и тегом заголовка. держите переднюю часть короткой, как имя службы, и используйте заднюю часть для объяснения. на вкладке Стиль каждое лицо получает свой фон, цвет заголовка и описания, типографику, цвета значков и рамку.
- Отдельное содержание и укладка для каждого лица.
- Заголовок HTML-тег на обеих сторонах, поэтому сетка карт сохраняет чистый порядок заголовков.
- А Высота флип-бокса настройка в общем сохраняет обе грани одинакового размера.
Кнопка CTA с наведением курсора
выше Кнопка Действия показывает на задней стороне с вашим Кнопка Текст и ссылка.Стиль это для Нормальный и Навести с цветом текста, фоном, границей, радиус границы и заполнение, плюс типографика. кнопка является единственной ссылкой внутри виджета, Чтобы сделать всю карту кликабельной, добавить Обертка Ссылка расширение виджета.
- Используйте определенную метку, такую как “См. Ценообразование”, когда именно туда идет ссылка.
- Пропустить кнопку на чисто информационных карточках.
- Если вы используете Wrapper Link, укажите кнопку на той же странице.
Флипбокс с первого взгляда
В таблице указано, чем сегодня занимается виджет, прочитанный из источника плагина в версии 3.2.6.
| Пункт | Флипбокс |
|---|---|
| Варианты дизайна | 4: включены значок по умолчанию и передняя часть; Переднее изображение и диагональ с Pro |
| Анимации | 22: 6 включены (Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade, Fade Up) и 16 с Pro (четыре направления Cube, два замирания Hideback, четыре слайда, два диагональных слайда, Fade In Out, Nananana, Rollover, 3D Flip) |
| Контент спереди и сзади | Значок или изображение (изображение с дизайном Pro Front Image), заголовок со своим собственным HTML-тегом, описанием и выравниванием на каждой стороне |
| Стиль иконы | По умолчанию, в сложенном или рамном виде, с формой круга или квадрата |
| Триггер | Наведите курсор на рабочий стол, сначала коснитесь сенсорных экранов. Триггер без кликов |
| Цельнокоробочная ссылка | Нет. На задней кнопке есть ссылка; расширение Wrapper Link делает всю карту кликабельной |
| Контроль высоты | Да, высота флип-бокса в стиле, генерал |
| Режим карусели | Нет |
| 3D Направление переворота | 4 направления на анимации Pro 3D Flip |
| Потребности | Аддоны Элементор и Мастер. Про за два дополнительных дизайна и 16 дополнительных анимаций |
Флипбокс Elementor Pro против главного дополнения
У Elementor Pro есть свой виджет Flip Box. Если вы уже платите за него, вам может не понадобиться другой. вот как эти двое сравниваются.
| Особенность | Флип-бокс Elementor Pro | Мастер Аддоны Flipbox |
|---|---|---|
| Цена | Нужен Элементор Про | Мастер-аддоны; больше дизайнов и анимации в Pro |
| Флип эффекты | Переверните, сдвиньте, нажмите, увеличьте масштаб, уменьшите масштаб и исчезните, с направлением и глубиной 3D | 6 включали анимацию, 22 - с Pro, включая Cube, Rollover и 3D Flip |
| Триггер | Наведите курсор | Наведите курсор; первое касание сенсорных экранов |
| Фронтальная графика | Нет, изображение или значок | Значок или изображение с дизайном Pro Front Image |
| Ссылка на всю карту | Примените ссылку: только целая коробка или кнопка | Только кнопка или вся карта с расширением Wrapper Link |
| Кнопка | Да | Да, со стилем Normal и Hover |
Элементор Про проще, если вы хотите, чтобы ссылка "все ящик" была встроена. Мастер Аддоны работает на Элементоре без Про и дает больше вариантов анимации с собственным Про. Для статической карты, где ничего не скрыто, используйте Информационный ящик виджет.
Флип-карта CSS или виджет флип-бокса?
Флип-карта - это то же самое, что флип-бокс: лицевая сторона, которая поворачивается к задней стороне. вы можете написать от руки одну с примерно 40 строками CSS, используя перспективу, трансформировать стиль: сохранить-3d и обратную сторону-видимость: скрытый, и опустить его в HTML виджет. этот маршрут подходит для одной карты на странице, которой вы управляете.
Версия CSS имеет три повторяющиеся проблемы, Сенсорные экраны не имеют зависания, поэтому карта никогда не переворачивается, если вы не добавляете обработчик метчика. обоим лицам нужна фиксированная высота или карта прыгает, когда она поворачивается. И каждое изменение цвета, текста или значка означает редактирование кода снова, часто внутри пользовательского поля CSS, которое нуждается в Elementor Pro. виджет Flipbox обрабатывает метку, высоту и стиль с панели редактора, и он дает вам обратную кнопку, 22 анимации и вариант дизайна для каждой карты без прикосновения к коду.
Идеи и советы флип-боксов
Откидная коробка сохраняет сетку чистой, но при этом несет детали, потому что описание находится за картой, а не под ней. Это хорошо работает для сервисных сеток, командных карт с фотографией спереди и биографией сзади, плиток и карт статистики, которые перелистываются к тому, что означает число.
- Установите высоту флип-бокса. Без него более длинная задняя поверхность изменяет размер карты по мере ее поворота и прыжка ряда.
- Сделайте лица другими. Оттенок спереди и цвет вашей марки сзади делают переворот очевидным.
- План для телефонов. Сенсорные экраны не имеют зависания, поэтому карта переворачивается на касание, и кнопка нуждается во втором касании. тест на реальном телефоне.
- Держите важные детали спереди. Цены, номера телефонов и ссылки на бронирование не должны жить только на задней стороне.
- Ограничьте движение. Одна или две строки флип-боксов на странице читаются лучше, чем шесть разных анимаций.
Примеры флипбокса
Каждая демо-версия ниже представляет собой живую страницу, созданную с помощью виджета. Анимация и вариант дизайна названы так, что вы можете восстановить любой из них с панели.
Перевернуть Вертикальный
- Аналитические карты SaaS: Дизайн по умолчанию, три темные карты статистики, которые обращаются к описанию плана.
- Сетка карт оборудования: Дизайн по умолчанию, шесть плиток продукта в двухрядной сетке.
- Сетка стат и видов: Дизайн по умолчанию, номер спереди и значение сзади.
- Карточки арочного продукта: Конструкция по умолчанию с закругленной формой арки на передней поверхности.
Флип Горизонтальный
- Плитки обслуживания только значков: Дизайн передних значков, четыре значка в рамке, которые превращаются в короткую служебную аннотацию.
- Плитки обслуживания Бенто: Смешанные карты по умолчанию и передние значки в макете бенто.
- Карты дисциплины в шахматном порядке: Дизайн по умолчанию, три карты смещены друг от друга.
- Минимальные плитки значков: Дизайн передней иконки, три темные плитки по одному значку в каждой.
Увядать
- Проездные карты с изображением передней части: дизайн переднего изображения (Pro), фотография спереди и детали поездки сзади.
- Нумерованные строки глав: Дизайн по умолчанию, широкие строки, которые переходят в краткое изложение глав.
- Строки хронологической книги: Дизайн по умолчанию, карты шагов, которые исчезают в соответствии с инструкциями.
Флип-бокс и куб
- Круговая витрина бренда: Анимация Flip Box на круглых картах.
- Диагональные плитки: Диагональный дизайн (Pro) с анимацией кубика слева направо (Pro).
- Эффекты расширенного преобразования: Карты Flipbox в сочетании с расширением Transforms.
3D Флип и слайды
- Карты продуктов кофе: 3D Flip анимация (Pro), Слайд направо налево направление.
- Интерактивная медиа-витрина: 3D Flip (Pro) с различным направлением на каждой карте.
- Карты многоиконные: Слайды слева направо, справа налево и сверху вниз (Pro) в один ряд.
Перевертывание, диагональ и затухание
- Темные карты занятий в тренажерном зале: Ролловерная анимация (Pro) на мрачную тему.
- Пастельные иконочные плитки: Дизайн передних значков с анимацией от диагонали снизу вверх (Pro).
- Градиентные задние карты: Анимация затухания (Pro) до градиентной задней поверхности.
Как добавить флип-бокс в Elementor
Вам нужен Elementor и плагин Master Addons с сайта WordPress.org.
- Убедитесь, что Flipbox включен ниже Мастер-аддоны, виджеты.
- В редакторе Elementor выполните поиск Флипбокс и перетащить в контейнер.
- Выберите вариант дизайна и стиль анимации, затем наведите курсор карты, чтобы просмотреть его.
- Заполните переднюю и заднюю коробки: значок, заголовок, описание и тег заголовка.
- Добавьте текст кнопки действия и ссылку.
- В стиле, общий, набор Высота флип-бокса таким образом, карта не меняет размер среднего переворота, а затем стилизует каждое лицо.
Для 3D эффектов, читайте Как создать 3D-анимации Elementor Flipbox. Каждая настройка находится в. Настройки виджета Flipbox.
Flipbox сочетается с несколькими другими виджетами Master Addons: Информационный ящик для карты, которая никогда не переворачивается, Креативная кнопка для стильного призыва к действию под сеткой, Эффекты наведения изображения для фотографии, на которой вместо задней части лица изображена подпись, Член команды для людей карты с социальными ссылками и Переключить контент когда раскрытие должно произойти при нажатии, а не при наведении курсора.
Часто задаваемые вопросы для Flipbox
Как работает флип-бокс на телефонах?
Сенсорные экраны не имеют зависания, поэтому карта переворачивается при нажатии На кнопку задней поверхности нужно собственное нажатие после переворота Сохранить информацию, которую необходимо увидеть на лицевой стороне, и протестировать на реальном устройстве.
Могу ли я использовать изображение вместо значка на лицевой стороне?
Да, с вариацией дизайна Front Image, которая является опцией Master Addons Pro. в противном случае используйте значок на лицевой стороне или установите фоновое изображение для лица на вкладке Стиль.
Нужны ли мне Master Addons Pro для виджета Flipbox?
Нет. Flipbox поставляется с плагином Master Addons с дизайном значков по умолчанию и переднего ряда и 6 анимациями.Master Addons Pro добавляет еще 2 дизайна и еще 16 анимаций.
Переворачивается ли флип-бокс при щелчке мыши?
Нет. виджет переворачивается при наведении курсора, а на сенсорных экранах первый касание переворачивает карту. На рабочем столе нет триггера щелчка. Для панели, которая открывается при щелчке мыши, используйте Переключить контент виджет или а Попап Строитель всплывающее окно.
Флип-карта - это то же самое, что флип-бокс?
Да. флип-карта - это название учебного пособия CSS для того же эффекта: лицевая сторона, которая поворачивается к задней стороне. виджет Flipbox создает флип-карту с панели редактора, с высотой, касанием сенсорных экранов и кнопкой задней поверхности, обработанной для вас.
Есть ли у Elementor виджет флип-бокса?
Только у Elementor Pro есть один. Elementor без Pro не имеет, поэтому вам нужен такой аддон, как этот виджет Flipbox.
Могу ли я связать весь флипбокс со страницей без отдельной кнопки?
Виджет связывает только кнопку. Чтобы сделать всю карту кликабельной, включите Обертка Ссылка расширение и добавление ссылки на виджет Flipbox.
Сколько существует флип-анимаций?
22 в целом. Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade and Fade Up идут вместе с виджетом. остальным 16, включая Cube, Rollover и 3D Flip, нужны Master Addons Pro.
Можно я положу флип-боксы в карусель?
Не со встроенной настройкой. виджет не имеет карусельного режима. сохраните флип-бокс в качестве шаблона и покажите его в Изображение Карусель или петлевую сетку, или вместо этого разложите карты в упаковочном контейнере.
Чем отличается от флип-бокса Elementor Pro?
Элементор Про имеет шесть эффектов с направлением и глубиной 3D, опцию ссылки "весь ящик" и нуждается в плане Элементор Про. Flipbox работает на Элементоре без Про, имеет 6 включенных анимаций и 22 с Master Addons Pro, два дизайна значков или изображений, и связывает всю карту через расширение Wrapper Link.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
