Как создать домашнюю страницу свадебного объявления с помощью Divi

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

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

Давайте посмотрим на макет домашней страницы, который мы собираемся помочь вам создать шаг за шагом:

Создание меню навигации

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

Вот почему вам сначала нужно сделать правильное и элегантное меню навигации.

Начните с Divi> Параметры темы> и загрузите логотип, который вы хотите использовать на всем своем веб-сайте.

Нажмите «Сохранить изменения» и перейдите на страницы своего веб-сайта WordPress. Добавьте новую страницу, на которой вы будете создавать страницу объявления. Сделайте то же самое для страницы галереи и страницы со списком подарков, которые мы покажем вам, как создать в следующих публикациях.

Давайте пока оставим содержимое пустым и перейдем к Настройщику тем вашего веб-сайта, чтобы изменить меню навигации. Начните с добавления страниц вашего веб-сайта в меню, выбрав « Меню»> «Добавить меню»> «Добавить страницы в свое меню» . Это меню должно быть основным меню вашего сайта.

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

• Высота меню: 66
• Настройте максимальную высоту логотипа в зависимости от размеров изображения.
• Размер текста: 16
• Расстояние между буквами: 2
• Шрифт: Raleway Light
• Стиль шрифта: полужирный
• Цвет текста: # 9b7461
• Цвет фона: rgba (155,116,97,0,13)

Теперь вернитесь к заголовку и навигации и измените стиль заголовка на «По центру» в формате заголовка.

Сохраните и опубликуйте внесенные вами изменения.

Начните со страницы объявлений

Веб-сайт состоит из четырех разделов, и каждый из них вносит свой вклад в веб-сайт, делая ваше свадебное объявление законченным. Мы собираемся подробно объяснить каждый раздел и показать вам, как именно вы можете создать тот же дизайн, что и макет, показанный выше.

Раздел героев (включая обратный отсчет)

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

Мы собираемся использовать стандартный раздел с одной полной строкой в ​​режиме полной ширины в этой части веб-сайта. В разделе строк вам нужно будет добавить три модуля; два текстовых модуля и один модуль обратного отсчета. Модуль обратного отсчета расположен посередине обоих текстовых модулей.

Начните работу с первым текстовым модулем

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

• Размер шрифта текста: 100 пикселей (рабочий стол), 80 пикселей (планшет), 66 пикселей (телефон)
• Шрифт текста: мандарин
• Цвет текста: # 9b857b

На той же вкладке прокрутите вниз и измените поля текстового модуля, добавив «10%» вверху и «5%» внизу.

Нажмите "Сохранить и выйти".

Модуль подсчета (рабочий стол)

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

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

• Шрифт чисел: мандарин
• Размер шрифта цифр: 74 пикселей
• Цвет шрифта цифр: # 9b857b
• Высота строки цифр: 70 пикселей
• Шрифт этикетки: Raleway Light
• Размер шрифта ярлыка: 14 пикселей
• Цвет текста ярлыка: # 9b857b
• Высота линии ярлыка: 25 пикселей

На той же вкладке прокрутите вниз и установите для параметра Top Custom Padding значение «10%», а для Bottom Custom Padding - значение «10%».

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

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

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

Модуль обратного отсчета (планшет и телефон)

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

• Размер шрифта цифр: 72 пикселя (как на планшете, так и на телефоне).
• Высота строки цифр: 70 пикселей
• Размер шрифта ярлыка: 14 пикселей (планшет), 12 пикселей (телефон)

И измените код в главном элементе вкладки CSS на:

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

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

Теперь в модуле обратного отсчета добавьте еще один текстовый модуль. На вкладке «Общие настройки» измените ориентацию текста на «По центру». Продолжите, добавив имя жениха и невесты и перейдя на вкладку Advanced Design Settings.

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

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

Продолжайте прокручивать вкладку Advanced Design Settings до Custom Margin и добавьте «10%» к верхнему полю.

Делитель

Последняя часть этого раздела героев - разделитель. Добавьте разделитель и измените цвет на вкладке «Общие» на «# 9b857b». Убедитесь, что разделитель также сделан «видимым».

Затем перейдите на вкладку «Дизайн» и сделайте стиль разделителя «Сплошным», положение разделителя - «Верх», измените толщину разделителя на «1 пиксель» и скройте на мобильном устройстве.

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

margin-left: auto;
margin-right: auto;
width: 30%;

Нажмите "Сохранить и выйти". Вы закончили первый раздел сайта, который должен выглядеть так:

Теперь мы можем перейти ко второй части этого макета, где вы можете начать рассказывать свою историю гостям.

Рассказ анонса: второй раздел

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

Первый ряд раздела

Начните с создания стандартной секции, измените цвет фона на «# fffaf6» и добавьте «5%» к нижнему отступу. Затем добавьте в этот раздел строку из двух столбцов.

Далее открываем настройки строки. В общих настройках выберите «ДА», чтобы использовать нестандартную ширину, измените единицу измерения на процент и введите «90%». Прокрутите вниз на той же вкладке, активируйте ширину желоба и скройте для телефона и планшета.

