Как переключаться между изображениями в потрясающем дизайне Divi Split Section

Опубликовано: 2019-10-31

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

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

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

Давайте посмотрим на дизайн на экранах разных размеров.

Рабочий стол

Мобильный

Загрузите The Toggle Image Design БЕСПЛАТНО

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

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

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

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

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

Начнем воссоздавать

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

Интервал

Создайте новую страницу или откройте существующую. Добавьте обычный раздел, откройте настройки раздела и удалите все отступы по умолчанию сверху и снизу.

  • Верх + нижняя обивка: 0vw

Видимость

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

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

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

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Размеры

Перед добавлением каких-либо модулей отрегулируйте размер ряда.

  • Ширина желоба: 1
  • Ширина: 100%
  • Максимальная ширина: 100%

Интервал

Удалите также верхнее и нижнее заполнение строки по умолчанию.

  • Верхняя и нижняя обивка: 0vw

Столбец 1 Настройки

Фон

Затем откройте настройки столбца 1 и добавьте цвет фона.

  • Цвет: бледно-розовый # E7BAC6

Граница

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

  • Закругленные углы: верхний правый + нижний правый
    • Рабочий стол: 10vw
    • Планшет и телефон: 0vw

Видимость

Перейдите на вкладку «Дополнительно» и настройте параметры видимости следующим образом:

  • Горизонтальный + вертикальный перелив
    • Рабочий стол: по умолчанию
    • Hover: Видимый
  • Z-индекс:
    • Рабочий стол: 10
    • Наведение: 11

Столбец 2 Настройки

Фон

Теперь добавьте цветной фон в столбец 2.

  • Цвет: бледно-зеленый # bfd5a5

Граница

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

  • Закругленные углы: верхний левый + нижний левый
    • Рабочий стол: 10vw
    • Планшет и телефон: 0vw

Видимость

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

  • Горизонтальный + вертикальный перелив
    • Рабочий стол: по умолчанию
    • Hover: Видимый
  • Z-индекс:
    • Рабочий стол: 9
    • Наведение: 11

Добавить модуль изображения в столбец 1

Добавить изображение

Пора начинать добавлять модули! Добавьте модуль изображения в столбец 1 и загрузите полупрозрачное изображение по вашему выбору.

Фон

Используйте цвет фона столбца в качестве цвета фона вашего изображения.

  • Цвет: бледно-розовый # E7BAC6

Размеры

Затем на вкладке дизайна настройте параметры размера.

  • Принудительная полная ширина: Да

Интервал

Также добавьте пользовательские отступы.

  • Правый отступ:
    • Таблетка: 18vw
    • Телефон: 20vw

Преобразовать

И последнее, но не менее важное: настройте параметры преобразования преобразования модуля.

  • Преобразовать Перевести: ось x 19vw

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

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

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

Текст

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

  • Шрифт: Verdana
  • Цвет: белый #ffffff
  • Размер:
    • Рабочий стол: 2vw
    • Таблетка: 3vw
    • Телефон: 3.5vw
  • Расстояние между буквами: 1 пиксель
  • Выравнивание: по центру

Текст заголовка

Затем стилизуйте текст заголовка.

  • Уровень заголовка: H2
  • Шрифт: Verdana
  • Вес: жирный
  • Выравнивание: по центру
  • Цвет: пурпурный # 9d3056
  • Размер:
    • Рабочий стол: 6vw
    • Планшет + телефон: 8vw

Размеры

Затем отрегулируйте размер модуля.

  • Ширина:
    • ПК: 56%
    • Планшет + Телефон: 43%

Интервал

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

  • Верхнее поле:
    • Рабочий стол: -55vw
    • Таблетка: -70vw
    • Телефон: -90vw
  • Нижняя обивка:
    • Рабочий стол + планшет: 0vw
  • Левый отступ: 2vw

Добавить модуль барных счетчиков в столбец 1

Настройки барной стойки 1-4

Титулы

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

  1. Клубника
  2. Черника
  3. Ежевика
  4. Малина

Проценты

Вместе с процентами.

  1. 20
  2. 40
  3. 10
  4. 20

Размеры

Щелкните первую планку и установите высоту. Повторите этот шаг для всех четырех столбцов.

  • Высота: 1.5vw

Общие настройки барных стоек

Элементы

В общих настройках барной стойки откройте настройки элементов. Установите процентное значение «Нет».

  • Показать процент: нет

Фон

Теперь добавьте полупрозрачный фон.

  • Цвет: бледно-розовый с прозрачностью rgba (157,48,86,0.18)

Бар

На вкладке «Дизайн» придайте полосам пурпурный цвет.

  • Цвет фона: пурпурный # 9d3056

Текст заголовка

