Использование модулей разделителей для создания фоновых фигур с помощью параметров преобразования Divi

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

На этой неделе, в рамках нашей текущей инициативы по дизайну Divi, мы собираемся показать вам, как использовать модули Divider для создания фоновых форм с помощью параметров преобразования Divi и пакета Paralegal Layout Pack. Модули разделителей очень универсальны и могут действительно улучшить общий дизайн ваших страниц. Хотя мы будем воссоздавать некоторые примеры, специально соответствующие Paralegal Layout Pack, вы можете использовать эту технику для любого типа веб-сайтов, которые вы создаете с Divi.

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

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

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

Рабочий стол

Мобильный

Создайте новую страницу, используя целевую страницу Paralegal Layout Pack

Создайте новую страницу и загрузите на нее целевую страницу Paralegal Layout Pack.

Воссоздать пример №1

Раздел переполнен

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

overflow: hidden;

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

Видимость

Затем добавьте разделительный модуль во второй столбец специального раздела. Убедитесь, что опция «Показать разделитель» включена.

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

Фоновый цвет

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

• Цвет фона: # d94144.

Цвет

Затем мы перейдем на вкладку дизайна и также изменим цвет разделителя.

• Цвет: # f3f1f2

Стили

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

• Стиль разделителя: пунктирный

Размеры

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

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

Интервал

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

• Верхняя маржа: -30vw (настольный компьютер), -100vw (планшет и телефон)
• Левое поле: -100vw (рабочий стол), -138vw (планшет), -300vw (телефон)
• Верхний отступ: 0 пикселей
• Нижняя прокладка: 1,3vw (рабочий стол), 2,2vw (планшет), 3vw (телефон)

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

Масштаб преобразования

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

• Внизу: 153%
• Право: 500%

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

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

• Слева: 348 градусов

Воссоздать пример №2

Раздел переполнен

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

overflow: hidden;

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

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

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

Интервал

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

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

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

Видимость

Пришло время добавить и стилизовать модуль разделителя! Убедитесь, что опция «Показать разделитель» включена.

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

Фоновый цвет

Мы снова используем один из цветов в цветовой палитре пакета макетов в качестве цвета фона.

• Цвет фона: # d94144.

Цвет

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

• Цвет: # f3f1f2

Размеры

Мы также экспериментируем с настройками размеров.

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

Интервал

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

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

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

Масштаб преобразования

Время трансформироваться! Первое, что мы сделаем, это масштабируем модуль Divider. Мы делаем это, чтобы убедиться, что в начале и в конце раздела нет пробелов. Не беспокойтесь о чрезмерном масштабировании модуля разделителя, все, что выходит за пределы раздела, не будет отображаться в вашем дизайне.

• Внизу: 153%
• Справа: 153% (компьютер), 250% (планшет), 500% (телефон)

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

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

• Внизу: 25vw (рабочий стол), 27vw (планшет и телефон)
• Справа: 0px (рабочий стол), -32vw (планшет и телефон)

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

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

• Слева: 270 градусов

Воссоздать пример №3

Раздел переполнен

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

overflow: hidden;

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

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

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

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

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

Видимость

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

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

Фоновый цвет

Перейдите к настройкам фона и добавьте цвет фона по вашему выбору.

• Цвет фона: # d94144.

Цвет

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

• Цвет: # f3f1f2

Стили

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

• Стиль разделителя: пунктирный

Размеры

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

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

Интервал

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

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

Коробка Тень

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

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.3)

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

Масштаб преобразования

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

• Внизу: 140%
• Правильно: 140%

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

Затем мы перейдем к настройкам преобразования и трансформации и изменим положение модуля разделителя. Размещение строки в верхней части раздела помогает нам поддерживать более низкий z-index, чем строка, которая идет под ним, что создает прекрасное перекрытие!

• Внизу: 4vw
• Справа: 16vw (рабочий стол), 26vw (планшет), 35vw (телефон)

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

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

Рабочий стол

Мобильный

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

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