Хотите создать полноэкранный слайдер с Divi ?
Полноэкранный слайдер может очень хорошо работать в качестве заголовка вашей домашней страницы. Веб-сайт.
Полноэкранный режим систематически поддерживает содержание важно выше сгиба. А функция слайдера позволяет пользователям видеть содержание дополнительно без необходимости прокручивать страницу.
Создайте полноэкранный слайдер с помощью Divi удивительно легко сделать. Суть в том, чтобы придать вашему ползунку высоту относительно высоты браузера, а затем избавиться от любых дополнительных ограничений по марже и ширине в родительской строке или разделе.
Всего за несколько минут вы можете создать полноэкранный слайдер, который расширяется на весь экран при загрузке страницы и отлично смотрится на всех устройствах.
Давайте начнем.
обследование
Вот краткий обзор слайдера, который мы создадим в этом уроке.
Создайте новую страницу с помощью Divi Builder
В панели управления WordPress перейдите к Страницы> Добавить новый
Дайте заголовок, относящийся к вам, и нажмите 'Используйте Divi строитель"
Наконец, нажмите «Начать строительство»
После этого у вас будет пустая страница для начала проектирования в Divi.
Создайте полноэкранный слайдер в Divi
Конфигурация сечения и линии
Для начала добавьте в раздел строку из одного столбца.
поле раздела
Перед добавлением модуля откройте настройки раздела, перейдите на вкладку Проект, вытащите опцию Расстояние и измените настройки следующим образом:
- Отступы (сверху и снизу): 0 пикселей
Настройки линии
Далее откройте настройки линии и обновите во вкладке следующее Проект :
- Ширина: 100%
- Максимальная ширина: 100%
- Отступы (сверху и снизу): 0 пикселей
Со всеми этими настройками теперь мы можем перейти к созданию слайдера.
Создание полноэкранного слайдера
Чтобы создать полноэкранный слайдер, добавьте в строку новый модуль Slider.
Добавляйте изображения на каждый слайд
Перед обновлением общих настроек слайда откройте настройки первого слайда по умолчанию.
Добавьте изображение и фоновое изображение на слайд. В этом примере мы используем одно и то же изображение для изображения слайда и фонового изображения (примерно 1920 на 1500 пикселей).
Затем откройте настройки для второго слайда
Добавьте к слайду другое изображение и фоновое изображение из предыдущего.
Обратите внимание, что вы можете добавить столько слайдов, сколько захотите.
Обновить настройки ползунка
Теперь, когда каждый отдельный слайд имеет уникальное изображение и фоновое изображение, мы готовы обновить настройки ползунка в целом.
Вернитесь к настройкам ползунка и обновите следующее на вкладке Проект :
Наложение
- Использовать наложение фона: ДА
- Цвет наложения фона: rgba (27,18,38,0.74)
Box Тень
- Box Shadow Style: См. Захват (1)
- Коробчатая тень (горизонтальная и вертикальная) Положение: -8vw
- Сила распространения теней коробки: -6,5 vw
- Цвет тени: #cf1259
Текст заголовка
Изменить настройки заголовка
- Шрифт названия: Монтсеррат
- Начертание шрифта заголовка: сверхжирный
- Размер текста: 5vw (рабочий стол), 40px (планшет и телефон)
основной текст
Отредактируйте настройки текста описания следующим образом:
- Вес основного шрифта: полужирный
- Размер основного текста: 16 пикселей
- Высота строки: 1.8 см
Стили кнопок
- Использовать пользовательские стили для кнопки: ДА
- Размер текста кнопки: 16px
- Фон: #cf1259
- Ширина границы: 0px
- Радиус границы: 0px
- Вес шрифта: полужирный
- Стиль шрифта: ТТ
- Отступы (сверху и снизу): 15 пикселей
- Отступы (слева и справа): 30 пикселей
Высота слайдера и ширина контента
- Максимальная ширина контента: 90%
- Минимальная высота: 100vh
Задание ползунку минимальной высоты 100vh гарантирует, что ползунок занимает всю высоту окна браузера. Это ключ к созданию полноэкранного слайдера.
Ползунок уже будет охватывать всю ширину окна браузера, потому что ширина линии составляет 100%.
Стрелки слайдера
На вкладке «Дополнительно» обновите размер и положение стрелок ползунка, добавив следующий пользовательский CSS в область CSS. Слайд-стрелки :
font-size: 8vw !important;
margin-top: -4vw;
Это увеличит стрелки ползунка на больших экранах и уменьшит их размер на мобильных устройствах.
Вычтите высоту заголовка из высоты слайдера
Если у вас есть заголовок на странице, полноэкранный слайдер фактически будет немного ниже окна браузера.
Это связано с тем, что высота заголовка снижает ползунок, который в настоящее время имеет высоту 100vh (100% высоты окна/браузера). Чтобы предотвратить перемещение слайдера ниже области просмотра браузера, вы можете добавить функцию CSS. calc () чтобы вычесть высоту заголовка из высоты ползунка.
Вам нужно будет знать высоту заголовка (для настольных компьютеров и мобильных устройств), чтобы это работало. Если вы используете заголовок Divi по умолчанию, высота заголовка будет 80 пикселей. Таким образом, высота слайдера должна быть 100vh — 80px.
Чтобы добавить пользовательскую высоту, откройте настройки слайдера и добавьте следующий пользовательский CSS к основному элементу слайдера, а также для каждого слайда:
min-height: calc(100vh - 80px)!important;
Конечный результат
Вот окончательный результат.
Скачайте DIVI прямо сейчас!!!
А вот так дизайн выглядит на планшете и телефоне.
Заключение
Ключевые шаги для создания полноэкранного слайдера в Divi — настроить раздел и строку так, чтобы они охватывали всю ширину браузера, а затем задать минимальную высоту слайдера 100vh.
Если вы используете заголовок, вы можете добавить пользовательский фрагмент CSS, который будет вычитать высоту заголовка, чтобы ползунок полноэкранного режима не выходил за нижнюю часть браузера.
Выполнив эти ключевые шаги, вы можете дополнительно настроить слайдер (и слайды) так, как вы хотите, используя все мощные функции, включенные в Divi Builder.
Используйте его для создания красивых и эффективных слайдеров, которые заполняют любой экран на любом устройстве.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
