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

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

Давайте приступим к делу!

Предварительный просмотр

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО дизайн мокапа Scroll Gallery

Чтобы получить дизайн макета бесплатной прокрутки галереи, вам сначала нужно будет загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Начнем воссоздавать!

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

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

Размеры

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

• Ширина: 25vw (рабочий стол), 60vw (планшет), 80vw (телефон)
• Макс.ширина: 25vw (рабочий стол), 60vw (планшет), 80vw (телефон)

Интервал

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

• Верхняя маржа: 9vw
• Внизу: 9vw
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Граница

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

Коробка Тень

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

• Сила размытия тени коробки: 100 пикселей
• Цвет тени: rgba (0,0,0,0.18)

Добавить строку №1

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

Продолжите, добавив первую строку в раздел, используя следующую структуру столбцов:

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и измените цвет фона.

• Цвет фона: #ffffff

Размеры

Затем перейдите к настройкам размера и позвольте строке занять всю ширину секции.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем удалите верхнее и нижнее отступы по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Коробка Тень

И также добавьте тень от коробки.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.92)

Индекс Z

И последнее, но не менее важное: мы собираемся убедиться, что строка (и особенно ее тень) перекрывает следующую строку, увеличивая индекс Z в настройках видимости.

• Индекс Z: 99

Добавить текстовый модуль в столбец

Добавить контент H2

Единственный модуль, который нам нужен в этой строке, - это текстовый модуль с некоторым содержимым H2.

Настройки текста H2

После того, как вы добавили копию H2, перейдите к настройкам текста H2 и внесите некоторые изменения.

• Шрифт заголовка 2: Abril Fatface
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 1.5vw (рабочий стол), 3.5vw (планшет), 5vw (телефон)

Интервал

Затем добавьте настраиваемые верхнее и нижнее поле.

• Верхняя маржа: 1.5vw (настольный компьютер и планшет), 3.5vw (телефон)
• Нижнее поле: 1.5vw (настольный компьютер и планшет), 3.5vw (телефон)

Добавить строку №2

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

Во второй ряд! Здесь мы используем следующую структуру столбцов:

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Высота: 38vw (настольный), 100vw (планшет), 120vw (телефон)
• Макс.высота: 38 Вт (настольный), 100 Вт (планшет), 120 Вт (телефон)

Интервал

Затем перейдите к настройкам интервалов и удалите все верхние и нижние отступы по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Вертикальный перелив

Как упоминалось ранее, мы делаем эту строку вертикально прокручиваемой. Для этого нам нужно изменить вертикальное переполнение в настройках видимости строки.

• Вертикальное переполнение: прокрутка

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

Загрузить изображение

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

Размеры

Убедитесь, что вы включили опцию «Force Fullwidth» в модуле изображения, чтобы обеспечить быстрый результат.

• Принудительная полная ширина: Да

Интервал

Затем перейдите к настройкам интервалов и создайте пространство между этим и любым модулем, который будет следующим, добавив некоторый нижний отступ.

• Нижняя маржа: 1vw

Клонируйте модуль изображения столько раз, сколько хотите

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

Загрузить разные изображения

Конечно, вы захотите изменить изображение в каждом из дубликатов.

Добавить строку №3

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

Переходим к третьему и последнему ряду! Мы используем следующую структуру столбцов:

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и добавьте белый цвет фона.

• Цвет фона: #ffffff

Размеры

Затем перейдите к настройкам размера и позвольте строке занять всю ширину секции.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Верхняя прокладка: 2.1vw (рабочий стол), 3.5vw (планшет), 5vw (телефон)
• Нижняя прокладка: 2.1vw (рабочий стол), 3.5vw (планшет), 5vw (телефон)

Коробка Тень

И добавьте тень блока, чтобы создать глубину.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.92)

Индекс Z

Чтобы убедиться, что эта строка (и особенно ее тень блока) перекрывает предыдущую строку, мы собираемся увеличить индекс Z.

• Индекс Z: 99

Добавить модуль кнопки в столбец

Добавить копию

Единственный модуль, который нам нужен в этой строке, - это кнопочный модуль. Добавьте какую-нибудь копию по вашему выбору.

Выравнивание

Затем перейдите на вкладку дизайна и измените выравнивание кнопки.

• Расположение кнопок: по центру

Настройки кнопок

Измените также настройки кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 2.5vw (планшет), 3.5vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000
• Ширина границы кнопки: 1 пиксель
• Шрифт кнопки: Abril Fatface

Интервал

И создайте желаемую форму, используя настраиваемые значения отступов.

• Верхнее заполнение: 0,5vw (рабочий стол), 1vw (планшет), 2vw (телефон)
• Нижняя прокладка: 0,5vw (рабочий стол), 1vw (планшет), 2vw (телефон)
• Левое заполнение: 3vw (рабочий стол), 7vw (планшет), 9vw (телефон)
• Правая прокладка: 3vw (рабочий стол), 7vw (планшет), 9vw (телефон)

Полоса прокрутки стиля

Добавить CSS ID в строку №2

Вам решать, хотите ли вы стилизовать полосу прокрутки. Если да, откройте вторую строку и добавьте к ней класс CSS.

• Класс CSS: изображение-полоса прокрутки

Открыть настройки страницы

Затем откройте настройки строки.

Стиль полосы прокрутки с использованием CSS

И добавьте следующие строки кода CSS в поле Custom CSS на вкладке Advanced:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

Предварительный просмотр

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

Рабочий стол

Мобильный

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

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

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.