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

Этот пост является частью 3 из 5 нашего мини-сериала « Как создать элегантный свадебный веб-сайт с Divi». В этой серии мы проведем вас через самые важные части создания свадебного веб-сайта для себя или клиента с помощью Divi.

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

Мы покажем вам шаг за шагом, как вы можете создать следующий макет с помощью Visual Builder Divi:

Макет состоит из пяти разделов, и каждый из них вносит свой вклад в целое. Давайте погрузимся в первую!

Раздел героев

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

Начать

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

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

Продолжите, добавив в раздел строку с полной шириной. Откройте настройки строки и измените цвет фона на «rgba (122,122,122,0.56)» в подкатегории «Фон» на вкладке «Содержимое».

Двигаясь дальше, перейдите на вкладку Дизайн. Откройте подкатегорию «Размер», увеличьте ширину строки и введите «1» в поле «Ширина желоба».

Прокрутите вниз и откройте подкатегорию Spacing. Нам нужно добавить «200 пикселей» к верхнему и нижнему отступу для настольных компьютеров и «150 пикселей» к верхнему и нижнему отступу для планшетов и телефонов.

В той же подкатегории добавьте «-50px» к верхнему и нижнему полю для планшетов и телефонов.

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

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

• Ориентация текста: по центру
• Шрифт текста: мандарин
• Размер шрифта текста: 100 (компьютер и планшет), 68 (телефон)
• Цвет текста: # fffaf6
• Высота текстовой строки: 1,5 м

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

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

• Ориентация текста: по центру
• Шрифт текста: Raleway Light
• Стиль шрифта текста: полужирный
• Размер шрифта текста: 20 пикселей (рабочий стол), 14 пикселей (планшет и телефон)
• Цвет текста: # fffaf6
• Высота текстовой строки: 1,5 м

Ваш заголовок пока должен выглядеть так:

Раздел "Введение"

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

Начните с создания нового раздела и добавьте строку с одним столбцом. Измените цвет фона на «# fffaf6» в подкатегории «Фон» на вкладке «Содержимое». После этого открываем настройки ряда и переходим во вкладку Дизайн. Добавьте «5%» к верхнему и нижнему полю только для настольных компьютеров.

Заголовок раздела

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

• Ориентация текста: по центру
• Шрифт текста: мандарин
• Стиль шрифта текста: полужирный
• Размер шрифта текста: 60 ​​пикселей (рабочий стол), 50 пикселей (планшет и телефон)
• Цвет текста: # 9b857b
• Высота текстовой строки: 1,7 мкм

Теперь откройте подкатегорию «Размер» и измените максимальную ширину на «500 пикселей».

Продолжите, открыв подкатегорию «Интервал» на той же вкладке и добавьте «3%» к верхнему и нижнему отступу.

Затем перейдите на вкладку Advanced и добавьте следующий код в основной элемент в подкатегории Custom CSS:

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

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

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

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

Затем перейдите на вкладку Advanced и добавьте следующий код в поле Main Element в подкатегории Custom CSS:

height: 100px;
width: 150px;

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

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

• Ориентация текста: по центру
• Шрифт текста: Raleway Light
• Размер шрифта текста: 24px
• Цвет текста: # 9b857b
• Высота текстовой строки: 1,5 м

Прокрутите ту же вкладку вниз и добавьте «30 пикселей» к верхнему полю в подкатегории «Интервал».

И последнее, но не менее важное: перейдите на вкладку Advanced того же текстового модуля и добавьте следующий код в основной элемент в подкатегории Custom CSS:

font-weight:400;

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

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

• Ориентация текста: по центру
• Шрифт текста: Raleway Light
• Стиль шрифта текста: полужирный
• Размер шрифта текста: 16 пикселей
• Цвет текста: # 9b857b
• Высота текстовой строки: 1,5 м

Прокрутите ту же вкладку и измените максимальную ширину на «300 пикселей» в подкатегории «Размер». Измените также верхнее поле на «5%» в подкатегории «Интервал».

Затем перейдите на вкладку Advanced и добавьте следующий код в основной элемент в подкатегории Custom CSS:

font-weight: 300;

Модуль клонирования изображения и текстовые модули

Добавьте еще одну строку, но на этот раз с тремя столбцами, в тот же раздел.

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

Затем перейдите на вкладку «Дизайн» в строке и добавьте «5%» к нижнему полю в подкатегории «Интервал».

Модуль изображения невесты

Теперь добавьте модуль изображения во второй столбец строки. Загрузите изображение и перейдите на вкладку Дизайн. Убедитесь, что вы установили для параметра «Выравнивание изображения» значение «Влево» и активировали параметр «Всегда центрировать изображение на мобильных устройствах» в подкатегории «Выравнивание».

