Как создать накладки и обводки флипбоксов в WordPress

Хотите добавить наложения флипбоксов и эффекты наведения изображения на ваш сайт WordPress? Даже если вы используете высококачественную тему WordPress,...

Хотите добавить наложения флипбоксов и эффекты наведения изображения на ваш сайт WordPress?

Даже если вы используете высококачественную тему WordPress, вы можете чувствовать себя ограниченным в возможностях настройки. Флипбоксы и наведенные изображения добавляют привлекательные анимированные эффекты на ваш сайт.

В этой статье мы покажем вам, как добавить наложения флипбоксов и эффекты наведения изображений на ваш сайт WordPress.

Что такое флипбокс?

Флипбокс — это поле, которое переворачивается, когда вы наводите на него курсор мыши. Вы можете добавить этот эффект анимации наведения курсора на определенные разделы вашего сайта, включая текстовые поля и изображения.

Термин происходит от уникальной функции «переворачивания», которая происходит при наведении курсора мыши на изображение. Вы можете управлять тем, как изображение переворачивается, а также информацией и дизайном обеих сторон изображения.

Если ваш сайт относительно статичен, то вы можете использовать эффект флипбокса, чтобы сделать его более интерактивным.

Например, вы можете добавить флипбокс с наведением изображения на страницу с ценами на товары. Таким образом, когда пользователи наводят курсор на ваши ценовые уровни, цена будет отображаться на экране.

Или, если вы фрилансер, вы можете добавить логотипы компаний, с которыми вы работали, которые будут перелистываться и давать ссылку на каждый проект.

Хотя эти анимированные эффекты могут улучшить пользовательский опыт вашего сайта, важно не переборщить.

Думайте об эффекте флипбокса, как о добавлении приправы к блюду. Он нужен, чтобы усилить существующие ароматы и ингредиенты, но слишком много, и это испортит блюдо.

Учитывая это, давайте рассмотрим, как можно добавить наложения flipbox и эффекты наведения изображения на ваш блог или сайт WordPress.

Как создать наложения и эффекты наведения Flipbox в WordPress

Вы можете добавить флипбоксы и эффекты наведения на сайт WordPress, используя различные методы, такие как конструктор страниц Elementor или добавление пользовательского CSS.

Тем не менее, мы рекомендуем использовать плагин Flipbox — Awesomes Flip Boxes Image Overlay. Этот плагин гибкий и простой в использовании. Это лучший плагин WordPress для флипбоксов и наведения изображений.

Бесплатная версия плагина предлагает вам скорость и простоту. После установки плагина вы можете быстро добавить красивые флипбоксы на свой сайт.

Если вам нужно больше возможностей для настройки, то вы можете перейти на премиум-версию плагина. Это позволит вам управлять цветами ваших флипбоксов и добавлять пользовательские CSS.

Вы можете обнаружить, что существующие шаблоны уже отлично выглядят при добавлении на ваш сайт, в этом случае нет необходимости в обновлении.

Первое, что вам нужно сделать, это установить и активировать плагин Flipbox — Awesomes Flip Boxes Image Overlay. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

После установки и активации плагина вы можете создать свой первый флипбокс, перейдя по ссылке Flip Box » Создать новый.

Создайте новый флипбокс

Это открывает весь выбор шаблонов.

Если этих шаблонов недостаточно, то вы можете нажать на пункт меню ‘Импорт шаблонов’, чтобы получить еще больше шаблонов, которые вы можете использовать.

Импорт шаблона flipbox

В бесплатной версии плагина есть 5 различных шаблонов на выбор, плюс еще 10 шаблонов, которые вы можете импортировать.

Чтобы импортировать новый настраиваемый шаблон, нажмите кнопку «Импорт» рядом с номером стиля.

Кнопка импорта по щелчку на флипбоксе

Теперь пришло время выбрать и начать настраивать ваш шаблон.

Вам нужно нажать на ‘Create Style’, чтобы загрузить дизайн вашего первого флипбокса.

Это вызовет всплывающее меню, где вы можете назвать свой флипбокс и выбрать макет, который вы хотите настроить.

Выберите, какой флипбокс нужно настроить

Опции 1, 2, 3 ‘Layouts’ соответствуют отдельным флипбоксам в макете. Нажмите ‘Сохранить’, как только сделаете свой выбор.

