Как создать собственный слайдер фотогалереи в Divi

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

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

Давайте начнем.

Sneak Peek

Вот краткий обзор слайдера фотогалереи, который мы создадим в этом уроке.

Загрузите пользовательский макет слайдера фотогалереи БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала вам потребуется следующая настройка:

1. Тема Divi установлена ​​и активна
2. Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
3. Около 6-8 изображений, которые будут использоваться для изображения слайдера и фотогалереи

После этого у вас будет пустой холст, чтобы начать создавать несколько зависающих вкладок в Divi.

Включите опцию Divi Gallery в опциях темы Divi

Divi позволяет заменить отображение галереи WordPress по умолчанию на отображение галереи Divi. Поэтому всякий раз, когда вы создаете галерею WordPress и встраиваете ее в модуль, галерея будет отображаться как галерея с помощью модуля Divi Gallery. Это в основном позволяет вам добавлять галереи изображений Divi в любой модуль Divi Builder. В нашем случае мы добавим галерею Divi в модуль слайдера.

Чтобы изменить настройку, перейдите в Divi> Параметры темы. Затем на вкладке «Общие» нажмите, чтобы включить опцию Divi Gallery.

Вот и все! Теперь шорткод галереи WordPress по умолчанию будет отображать фотогалерею в стиле Divi.

Создание пользовательского слайдера фотогалереи в Divi

Раздел и ряд

Для начала создайте обычный раздел с строкой в ​​один столбец.

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

• Ширина: 100% (поэтому на мобильном устройстве ползунок будет полноширинным).
• Padding: 0px сверху, 0px снизу
• Закругленные углы: 20 пикселей

Создание содержимого слайдера

Затем добавьте в строку модуль слайдера.

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

Затем обновите содержимое слайда следующим образом:

• Название: Наша Галерея
• Кнопка: Просмотреть все
• Body: Это наша галерея. Проверить это.

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

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

Вы попадете на страницу редактирования категории во всплывающем окне. Игнорируйте настройки галереи в правом верхнем углу, потому что стили галереи Divi переопределят эти настройки галереи WordPress.

Затем нажмите кнопку «Вставить галерею».

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

Теперь у вас есть встроенная галерея в стиле Divi, отображаемая в области содержимого вашего модуля слайдера. Довольно крутая штука!

Давайте продолжим обновлять содержимое нашего слайда, добавив изображение основного слайда.

Теперь, когда у нас есть готовое содержимое слайдера, сохраните настройки для слайда 1.

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

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

Граница изображения и тень блока

• Закругленные углы изображения: 20 пикселей
• Ширина границы изображения: 40 пикселей (рабочий стол), 0 пикселей (планшет)
• Цвет границы изображения: rgba (0,0,0,0)

• Image Box Shadow: см. Снимок экрана
• Горизонтальное положение тени блока: -170 пикселей
• Вертикальное положение тени блока: -220 пикселей
• Сила распространения тени коробки: -60 пикселей
• Цвет тени: rgba (255,255,255,0.2)

Заголовок и основной текст

• Шрифт заголовка: Karla
• Выравнивание текста заголовка: по правому краю
• Размер текста заголовка: 48 пикселей
• Высота строки заголовка: 1,3 мкм
• Размер основного текста: 16 пикселей
• Расстояние между буквами основного текста: 2 пикселя
• Высота линии тела: 2em

Стили кнопок

• Размер текста кнопки: 16 пикселей
• Цвет фона кнопки: # 333333
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 20 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Karla
• Толщина шрифта кнопки: полужирный
• Значок кнопки: см. Снимок экрана
• Расположение кнопок: справа
• Маржа кнопки: -5em вправо
• Padding кнопок (рабочий стол): 3em слева, 5em справа
• Padding кнопок (телефон): 2em слева, 6em справа

• Button Box Shadow: см. Снимок экрана
• Вертикальное положение тени блока: 0 пикселей
• Box Shadow Spread Strength: 20 пикселей (рабочий стол), 10 пикселей (телефон)
• Цвет тени: #ffffff

Прокладка слайдера

• Набивка: 10% верх, 10% низ

Добавление фонового градиента к слайду 1

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

• Цвет фонового градиента слева: # 6d0066
• Правый цвет градиента фона: # 000000
• Тип градиента: радиальный
• Радиальное направление: вверху слева

Создание слайда 2

Чтобы создать второй слайд, мы можем просто продублировать слайд 1, используя значок дубликата. Затем откройте настройки дублированного слайда (слайд 2).

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

Затем обновите фоновый градиент следующим образом:

• Цвет фонового градиента слева: # 0c71c3

Конечный результат

Вот окончательный результат.

А вот как выглядит слайдер на планшете и телефоне.

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

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

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

Для получения дополнительной информации об этой технике встраивания галереи Divi (включая советы по стилизации встроенной галереи divi), ознакомьтесь с сообщением о том, как встраивать галереи Divi в переключатели.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!