Как добавить плавающую карточку на свой сайт Divi

Практически на каждом веб-сайте, который вы посещаете, элементы всплывают и остаются на странице. Предупреждения о файлах cookie и подписки, подписки по электронной почте и окна чата. Мы все склонны игнорировать их в какой-то момент, становясь слепыми к тому, что сайт пытается нам сказать. Мы просто нажимаем X, не читая. Но это не значит, что такие элементы не могут быть полезными или иметь место. С Divi вы можете легко создать плавающую карточку, которая повысит ценность вашего сайта, ненавязчиво объясняя, кто вы и чем занимается ваш бренд. Посмотрим, насколько это просто.

Предварительный просмотр

Рабочий стол

Мобильный

1. Создайте шаблон страницы.

Первое, что вам нужно сделать, это решить, какие страницы вы хотите включить в эту плавающую карточку. Вы можете захотеть, чтобы он был на каждой странице вашего веб-сайта, или вы могли бы хотеть это только на определенных целевых страницах. В любом случае вы можете использовать Divi Theme Builder для его настройки. Либо как глобальный шаблон, либо как шаблон, применимый только к определенным страницам.

Используйте конструктор тем для создания шаблона

Для начала перейдите в Divi - Theme Builder на панели инструментов WordPress. Выберите раздел Custom Body на страницах, к которым вы хотите применить плавающую карту, или Global Body, чтобы применить его повсюду.

После загрузки Divi Visual Builder выберите « Начать с нуля», когда будет предоставлен выбор.

Добавить 1-колонку Row и Post Content Module

Затем при появлении запроса выберите строку из одного столбца.

Затем вы хотите выбрать модуль « Содержимое публикации ». Это пример нашей функции динамического контента. Модуль отображает сопутствующий дизайн, созданный внутри самой страницы Divi, что означает, что этот модуль будет показывать разный контент для разных страниц с этим шаблоном. Для сообщений в блогах это будет контент блога. Для страниц магазина это будут товары. А для отдельных страниц - пользовательский контент, созданный с помощью Divi.

Отрегулируйте расстояние между секциями и рядами

После того, как они установлены, нам нужно сделать пару корректировок интервалов. Зайдите в настройки раздела (синяя рамка в конструкторе Divi) и удалите все верхнее и нижнее отступы. Вы делаете это на вкладке « Дизайн », в заголовке « Интервал» , а затем устанавливаете 0px для « Сверху» и « Снизу» в разделе « Отступы» .

Сохраните изменения и войдите в настройки строки . Опять же, установите верхнее и нижнее отступы на 0 пикселей .

Затем найдите заголовок « Размер», включите параметр « Использовать настраиваемую ширину желоба» и установите для него значение 1. Затем установите для параметра « Ширина» и « Макс. Ширина» значение 100%.

Когда подготовка сделана, давайте приступим к созданию плавающей карты!

2. Добавить плавающую карту

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

Во-первых, вам нужно добавить новый раздел. Для этого прокрутите страницу вниз, нажмите синий кружок + и выберите « Обычный», когда будет предложено указать тип раздела.

Добавить модуль Blurb

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

Отрегулируйте настройки раздела и ряда

После этого нам нужно настроить отступы и расположение этой строки и раздела. Итак, сначала войдите в настройки раздела и установите верхнее и нижнее отступы на 0 пикселей в разделе Display - Spacing .

Затем на вкладке « Дополнительно » найдите заголовок « Положение» . Установите индекс Z на 12. Чем выше номер, тем дальше «впереди» будет располагаться раздел и его содержимое. А поскольку это плавающая карта, мы хотим, чтобы она плавала поверх всех остальных элементов.

Наконец, зайдите в настройки Row и снова установите его padding сверху и снизу на 0 пикселей .

Содержание модуля Blurb

Теперь пришло время стилизовать саму карту. Войдите в настройки модуля Blurb. Поскольку это элемент, описывающий ваш бизнес, вам нужно кратко упомянуть, чем занимается ваша компания или бренд. Поскольку это пример сообщения, мы заполнили его каким-то lorem ipsum со вкусом зомби . Вы можете установить заголовок и текст на вкладке « Содержимое ».

Установите цвет фона

Очевидно, вы хотите, чтобы плавающая карточка визуально соответствовала вашему сайту, поэтому выбор правильного цвета фона имеет большое значение. Мы идем с #ffffff (белый). Вкладка Content также содержит это, и вы найдете его под заголовком Background и Paint Can .

