Как разместить всплывающие подсказки в любом месте страницы с помощью Divi

Каждую неделю мы предоставляем вам новые бесплатные пакеты макетов Divi, которые вы можете использовать в своем следующем проекте. Для одного из пакетов макетов мы также расскажем о сценарии использования, который поможет вам вывести свой веб-сайт на новый уровень.

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

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

Загрузите макет всплывающих подсказок БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету всплывающих подсказок при наведении курсора, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Создать новую страницу с помощью макета домашней страницы Dog Walker

Добавить новую страницу

Первое, что вам нужно сделать, это создать новую страницу, выбрав Pages> Add New . Продолжите, присвоив своей странице заголовок, опубликуйте страницу и переключитесь на Visual Builder.

Загрузить целевую страницу собачьего выгула

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

Создание дизайна всплывающих подсказок при наведении курсора

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

Структура столбца (решите, сколько всплывающих подсказок вам нужно)

После того, как вы загрузили макет целевой страницы, пора приступить к созданию всплывающих подсказок. Мы добавим их в определенное место на странице, но вы можете разместить их где угодно, используя параметры преобразования и перевода. Найдите следующий раздел на своей странице и добавьте строку из трех столбцов внизу:

Макс.ширина ряда

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

• Максимальная ширина: 1280 пикселей

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Переполнения

Мы также следим за тем, чтобы переполнение строки было видно на вкладке «Дополнительно».

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Добавить текстовый модуль всплывающей подсказки в столбец 1

Добавить содержимое в поле содержимого

Вопросительный знак

Пора приступить к созданию первого дизайна всплывающей подсказки! Мы будем использовать текстовый модуль. Мы добавим диапазон (для значка всплывающей подсказки) и div (для содержимого всплывающей подсказки) внутри поля содержимого. Это даст нам больше свободы для индивидуального оформления значка всплывающей подсказки при наведении курсора и содержимого всплывающей подсказки. Начните с добавления диапазона и присвоения ему класса «знак вопроса».

Подсказка Div

Продолжите, добавив div в поле содержимого с классом tooltip-content. Добавьте содержимое всплывающей подсказки по вашему выбору в этот div.

Настройки текста

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста:

• Шрифт текста: Open Sans
• Цвет текста: #ffffff

Настройки текста H3

Также измените настройки текста H3.

• Шрифт заголовка 3: Amatic SC
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 30 пикселей

Размеры

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

• Ширина: 300 пикселей
• Высота: 42 пикс.

Интервал

Также добавьте верхнюю обивку.

• Верхний отступ: 10 пикселей

Видимость по умолчанию

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Видимость при наведении

Однако при наведении мы хотим, чтобы все отображалось. Мы сделаем это, сделав переполнение видимым при наведении курсора.

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Добавить модуль кода под текстовым модулем

Теперь, когда мы стилизовали модуль, нам все еще нужно стилизовать диапазон и div внутри поля содержимого, используя классы CSS, которые мы ему присвоили. Добавьте модуль кода прямо под текстовым модулем всплывающей подсказки.

Добавить CSS-код в стили Divs в текстовом модуле

Добавьте следующие строки кода CSS для стилизации различных частей текстового модуля:

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

Клонировать текстовый модуль всплывающей подсказки дважды и поместить в оставшиеся столбцы

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

Изменить содержание всплывающей подсказки

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

Изменить положение всплывающей подсказки (с помощью Transform Translate)

Подсказка №1

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

• Справа: -450 пикселей (рабочий стол), -2000 пикселей (планшет), -1900 пикселей (телефон)

Подсказка №2

Перейдите к текстовому модулю всплывающей подсказки во втором столбце и измените значения преобразования преобразования следующим образом:

• Справа: -400 пикселей (рабочий стол), -1300 пикселей (планшет), -1250 пикселей (телефон)

Подсказка №3

Сделайте то же самое для текстового модуля всплывающей подсказки в столбце 3, и все готово!

• Справа: -500 пикселей (рабочий стол), -600 пикселей (планшет и телефон)

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

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

Рабочий стол

Мобильный

Последние мысли

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

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