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

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

Результат

Результат, который мы покажем вам, шаг за шагом, будет выглядеть так на рабочем столе:

И вот так на телефоне и планшете:

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

Подпишитесь на наш канал Youtube

Добавление прозрачных форм к изображениям с помощью Photoshop

Первое, что мы вам покажем, это как добавить прозрачную часть к изображению с помощью Photoshop. Существует бесплатная альтернатива Photoshop под названием GimpShop, но в этой части урока мы будем использовать только Photoshop. Нам понадобятся два изображения с двумя разными формами; один для настольного компьютера, другой для мобильного телефона и планшета. В этой части мы просто покажем вам, как добавить прозрачную форму к изображению. После этого вы сможете сами сделать все нужные вам изображения.

Откройте Photoshop

Начните с открытия Photoshop на вашем компьютере.

Открыть изображение

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

Дважды щелкните изображение и создайте слой

Открыв изображение, которое хотите отредактировать, дважды щелкните изображение и создайте для него новый слой.

Добавить еще один слой

Продолжайте, добавляя еще один пустой слой поверх него.

Выберите Layer 1 & Polygonal Lasso Tool

Выберите слой 1 и начните использовать инструмент Polygonal Lasso Tool.

Сделать форму

Включив инструмент Polygonal Lasso Tool, создайте прозрачную форму на вашем изображении.

Сделайте слой 1 невидимым и нажмите «Удалить», выделив слой 0.

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

Выберите инструмент Rectangular Marquee Tool и щелкните где-нибудь на изображении.

Как только вы это сделаете, выберите инструмент Rectangular Marquee Tool и щелкните где-нибудь на своем изображении.

Сохранить изображение как PNG

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

Настройки основной панели меню

Настройки основной панели меню, которые нам нужны для создаваемого макета, следующие:

• Скрыть изображение логотипа: включить
• Высота меню: 30
• Размер текста: 15
• Расстояние между буквами: -1
• Шрифт: Lato
• Стиль шрифта: полужирный и прописные.
• Цвет текста: #FFFFFF
• Цвет активной ссылки: #FFFFFF
• Цвет фона: rgba (255,255,255,0)
• Цвет фона выпадающего меню: rgba (255,255,255,0)

Издание Введение

После того, как вы изменили основную строку меню, вы можете продолжить и добавить новую страницу, использовать Divi Builder и переключиться на Visual Builder.

Добавить новый раздел

На этой странице начните с добавления стандартного раздела.

Цвет фона раздела

Фон этого цвета должен быть '# d6d6d6'.

Пользовательское заполнение

Перейдите на вкладку «Дизайн» этого раздела. В подкатегории «Интервал» добавьте «24 пикселя» к верхнему отступу и 0 пикселей к нижнему.

Добавить строку в одну колонку

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

Размеры

Перейдите на вкладку Дизайн и измените подкатегорию Размер:

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

Пользовательское заполнение

Прокрутите вниз и добавьте 0 пикселей к верхнему отступу строки.

Первый текстовый модуль

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

• Шрифт текста: старый стандартный TT
• Стиль шрифта: прописные
• Размер шрифта текста: 72 (рабочий стол), 41 (планшет), 29 (телефон)
• Цвет текста: # 000000
• Расстояние между буквами текста: 11 пикселей
• Высота текстовой строки: 1em
• Ориентация текста: по центру

Откройте подкатегорию Spacing и добавьте 30 пикселей к верхнему и нижнему отступу.

Модуль делителя

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

Перейдите на вкладку «Дизайн» и выберите цвет разделителя «#FFFFFF».

Затем выберите «Сплошной» в качестве стиля разделителя и «Верх» в качестве положения разделителя в подкатегории «Стили».

Затем откройте подкатегорию «Размер» и примените следующие настройки:

• Вес разделителя: 10 пикселей
• Высота: 23 пикс.
• Ширина: 100%
  

Второй текстовый модуль

Прямо под модулем разделителя добавьте еще один текстовый модуль. Выберите любой значок на карте символов (Windows) или палитре символов (Mac) и поместите его на вкладку «Содержимое». В этом примере мы использовали следующий символ: «↓». Затем перейдите на вкладку Дизайн и примените следующие настройки:

• Размер шрифта текста: 42 пикс.
• Цвет текста: # 000000
• Ориентация текста: по центру

Каталог модной одежды для ПК (новый раздел)

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

Настройки раздела

Фоновый цвет

Используйте '#FFFFFF' в качестве цвета фона этого раздела.

Пользовательское заполнение

Затем перейдите на вкладку «Дизайн» и добавьте «15 пикселей» к верхнему отступу.

Первая строка

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

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

Фоновый цвет

Откройте настройки строки и добавьте rgba (255,255,255,0.14) в качестве цвета фона.

Фоновая картинка

Добавьте одно из изображений, которые вы сделали в Photoshop, и используйте «Оттенок» в качестве наложения фонового изображения.

Размеры

Наконец, внесите следующие изменения в подкатегорию Размеры:

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

Первый текстовый модуль

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

• Шрифт текста: горький
• Размер шрифта текста: 63 пикс.
• Цвет текста: # 000000
• Ориентация текста: по центру

Модуль делителя

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

