Как создать страницу свадебной галереи с Divi
Опубликовано: 2017-05-17Этот пост является частью 2 из 5 нашего мини-сериала « Как создать элегантный свадебный веб-сайт с Divi». В этой серии мы проведем вас через самые важные части создания свадебного веб-сайта для себя или клиента с помощью Divi.
В первой части нашего мини-сериала мы показали вам, как сделать элегантную страницу с объявлением о свадьбе. Эта вторая часть будет посвящена созданию страницы галереи на вашем свадебном веб-сайте. Страница галереи выполнена в том же стиле, что и страница объявления о свадьбе, что позволяет использовать их на одном веб-сайте без необходимости вносить много изменений.
Мы покажем вам шаг за шагом, как создать следующий макет с помощью визуального конструктора Divi:
Этот макет состоит из 6 разделов, которые помогут вам создать интерактивную и красивую страницу галереи.
Раздел героев
Мы решили использовать очень простой заголовок, который не выглядит слишком загруженным. На странице галереи уже будет много изображений, и мы хотим, чтобы люди сосредоточились на этом. Наличие простого раздела с героями позволяет гостям лучше понять суть страницы, не отвлекаясь на визуальные элементы в начале страницы.
Создать страницу
Начните с создания страницы с помощью конструктора Divi и переключитесь на Visual Builder.
Вы можете видеть, что на вашей новой странице уже есть один автоматически существующий раздел. Этот раздел содержит строку в полную ширину. Для первой части этого раздела нам понадобится строка полной ширины, поэтому продолжайте ее использовать.
Откройте настройки только что созданного раздела и откройте подкатегорию Фон на вкладке содержимого. Затем измените цвет фона на '# fffaf6'.
Текстовый модуль
Продолжите, добавив текстовый модуль в полноразмерный столбец строки. Введите текст в текстовое поле на вкладке «Содержимое» и перейдите на вкладку «Дизайн».
Выберите подкатегорию «Текст» на вкладке «Дизайн», чтобы начать редактирование дизайна вашего контента. Для созданного макета нам необходимо внести следующие изменения в подкатегорию Text вашего текстового модуля:
- Ориентация текста: по центру
- Шрифт текста: мандарин
- Размер шрифта текста: 90p (рабочий стол), 80 (планшет), 66 (телефон)
- Цвет текста: # 9b857b
- Высота текстовой строки: 1,7 мкм
Если вам не хочется прокручивать страницу вниз и искать различные варианты, которые нужно изменить, вы также можете воспользоваться опцией поиска. Этот вариант поможет вам стать более продуктивным и мгновенно изменить ситуацию, не прилагая больших усилий. В приведенном ниже примере мы просто ищем термины «Шрифт текста» и сразу же видим, что эта опция появляется.
Щелкните Сохранить и выйти.
Невеста и жених
Далее вам нужно будет создать раздел с двумя отдельными изображениями жениха и невесты.
Идите вперед и добавьте новую строку из двух столбцов прямо под предыдущей строкой, которую вы создали. Откройте настройки строки и перейдите на вкладку Дизайн.
Затем перейдите на вкладку «Дизайн» в настройках строки и откройте подкатегорию «Размер». Активируйте опцию Custom Width и измените процентное значение на «60%». Прокрутите ту же вкладку и добавьте «5%» к нижнему полю.
Опять же, вы можете выбрать простой выход и просто написать «Custom Width» в строке поиска.
Образ невесты
Добавьте модуль изображения в первый столбец строки. Загрузите изображение невесты на вкладке «Контент» в подкатегории «Изображение» и перейдите на вкладку «Дополнительно». Щелкните подкатегорию Custom CSS и добавьте следующую строку кода в поле Main Element:
border: 10px double #9b857b;
Как упоминалось ранее, вы также можете просто ввести «Главный элемент» в строке поиска, и он сразу же появится. Использование опции поиска может значительно сэкономить время, особенно когда вы пытаетесь следовать инструкциям руководства. Вы можете делать именно то, что требуется, не слишком об этом задумываясь.
Нажмите "Сохранить и выйти".
Образ жениха
Как видите, изображения имеют одинаковые настройки. Идите вперед и клонируйте модуль изображения, единственное, что вам нужно будет изменить, это изображение. Вот как должна выглядеть ваша страница галереи:
Благодарственная записка
Страница галереи обычно появляется на свадебном сайте после того, как свадьба состоится. Люди рады видеть сделанные фотографии, поэтому велика вероятность, что все ваши гости посетят страницу. Это делает страницу галереи идеальным местом, чтобы сказать гостям последнее слово.
Для начала добавьте в макет новый стандартный раздел. Внутри раздела используйте строку полной ширины.
Затем откройте настройки раздела и измените цвет фона на «# fffaf6» в подкатегории фона.
Первый текстовый модуль
Добавьте текстовый модуль в только что созданную строку. На вкладке «Контент» введите текст, который вы хотите отображать на своем веб-сайте, в текстовое поле. Продолжите, перейдя на вкладку «Дизайн».
Начните с выбора подкатегории Текст на вкладке дизайна и внесите следующие изменения, выполнив поиск их вручную или выполнив поиск в строке поиска:
- Ориентация текста: по центру
- Шрифт текста : мандарин
- Размер шрифта текста: 70 (компьютер и планшет), 50 (телефон)
- Цвет текста: # 9b857b
- Высота текстовой строки: 1em
Теперь выберите подкатегорию «Интервал» на той же вкладке и измените нижнее поле на «5%».
Нажмите "Сохранить и выйти".
Второй текстовый модуль
Добавьте новый текстовый модуль под первый созданный вами текстовый модуль. На вкладке содержимого напишите благодарственное письмо, которым хотите поделиться с гостями в текстовом поле, и перейдите на вкладку Дизайн.
Внесите следующие изменения на вкладке «Дизайн», выполнив поиск вручную или выполнив поиск параметров с помощью панели поиска.
- Ориентация текста: по ширине
- Шрифт текста: Raleway Light
- Стиль текста: полужирный
- Размер шрифта текста: 14
- Цвет текста: # 9b857b
- Высота текстовой строки: 1,6 мкм
Нажмите «Сохранить и выйти», и все готово. Вот как должна выглядеть ваша страница галереи сейчас:
Раздел избранных изображений
После того, как вы закончите раздел благодарственных писем, вы можете перейти к разделу, где вы показываете любимые фотографии жениха и невесты. В этой части вы будете использовать два раздела и применять код CSS к модулям изображений, чтобы они выглядели поляроидными.
Начните с добавления стандартного раздела. В этом стандартном разделе вам понадобится строка полной ширины. Откройте настройки раздела и измените цвет фона на «# 9b857b» в подкатегории «Фон» на вкладке содержимого.
Затем добавьте в строку текстовый модуль. Откройте настройки и введите заголовок, который вы хотите отображать, в текстовом поле подкатегории «Текст». Далее перейдите на вкладку Дизайн и внесите следующие изменения в подкатегорию Текст:
- Ориентация текста: по центру
- Шрифт текста: мандарин
- Размер шрифта текста: 100 (компьютер и планшет), 68 (телефон)
- Цвет текста: # fffaf6
- Высота текстовой строки: 1,6 мкм
Щелкните Сохранить и выйти.
Изображения Polaroid (Рабочий стол)
Для этой части вам понадобится еще один стандартный раздел. В этом разделе вам понадобится строка с 4 столбцами. Измените цвет фона этого раздела на «# fae4de» на вкладке «Содержимое» в подкатегории «Фон».
Продолжите, добавив модуль изображения в первый столбец строки. Откройте настройки изображения и загрузите одно из любимых изображений в подкатегории Изображение на вкладке содержимого.
Затем перейдите на вкладку «Дополнительно», щелкните подкатегорию «Идентификатор CSS и классы» и введите «поляроид» в поле «Класс CSS». В поле Main Element добавьте следующий код:
z-index: 1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);
Теперь, чтобы применить класс «полароид», вам нужно перейти на серверную часть своего веб-сайта. Перейдите в Divi> Параметры темы> и вставьте следующий код в поле Custom CSS внизу страницы:
.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}
.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}
.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}После этого вы можете вернуться в Visual Builder. Вам понадобится более одного изображения поляроида, поэтому вам следует клонировать модуль изображения 7 раз и убедиться, что вы поместили их в разные столбцы. В каждом столбце должно быть 2 модуля изображений.
Чтобы поляроидные изображения выглядели забавно, вам придется изменить код CSS в поле «Главный элемент» каждого модуля изображения по отдельности. Чтобы применить другой код, мы дали каждому модулю изображения другой номер на изображении ниже:
В зависимости от присвоенного номера измените код в поле «Главный элемент» соответствующим образом. Вы можете найти главный элемент на вкладке «Дополнительно» в подкатегории «Пользовательский CSS». Добавьте значение в поля Custom Margin в подкатегории Spacing на вкладке Design:
Изображение 1
Это первый созданный вами модуль изображения, так и оставьте.
Изображение 2
Пользовательские поля:
Верх: -10%
Осталось: -20%
Главный элемент:
z-index: 5; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);
Изображение 3
Пользовательские поля:
Осталось: -20%
Главный элемент:
Никто
Изображение 4
Пользовательские поля:
Верх: -10%
Осталось: -20%
Главный элемент:
z-index: 3; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);
Изображение 5
Пользовательские поля:
Никто
Главный элемент:
-webkit-transform: rotate(14deg); -moz-transform: rotate(14deg); transform: rotate(14deg);
Изображение 6
Пользовательские поля:
Верх: -10%
Осталось: -20%
Главный элемент:
-webkit-transform: rotate(-18deg); -moz-transform: rotate(-18deg); transform: rotate(-18deg);
Изображение 7
Пользовательские поля:
Осталось: -20%
Главный элемент:
z-index: 1; -webkit-transform: rotate(-10deg);l -moz-transform: rotate(-10deg);
Изображение 8
Пользовательские поля:
Верх: -10%
Осталось: -20%
Главный элемент:
z-index: 5; -webkit-transform:rotate(-3deg); -moz-transform: rotate(-3deg);
После настройки всех изображений откройте настройки ряда. Перейдите на вкладку «Дополнительно» и скройте строку для телефона и планшета в подкатегории «Видимость».
Кроме того, убедитесь, что люди могут открывать изображение в этом разделе, активировав лайтбокс в подкатегории «Ссылка» на вкладке «Содержимое».
Избранные изображения (планшет и телефон)
Чтобы изображения были отзывчивыми, мы добавим еще одну строку в тот же раздел. Сделайте это строкой полной ширины и клонируйте модули изображения номер 1 и 5. Поместите эти клонированные модули в новый ряд. В мобильной версии мы будем использовать только эти две версии созданных нами модулей изображений.
Теперь откройте настройки строки. Перейдите на вкладку «Дополнительно» и скройте строку на рабочих столах в подкатегории «Видимость».
После внесения всех этих изменений ваш макет на рабочем столе должен выглядеть так:
Галерея по фамилии (рабочий стол)
Обычно на свадьбах делается много фотографий, из-за чего сложно найти на них определенную структуру. Вот почему мы решили сделать раздел галереи на этой странице галереи более простым. Галереи будут отображаться на основе фамилий гостей, что позволит им легко найти свои собственные фотографии.
Список имен
Для начала вам нужно показать список фамилий и связать их с разделом страницы, где они найдут изображения.
Создайте новый стандартный раздел и разместите в нем строку во всю ширину. Далее добавляем текстовый модуль. Введите текст, который должен отображаться в подкатегории «Текст» на вкладке «Содержимое». Затем перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Текст»:
- Ориентация текста: по центру
- Шрифт текста: мандарин
- Размер шрифта текста: 100 (компьютер и планшет), 68 (телефон)
- Цвет текста: # 9b857b
- Высота текстовой строки: 1,6 мкм
Прокрутите ту же вкладку и измените верхнее поле на «2%», а нижнее поле на «5%» в подкатегории «Интервал».
Щелкните Сохранить и выйти. Теперь добавьте еще одну строку, в данном случае с тремя столбцами. На вкладке «Дизайн» параметров строки измените нижнее поле на «5%» в подкатегории «Интервал».
Затем добавьте текстовый модуль в левый столбец строки. В текстовом модуле добавьте треть фамилий гостей. Для каждой из этих фамилий потребуется привязка к той части веб-сайта, на которую вы хотите их перенести. Выберите одно из имен, щелкните значок ссылки и напишите «#» + имя. Позже в этом сообщении в блоге вы свяжете это имя с определенным разделом. Повторите то же самое для каждого имени в списке.
Выберите одно из имен, щелкните значок ссылки и напишите «#» + имя. Позже в этом сообщении в блоге вы свяжете это имя с определенным разделом. Повторите то же самое для каждого имени в списке.
Перейдите на вкладку Дизайн и внесите следующие изменения в подкатегорию Текст:
- Ориентация текста: вправо
- Шрифт текста: Raleway Light
- Стиль текста: полужирный
- Размер шрифта текста: 20
- Цвет текста: # 9b857b
- Высота текстовой строки: 1,6 мкм
Двигаясь дальше, дважды клонируйте текстовый модуль и поместите клонированные модули в два других столбца. Убедитесь, что вы изменили фамилии в этих списках и ориентацию текста на «Центр» для второго столбца и «Влево» для третьего столбца.
Откройте настройки строки и измените видимость только на рабочем столе в подкатегории «Видимость» на вкладке «Дополнительно».
Галерея по фамилии (планшет и телефон)
Чтобы убедиться, что веб-сайт адаптируется, мы собираемся создать новую строку, которая подходит для планшетов и телефонов. Добавьте новую строку со столбцом полной ширины. Затем добавьте текстовый модуль в эту полноразмерную строку и введите фамилии в текстовое поле. Вы можете найти текстовое поле в подкатегории «Текст» на вкладке «Содержимое».
Повторите то же самое, что и в предыдущей строке, щелкнув значок ссылки и написав "#" + имя в поле URL.
Но убедитесь, что вы назначаете разные ссылки привязки каждому второму имени. В этом примере и у Эйвери, и у Брауна будет другая ссылка привязки, чем на настольных компьютерах. Мы должны это сделать, потому что в следующей части веб-сайта нам нужно будет иметь два разных раздела галереи для каждой второй галереи. Таким образом, он будет реагировать на планшет и телефон.
И последнее, но не менее важное: перейдите на вкладку «Дополнительно» в строке и отключите строку для рабочих столов в подкатегории «Видимость».
Раздел галереи (рабочий стол)
В последней части веб-сайта нам нужно будет создать разные разделы галереи, которые будут представлять разные фамилии. Мы собираемся показать вам, как сделать два из них, а затем вы можете добавить и другие соответственно.
Сначала добавьте стандартный раздел. Измените цвет фона на '# fae4de' в подкатегории "Фон" на вкладке "Содержимое".
Далее добавляем строку, подобную этой:
В разделах строк используйте Custom Width. Перейдите на вкладку «Дизайн». Выберите и измените значение «Настраиваемая ширина» на «60%» в подкатегории «Размер».
Затем перейдите на вкладку «Дизайн» и установите для верхнего и нижнего поля значение «5%».
Текстовый модуль
Теперь добавьте текстовый модуль и введите фамилию семейства в текстовое поле в подкатегории «Текст» на вкладке «Содержимое». Перейдите на вкладку Дизайн и внесите следующие изменения:
- Выравнивание текста: по центру
- Шрифт текста: мандарин
- Размер шрифта текста: 60
- Цвет текста: # 9b857b
- Высота текстовой строки: 1,6 мкм
Прокрутите ту же вкладку вниз и измените верхнее поле на «20%» в подкатегории «Интервал».
Перейдите на вкладку Advanced. В поле CSS ID подкатегории CSS ID & Classes вам нужно будет связать ссылку привязки, которую вы сделали выше, с текстовым модулем. Итак, если первой якорной ссылкой в списке была «#adams», вам нужно будет заполнить «adams». Убедитесь, что идентификатор совпадает с тем, который вы связали с именем в списке, который вы составили ранее.
Во втором столбце строки вам нужно будет добавить модуль галереи. Введите «8» в поле «Число изображений» в подкатегории «Изображения» на вкладке «Общие» и выберите 8 изображений.
Затем перейдите на вкладку «Дизайн» и убедитесь, что ваш макет - «Сетка», а ориентация эскиза - «Пейзаж» в подкатегории «Макет».
Двигаясь дальше, перейдите на вкладку Advanced. На этой вкладке вам нужно будет добавить код в два разных раздела подкатегории Custom CSS; основной элемент и оверлей.
Главный элемент:
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; border: 5px solid #FFFFFF; column-count: 2; column-gap: 0px;
Оверлей:
-webkit-filter: brightness(0%);
Нажмите "Сохранить и выйти".
Теперь идите и клонируйте раздел. Измените структуру столбцов на следующую и поменяйте местами между текстовым модулем и модулем галереи:
Измените изображения в галерее, фамилию, указанную в текстовом поле, и идентификатор класса. Этот раздел также имеет другой цвет фона; '# fffaf6'.
Теперь перейдите на вкладку «Дополнительно» в этой строке и скройте ее для планшетов и телефонов в подкатегории «Видимость».
Вы можете продолжить создание таких разделов галереи, в зависимости от количества фамилий, присутствовавших на свадьбе.
Раздел галереи (мобильный)
Как мы уже упоминали ранее, каждому второму разделу галереи потребуется альтернатива для мобильных устройств. Просто клонируйте первую строку галереи, которую мы создали, и поместите ее в тот же раздел последней строки галереи, которую мы создали.
Затем откройте параметры текстового модуля. Перейдите на вкладку «Дизайн» и удалите верхнее поле в подкатегории «Интервал». Затем перейдите на вкладку «Дополнительно» и измените идентификатор CSS в подкатегории «Идентификатор CSS и классы» на «avery1». Это тот же идентификатор, что и в списке, который применяется к планшетам и телефонам.
Вот и все. Теперь ваш макет должен выглядеть точно так же, как тот, который мы создали и показали вам в начале этого сообщения в блоге:
Следующий
В третьей части этого мини-сериала мы увидим, как создать страницу со списком подарков и добавить ее на свадебный веб-сайт. Если у вас есть какие-либо вопросы относительно этого руководства или если у вас есть какие-либо запросы относительно будущих руководств; обязательно оставьте комментарий в разделе комментариев к этому сообщению в блоге, чтобы вернуться к вам с ответами!
Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!