Как расположить столбцы и модули Divi в уникальном дизайне с нарушенной сеткой
Опубликовано: 2019-07-10Современный веб-дизайн по-прежнему ломает сетку. Это достигается за счет расстановки элементов и дизайнерских акцентов в позициях, которые нарушают обычную структуру макета сетки. Вы можете увидеть, как мы применяем множество этих сломанных сеток в наших потрясающих макетах Divi. Обычно это включает в себя что-то вроде перемещения модулей за пределы столбца или строки, чтобы они выходили за пределы контейнера или перекрывали другие элементы на странице. Но вы, возможно, не подумали о перемещении фактического столбца.
В этом уроке я покажу вам, как расположить столбцы и модули Divi в шахматном порядке для создания уникальных дизайнов с разбитой сеткой. С новыми параметрами столбцов Divi вы можете легко перемещать столбцы, а также модули, которые они содержат. Это позволяет создавать как модуль, так и столбец с уникальными стилями для творческого дизайна ломанной сетки.
Давайте начнем!
Sneak Peek
Вот краткий обзор примеров дизайна, которые мы построим в этом руководстве.
Загрузите макет столбцов и модулей Stagger Divi БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Объяснение основной идеи
Основная идея, лежащая в основе того, как расположить столбцы и модули Divi в уникальном дизайне с разбитой сеткой, заключается в использовании свойства Divi transform translate для позиционирования столбцов и модулей, которые они содержат.
После того, как элементы расположены в шахматном порядке, у вас есть все конструктивные особенности колонны и модуля для добавления дизайнерских акцентов, которые создают уникальные конструкции с ломаной сеткой.
Так, например, вы можете добавить уникальный фон (цвет, изображение и т. Д.) С тенью блока в свой столбец и совершенно другой фон и тень блока в свой модуль.
Теперь, когда у вас есть основная идея, давайте создадим дизайн с нуля.
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Пара изображений для фиктивного содержания
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Потрясающие колонны и модули для создания уникального дизайна ломанной сетки в Divi
Сначала создайте новый обычный раздел со строкой из двух столбцов.
Затем добавьте модуль призыва к действию в столбце 1.
Измените текст заголовка на «Divi Module» или другой короткий заголовок по вашему выбору.
Затем обновите модуль с темным цветом фона, а затем измените текст заголовка следующим образом:
Цвет фона: # 333333
Выравнивание текста: по левому краю
Шрифт заголовка: горький
Размер текста заголовка: 50 пикселей
Интервал между заглавными буквами: 2 пикселя
Затем обновите кнопку модуля призыва к действию следующим образом:
Размер текста кнопки: 16 пикселей
Цвет текста кнопки: # 333333
Цвет фона кнопки:
Цвет границы кнопки: #ffffff
Радиус границы кнопки: 25 пикселей
Расстояние между буквами кнопки: 2 пикселя
Шрифт кнопки: Raleway
Толщина шрифта кнопок: полужирный
Стиль шрифта кнопки: TT
Затем скопируйте модуль и вставьте дубликат в столбец 2, чтобы у вас был один и тот же модуль призыва к действию в каждом столбце.
Обновить интервал между строками
Теперь давайте добавим верхнее и нижнее поля к строке, чтобы освободить место для дизайна.
Маржа: 20% сверху, 20% снизу
Добавить фоновые изображения столбца
Несмотря на то, что мы пока не сможем их увидеть, мы собираемся добавить фоновые изображения в каждый из столбцов. Они станут видимыми, как только мы переместим наш модуль за пределы контейнера столбца с помощью transform translate.
Идите вперед и откройте настройки для столбца 1 и добавьте фоновое изображение.
Затем откройте настройки для столбца 2 и добавьте фоновое изображение.
Добавьте тень коробки в каждый столбец
Откройте настройки столбца 1 и добавьте следующую тень блока:
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: 0 пикселей
Сила распространения тени коробки: 100 пикселей
Цвет тени: rgba (151,178,193,0.21)
Затем добавьте тот же стиль тени блока в столбец 2. Чтобы ускорить процесс, вы можете использовать параметры правой кнопки мыши, чтобы скопировать стили тени блока в столбце 1, а затем вставить их в стили тени блока в столбце 2.
Вы заметите, что тени будут перекрываться. Использование полупрозрачного цвета тени блока поможет создать крутой эффект перекрытия. Это отличная особенность использования теней в дизайне. В отличие от границ, вы можете добавить большие тени, которые выглядят как границы, но они не влияют на фактический интервал макета.
Столбцы Stagger Divi с помощью Transform Translate
На этом этапе мы готовы начать расстановку столбцов и модулей, чтобы завершить дизайн сломанной сетки. Во-первых, нам нужно переместить столбцы к внешнему краю страницы. Потом мы сможем переместить модули к центру позже.
Столбец 1 в шахматном порядке
Откройте настройку столбца 1 и добавьте следующее свойство transform translate.
Преобразовать преобразовать ось X: 25%
Преобразовать преобразовать ось Y: -25% (рабочий стол), -5% (планшет)
Столбец 2 в шахматном порядке
Для столбца 2 добавьте следующее свойство transform translate.
Преобразовать преобразовать ось X: -25%
Преобразовать преобразовать ось Y: 25% (настольный компьютер), 5% (планшет)
Расстановка модулей с помощью Transform Translate
Теперь мы готовы расположить наши модули в шахматном порядке, переместив их за пределы контейнера столбца. Это откроет фоновое изображение столбца и позволит нам добавить в модуль еще одну тень блока для дополнительного перекрывающегося элемента дизайна.
Пошаговый модуль 1
Откройте настройки модуля призыва к действию в столбце 1 и обновите следующее:
Преобразовать преобразовать ось X: -60%
Преобразовать преобразовать ось Y: 50% (рабочий стол), 10% (планшет)
Добавить тень блока в модуль 1
Затем добавьте следующую тень блока к модулю призыва к действию в столбце 1:
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: 0 пикселей
Сила распространения тени коробки: 100 пикселей
Цвет тени: rgba (151,178,193,0.21)
Пошаговый модуль 2
Чтобы переместить модуль в столбец 2, обновите следующее:
Преобразовать преобразовать ось X: 60%
Преобразовать преобразовать ось Y: -50% (рабочий стол), -10% (планшет)
Добавить тень блока в модуль 2
Затем мы можем добавить тень блока к модулю призыва к действию в столбце 2. Нам нужно сделать эту тень блока почти полностью прозрачной, потому что она будет перекрывать модуль 1, и мы не хотим затруднять чтение содержимого.
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: 0 пикселей
Сила распространения тени коробки: 100 пикселей
Цвет тени: rgba (151,178,193,0.09)
Добавить рамку для теней Row Box Shadow
Чтобы завершить дизайн, давайте добавим тень блока к строке, которая служит элементом дизайна кадра, который находится на заднем плане.
Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Цвет тени: # 97b2c1
Окончательный дизайн
Теперь посмотрим на окончательный дизайн.
Рабочий стол
Планшет
Телефон
Экспериментируйте с разными дизайнами
Что круто в этом дизайне, так это то, что он позволяет вам легко изменять количество модулей, цвета и интервалы для новых дизайнов. И вы также можете расположить столбцы и модули Divi в разных положениях.
Добавление интервала к модулю для создания фонового изображения столбца равного размера модулю
Поскольку размер столбца определяется размером содержимого, которое он содержит, любое пространство, которое вы добавляете в модуль, также увеличивает размер столбца. А поскольку в нашей колонке есть фоновое изображение, это простой способ всегда масштабировать фоновое изображение в соответствии с размером модуля для сбалансированного дизайна.
Например, откройте настройки модуля призыва к действию в столбце 1 и обновите отступы следующим образом:
Набивка: 20% верх, 15% низ
И обратите внимание, как фоновое изображение столбца 1 масштабируется с размером модуля.
Добавление дополнительных модулей
Таким же образом добавление дополнительных полей к модулю увеличивает размер фона столбца, добавление дополнительных модулей в столбец также увеличивает размер фона столбца.
Например, продублируйте модуль в столбце 2 и обратите внимание, как фоновое изображение расширяется, чтобы вместить пространство, необходимое для двух модулей в столбце.
Затем вы можете переместить верхний модуль в столбце 2 немного вправо, чтобы получить красивый альтернативный дизайн.
Вот результат.
Изменение цвета
Если вы хотите, чтобы макет соответствовал вашей собственной цветовой схеме, отличный способ сделать это - обновить цвета тени блока.
Вот пример того, как это будет выглядеть при обновлении теней полупрозрачного блока для столбца 1, модуля 1 и модуля 2.
Последние мысли
Я надеюсь, что этот урок дал вам немного вдохновения для того, как вы можете расположить столбцы и модули Divi в шахматном порядке для создания ваших собственных уникальных дизайнов с разбитой сеткой. Техника действительно проста и включает в себя в основном несколько свойств преобразования, чтобы расположить столбцы и модули, и несколько теней для создания уникального ломаного дизайна. Не стесняйтесь исследовать больше вариантов цвета и вводить больше модулей, чтобы увидеть, куда вас может привести дизайн.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!