Затем задайте стиль настройки текста заголовка.

  • Шрифт: Verdana
  • Цвет: белый #ffffff
  • Размер:
    • Рабочий стол: 1vw
    • Таблетка: 2vw
    • Телефон: 3vw

Размеры

Продолжите настройку параметров размера модуля.

  • Ширина:
    • ПК: 49%
    • Планшет + Телефон: 33%

Интервал

Измените также настройки интервала.

  • Верхнее поле:
    • Планшет + Телефон: -3vw
  • Нижняя маржа:
    • Рабочий стол: 21vw
    • Планшет + телефон: 28vw
  • Левое поле:
    • Рабочий стол: 3vw
    • Планшет + Телефон: 6vw
  • Нижний + левый отступ: 0vw

Граница

Затем измените настройки границы.

  • Закругленные углы: 1vw все четыре угла

Видимость

Наконец, настройте индекс z и переполнения на вкладке видимости.

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

Добавить модуль изображения в столбец 2

Добавить изображение

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

Фон

Затем используйте цвет фона столбца 2 в качестве цвета фона вашего изображения.

  • Цвет: бледно-зеленый # bfd5a5

Размеры

На вкладке дизайна настройте размер модуля.

  • Принудительная полная ширина: Да

Интервал

Добавьте несколько настраиваемых отступов слева и на экранах меньшего размера.

  • Левый отступ:
    • Таблетка: 16vw
    • Телефон: 18vw

Преобразовать

И последнее, но не менее важное: измените параметры преобразования преобразования.

  • Преобразовать Перевести: ось x -19.6vw

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

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

Продолжите, добавив текстовый модуль в столбец 2 с некоторым содержанием H2 и абзацем.

Текст

Затем на вкладке «Дизайн» стилизуйте текст.

  • Шрифт: Verdana
  • Цвет: белый #ffffff
  • Размер:
    • Рабочий стол: 2vw
    • Таблетка: 3vw
    • Телефон: 3.5vw
  • Расстояние между буквами: 1 пиксель
  • Выравнивание: по центру

Текст заголовка

Измените также настройки текста заголовка.

  • Уровень заголовка: H2
  • Шрифт: Verdana
  • Вес: жирный
  • Выравнивание: по центру
  • Цвет: зеленый # 2c5b00
  • Размер:
    • Рабочий стол: 6vw
    • Планшет + телефон: 8vw

Размеры

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

  • Ширина: 60%
  • Выравнивание: Правое

Интервал

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

  • Верхнее поле:
    • Рабочий стол: -55vw
    • Таблетка: -63vw
    • Телефон: -90vw
  • Нижняя обивка:
    • Настольный компьютер + планшет: 37vw
  • Левый отступ:
    • Рабочий стол: 0vw
    • Планшет + телефон: 16vw
  • Правый отступ:
    • Планшет + Телефон: 2vw

Добавить модуль барных счетчиков в столбец 2

Настройки барной стойки 1-4

Титулы

Последний модуль, который нам понадобится в столбце 2, - это модуль барных стоек. Добавьте четыре барные стойки.

  1. Брокколи
  2. Сельдерей
  3. Огурец
  4. Капуста

Проценты

Назначьте процент для каждой барной стойки.

  1. 20
  2. 40
  3. 20
  4. 30

Размеры

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

  • Высота: 1.5vw

Общие настройки барных стоек

Элементы

В общих настройках барного счетчика измените процентный переключатель на «Нет».

  • Показать процент: нет

Фон

Затем добавьте полупрозрачный цвет фона.

  • Цвет: бледно-зеленый с прозрачностью rgba (17,119,3,0.18)

Бар

Затем на вкладке «Дизайн» добавьте цвет к стойке.

  • Цвет панели: зеленый # 9d3056

Текст заголовка

Продолжайте стилизовать текст.

  • Шрифт: Verdana
  • Цвет: белый #ffffff
  • Размер:
    • Рабочий стол: 1vw
    • Таблетка: 2vw
    • Телефон: 3vw

Размеры

Также измените ширину для разных размеров экрана.

  • Ширина:
    • ПК: 49%
    • Планшет + Телефон: 33%

Интервал

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

  • Верхнее поле:
    • Рабочий стол: -37vw
    • Планшет + телефон: -40vw
  • Нижняя маржа:
    • Рабочий стол: 21vw
    • Планшет + телефон: 28vw
  • Левое поле:
    • Рабочий стол: 23vw
    • Планшет + Телефон: 60 ВВт
  • Нижний + левый отступ: 0vw

Граница

Мы также добавляем закругленные углы.

  • Закругленные углы: 1vw все четыре угла

Видимость

Завершите настройки модуля, отрегулировав значения переполнения и z-индекса на вкладке видимости.

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

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

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

Рабочий стол

Мобильный

Это обертка!

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