Бесплатный виджет флип-бокса Elementor с анимацией флип-гибкой Hover
Флипбокс является бесплатным виджетом флип-бокса Master Addons для Elementor. на лицевой стороне отображается значок или изображение с заголовком и коротким текстом, а при наведении карты поворачивается на заднюю сторону с более подробной информацией и кнопкой действия. бесплатный плагин включает в себя дизайн значков по умолчанию и переднего ряда и 6 анимаций: Флип Горизонтальный, Флип Вертикальный, Затухание, Флип-бокс, Флип-бокс Затухание и Затухание. Мастер Аддоны Про добавляет дизайн Front Image и Diagonal и еще 16 анимаций, включая Cube, Rollover и 3D Flip, всего на 22. у Free Elementor нет виджета flip box, так что это работает без Elementor Pro.
Вариации дизайна и флип-анимации
Вариация дизайна устанавливает расположение лицевой стороны: значок по умолчанию и лицевая сторона бесплатны, переднее изображение и диагональ нуждаются в Pro. Стиль анимации устанавливает, как карта поворачивается. бесплатно: переверните по горизонтали, переверните по вертикали, выцветайте, переверните коробку, переверните коробку. Pro добавляет четыре направления кубика, затухание скрытия, затухание скрытия, четыре направления скольжения, два диагональных слайда, затухание наружу, нананан, переворот и 3D-перевертывание, которое имеет свою собственную настройку направления.
- Всего 22 анимации: 6 бесплатных и 16 с Pro.
- Флип выполняется при наведении курсора на рабочем столе и при нажатии на сенсорные экраны.
- Используйте одну анимацию в каждом разделе, чтобы ряд карт казался последовательным.
Двусторонний конструктор контента
The Передняя Коробка и Задняя коробка у каждого есть свой значок с видом по умолчанию, в стопке или рамке и формой круга или квадрата, заголовком, описанием, выравниванием и тегом заголовка. держите переднюю часть короткой, как имя службы, и используйте заднюю часть для объяснения. на вкладке Стиль каждое лицо получает свой фон, цвет заголовка и описания, типографику, цвета значков и рамку.
- Отдельное содержание и укладка для каждого лица.
- Заголовок HTML-тег на обеих сторонах, поэтому сетка карт сохраняет чистый порядок заголовков.
- А Высота флип-бокса настройка в общем сохраняет обе грани одинакового размера.
Кнопка CTA с наведением курсора
The Кнопка Действия показывает на задней стороне с вашим Кнопка Текст и ссылка.Стиль это для Нормальный и Навести с цветом текста, фон, граница, радиус границы и заполнение, плюс типографика. кнопка является единственной ссылкой внутри виджета. чтобы сделать всю карту кликабельной, добавить бесплатно Обертка Ссылка расширение виджета.
- Используйте определенную метку, такую как “См. Ценообразование”, когда именно туда идет ссылка.
- Пропустить кнопку на чисто информационных карточках.
- Если вы используете Wrapper Link, укажите кнопку на той же странице.
Флипбокс 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 |
Элементор Про проще, если вы хотите, чтобы ссылка "все ящик" была встроена. Мастер-аддоны подходят для бесплатных сайтов Элементор и дают больше вариантов анимации с Pro. Для статической карты, в которой ничего не скрыто, используйте бесплатную Информационный ящик виджет.
Идеи и советы флип-боксов
Откидная коробка сохраняет сетку чистой, но при этом несет детали, потому что описание находится за картой, а не под ней. Это хорошо работает для сервисных сеток, командных карт с фотографией спереди и биографией сзади, плиток и карт статистики, которые перелистываются к тому, что означает число.
- Установите высоту флип-бокса. Без него более длинная задняя поверхность изменяет размер карты по мере ее поворота и прыжка ряда.
- Сделайте лица другими. Оттенок спереди и цвет вашей марки сзади делают переворот очевидным.
- План для телефонов. Сенсорные экраны не имеют зависания, поэтому карта переворачивается на касание, и кнопка нуждается во втором касании. тест на реальном телефоне.
- Держите важные детали спереди. Цены, номера телефонов и ссылки на бронирование не должны жить только на задней стороне.
- Ограничьте движение. Одна или две строки флип-боксов на странице читаются лучше, чем шесть разных анимаций.
Как добавить флип-бокс в Elementor
Вам нужен Elementor и бесплатный плагин Master Addons от WordPress.org.
- Убедитесь, что Flipbox включен ниже Мастер-аддоны, виджеты.
- В редакторе Elementor выполните поиск Флипбокс и перетащить в контейнер.
- Выберите вариант дизайна и стиль анимации, затем наведите курсор карты, чтобы просмотреть его.
- Заполните переднюю и заднюю коробки: значок, заголовок, описание и тег заголовка.
- Добавьте текст кнопки действия и ссылку.
- В стиле, общий, набор Высота флип-бокса таким образом, карта не меняет размер среднего переворота, а затем стилизует каждое лицо.
Для 3D эффектов, читайте Как создать 3D-анимации Elementor Flipbox. Каждая настройка находится в. Настройки виджета Flipbox.
Часто задаваемые вопросы для Flipbox
Как работает флип-бокс на телефонах?
Сенсорные экраны не имеют зависания, поэтому карта переворачивается при нажатии На кнопку задней поверхности нужно собственное нажатие после переворота Сохранить информацию, которую необходимо увидеть на лицевой стороне, и протестировать на реальном устройстве.
Могу ли я использовать изображение вместо значка на лицевой стороне?
Да, с вариацией дизайна Front Image, которая является опцией Master Addons Pro.В бесплатной версии используйте значок на лицевой стороне или установите фоновое изображение для лица на вкладке Стиль.
Виджет Flipbox бесплатен?
Да. Flipbox находится в бесплатном плагине Master Addons с дизайном значков по умолчанию и переднего ряда и 6 анимациями.Master Addons Pro добавляет еще 2 дизайна и еще 16 анимаций.
Есть ли у Elementor виджет флип-бокса?
Только у Elementor Pro есть один. Free Elementor нет, поэтому на бесплатном Elementor вам нужен такой аддон, как этот виджет Flipbox.
Могу ли я связать весь флипбокс со страницей без отдельной кнопки?
Виджет связывает только кнопку, Чтобы сделать всю карту кликабельной, включите бесплатную Обертка Ссылка расширение и добавление ссылки на виджет Flipbox.
Сколько существует флип-анимаций?
22 в целом. переворачивание по горизонтали, переворачивание по вертикали, затухание, переворачивание коробки, переворачивание коробки затухание и затухание. остальные 16, включая куб, переворот и 3D переворот, нуждаются в Master Addons Pro.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение 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)
Дубликатор сообщений/страниц