Перейдите на вкладку «Дизайн» и используйте цвет разделителя «# 000000».

В подкатегории «Стили» используйте «Solid» в качестве стиля разделителя и «Top» в качестве позиции разделителя.

Прокрутите ту же вкладку вниз и примените следующие настройки к подкатегории «Размер»:

• Вес разделителя: 3 пикселя
• Высота: 23 пикс.
• Ширина: 57%
• Выравнивание модуля: слева

Наконец, добавьте верхнее поле 30 пикселей и нижнее поле 50 пикселей.

Второй текстовый модуль

Как только разделитель будет на месте, добавьте второй текстовый модуль, который будет содержать заголовок. Прежде всего, используйте «# 000000» в качестве цвета фона на вкладке «Содержимое».

Затем перейдите на вкладку «Дизайн» и примените следующие параметры к подкатегории «Текст»:

• Шрифт текста: горький
• Размер шрифта текста: 92 пикс.
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: влево

Откройте подкатегорию Border и используйте следующую границу:

• Использовать границу: Да
• Цвет границы: # 000000
• Ширина границы: 3 пикселя
• Стиль границы: сплошной

Кроме того, используйте ширину «77%» и левое выравнивание модуля.

Наконец, добавьте 15 пикселей к верхнему, правому, нижнему и левому отступу текстового модуля.

Третий текстовый модуль

Добавьте еще один текстовый модуль прямо под предыдущим. Это будет описание. Перейдите на вкладку «Дизайн» и используйте следующие параметры для подкатегории «Текст»:

• Шрифт текста: Lato
• Размер шрифта текста: 16 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: влево

Откройте подкатегорию «Размер», используйте «70%» для ширины и выберите левое выравнивание модуля.

Наконец, добавьте верхнее поле 20 пикселей.

Пятый текстовый модуль

Пятый текстовый модуль представляет собой минималистичную кнопку. На вкладке «Содержимое» используйте символ «→» + текст и поместите за ним ссылку.

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

• Шрифт текста: горький
• Размер шрифта текста: 23 пикс.
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: влево

Прокрутите ту же вкладку вниз, пока не найдете подкатегорию «Размер». В этой подкатегории используйте ширину «49%» и правильное выравнивание модуля.

Наконец, добавьте верхнее поле 80 пикселей.

Шестой текстовый модуль

Шестой и последний модуль, который нам понадобится, почти такой же, как и предыдущий. Используйте текст «→» + и поместите за ним ссылку.

Настройки для подкатегории текста следующие:

• Шрифт текста: горький
• Размер шрифта текста: 23 пикс.
• Цвет текста: # e02b20
• Высота текстовой строки: 1em
• Ориентация текста: влево

Измените ширину на «39%» и также используйте правильное выравнивание модуля.

Второй ряд

Фоновый цвет

Откройте настройки строки и добавьте rgba (255,255,255,0.14) в качестве цвета фона.

Фоновая картинка

Добавьте одно из изображений, которые вы сделали в Photoshop, и используйте «Оттенок» в качестве наложения фонового изображения.

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

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

Клонировать модули

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

Модификации первого текстового модуля

Откройте первый текстовый модуль и добавьте верхнее поле 20 пикселей.

Модификации модуля делителя

Затем откройте модуль разделителя и измените выравнивание модуля в подкатегории «Размер» вправо.

Модификации второго текстового модуля

Установите ориентацию текста второго текстового модуля вправо.

И выберите правильное выравнивание модуля в подкатегории Sizing.

Модификации третьего текстового модуля

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

И правильное выравнивание модуля.

Модификации пятого текстового модуля

Единственное, что вам нужно сделать для пятого текстового модуля, - это изменить ширину на 82%.

Модификации шестого текстового модуля

То же самое для шестого текстового модуля, но вместо него используется «87%».

Скрыть раздел для планшета и телефона

После того, как вы закончите две строки, вы можете продолжить и отключить весь раздел на телефоне и планшете.

Каталог планшетов и телефонов (новый раздел)

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

Настройки раздела

Фоновый цвет

Добавьте '#FFFFFF' в качестве цвета фона этого раздела.

Пользовательское заполнение

Перейдите на вкладку «Дизайн» и добавьте верхний отступ размером 15 пикселей.

Первая строка

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

Затем добавьте в раздел строку из двух столбцов.

Размеры

Перейдите в подкатегорию «Размер» этой строки и внесите следующие изменения:

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

Модуль изображения

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

Клонировать модули первого ряда в настольной версии

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

Изменить размер шрифта второго текстового модуля

Нужно изменить только одну вещь; размер шрифта второго текстового модуля. Измените его на 65 пикселей.

Второй ряд

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

Затем добавьте в раздел еще одну строку из двух столбцов.

Размеры

Для этой строки также потребуется измененная подкатегория Sizing:

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

Модуль изображения

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

Клонировать модули второго ряда в настольной версии

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

Изменить размер шрифта второго текстового модуля

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

Скрыть раздел для рабочего стола

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

Результат

Et voila, выполнив все шаги, описанные в этом посте, вы должны достичь следующего результата на рабочем столе:

И на телефоне и планшете:

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Лучшее изображение: Rvector / shutterstock.com