Элегантно спрячьте вашу копию под разделителями секций в потрясающем дизайне с Divi

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

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

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

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

Рабочий стол

Мобильный

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Добавить раздел # 1

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

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

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

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

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

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

Первый модуль, который нам нужен в этой строке, - это текстовый модуль с некоторым содержимым H2.

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

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

• Шрифт заголовка 2: Playfair Display
• Толщина шрифта заголовка 2: Обычный
• Выравнивание текста заголовка 2: по центру
• Размер текста заголовка 2: 70 пикселей (рабочий стол), 40 пикселей (планшет), 30 пикселей (телефон)

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

Видимость

Второй и последний модуль, который нам нужен в этой строке, - это Divider Module. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Линия

Мы также меняем цвет линии на вкладке дизайна.

• Цвет линии: # 000000

Размеры

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

• Вес разделителя: 5 пикселей
• Ширина: 27%
• Выравнивание модуля: по центру

Добавить раздел # 2

Фоновый цвет

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

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

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

Убедитесь, что вы также скрыли переполнение раздела на вкладке «Дополнительно». Это гарантирует, что ничто не превосходит контейнер раздела.

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

Переходы

Позже в этом посте мы создадим переход при наведении курсора. Чтобы обеспечить бесперебойную работу, мы увеличим продолжительность перехода на вкладке «Дополнительно».

• Продолжительность перехода: 800 мс

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке занять всю ширину контейнера раздела, применив следующие настройки:

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

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

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

Пора начинать добавлять модули, начиная с текстового модуля. Введите контент H3 по вашему выбору.

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

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

• Шрифт заголовка 3: Playfair Display
• Выравнивание текста заголовка 3: по центру
• Цвет текста заголовка 3: # 000000
• Размер текста заголовка 3: 3vw (рабочий стол), 6vw (планшет), 7vw (телефон)

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

Видимость

Второй модуль, который нам нужен в этой строке, - это Divider Module. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Линия

Также измените цвет разделителя.

• Цвет линии: # 000000

Интервал

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

• Верхняя маржа: 2vw
• Нижняя маржа: 2vw

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

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

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

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

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

• Шрифт текста: Open Sans
• Выравнивание текста: по центру
• Цвет текста: # 777777
• Размер текста: 0.8vw (рабочий стол), 1.7vw (планшет), 2.2vw (телефон)
• Высота текстовой строки: 1,8 м

Интервал

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

• Левое поле: 3vw (рабочий стол), 7vw (планшет), 10vw (телефон)
• Правое поле: 3vw (рабочий стол), 7vw (планшет и телефон)

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

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

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

Выравнивание

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

• Расположение кнопок: по центру

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

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

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

Интервал

И также добавьте несколько значений пользовательского интервала.

• Верхняя маржа: 2vw
• Верхняя обивка: 1vw
• Нижняя обивка: 1vw
• Левое заполнение: 3vw (рабочий стол), 6vw (планшет), 8vw (телефон)
• Правая прокладка: 3vw (рабочий стол), 6vw (планшет), 8vw (телефон)

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

Верхний разделитель по умолчанию

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

• Стиль разделителя: найти в списке
• Цвет разделителя: # e8e8e8
• Высота разделителя: 7000 пикселей
• Переворот разделителя: вертикальный
• Расположение разделителей: поверх содержимого раздела

Верхний разделитель при наведении курсора

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

• Высота разделителя: 0 пикселей

Нижний разделитель

Также добавьте нижний разделитель.

• Стиль разделителя: найти в списке
• Цвет разделителя: # 5c26ff
• Высота разделителя: 600 пикселей
• Расположение разделителей: поверх содержимого раздела

Верхний нижний разделитель

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

• Высота разделителя: 0 пикселей

Интервал

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

• Левое поле: 10vw (рабочий стол), 11vw (планшет), 0vw (телефон)
• Правое поле: 47vw (рабочий стол), 11vw (планшет), 0vw (телефон)
• Верхняя прокладка: 8vw (рабочий стол), 15vw (планшет), 16vw (телефон)
• Нижняя прокладка: 8vw (рабочий стол), 15vw (планшет), 16vw (телефон)

Граница

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

• Ширина границы: 1 пикс.
• Цвет границы: rgba (255,255,255,0)

Граница при наведении

Измените цвет границы при наведении.

• Цвет границы: # 000000

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

После того, как вы завершили все настройки раздела, вы можете продолжить и дважды клонировать раздел.

Изменить дубликат №1

Изменить цвет верхнего разделителя

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

• Цвет разделителя: # 5c26ff

Изменить цвет нижнего разделителя

Также измените цвет нижнего разделителя.

• Цвет разделителя: # ff3a5e

Изменить интервал

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

• Верхняя маржа: -20vw (настольный компьютер), 0vw (планшет и телефон)
• Левое поле: 47vw (рабочий стол), 11vw (планшет), 0vw (телефон)
• Правое поле: 10vw (рабочий стол), 11vw (планшет), 0vw (телефон)

Изменить дубликат №2

Изменить цвет верхнего разделителя

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

• Цвет разделителя: # ff3a5e

Изменить цвет нижнего разделителя

Также измените цвет нижнего разделителя.

• Цвет разделителя: # e8e8e8

Изменить интервал

И здесь также измените значения интервала.

• Верхняя маржа: -20vw (настольный компьютер), 0vw (планшет и телефон)
• Нижняя маржа: 7vw
• Левое поле: 10vw (рабочий стол), 11vw (планшет), 0vw (телефон)
• Правое поле: 47vw (рабочий стол), 11vw (планшет), 0vw (телефон)

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

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

Рабочий стол

Мобильный

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

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

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