Вы хотите использовать эффекты тени и наведения в Divi создавать содержание интерактивный и выделитесь своим Веб-сайт ?
Убедитесь, что ваш Веб-сайт выделиться среди похожих веб-сайтов может быть сложно. Но как только вы туда доберетесь, это почти всегда стоит затраченных усилий и мыслей.
Мы покажем вам, как создать содержание интерактивный при создании веб-сайтов с Divi.
Давайте!
обследование
Прежде чем мы углубимся в этот урок, давайте кратко рассмотрим результат, который вы можете ожидать.
Настольный компьютер
Мобильный телефон
Начнем реализацию с Divi!
Смотрите также: Divi: Как создать меню с вращающимся колесом при наведенииl
Добавить новый раздел
Фоновый цвет
Создайте новую страницу или откройте существующую и добавьте в нее обычный раздел. Откройте настройки раздела и измените цвет фона.
- Фон: #03006d
расстояние
Затем перейдите к настройкам интервала между секциями и измените их следующим образом:
- Отступы (сверху и снизу): 50 пикселей
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов.
калибровка
Затем перейдите к настройкам размера и позвольте линии заполнить всю ширину экрана.
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 100%
расстояние
Давайте также изменим следующие параметры интервала:
- Прокладка (справа): 9vw (настольный компьютер), 5vw (планшет и телефон)
- Прокладка (справа): 5vw (планшет и телефон)
Добавьте текстовый модуль в столбец 1.
Добавить контент
Когда вы закончите редактирование настроек строки, добавьте первый текстовый модуль в столбец 1.
Добавьте первый символ в качестве текста абзаца. Затем содержание который вы хотите отображать в виде текста списка.
Настройки текста (рабочий стол)
Затем перейдите на вкладку Проекти измените настройки текста абзаца по умолчанию. Обязательно используйте один и тот же цвет для текста раздела и фона.
- Вес шрифта: очень жирный
- Цвет текста: #03006d
- Размер текста: 27vw (рабочий стол), 0vw (планшет и телефон)
- Высота строки: 1,1 см
- Тень текста: см. захват
- Сила размытия теней: 0,01 em
- Цвет тени: #ffffff
- Выравнивание текста: по левому краю
Настройки текста при наведении
Чтобы создать хороший эффект наведения, нам нужно будет изменить эти настройки текста абзаца наведения.
- Цвет текста (при наведении): #ffffff
- Цвет тени (наведение): rgba (255,255,255,0)
Настройки списка (рабочий стол)
Продолжите, перейдя к настройкам листинга.
- Вес шрифта: легкий
- Цвет текста списка: #ffffff
- Размер текста списка: 0 пикселей (для настольных компьютеров), 18 пикселей (для планшетов и телефонов)
- Позиция стиля: круг
- Позиция стиля неупорядоченного списка: снаружи
- Отступ элемента неупорядоченного списка: 0px
Список настроек текста при наведении (Hover)
Мы хотим, чтобы текст списка появлялся при наведении. Вот почему мы изменим размер текста при наведении.
- Размер текста неупорядоченного списка (при наведении): 18 пикселей
расстояние
Перейдите к настройкам расстояния между модулями и внесите там некоторые изменения.
- Поле (снизу): 50px (планшет и телефон)
- Поле (справа): -4vw (рабочий стол), 0vw (планшет и телефон)
Клонируйте текстовый модуль 4 раза и поместите дубликаты в оставшиеся столбцы
Теперь, когда мы закончили изменение первого модуля в столбце 1, клонируйте модуль четыре раза. Затем поместите каждый из дубликатов в оставшиеся столбцы. Мы изменим каждый из дубликатов, чтобы он соответствовал тому, что мы хотим.
Измените текстовый модуль в столбце 2.
Изменить содержание
Откройте дубликат в столбце 2 и отредактируйте содержимое.
Изменить интервал
Затем перейдите к настройкам интервалов и измените значения пользовательских полей.
- Поле (снизу): 50px (планшет и телефон)
- Маржа (слева и справа): -2vw (рабочий стол), 0vw (планшет и телефон)
- Правое поле: -2vw (рабочий стол), 0vw (планшет и телефон)
Измените текстовый модуль в столбце 3.
Изменить содержание
Также измените содержимое дубликата в столбце 3.
Изменить интервал
С настройками интервала на вкладке дизайна.
- Маржа (слева): 2,5 vw
- Поле (справа): 1,5 vw
Измените текстовый модуль в столбце 4.
Изменить содержание
Продолжите, открыв настройки модуля «Текст» в столбце 4, и отредактируйте содержимое там же.
Изменить интервал
Далее перейдите на вкладку «Дизайн» и измените пользовательские значения полей в настройках «Интервал».
- Маржа (слева): -6vw
- Поле (справа): 2vw
Измените текстовый модуль в столбце 5.
Содержание
Уступите место последнему дубликату. Отредактируйте содержимое в области содержимого.
Изменить интервал
С пользовательскими настройками интервала.
- Маржа (слева): -7vw
- Поле (справа): 3vw
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Читайте также: Divi : Как настроить значки корзины и поиска модуля «Полноширинное меню».
офис
Мобильный телефон
Скачайте DIVI прямо сейчас!!!
Заключение
Мы знаем, насколько важно гарантировать, что ваш Веб-сайт выделяется среди других сайтов. Благодаря встроенным возможностям Divi вы можете проявлять столько творчества, сколько захотите.
Эта статья является примером того, как вы можете создавать интерактивный контент при наведении курсора.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
