Элементор - мощный конструктор страниц, который позволяет с легкостью создавать потрясающие веб-сайты, а его базовый виджет Flipbox предлагает простой способ добавить интерактивные 3D-эффекты. проблема? Это профессиональная функция, дизайн и анимация ограничены.
Мастер Аддоны - это мощный Elementor аддон, который предоставляет виджет флипбокс, а также. он бесплатен и позволяет большую настройку, чем виджет Elementors Flipbox.
С помощью Master Addons можно создавать визуально яркие 3D-флипбоксы, которые перемещают, преобразуют и вовлекают пользователей способами, которые виджет Elementor по умолчанию просто не может.
В этом руководстве мы покажем вам, как создавать первоклассные 3D-флипбоксы с Master Addons и создавать привлекательные дизайны, которые выделяются.
Создание 3D-флипбокса Elementor с главными аддонами
Давайте по кирпичикам и создавать свои флипбокс использование Мастер аддоны. К концу вы должны иметь очень четкое понимание того, как создать свой собственный уникальный.
Шаг 1: Установка главных дополнений для Elementor
Прежде чем вы сможете начать использовать виджет Master Addons Flipbox, вам необходимо это сделать установить и активировать плагин Master Addons Вот как
1. На панели управления WordPress перейдите по адресу Плагины > Добавить новое.
2. Поиск “Master Addons для Elementor” в строке поиска.
3. Нажмите Установите сейчас а потом Активировать после установки плагина.
После активации виджеты Master Addons, включая Flipbox, будут доступны в редакторе Elementor.
Шаг 2: Добавление виджета Flipbox
Теперь, когда плагин установлен, добавим Flipbox на вашу страницу
1.Откройте свою страницу в редакторе Elementor.Выберите Flexbox или сетку в качестве макета.
2. На левой панели найдите Флипбокс. Вы должны увидеть виджет Flipbox с “МАметка ”.
3. Перетащите Флипбокс виджет в нужный раздел вашей страницы Здесь важно отметить, что всякий раз, когда вы работаете с флипбоксами, это так рекомендуется использовать Flexbox чтобы убедиться, что ваши флипбоксы выглядят хорошо.
После добавления на вашем холсте появляется базовый дизайн флипбокса, готовый к настройке.
Шаг 3: Создание 3D-флипбокса Elementor
Теперь мы достигли настроек, которые вы можете настроить, чтобы получить трехмерный эффект премиум-класса на вашем флипбоксе.
Сначала.
1. Пресет стиля
В предустановленном стиле вы устанавливаете вариация дизайна и стиль анимации
Вариант дизайна позволяет настроить переднюю часть коробки Вы можете установить его на Дефолт, Изображение, Диагональ, Передняя икона.
С помощью стиля анимации вы можете точно выбрать, как будет анимирован ваш флипбокс.
Мастер-аддоны имеет 20+ премиум анимации доступных От простого горизонтального и вертикального флипа до 3D Флип, кубическая анимация, эффекты опрокидывания и т. д.
Мастер Аддоны дает вам выделенную 3D флип анимацию, которая дает ваши флипбоксы динамическое ощущение, Вы даже можете настроить флип стиль этой анимации, Как только вы его выберите, новый вариант появится в “Стильвкладка "”п" в разделе "Общие настройки": 3D-флип-стиль.
2. Переднее содержимое
Нажмите на Флипбокс виджет для его редактирования.
Под Содержание вкладка, вы увидите поля для добавления контента для Фронт Коробка. Вы можете добавить сюда заголовок, описание, а также изображение или значок.
3. Содержание спины
Прокрутите вниз до Назад Содержание раздел в том же Содержание вкладка.
Аналогично, добавьте контент, который вы хотите отображать при переворачивании флапбокса. Вы можете добавить новый заголовок, текст или кнопку вызова действий.
Вы можете стилизовать обе стороны флапбокса отдельно, используя Стиль вкладка для настройки шрифтов, цветов, набивки, границ и многого другого для каждой стороны.
Шаг 4: Улучшение 3D-флипбоксов с другими расширениями
Мастер-аддоны для Elementor не просто останавливаются на базовых функционалах флипбоксов (flipbox) (inductit) выводит ваш флипбокс на совершенно новый уровень с множеством расширений, предназначенных для добавления интерактивности, плавной анимации и привлекательных эффектов.
Будем исследовать мощные возможности, позволяющие усовершенствовать флипбокс, сделав его более динамичным, визуально увлекательным, удобным для пользователя.
Хотите ли вы создавать расширенные 3D-преобразования, добавлять эффекты параллакса или точно настраивать входную анимацию, Master Addons предлагает все необходимое, чтобы вывести ваши флипбоксы на новый уровень.
Преобразует:
- В Продвинутый таб, найдешь Преобразует настройки.
- Здесь вы можете настроить вращение флипбокса на осях X, Y или Z для создания более сложных 3D-эффектов.
- Поиграться с масштаб, перевестии перекос опции для еще более динамичного флипбокса.
Реллакс (эффект параллакса):
- Чтобы включить эффект Реллакса, перейдите к Продвинутый вкладка и прокрутка Реллакс настройки.
- Включите эффект и отрегулируйте скорость прокрутки чтобы создать эффект параллакса, при котором флипбокс движется со скоростью, отличной от скорости остального контента, по мере прокрутки пользователей.
Плавающие эффекты:
- Добавьте плавающие эффекты (Pro), чтобы флипбокс плавно дрейфовал в цикле. Эту опцию можно найти под Эффекты движения раздел.
- Выберите тип движения (например, плавающий вверх или вниз) и отрегулируйте интенсивность по своему вкусу.
Советы по работе:
- Master Addons также позволяет добавлять Советы по инструментам в ваш флипбокс, которые появляются, когда пользователи навевают курсор на элементы. всплывающие подсказки могут предоставить дополнительную информацию или контекст, не загромождая ваш дизайн.
- Вы можете включить и настроить всплывающие подсказки как для переднего, так и для заднего содержимого флипбокса в настройках "Дополнительно".
- Настройте текст подсказки, положение (верхнее, нижнее, левое или правое) и стиль (цвета, размер шрифта) в соответствии с вашим дизайном.
Некоторые другие полезные расширения
- Под Эффекты движения вкладка, включить Входная анимация чтобы применить эффект привлечения внимания, когда на странице появится флапбокс.
- Вы можете выбирать из различных анимаций, таких как затухание, слайд или отскок, чтобы флипбокс появлялся при входе в окно просмотра.
- Если вам нужна плавная анимация раскрытия при переворачивании флипбокса, включите Раскрывать вариант под Продвинутый настройки.
- Эта функция позволяет постепенно раскрывать обратное содержимое флипбокса, создавая отполированный переход.
- Использовать Условия отображения чтобы установить правила, когда и где появится флипбокс Вы можете управлять видимостью на основе типов устройств (рабочий стол, планшет, мобильный телефон) или даже условий, таких как положение прокрутки.
Предварительный просмотр и завершение работы с Flipbox
Как только вы настроили свой флипбокс, самое время увидеть его в действии.
- Нажмите на значок глаза в нижней части панели Elementor для предварительного просмотра флипбокса в редакторе.
- Проверьте, как ведет себя флипбокс на разных устройствах (настольных, планшетных, мобильных), чтобы убедиться, что он отзывчив и везде отлично выглядит.
- Вносите все окончательные коррективы в дизайн, скорость анимации, положение, пока не будете довольны тем, как это выглядит.
Удовлетворенный, нажмите Публиковать чтобы ваш флипбокс находился на вашем сайте.
Заключение
Мастер-аддоны для Elementor добавляют больше остроты стандартному флипбоксу, предлагая ряд расширенных функций, которые позволяют создавать по-настоящему динамичные интерактивные дизайны.
Чтобы использовать эффекты 3D-анимации, есть такие варианты, как преобразования, эффекты параллакса, плавные переходы раскрытия и многое другое, которые вы можете использовать, чтобы оживить свои флипбоксы способами, выходящими за рамки базовой анимации.
Следуя этому руководству, вы можете легко добавить привлекательные флипбоксы на свой сайт, повышая как вовлеченность пользователей, так и визуальную привлекательность. Итак, погрузитесь в Master Addons и начните экспериментировать, чтобы создать потрясающие 3D флипбоксы, которые произведут впечатление на ваших посетителей!