Прокрутите ту же вкладку вниз и добавьте «5%» к верхнему полю в подкатегории «Интервал».

Затем перейдите на вкладку Advanced и добавьте следующий код в основной элемент в подкатегории Custom CSS:

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

Наконец, отключите модуль изображения на телефонах и планшетах.

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

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

Кроме того, установите для параметра Top Margin значение «-60%» в подкатегории «Интервал».

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

Список желаний / список подарков

Добавьте новый стандартный раздел и измените цвет фона на «# fae4de» в подкатегории «Фон» на вкладке «Содержимое».

Текстовый модуль: заголовок

Добавьте в раздел строку с полной шириной и сделайте ее полной. После этого клонируйте текстовый модуль, который мы создали во втором разделе, и поместите его в этот модуль строк. Измените текст в текстовых сообщениях и измените цвет фона на '# fffaf6' в поле основного элемента в подкатегории Custom CSS раздела Advanced таб.

Список подарков / Список желаний: Использование модуля слайдера

Добавьте в раздел новую строку с 3 столбцами и измените значение Custom Width «65%» в подкатегории «Размер» на вкладке «Дизайн». Затем добавьте текстовый модуль в первую строку и внесите следующие изменения в подкатегорию «Текст» на вкладке «Дизайн»:

• Ориентация текста: по центру
• Шрифт текста: Raleway Light
• Стиль шрифта текста: полужирный
• Размер шрифта текста: 24 пикс.
• Цвет текста: # 9b857b
• Высота текстовой строки: 1,5 м

Прокрутите ту же вкладку вниз и добавьте «30 пикселей» к верхнему полю в подкатегории «Интервал».

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

Затем добавьте модуль слайдера. Перейдите на вкладку «Дополнительно» ползунка и добавьте следующий код в основной элемент в подкатегории Custom CSS:

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

Идем дальше, добавляем новый слайд. Внутри слайда загрузите фоновое изображение одного из предметов, которые вы хотите добавить в список подарков, в подкатегории «Фон» на вкладке «Содержимое». Затем введите имя элемента и текст кнопки в подкатегории «Текст» на той же вкладке. Также измените URL-адрес в подкатегории «Ссылка». Добавьте столько слайдов в одну категорию, сколько вам нужно, и повторите то же самое.

Продолжите, добавив новую строку, но теперь только с 2 столбцами.

Измените пользовательскую ширину на «55%» в подкатегории «Размер» на вкладке «Дизайн» и измените нижнее поле на «5%» в подкатегории «Интервал».

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

Теперь ваш макет должен выглядеть так:

Контактная форма (рабочий стол)

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

Создайте новый стандартный раздел и измените цвет фона на # fffaf6 в подкатегории «Фон» на вкладке «Содержимое».

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

Строка, которая нам нужна в этом разделе, такая же, как и в других разделах. Просто клонируйте ранее использованный модуль Row с текстовым модулем в нем и поместите его в раздел. Единственное, что вам нужно сделать, это внести некоторые изменения в настройки текстового модуля. Измените цвет текста и фона в основном элементе на # fae4de.

Второй ряд

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

Текст поля формы:

• Шрифт поля формы: Raleway Light
• Размер шрифта поля формы: 18 пикселей
• Цвет текста поля формы: # 9b857b
• Высота линии поля формы: 1,7 мкм

Граница:

• Радиус входной границы: 15
• Использовать границу: Да
• Цвет границы: # d7dce1
• Ширина границы: 1 пикс.
• Стиль границы: сплошной

Кнопка:

• Размер текста кнопки: 15
• Размер текста кнопки: 15
• Цвет текста кнопки: # fffaf6
• Цвет фона кнопки: # 9b857b
• Ширина границы кнопки: 9
• Цвет границы кнопки: # 9b857b
• Радиус границы кнопки: 4

На вкладке «Содержимое» модуля «Контактная форма» теперь можно добавить три поля; Имя, адрес электронной почты и сообщение.

Вручную измените цвет фона каждого поля на # fae4de.

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

• Ориентация текста: по центру
• Шрифт текста: Raleway Light
• Стиль шрифта Tet: полужирный
• Размер шрифта текста: 16
• Цвет текста: # 9b857b
• Высота буквенной линии: 1,5 м

Прокрутите ту же вкладку и добавьте «300 пикселей» к максимальной ширине в подкатегории «Размер».

Наконец, введите «5 пикселей» в верхнем поле в подкатегории «Интервал».

Контактная форма (планшет и телефон)

Клонируйте ранее созданную строку и просто поменяйте местами (и столбцами) модуль контактной формы и текстовый модуль. Перейдите на вкладку Advanced и скройте строку для рабочих столов.

Теперь ваш макет должен выглядеть так:

Следующий

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

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