Флип-бокс - это карта с двумя гранями. на лицевой стороне значок и короткий заголовок. Наведите на него, и карта повернется к задней грани, удерживающей описание и кнопку. Elementor Pro поставляет один. вам не нужен Pro, чтобы получить его.
Бесплатный Мастер-аддоны Виджет Flipbox добавляет один к обычному Элементору, с более чем тридцатью флип-анимации, оба лица стилизованы независимо, и кнопка, которая связывает, где вы хотите. Это руководство охватывает сборку, один параметр, который исправляет большинство проблем переворота, и мобильное поведение, которое ловит людей после публикации.
Что такое флипбокс на самом деле
Флип-бокс - это двусторонняя карта, которая меняет лица на зависании или касании. На лицевой стороне изображен значок или изображение с заголовком. На оборотной стороне отображается более длинное описание и обычно кнопка. Он сохраняет сетку чистой, сохраняя при этом детализацию, потому что описание находится за картой, а не под ней.
Вы показываете сначала сканируемый ряд, затем пусть любой, кто заинтересован, дергает детали самостоятельно. никому не нужно читать стену копии, чтобы найти тот сервис, за которым они пришли. Это причина обратиться к одному.
Четыре шаблона, с которыми он хорошо справляется:
- Сервисные сетки. Фронт называет службу, сзади объясняет ее и ссылается на страницу службы.
- Командные карты. Фото и имя на лицевой стороне, биография и ссылка на оборотной стороне. если ничего не нужно скрывать, равнина секция членов команды является более простой сборкой.
- Особенности плитки. Значок впереди, спецификация позади него.
- Стат-карты. Большое число спереди, которое меняется на то, что означает число.
Есть ли у Elementor виджет флип-бокса?
У Elementor Pro есть такой. Free Elementor нет. Это различие имеет значение, потому что множество учебных пособий размывают его, а затем люди отправляются на охоту за виджетом, которого нет в их панели.
Итак, есть четыре честных пути к флипбоксу, и каждый просит что-то свое:
| Маршрут | Стоимость | Чего это тебе стоит |
|---|---|---|
| Флип-бокс Elementor Pro | Платная лицензия | Нужен Pro на каждом сайте вы строите. охватывает основные эффекты переворачивания, скольжения и масштабирования. |
| Ручное CSS 3D-преобразование | Бесплатно | Никакого визуального редактирования. Хорошо, пока клиент не попросит изменить копию и вы не вернетесь в таблицу стилей. |
| Мастер Аддоны Flipbox | Бесплатно | Еще один плагин. Оба лица разработаны в обычном редакторе, с предустановками и более тридцати анимаций. |
| Другие бесплатные дополнения | Бесплатно | И Fancy Elementor Flipbox, и HappyAddons делают это. В любом случае вы принимаете цикл обновления другого плагина. |
Если вы уже платите за Elementor Pro, используйте его Flip Box и пропустите дополнительный плагин. нет приза за установку того, что вам не нужно. если вы на бесплатном Elementor, остальная часть этого руководства - ваш маршрут.
Прежде чем начать
- WordPress с установленным и активным элементом Elementor.
- Установлены и активны главные дополнения для Elementor. Это бесплатно на WordPress.org и работает на более чем 30 000 сайтах.
- Значки, копировать и ссылка назначения для обоих лиц. Сортировать эти первые. Дизайн карты, пока вы изобретаете копию, как вы в конечном итоге с “Lorem ipsum” на живой странице.
Создайте флип-бокс шаг за шагом
Шаг 1: Включите виджет Flipbox
Мастер Аддоны держит каждый виджет за тумблером, поэтому те, которые вы не используете, никогда не загружаются. Перейти к Мастер-аддоны → Настройки, открой Элементы вкладка, найти Flipbox, включить, сохранить.
Нет переключения? Обновить плагин. вкладка "Элементы" выросла между версиями, а старые сборки группируют вещи по-разному.
Шаг 2: Бросьте виджет на страницу
Редактировать любую страницу с Elementor, тип “Flipbox” в поиск виджета, перетащить его в контейнер. загружается с образцом содержимого на обеих сторонах, уже переворачивая.
Наведите указатель мыши на него в превью, прежде чем что-то менять. вам нужно почувствовать скорость анимации по умолчанию, потому что именно такой сеттинг люди чаще всего оставляют в покое, а затем задаются вопросом, почему карта кажется вялой.
Шаг 3: Выберите вариант дизайна
Вкладка "Содержимое" открывается на a Стиль Пресет секция, содержащая два элемента управления: Вариация дизайна и Стиль анимации. Под ними сидят передняя коробка, задняя коробка и кнопка действия.
Дизайн Вариация меняет как расположена лицевая сторона Практическое решение заключается в том, несет ли значок или фотография ваше сообщение. вариации под значками подходят для сервисных сеток и строк функций. вариации под руководством изображений подходят членам команды, плиткам портфолио и картам продуктов, где лицо или фотография делают больше работы, чем любой значок мог бы.
Шаг 4: Выберите анимацию
Выпадающий Animation Style несет более тридцати эффектов Они делятся на четыре группы:
- Переверните по горизонтали/переверните по вертикали. Классическое вращение карты на каждой оси. читабельный, и безопасный по умолчанию, когда у вас нет причин выбирать что-либо еще.
- Куб (сверху вниз, сверху вниз, слева, справа). Вращение трехмерного куба между гранями. драматический. используйте его на герое, а не на сетке из восьми.
- 3d Флип, Затухание, Затухание, Ролловер. Более мягкие раскрытия для страниц, которые уже имеют движение в другом месте.
- Направления скольжения и диагональ. Задняя грань вталкивается из стороны или угла. Они хорошо читаются на мобильном телефоне, где вращение может показаться тяжелым.
Выберите одну и обязуйтесь к ней по всему разделу. шесть карт переворачивание шесть разных способов не выглядит игриво, это выглядит сломанным. единственная веская причина смешивать, когда два раздела должны чувствовать себя намеренно разделенными.
Хотите видеть стили движения рядом, прежде чем совершить? Руководство по эффектам анимации элементара предварительный просмотр общих и Прохождение 3D-качалки углубляется в настройки перспективы за параметрами Cube и 3d Flip.
Шаг 5: Напишите лицевую сторону
Открытый Передняя Коробка. Это лицо, которое должно заслужить зависание, поэтому оно получает меньше копии, чем вы думаете, а не больше.
- Стиль и значок значка. Вытащите из библиотеки значков или переключитесь на изображение. Master Addons поставляет дополнительные библиотеки значков beyond Font Потрясающие, если они вам нужны.
- Название. Три-пять слов. ему приходится выживать на одной строке при ширине таблетки.
- Описание. Одна строка. Поля заголовка и описания имеют a Пишите с помощью ИИ встроенный в панель вариант, если застрял.
- Выравнивание и название HTML-тега. От H1 до H6. Установите это правильно. сетка из шести флип-боксов с заголовками H2 внутри раздела, который уже имеет H2, дает вам семь H2 на странице и инструмент аудита, который помечает его. та же самая осторожность применяется к любому повторяющемуся блоку в a пользовательская компоновка элементара.
Шаг 6: Напишите заднюю поверхность
Те же поля, другая работа. Задняя коробка берет свой значок, заголовок, описание, выравнивание и тег заголовка, так что два лица не должны совпадать вообще.
Правило, которое делает этот раздел полезным: передняя дает обещание, задняя держит его. Если на лицевой стороне написано “Web Design”, на оборотной стороне написано, что на самом деле включено, и ссылки на страницу. Кто-то зависал, потому что их поймала лицевая сторона. Отплатите за это информацией, а не другим слоганом.
Два-три предложения. длиннее и карте тесно на ширине планшета, где карта уже, но текст не сжался.
Шаг 7: Добавьте кнопку действия
The Кнопка Действия раздел устанавливает метку и ссылку, и кнопка отображает только на задней стороне. Установите текст на то, что на самом деле доставляет следующая страница. “Learn More” в порядке. “См. Ценообразование” лучше, когда ссылка идет на ценообразование.
Пропустить кнопку полностью на чисто информационной сетке Карта, которая переворачивается на описание и останавливается, является совершенно хорошей картой Добавить его, когда раздел делает конверсионную работу.
Единственный параметр, который исправляет большинство жалоб на флипбоксы
Переключиться на Стиль вкладка и открыть Генерал. Там называется контроль Высота флип-бокса.
Установите.
Оставьте его неустановленным и каждый размер карты сам по себе, в зависимости от того, какое лицо имеет больше содержимого, поэтому размер карты изменяется в середине зависания, поскольку более длинная задняя сторона переворачивается. ряд скачет. карты, которые должны совпадать, оказываются на разной высоте, потому что одно описание службы работало на две строки длиннее остальных. В документации Flipbox это указано как первый рабочий совет, и это настройка, которую чаще всего оставляют в покое.
200px разумный пол. 350px подходит большинству сетей функций. установите его один раз на уровне контейнера, и каждая карта в ряду совпадает.
Пока вы в Общем, держите продолжительность анимации между 400ms и 700ms.Faster читается как глюк.Slower и курсор перешел дальше, прежде чем флип закончит.
Стиль двух лиц
Ниже общего вы отделяетесь Передняя Коробка и Задняя коробка панели, каждая со своим цветом фона или изображением, цветом заголовка и описания, типографикой и цветом значков.
Сделайте эти два лица действительно разными. Бледно-серый передний перелистывание на немного более бледно-серую спину выглядит как ошибка рендеринга, а не как раскрытие. Большинство дизайнов имеют мягкий оттенок спереди и фирменный цвет сзади, что делает переворот очевидным из-за всей комнаты.
Стиль нормальных состояний кнопки и наведение на нее, чтобы соответствовать кнопкам везде на сайте. кнопка флип-бокс, которая совсем не похожа на другие ваши CTA, читается как встроенное объявление.
Делаем всю карту кликабельной
По умолчанию ссылка сидит на кнопке, а не на карте Люди пытаются щелкнуть тело карты, ничего не происходит, и они уходят Это мелочь, которая стоит реальных кликов.
Исправления нет в виджете Flipbox. Это Обертка Ссылка расширение, отдельный модуль, который вы включаете в настройках Master Addons, который заворачивает любой элемент в одну ссылку. включите его, затем примените его к контейнеру флип-бокса.
Одно предостережение: если вся карта где-то ссылается, а кнопка где-то еще, то, на какую из них посетитель попадает первым, тот выигрывает, а другая никогда не используется. Направьте их в тот же пункт назначения, или опустите кнопку.
Мобильный: та часть, которая вылавливает людей
Телефоны не зависают. Вместо этого переворот срабатывает при нажатии. Первое нажатие переворачивает карту назад, второе нажатие переворачивает ее домой, и кнопке требуется собственное нажатие, как только задняя часть отображается.
Это два нажатия, прежде чем кто-либо достигнет вашего призыва к действию. на рабочем столе задняя поверхность стоит движения курсора. на мобильном он стоит целенаправленных усилий, и значимая доля посетителей никогда его не тратит.
Второй нажатие также является местом, где вещи ломаются. отчеты о флип-боксе, который переворачивается вперед, но не переворачивается обратно регулярно появляются в потоках сообщества Elementor, и предварительный просмотр редактора не воспроизводит сенсорное поведение достаточно надежно, чтобы поймать его. Проверьте его на реальном телефоне перед отправкой, потому что адаптивный режим в редакторе не покажет вам этого.
Что приводит к правилу, которое имеет большее значение, чем любой выбор стиля здесь:
Никогда не размещайте важную информацию только на задней стороне лица. Если мобильный посетитель должен иметь его, цена, номер телефона, адрес или ссылка бронирования идет на лицевой стороне, или где-то с карты полностью. Относитесь к задней поверхности как к месту для дополнительных деталей, а не для чего-то, от чего зависит страница.
Карта масштабируется и оборачивается по точкам останова, а высота отзывчива, поэтому вы можете затянуть ее для мобильных устройств в режиме реагирования Elementor. Если сетка сломается на ширине, которую вы не планировали, проверьте контрольные точки стандартного элементара сначала, потом добавить пользовательские точки останова если вам нужны размеры, Elementor не отправляется.
Доступность, честно
Флип-бокс скрывает половину своего содержимого за взаимодействием, которое пользователь клавиатуры и программа чтения с экрана не могут выполнить так, как может пользователь мыши. стоит разобраться до того, как раздел выйдет в эфир, а не после.
Две вещи делают его оправданным:
- Добавьте видимое состояние фокуса таким образом, пользователь клавиатуры, просматривающий страницу, может увидеть и запустить карту.
- Сделайте обратный контент доступным другим способом, ближайший раздел, связанная страница, складной блок Если единственный путь к описанию вашего сервиса - это зависание, у некоторых посетителей нет пути.
Поисковики индексируют текст на обратной стороне, так как он сидит в DOM, а не загружается по требованию, поэтому скрытие копии за флипом не удаляет его со страницы, насколько далеко заходит сканирование. сможет ли человек до него добраться - отдельный вопрос, и тот, на который нужно ответить первым.
Когда пропустить флипбокс
Три ситуации, когда другой виджет служит вам лучше.
Задний текст важен для каждого читателя. Если описание нужно всем, не заставляйте их зависать под него. ан Инфобокс показывает значок, заголовок и строку копии, при этом ничего не скрыто и нет взаимодействия для тестирования на четырех устройствах.
Вам нужно движение, а не второе лицо. Если апелляция представляет собой эффект ловкого зависания и у вас нет подлинного контента на обратной стороне, Преобразует расширение добавляет 3D-движение к любому элементу, не изобретая копию, чтобы заполнить лицо, о котором никто не просил.
Страница уже движется. Параллакс, прокрутка показывает, анимированный герой, а теперь сетка переворачивания карт. мимо определенной части движения посетитель перестает регистрировать любой из него, и каждый эффект больше работы для браузера. подсчитайте, что уже на странице, прежде чем добавлять больше, и если он загружается медленно, зафиксируйте скорость прежде чем добавить еще одну анимацию.
И мягкая кепка, которую стоит уважать: более шести или восьми флип-боксов на одной странице превращаются в трюк. Один или два раздела - это сладкая точка.
Бесплатно против Pro
Виджет Flipbox находится в бесплатном плагине.Каждый вариант дизайна, каждая анимация, оба лица стилизованы независимо, неограниченное количество сайтов.Pro не разблокирует флип-бокс, он разблокирует другие вещи вокруг него.
| Особенность | Бесплатно | Про |
|---|---|---|
| Виджет Flipbox, все варианты дизайна | Да | Да |
| Все более 30 флип-анимаций | Да | Да |
| Отдельный стиль для обоих лиц | Да | Да |
| Высота флип-бокса и отзывчивое управление | Да | Да |
| Расширение Wrapper Link | Да | Да |
| Полная библиотека виджетов 80+ | Частичный | Да |
| Конструктор виджетов и наборы шаблонов | Нет | Да |
| Приоритетная поддержка | Сообщество | Да |
Если флип-бокс - это то, за чем вы пришли, бесплатный - это весь ответ. Если вы восстанавливаете одну и ту же структуру карт на клиентских сайтах, Виджет Строитель сохраняет его один раз в качестве многоразового виджета, и это находится на платном уровне. Полная разбивка на страница ценообразованияи более широкий взгляд на то, что еще доступно в нашем журнале сводка дополнений Elementor.
Часто задаваемые вопросы
Что такое флип-бокс в Elementor?
Флип-бокс - это двусторонняя карта. на лицевой стороне изображен значок или изображение с заголовком, а на наведении или касании он поворачивается на заднюю грань с более длинным описанием и обычно кнопкой. Он используется для сервисных сеток, командных карт, плиток функций и карт статистики, где чистый вид спереди плюс опциональная деталь превосходит блок текста.
Виджет флип-бокса бесплатен в Elementor?
Собственный виджет Flip Box от Elementor является частью Elementor Pro, поэтому он не является бесплатным. Виджет Flipbox Master Addons включен в бесплатный плагин на WordPress.org и работает с обычным Elementor, поэтому вы можете создать его без лицензии Pro.
Как добавить виджет флип-бокса в Elementor?
Включить Flipbox под Master Addons → Настройки → Элементы, затем открыть страницу в редакторе Elementor, ввести “Flipbox” в поиск виджетов, и перетащить его в контейнер Если он не отображается в поиске, то тумблер еще не включен или редактору требуется перезагрузка.
Почему мой флипбокс не переворачивается обратно на мобильный телефон?
На сенсорном экране переворот выполняется на касание, а не на наведение курсора, поэтому первое нажатие показывает обратную сторону, а второе нажатие должно вернуть его. Когда второе нажатие ничего не делает, это обычно конфликт в обработке нажатия. тестируйте на реальном устройстве, а не в адаптивном режиме, держите одну карту в строке, пока изолируете ее, и никогда не размещайте обязательную к просмотру информацию только на задней стороне.
Могу ли я использовать изображение вместо значка на лицевой стороне?
Да. переключите стиль значка в разделе "Передняя рамка", чтобы использовать изображение, или выберите вариант дизайна, управляемый изображением. Вкладка "Стиль" также устанавливает фоновое изображение для любого лица, поэтому карты, полностью управляемые изображением, просты.
Могу ли я сделать щелкаемым весь флипбокс, а не только кнопку?
Не изнутри виджета. ссылка по умолчанию находится на кнопке. чтобы сделать всю карту кликабельной, включите расширение Wrapper Link в настройках Master Addons и примените его к контейнеру флип-боксов, который заворачивает всю карту в одну ссылку.
Как сохранить обе стороны карты одинакового размера?
Установите высоту флип-бокса в разделе "Общие" на вкладке "Стиль". Это дает обеим сторонам одну фиксированную высоту, поэтому размер карты не меняется в середине флипа, когда на задней стороне больше текста, чем на передней.
Сколько флип-анимаций есть у виджета?
Более тридцати, включая Flip Horizontal и Vertical, четыре направления Cube, 3d Flip, Fade, Fade Up, Rollover, направления скольжения и Diagonal.Вы выбираете по одному на карту.
Связанное чтение
- Как создать 3D-анимации Elementor Flipbox
- Документация виджета Flipbox, каждый контроль, по порядку
- Эффекты анимации элементара
- Виджет точки доступа изображениядля выделения областей внутри одного изображения, а не для переворачивания целых карт
- Виджет Infoboxстатическая альтернатива, когда ничего не следует скрывать
- Свободные шаблоны разделов Элементор для импорта и редактирования