Затем перейдите на вкладку Advanced Design Settings, выровняйте высоту столбцов и добавьте «# 9b857b» в качестве цвета фона первого столбца. На той же вкладке измените отступ столбца 1 на «5%» вверху, «10%» справа, «5%» внизу и «10%» влево.

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

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

Теперь добавьте текстовый модуль в первый столбец строки. На вкладке «Общие настройки» установите ориентацию текста «По центру» и введите текст, которым хотите поделиться, в текстовое поле. Затем перейдите на вкладку Advanced Design Settings.

На вкладке Advanced Design Settings внесите следующие изменения:

• Максимальная ширина: 500 пикселей (только для ПК)
• Шрифт текста: мандарин
• Размер шрифта текста: 44
• Цвет текста: # fffaf6

И добавьте 5% к нижнему отступу.

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

• Максимальная ширина: 500 пикселей
• Размер шрифта текста: 14 пикселей
• Шрифт текста: Raleway Light
• Стиль шрифта: полужирный
• Цвет шрифта текста: # fffaf6
• Высота текстовой строки: 1,7 мкм

Нажмите Сохранить и выйти.

Клонировать предыдущую строку

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

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

Нажмите «Сохранить и выйти», и все готово.

Ряд для телефона и планшета

Создайте еще одну строку из двух столбцов и скройте для рабочего стола. Сделайте строку полной шириной и измените ширину желоба на «3».

Затем перейдите на вкладку «Дизайн», загрузите фоновое изображение для обоих столбцов и внесите следующие изменения в настраиваемое заполнение обоих столбцов:

• Топ-5%
• Правильно: 10%
• Внизу: 5%
• Осталось: 10%

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

Шафер, фрейлина, невесты и женихи

Почему бы не разместить на своем свадебном сайте самых важных людей в своей жизни? Рассказ о том, кто будет шафером, подружкой невесты, женихом и невестой, может дать вашему сайту небольшой дополнительный импульс.

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

Теперь, когда вы создали стандартный раздел, придайте ему следующий цвет фона: '# fae4de'. Больше ничего менять в настройках раздела не нужно, поэтому вы можете нажать «Сохранить и выйти».

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

Затем создайте первую строку с полной шириной. Единственное, что вам нужно будет добавить, это текстовый модуль. Откройте текстовый модуль, заполните текстовое поле и выберите «Центр» в поле «Ориентация текста».

Затем перейдите в «Расширенные настройки дизайна», установите для шрифта текста значение «Мандарин», размер шрифта текста - «100 пикселей» (настольный компьютер и планшет) и «68%» (телефон), а для цвета шрифта текста - значение «# 9b857b». Прокрутите ту же вкладку вниз и измените поля на «10%» вверху и «5%» внизу.

Нажмите "Сохранить и выйти". Ваш первый модуль и строка готовы.

Добавьте еще одну строку, в данном случае с двумя столбцами, и добавьте 5% к верхнему и нижнему полю. Затем добавьте модуль человека в первый столбец строки.

Модуль "Изображение и человек"

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

Затем перейдите в Расширенные настройки дизайна и внесите следующие изменения:

• Шрифт заголовка: Raleway Light
• Стиль шрифта заголовка: полужирный
• Размер шрифта заголовка: 14
• Цвет текста заголовка: # 9b857b
• Высота строки заголовка: 1em
• Шрифт корпуса: Raleway Light
• Стиль основного шрифта: полужирный
• Размер шрифта основного текста: 14
• Цвет основного текста: # 9b857b
• Высота линии корпуса: 1,7 эм

Откройте настройки модуля person и перейдите на вкладку CSS. В поле Изображение участника добавьте следующий код:

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

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

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

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

Где и когда

Это последняя часть вашей свадебной домашней страницы, где вы будете информировать свою аудиторию о месте и времени вашей свадьбы. Для этого раздела нам понадобится строка с 3 столбцами (1/2, 1/4, 1/4) со следующим цветом фона: '# fffaf6'.

Добавление карты

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

В других столбцах мы будем использовать текстовые модули и аннотации. Добавьте текстовый модуль и установите для параметра Ориентация текста в общих настройках значение «По центру». Затем перейдите в Advanced Design Settings и внесите следующие изменения:

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

Настройки этого текстового модуля применяются к текстовым модулям в обоих столбцах.

Модуль Blurb

Под текстовым модулем добавьте модуль Blurb. Выберите значок местоположения, измените его цвет на «# f9c8b8», добавьте местоположение в текстовое поле и измените ориентацию текста на «Центр». Затем перейдите в Расширенные настройки дизайна и внесите следующие изменения:

• Размер шрифта значка: 42 пикс.
• Шрифт корпуса: Raleway Light
• Стиль шрифта: полужирный
• Размер шрифта основного текста: 14
• Цвет основного текста: # 9b857b
• Высота линии тела: 1em

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

Вот и все. Теперь ваш макет должен выглядеть так же гладко, как макет в этом уроке:

Следующий

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

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