Важно отметить, что ваш окончательный дизайн будет полностью соответствовать шаблону flipbox, поэтому лучше выбрать шаблон, который похож на то, как вы хотите, чтобы он выглядел на вашем сайте.

Есть три основные вкладки, которые вы будете использовать для изменения внешнего вида вашего флипбокса: ‘General’, ‘Front’ и ‘Backend’.

Меню общих настроек Flipbox

На каждой из этих вкладок вы можете изменить шрифты, отступы и поля. Но мы считаем, что варианты по умолчанию уже выглядят отлично.

Далее мы изменим текст на обеих сторонах флипбокса.

Наведите курсор на поле перелистывания в нижней части экрана и нажмите «Изменить».

Редактирование текста предварительного просмотра флипбокса

Это вызовет всплывающее окно, которое позволит вам изменить текст на лицевой стороне, текст на задней стороне и фоновое изображение.

Чтобы изменить заголовок, отредактируйте текстовое поле ‘Front Title’ и поле ‘Font Icon:’, если вы хотите, чтобы отображалась другая иконка.

Изменение заголовка и иконки передней панели флипбокса

Если вы хотите добавить фоновое изображение, нажмите «Загрузить изображение» справа от опции «Переднее изображение».

Далее загрузите новое изображение или выберите изображение из существующей медиатеки.

Загрузите фоновое изображение для флипбокса

После этого выполните ту же серию шагов для задней части флипбокса в разделе «Настройки бэкенда».

Здесь вы можете изменить заголовок и текст, который отображается при перелистывании карточки.

Измените текст бэкенд-флипбокса

Вы также можете изменить поля ‘Backend Button text’ и ‘Link’.

Эти параметры изменяют текст кнопки и то, куда будут переходить пользователи при нажатии на нее.

Добавьте кнопку флипбокса на задней панели и ссылку

Наконец, нажмите кнопку «Загрузить сейчас», чтобы изменить фоновое изображение на задней стороне флипбокса.

Как и выше, вы можете загрузить изображение или выбрать его из медиатеки.

Загрузка фонового изображения с бэкенда

После завершения редактирования не забудьте нажать кнопку «Отправить», чтобы сохранить изменения.

Вы заметите, что ваши новые изменения сразу же появятся в окне «Предварительный просмотр.

Если вы хотите создать целый ряд флипбоксов, то нажмите на значок ‘+’ в мета-блоке «Добавить новые флипбоксы».

Добавление ряда флипбоксов

Это вызовет всплывающее окно, похожее на то, что показано выше, которое позволит вам настроить второй шорткод.

Теперь вы создали и настроили свои флипбоксы, так что пришло время добавить их на ваш сайт WordPress.

Самый простой способ сделать это — использовать прилагаемый шорткод. В правой части экрана есть мета-блок с надписью ‘Shortcode’, скопируйте туда шорткод, который выглядит как показано на рисунке ниже.

Скопируйте шорткод flipbox

Далее, перейдите на страницу или пост, где вы хотите добавить флипбокс, и вставьте ваш шорткод.

Затем нажмите «Опубликовать» или «Обновить», если ваш пост уже опубликован.

Вставьте шорткод флипбокса

Теперь ваши новые флипбоксы будут работать на вашем сайте.

Обратите внимание, что при изменении размера окна браузера флипбоксы подстраиваются, поскольку они на 100% отзывчивы.

Живой WordPress дисплей Flipbox

Этот плагин также включает виджет flipbox, который вы можете добавить в любую область виджетов, поддерживаемую вашей темой.

Для этого перейдите по ссылке Внешний вид » Виджеты и найти виджет под названием «Flipbox — Awesomes Flip Boxes Image Overlay».

Добавить виджет flipbox

Затем вы можете перетащить виджет в нужное вам место.

Наконец, введите идентификатор стиля, который можно найти в главном меню плагина Flipbox, и нажмите «Сохранить».

Идентификатор виджета Flipbox

Мы надеемся, что эта статья помогла вам узнать, как добавить наложения и наводки флипбоксов на ваш сайт WordPress. Вы также можете посмотреть наше руководство по оптимизации изображений для SEO, а также руководство по устранению распространенных проблем с изображениями в WordPress.

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий