Как создать макет геометрической сетки в Divi

Создание макета с геометрической сеткой для вашего веб-сайта может быть необычайно красивым. Один из моих любимых геометрических элементов дизайна - шестиугольник. Шестиугольники можно использовать для создания хорошо сбалансированных и гармоничных сеток (например, пчелиный улей). Но дизайн может быть сопряжен с проблемами. У вас есть формы, которые будут служить фоном для вашего контента. Затем вам нужно разместить содержимое внутри формы. Затем вы должны убедиться, что эти фигуры правильно расположены на экранах разных размеров. Но не волнуйтесь. Это не так сложно, как вы думаете.

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

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

Давайте начнем!

Sneak Peek

Вот пример геометрической сетки, которую мы построим в этом уроке.

Что вам нужно

• Фоторедактор (я буду использовать Sketch) для создания изображения шестиугольника. Или пока вы можете просто перетащить это изображение на свой рабочий стол и использовать его.
  
• Тема Divi (установленная и активная)

Создание фонового изображения шестиугольника

Чтобы создать фоновое изображение шестиугольника, я буду использовать фоторедактор Sketch (только для Mac). Однако эту форму должно быть легко создать в любом количестве фоторедакторов (например, Photoshop, Illustrator или GIMP).

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

Вот как создать изображение в эскизе. Сначала щелкните значок вставки в правом верхнем углу. Затем наведите указатель мыши на параметр формы и выберите форму шестиугольника.

Теперь, удерживая клавишу Shift, щелкните (и удерживайте) на холсте и перетащите мышь, чтобы создать форму, затем отпустите ее. Удерживая нажатой клавишу Shift, вы можете создать идеально квадратные размеры для вашей формы. Теперь обновите свойства вашей формы на правой боковой панели следующим образом:

Размер: 360 ширина, 360 высота
Стороны: 6
Цвет заливки: 000000 hex, 0 R, 0 G, 0 B, 30 A (в основном это черный цвет с непрозрачностью 30%)

Затем экспортируйте изображение как png и импортируйте его в медиатеку WordPress для дальнейшего использования.

Создание первого раздела с тремя столбцами

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

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

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

Цвет фонового градиента слева: # 2b87da
Цвет фона градиента справа: rgba (0,0,0,0.6)

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

Чтобы добиться желаемого дизайна, нам нужно добавить фоновое изображение в каждый столбец нашей трехколоночной строки. Итак, для каждого столбца добавьте изображение шестиугольника (должно быть 360 на 360 пикселей) в каждый столбец. Затем установите размер фонового изображения на «фактический размер», а повторение фонового изображения на «без повтора».

Убедитесь и сделайте это для фоновых изображений столбцов 1, 2 и 3.

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

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

Использовать нестандартную ширину: ДА
Ед. изм: %
Пользовательская ширина: 100%
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 2
Выровнять высоту столбца: ДА

Пользовательский отступ (рабочий стол): 0 пикселей сверху, 0 пикселей снизу, 10% слева, 10% справа
Пользовательское заполнение (планшет): 0% влево, 0% вправо

Пока сохраните настройки строки.

Добавление ваших рекламных модулей в каждый столбец

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

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

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

Цвет значка: # 66d1ff
Размер шрифта значка: 66 пикселей
Ориентация текста: по центру
Цвет текста: светлый
Ширина: 360 пикселей (такая же, как у фонового изображения шестиугольника)
Выравнивание модуля: по центру
Пользовательские отступы: 85 пикселей сверху, 85 пикселей снизу, 10% слева, 10% справа

Важно сначала добавить контент, который вы хотите отображать перед вашим шестиугольником, чтобы вы теперь, как настроить интервал вашего модуля рекламного сообщения, чтобы полностью раскрыть фоновое изображение. Обратите внимание, что я добавил верхнее и нижнее отступы размером 85 пикселей. Этого достаточно, чтобы открыть фон шестиугольника даже при настройке браузера под размеры мобильного устройства.

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

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

Создание второго раздела с двумя столбцами

Чтобы создать наш второй раздел, продублируйте первый раздел, затем обновите настройки раздела со следующим цветом фона: rgba (0,0,0,0.6) и удалите существующий градиент.

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

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

Ширина желоба: 3
Пользовательское поле (для настольных ПК): -145 пикселей вверху
Пользовательское поле (планшет): -70 пикселей сверху
Пользовательское заполнение (рабочий стол): 24% влево, 24% вправо

Я добавил больше отступов слева и справа, чтобы расположить фон шестиугольника между пятнами в разделе выше (отступы 24% с каждой стороны довольно близко нас). Я также изменил ширину желоба обратно на 3, чтобы учесть уменьшенное пространство столбцов из-за большего отступа строк. Затем я использовал поле -145 пикселей, чтобы немного подтянуть строку.

Как видите, макет сетки сближается.

Создание третьего раздела с одной колонкой

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

Теперь обновите структуру столбца строки до одного столбца и удалите дополнительный модуль рекламного сообщения.

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

В настройках строки обновите настраиваемое заполнение следующим образом:

Пользовательское заполнение (рабочий стол): 37% влево, 37% вправо

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

Вот как это выглядит на мобильном телефоне.

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

Последняя мысль

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

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

Ваше здоровье!