Современный веб-дизайн — это всегда разрушение сетки. Это достигается за счет расположения элементов в шахматном порядке и выделения акцентов в позициях, которые нарушают обычную структуру сетки. Вы можете увидеть их применение в разорванных сетках на великолепных макетах. Divi. Обычно это включает в себя перемещение модулей за пределы столбца или строки, чтобы они выходили за пределы контейнера или перекрывали другие элементы на странице. Но вы, возможно, не подумали переместить столбец.
В этом уроке я покажу вам, как расположить столбцы и модули в шахматном порядке. Divi для уникальных дизайнов с ломаной сеткой. с новостями параметры столбца Divi , вы можете легко перемещать столбцы, а также содержащиеся в них модули. Это позволяет вам создавать как модуль, так и столбец с уникальными стилями для творческого дизайна ломаной сетки.
Давайте начнем!
обследование
Вот обзор примеров дизайна, которые мы будем строить в этом уроке.
Что нужно для начала
Для начала вам необходимо следующее:
- Le Диви тема установлен и активен
- Новая страница, созданная для создания с нуля внешнего интерфейса (визуальный конструктор)
- Некоторые изображения для использования содержание фиктивный
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Застой колонн и модулей для создания уникального ломаного дизайна сетки в Divi
Начните с создания нового регулярного раздела со строкой из двух столбцов.
Затем добавьте призыв к модулю действий в столбце 1.
Измените текст заголовка на «Модуль Divi» или другой короткий заголовок по вашему выбору.
Затем обновите модуль темным фоновым цветом, затем отредактируйте текст заголовка следующим образом:
Цвет фона: #333333
Выравнивание текста: слева
Название шрифта: горький
Размер текста заголовка: 50px
Интервал между заголовками: 2px
Затем обновите кнопку вызова модуля действий следующим образом:
Размер текста кнопки: 16px
Цвет текста кнопки: #333333
Цвет фона кнопки: Цвет
граница кнопки: #ffffff
Радиус границы кнопки: 25px
Расстояние между буквами кнопок: 2px
Шрифт кнопки: Raleway Размер
Шрифт кнопок: жирный
Основной стиль шрифта: TT
Затем скопируйте модуль и вставьте дубликат в столбец 2, чтобы у вас был одинаковый вызов для модуля действия в каждом столбце.
Обновить межстрочный интервал
Теперь добавьте верхние и нижние поля, чтобы освободить место для дизайна.
Маржа: 20% вверх, 20% вниз
Добавить фоновые изображения столбца
Хотя мы еще не сможем их увидеть, мы добавим фоновые изображения в каждый столбец. Они станут видимыми, как только мы переместим наш модуль из контейнера столбца с помощью transform translate.
Продолжайте, откройте настройки в столбце 1 и добавьте фоновое изображение.
Затем откройте настройки для столбца 2 и добавьте фоновое изображение.
Добавьте теневой блок к каждому столбцу
Откройте настройки для столбца 1 и добавьте тень следующего поля:
Box Shadow: см. Снимок экрана
Box Shadow Горизонтальное положение: 0px
Вертикальная позиция Box Shadow: 0px
Распространение теней: 100px
Цвет тени: rgba (151, 178, 193, 0.21)
Затем добавьте тот же стиль тени блока в столбец 2. Чтобы ускорить процесс, можно использовать параметры, щелкнув правой кнопкой мыши, чтобы скопировать стили теней блоков в столбец 1, а затем вставить их в стили теней блоков столбца 2.
Вы заметите, что тени в поле будут перекрываться. Использование полупрозрачного цвета омбре поможет создать супер-многослойный эффект. Это главное преимущество использования теней в дизайне. В отличие от границ, вы можете добавить большие тени, которые выглядят как границы, но не влияют на фактический интервал макета.
Наложение столбцов с помощью Transform Translate
На этом этапе мы готовы переместить столбцы и модули, чтобы завершить проектирование прерванной сетки. Во-первых, нам нужно переместить столбцы к внешнему краю страницы. Потом мы сможем переместить модули в центр позже.
Колонка с шатанием 1
Откройте параметр столбца 1 и добавьте следующее свойство преобразования перевода.
Преобразовать преобразовать ось X: 25%
Преобразовать преобразовать ось Y: -25% (рабочий стол), -5% (планшет)
Колонка с шатанием 2
Для столбца 2 добавьте следующее свойство преобразования преобразования.
Преобразовать преобразовать ось X: -25%
Преобразовать преобразовать ось Y: 25% (рабочий стол), 5% (планшет)
Смещение модулей с помощью Transform Translate
Теперь мы готовы разложить наши модули, переместив их из контейнера столбца. Это откроет фоновое изображение столбца и позволит нам добавить еще одну тень области к модулю для дополнительного перекрывающегося элемента дизайна.
Смещение модуля 1
Откройте параметры вызова в столбце 1 и обновите следующее:
Преобразовать преобразовать ось X: -60%
Преобразовать преобразовать ось Y: 50% (рабочий стол), 10% (планшет)
Добавьте тень блока в модуль 1
Затем добавьте тень следующего поля в модуль вызова действия в столбце 1:
Box Shadow: см. Снимок экрана
Box Shadow Горизонтальное положение: 0px
Вертикальная позиция Box Shadow: 0px
Распространение теней: 100px
Цвет тени: RGBA (151,178,193,0.21)
Интервал между модулями 2
Чтобы переместить модуль в столбец 2, обновите следующее:
Преобразовать перевести ось X: 60%
Ось преобразования преобразования Y: -50% (рабочий стол), -10% (планшет)
Добавьте тень блока в модуль 2
Далее мы можем добавить тень блока к модулю призыва к действию в столбце 2. Нам нужно сделать эту тень блока почти полностью прозрачной, поскольку она будет перекрывать модуль 1, и мы не хотим усложнять чтение содержание.
Box Shadow: см. Снимок экрана
Box Shadow Горизонтальное положение: 0px
Вертикальная позиция Box Shadow: 0px
Распространение теней: 100px
Цвет тени: RGBA (151,178,193,0.09)
Добавьте рамку Shadow Box
Чтобы завершить дизайн, добавьте тень зоны к линии, служащей элементом дизайна рамки на заднем плане.
Box Shadow: см. Снимок экрана
Вертикальная позиция Box Shadow: 0px
Цвет тени: #97b2c1
Заключительные мысли
Надеюсь, этот урок дал вам небольшое представление о том, как можно смещать столбцы и модули Divi для создания собственных дизайнов с разбитой сеткой. Техника очень простая. Он в основном включает некоторые свойства преобразования преобразования для смещения столбцов и модулей, а также тени блока для создания единого разорванного узора. Не стесняйтесь исследовать больше вариантов цвета и вводить больше модов, чтобы увидеть, куда вас может привести дизайн.
Надеюсь получить известие от вас в комментариях.
