Как создать адаптивный макет витрины с пятью столбцами с Divi

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

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

Sneak Peek

Используемые адаптивные методы

Используйте произвольную ширину строки и ширину желоба

Ключ к созданию адаптивного макета с пятью столбцами - это, во-первых, дать вашим столбцам достаточно места для хранения содержимого. В дизайне этого урока я собираюсь задать ширину строки, содержащей пять столбцов, шириной 89%. Затем я создам еще больше места, установив ширину желоба равной 1, что в основном убирает любые поля между столбцами. Для этого дизайна важно использовать настраиваемую ширину 89% вместо установки полной ширины строки, потому что вы можете установить ширину желоба равной 1 и по-прежнему сохранять поля с каждой стороны строки. Вы поймете, что я имею в виду.

Используйте единицы длины vw для интервала и текста заголовка

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

Часть 1: Начало работы

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

Итак, для начала создайте новую страницу, дайте ей название и разверните Visual Builder. Выберите вариант «Выбрать готовый макет». Во всплывающем окне загрузки из библиотеки выберите пакет макетов «Дизайн интерьера», а затем загрузите макет домашней страницы архитектурной фирмы на свою страницу.

Часть 2: Создание раздела заголовка

Для начала продублируйте вторую часть, содержащую три аннотации.

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

Давай продолжим.

В исходном разделе (не в дубликате) удалите три размытия и измените структуру столбцов строки на один столбец.

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

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

Часть 3: Настройка размытия для макета с пятью столбцами

Теперь пришло время посетить раздел, который мы продублировали с нашими исходными тремя вставками внутри строки из 3 столбцов. Во-первых, давайте изменим структуру строк на макет из пяти столбцов.

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

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

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

Добавьте фоновое изображение и градиент в верхний модуль Blurb

Затем сделайте то же объявление фоновым изображением и добавьте градиент, чтобы наложить изображение следующим образом:

Добавить фоновое изображение
Цвет фона градиента слева: rgba (255,255,255,0)
Цвет фона градиента справа: rgba (18,18,18,0,65)
Стартовая позиция: 50%
Поместите градиент вверху фонового изображения: ДА

Градиент необходим, чтобы текст заголовка стал более читабельным с более светлыми фоновыми изображениями.

Используйте единицы VW для текста заголовка и интервала

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

Размер текста заголовка: 2.7vw (рабочий стол), 46px (планшет), 36px (смартфон)
Интервал между заглавными буквами: -3 пикселя
Пользовательская маржа: 1.5vw слева, 1.5vw справа
Пользовательское заполнение: 35vw сверху, 2vw снизу, 1vw слева, 1vw справа

Сохранить настройки.

Специальная обивка 35vw создает уникальный длинный вертикальный дизайн изображения. Тексту заголовка присваивается значение 2.7vw, чтобы текст масштабировался единообразно при разной ширине браузера. Остальной интервал станет более понятным, когда мы позже добавим интервал в нашу строку.

Настройка нижнего рекламного объявления

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

Выравнивание основного текста: по левому краю
Цвет основного текста: # 666666
Пользовательские отступы: 2vw сверху, 2vw снизу, 2vw слева, 2vw справа

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

Часть 4: Настройка параметров раздела

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

Цвет фона: #ffffff
Пользовательские отступы: верх по умолчанию, нижний 5vw, левый по умолчанию, правый по умолчанию
Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: -200 пикселей
Сила размытия тени коробки: 0 пикселей
Цвет тени: # 121212

Часть 5: Настройка параметров строки

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

Фоновое изображение: #ffffff
Выравнивание строк: по центру
Специальная ширина: 89%
Ширина желоба: 1
Специальная маржа: -10vw
Пользовательские отступы: 3vw сверху, 3vw снизу, 1.5vw слева, 1.5vw справа
Box Shadow: см. Снимок экрана
Сила размытия тени коробки: 80 пикселей

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

На этом основная структура дизайна закончена. Вот как выглядит дизайн на данный момент.

Часть 6: Добавление последних штрихов

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

Ошеломляющие пятна

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

Индивидуальная набивка: верх 28vw

И для верхнего рекламного объявления в третьем столбце измените верхний отступ на 30vw.

Добавьте разделитель разделов, чтобы добавить текстуру в строку с пятью столбцами

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

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

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

Вот окончательный дизайн.

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

А вот как это выглядит на смартфоне.

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

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

Я с нетерпением жду вашего ответа в комментариях.

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