Выберите изображение карты

Модуль Blurb дает вам возможность включить изображение или значок для модуля, и нам нужно изображение, представляющее нашу компанию. Опять же, на вкладке Content найдите Image и Icon и просто загрузите изображение, которое работает для вашего модуля.

Сформируйте углы карты

Затем перейдите на вкладку « Дизайн » и перейдите в заголовок « Граница» . Найдите параметры закругленных углов и установите для каждого угла 25 пикселей . Это позволит сгладить острые прямоугольные края без изменения формы всей карты.

Выравнивание текста

Под заголовком " Текст" установите выравнивание текста по центру.

Стиль текста заголовка плавающей карты

Текст заголовка, который вы установили ранее, по умолчанию - H4 . Чтобы стилизовать его, перейдите в заголовок текста заголовка, выберите вкладку H4 и измените следующие параметры заголовка :

• Шрифт: Poppins
• Толщина шрифта: полужирный
• Цвет текста: # 22303f
• Размер текста: 20 пикселей
• Высота линии: 1,3 м

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

Стиль текста карты

Затем перейдите к Основному тексту и измените шрифт основного текста на Поппинс, чтобы он соответствовал шрифту заголовка.

Затем щелкните вкладку « Ссылка » (значок цепочки) и замените цвет текста ссылки на дополнительный цвет для вашего сайта. Мы выбрали # 97c357 .

Размер карточки "О нас"

Под заголовком « Размер» добавьте к этим настройкам следующие значения:

• Ширина изображения: 75%
• Ширина содержимого: 25vw
• Ширина: 25vw
• Максимальная ширина: 30vw

В настройках скорости отклика настройте следующие значения:

• Ширина содержимого: 90vw
• Ширина: 90vw
• Максимальная ширина: 95vw

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

Интервал для рекламного объявления

Заголовок Spacing - это быстрое исправление, при котором вам нужно установить для Left Margin значение 0px , для Top и Bottom Padding - 2vw , а для Left и Right Padding - 1vw.

Для адаптивных настроек изменятся только верхнее и нижнее отступы . Мы установим их на уровне 5% .

Добавить тень коробки

Поскольку плавающая карточка будет оставаться на своем месте, мы хотим, чтобы она выглядела так, как если бы она действительно парила над вашим контентом. Этот эффект достаточно прост, если добавить в модуль базовую тень блока. Эту опцию можно найти в Box Shadow , и мы выбрали базовую нижнюю тень.

Настройка адаптивного CSS

Теперь самое интересное. Мы переходим на вкладку « Дополнительно », где заставим плавающую карточку прикрепляться к странице. Для этого наш первый шаг - отключить изображение, которое мы добавили для рабочего стола. Изображения в модуле Blurb действительно могут повлиять на размер и удобство использования на мобильных устройствах, плюс это что-то еще для загрузки страницы.

Итак, мы хотим добавить display: none; под полем Blurb Image только для мобильных устройств в Custom CSS .

Зафиксируйте и переместите карту с настройкой положения

Наконец, мы собираемся разместить карту там, где мы хотим, чтобы она плавала. Во-первых, мы хотим перейти на вкладку « Дополнительно » и прокрутить до « Позиция» . В раскрывающемся меню выберите « Исправлено» .

Затем найдите параметры местоположения . Это точка на экране, где будет оставаться плавающая карта. Для рабочего стола мы хотим, чтобы он находился в нижнем углу экрана. Итак, мы щелкаем по квадрату, который соответствует этому. Мы также хотим, чтобы он был немного смещен от границы окна, поэтому мы изменим смещение по вертикали на 3% и смещение по горизонтали на 2%.

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

Кроме того, мы собираемся изменить только вертикальное смещение для мобильных устройств. Установите это значение на 3% . В горизонтальном смещении нет необходимости, потому что это ширина экрана мобильного устройства по центру.

Окончательные результаты

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

Рабочий стол

Мобильный

Заключение

Благодаря мощным опциям Divi и интуитивно понятному интерфейсу вы можете в кратчайшие сроки спроектировать и разместить плавающую карточку на своем сайте. Сообщая своим пользователям, с кем они имеют дело с самого начала, вы обязательно приобретете определенную лояльность к бренду.

Для чего вы использовали плавающие карты на своих сайтах? Дайте нам знать об этом в комментариях!