Пропустить

Как создать красивый раздел столкновения столбцов на Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

Возможный результат

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

Воссоздать макет раздела героя

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

Настроить цвет фона

Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте раздел настроек и измените цвет фона.

  • Цвет фона: # f4f2f7

расстояние

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

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

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

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

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

калибровка

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

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 1
  • Выровнять высоту столбца: Да
  • Ширина: 100%
  • Максимальная ширина: 100%

расстояние

Затем удалите все верхние и нижние отступы по умолчанию.

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

переполнение

И скрыть переполнения ряда.

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

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

расстояние

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

  • Верхняя обивка: 15vw
  • Нижняя обивка: 10vw
  • Левая обивка: 5vw
  • Правая обивка: 5vw

Z индекс

Также увеличьте индекс z столбца.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

  • Индекс Z: 12

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

Фоновое изображение

Продолжите, открыв настройки в столбце 2 и загрузите фоновое изображение на ваш выбор.

  • Размер фонового изображения: обложка
  • Положение фонового изображения: Центр
  • Повторение фонового изображения: без повторения
  • Смешанные фоновые изображения: нормальный

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

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

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

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

Перейдите на вкладку «Дизайн модуля» и измените параметры текста H1 соответственно:

  • Название шрифта: Тени в свете
  • Вес шрифта заголовка: жирный
  • Цвет текста заголовка: # 000000
  • Размер текста заголовка: 6vw (рабочий стол), 11vw (планшет), 13vw (телефон)
  • Межбуквенный интервал: -2px
  • Высота линии головы: 1.2em

расстояние

Также добавьте верхнее поле.

  • Верхнее поле: 10vw

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

  • Шрифт текста: Open Sans
  • Цвет текста: # 1e1e1e
  • Размер текста: 0.9vw (рабочий стол), 1.9vw (планшет), 3vw (телефон)
  • Высота строки текста: 2,4 em

расстояние

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

  • Верхнее поле: 4vw (рабочий стол), 8vw (планшет), 12vw (телефон)
  • Нижнее поле: 4vw (рабочий стол), 8vw (планшет), 12vw (телефон)

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

Добавить копию

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

Настройки кнопок

Измените параметры кнопок модуля следующим образом:

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
  • Цвет текста кнопки: #ffffff
  • Цвет фона кнопки: # 000000
  • Ширина границы кнопки: 0 пикселей
  • Радиус границы кнопки: 100 пикселей
  • Шрифт кнопки: Открыть без

расстояние

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

  • Верхний отступ: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
  • Нижняя обивка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
  • Левый отступ: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
  • Правая обивка: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)

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

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

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

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

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

  • Шрифт текста: тени на свету
  • Цвет текста: rgba (0,0,0,0,25)
  • Размер текста: 9vw (рабочий стол), 14vw (планшет и телефон)
  • Интервал между текстовыми буквами: -3px
  • Высота строки текста: 1em
  • Выравнивание текста: по центру (офис), слева (планшет и телефон)

расстояние

Также добавьте пользовательские значения заполнения.

  • Верхняя обивка: 5vw (стол),
  • Нижняя обивка: 60vw (планшет и телефон)
  • Левая обивка: 5vw (планшет и телефон)

Применить анимацию прокрутки

Раздел

Подъем и спуск

Как только все ваши модули будут на месте, пришло время применить эффекты прокрутки! Сначала откройте параметры раздела и используйте следующий эффект масштаба:

  • Активировать Sclaing сверху вниз
  • Начальная шкала: 100% (до 49%)
  • Средний масштаб:
    • Офис: 70% (100%)
    • Планшет и телефон: 100% (100%)
  • Конечная шкала:
    • Офис: 70%
    • Планшет и телефон: 100%

Колонка 1

Горизонтальное движение

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

  • Активировать горизонтальное движение: Да
  • Начальное смещение: 0
  • Среднее смещение:
    • Офис: 0 (на 65%)
    • Планшет и телефон: 0 (93%)
  • Конечное смещение:
    • Офис: 6
    • Планшет и телефон: 0

Подъем и спуск

Также примените эффект увеличения и уменьшения масштаба к столбцу.

  • Включить масштабирование вверх и вниз: Да
  • Начальная шкала:
    • Офис: 10%
    • Планшет и телефон: 100%
  • Средний масштаб:
    • Офис: 90%
    • Планшет и телефон: 100%
  • Конечная шкала: 100%
раздел героев сталкивающихся с колоннами

Колонка 2

Горизонтальное движение

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

  • Активировать горизонтальное движение: Да
  • Начальное смещение: 0
  • Среднее смещение:
    • Офис: 0 (на 53%)
    • Планшет и телефон: 0 (56%)
  • Конечное смещение:
    • Офис: -6 (на 53%)
    • Планшет и телефон: 0 (100%)

Исчезать и исчезать

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

  • Активировать постепенное исчезновение: Да
  • Начальная непрозрачность: 100% (при 47%)
  • Средняя непрозрачность:
    • Офис: 0% (47%)
    • Планшет и телефон: 100% (47%)
  • Конец непрозрачности:
    • Офис: 0%
    • Планшет и телефон: 100%

Заключительные мысли

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

Другие Ресурсы

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

Эта статья содержит комментарии 0

Оставить комментарий

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

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

Вверх
996 акции
доля996
чирикать
Регистрация