Флипбокс
Что, если бы один объект недвижимости на вашей странице мог рассказать две истории? с Master Addons Flipbox Element, он может. это не просто карта — это динамичный, двусторонний опыт. начните с убедительной лицевой стороны с изображением значка и заголовка. Затем, при наведении, он элегантно переворачивается, чтобы раскрыть подробные описания, призывы к действию или дополнительную информацию на оборотной стороне. Выбирайте из нескольких предустановок стиля и более дюжины плавных анимаций. Это идеальные элементы для основных моментов функций, витрин услуг, профилей команд или творческих призывов к действию, которые удивляют и привлекают.
Предварительный набор нескольких наборов дизайна и анимации
Во-первых, выберите свой базовый образ из четырех предустановок стиля: классический по умолчанию, переднее изображение, диагональ и передний значок. Каждый предустановленный вариант меняет первоначальный визуальный макет. Затем воплотите его в жизнь, выбрав стиль анимации из огромной библиотеки. Выберите простой Flip Horizontal или Vertical, сложный 3D Flip, плавный Fade или творческие варианты, такие как вращение куба, Rollover или Diagonal. Эта комбинация позволяет вам идеально соответствовать поведению flipbox энергии вашего сайта (тонко или драматично).
- Фундаменты четырех стилей: выбирайте из предустановленных дизайнов по умолчанию, переднего изображения, диагонали и переднего значка.
- Обширная библиотека анимации: выберите одну из 15+ анимаций, включая Flip, Fade, Cube, Rollover и 3D Flip.
- Контролируйте эффект: анимация по умолчанию запускается при наведении, создавая интуитивно понятный интерактивный опыт.
Двусторонний конструктор контента
Создайте два полных лица контента независимо. для передней панели добавьте значок (выберите стили "Сложенный" или "С обрамлением"), сильный заголовок и короткий тизер. Описание. Установите тег HTML выравнивания и заголовка для SEO. Для задней коробки повторите процесс с различным содержанием. разверните описание, добавьте больше деталей или полностью сосредоточьтесь на вызове к действию. Этот двухэтапный подход позволяет вам дразнить передней частью и доставлять задней частью.
- Независимые панели контента: полностью отдельные элементы управления содержимым передней и задней коробки (значок, заголовок, описание).
- Параметры стиля значков: представьте значки в виде "Сложенные" (сплошные) или "С обрамлением" (с рамкой) непосредственно на вкладке "Содержимое".
- Стратегический обмен сообщениями: используйте переднюю часть для получения выгоды от заголовка и заднюю часть для получения подробностей, функций или социальных доказательств.
- Структурный контроль: установите выравнивание (слева, в центре, справа) для контента с каждой стороны независимо.
Кнопка CTA с наведением курсора
Задняя рамка не только для информации — это для действия. Включите четкую кнопку действия с настраиваемым текстом кнопки (например, “Buy Now” или “Learn More”) и ссылку. Затем разработайте ее до совершенства. стилизуйте нормальное и наведите состояние отдельно, контролируя цвет текста, типографию, цвет фона, границу, радиус границы и набивку. Это превращает раскрытие флипбокса в прямой путь к преобразованию, и все это без необходимости использования отдельного виджета.
- Прямой вызов: добавьте кнопку с текстом и ссылкой, которая появляется на заднем поле после переворота.
- Профессиональный стиль кнопок: используйте элементы управления радиусом границы, набивкой и фоном для полированной кнопки.
Часто задаваемые вопросы для Flipbox
Что происходит на мобильных устройствах, где нет зависания?
Взаимодействие переворота обычно запускается при нажатии на мобильные устройства. пользователь нажимает на переднюю коробку, чтобы перевернуть ее назад, и может снова нажать, чтобы перевернуть назад. Это делает его полностью функциональным и интуитивно понятным на сенсорных экранах.
Могу ли я использовать изображение вместо значка на лицевой стороне?
Да! один из пресетов стиля называется “Front Image.” Выбор этого пресета изменит селектор значков на загрузчик изображений, что позволит вам использовать фотографию, логотип или графику в качестве основного изображения на передней панели.
Отзывчиво ли содержимое флипбокса?
Абсолютно. текст, значки, и кнопка внутри будет масштабироваться и обертываться соответствующим образом на разных размерах экрана.The Flip Box Высота вы также устанавливаете отзывчивый, но вы можете настроить его специально для мобильных с помощью адаптивного режима редактирования Elementor, если это необходимо.
Какое хорошее реальное применение этому элементу?
- Сервисные коробки: Передняя часть: Значок и имя сервиса (например, “Web Design”).Назад: Описание & “Получите кнопку Quote”.
- Профили команд: Передняя часть: Фото и имя. Назад: Биография и социальные ссылки.
- Характеристики продукта: Передняя часть: Значок функции & название. Назад: Подробные характеристики & “Просмотреть ссылку на продукт”.
- Статистика: Фронт: Большое число. Назад: Что это значит и ссылка на источник.
Могу ли я связать весь флипбокс со страницей без отдельной кнопки?
По умолчанию вы можете добавить ссылку только на кнопку Но с помощью нашего расширения ссылки Wrapper вы можете связать флипбокс entier.
Как правильно выбрать анимацию?
Учитывайте темп вашего сайта. для корпоративных или чистых сайтов используйте Flip Horizontal/Vertical или Fade. для креативных, технических или портфельных сайтов 3D Flip, Cube или Rollover могут добавить больше индивидуальности.Предварительный просмотр нескольких — лучший вариант, который кажется гладким и не отвлекает от вашего сообщения.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
