Как добавить элементы вертикального слайдера в модуль слайдера Divi для уникального дизайна заголовка
Опубликовано: 2019-06-28Модуль слайдера Divi содержит множество вариантов дизайна, которые позволяют легко мыслить нестандартно и создавать потрясающие дизайны слайдеров. Итак, сегодня мы собираемся изменить некоторые вещи (буквально). В следующем посте мы собираемся добавить элементы вертикального слайдера в модуль слайдера Divi. Наличие слайдера с вертикальными элементами (такими как текст заголовка и элементы управления слайдами) позволяет посетителям видеть больше содержимого слайдов и фоновых изображений в более узких столбцах (особенно на мобильных устройствах). А вертикальные элементы добавляют освежающий вид в общий дизайн.
Для этого мы будем использовать параметр Divi transform rotate, чтобы повернуть весь ползунок, а затем повернуть в противоположном направлении другие элементы внутри каждого слайда по мере необходимости, чтобы создать современный дизайн вертикального слайдера. Мы начнем с базовой техники. Затем мы создадим совершенно уникальный дизайн заголовка с помощью этого вертикального слайдера.
Давайте нырнем!
Sneak Peek
Загрузите макет вертикальных слайдеров Divi БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
https://youtu.be/Nmuy9VAYo4M
Подпишитесь на наш канал Youtube
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Два изображения, повернутых на 90 градусов против часовой стрелки. Это легко сделать с помощью встроенных опций вашей ОС или с помощью любого простого приложения для редактирования фотографий. Вы также можете повернуть изображение прямо в WordPress, отредактировав медиа-элемент.
После этого вы готовы создать свой шедевр в Divi.
Основная мысль
Основная идея добавления вертикальных элементов слайдера заключается в использовании параметров преобразования Divi для поворота модуля слайдера на 90 градусов (по часовой стрелке или против часовой стрелки), чтобы он отображался на странице вертикально. Для фонового изображения (изображений) слайдера (или слайда) вам нужно будет повернуть изображение заранее (или с помощью редактора изображений WordPress), чтобы изображение отображалось вертикально при каждом повороте слайдера. При этом элементы управления ползунком, стрелки и текст будут отображаться вертикально, как и следовало ожидать. Сложная часть связана с настройкой высоты и ширины ползунка, поскольку все буквально переворачивается. Этот дизайн слайдера лучше всего работает в макете с двумя или более столбцами.
Вот быстрый пример того, как это сделать.
В обычном разделе с строкой из двух столбцов добавьте модуль ползунка в левый столбец.
Затем добавьте пару слайдов, каждый с заголовком, предложением основного содержания и фоновым изображением, которое ранее было повернуто против часовой стрелки на 90 градусов.
Затем поверните модуль ползунка на 90 градусов по оси z, используя параметры преобразования Divi.
Затем добавьте интервал (нижний отступ) к ползунку, чтобы создать дополнительную ширину, и выровняйте текст по правому краю каждого слайда.
Вот результат.
Как видите, концепция проста, но эти вертикальные ползунки действительно могут пригодиться для создания уникальных дизайнов.
Ниже мы попытаемся вместе создать один из этих уникальных слайдеров.
Добавление вертикальных элементов слайдера в модуль слайдера Divi для уникального дизайна заголовка
Создание сечения и ряда
Фон раздела
Начните с создания обычного раздела со строкой из двух столбцов.
Перед добавлением модуля в строку сначала обновите раздел со следующим цветом фона:
Цвет фона: # 24272a
Настройки строки
Затем нам нужно присвоить нашей строке настраиваемую ширину желоба, равную 1, а затем установить ширину, используя единицу длины vw. Использование единицы длины vw важно для того, чтобы в дальнейшем наш вертикальный слайдер стал более отзывчивым.
Откройте настройки строки и обновите следующее:
Ширина желоба: 1
Ширина: 80vw (настольный компьютер и планшет), 95vw (телефон)
Макс.ширина: 80vw (настольный компьютер и планшет), 95vw (телефон)
Затем мы добавим тень блока в целях дизайна.
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -10 пикселей
Вертикальное положение тени блока: 0 пикселей
Цвет тени: rgba (255,255,255,0.03)
Добавление содержимого заголовка с помощью текстового модуля
В конечном итоге мы добавим ползунок в столбец 2, а пока давайте добавим заголовок заголовка с некоторым дополнительным текстом в столбец 1. Для этого мы добавим два текстовых модуля в столбец 1.
Добавьте текстовый модуль для заголовка
Чтобы добавить заголовок нашего заголовка, добавьте текстовый модуль в столбец 1.
Обновите содержимое тела, указав следующий заголовок h2:
<h2>My Work</h2>
Затем обновите следующее:
Шрифт заголовка 2: Karla
Цвет текста заголовка 2: #ffffff
Размер текста заголовка 2: 5vw (рабочий стол), 60px (планшет), 50px (телефон)
Заполнение: 15% сверху, 20% снизу, 5% слева, 5% справа.
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 60 пикселей
Вертикальное положение тени блока: 0 пикселей
Цвет тени: # 9a2508
Добавить текстовый модуль для основного содержимого
Затем добавьте новый текстовый модуль под первым текстовым модулем в столбце 1. Пока мы можем оставить содержимое по умолчанию.
Затем обновите следующее:
Цвет текста текста: #cccccc
Ширина: 70%
Выравнивание модуля: правое
Маржа: -5% максимум
Заполнение: 5% снизу, 10% слева, 5% справа
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Положение прямоугольной тени по вертикали: 10 пикселей
Цвет тени: rgba (255,255,255,0.03)
Создание вертикального слайдера
Теперь мы готовы создать слайдер с вертикальными элементами слайдера.
Для этого добавьте модуль слайдера в столбец 2.
Откройте настройки слайдов первого из двух слайдов по умолчанию.
Сократите основной текст по умолчанию, чтобы включить одну строку текста. Затем добавьте фоновое изображение, которое ранее было повернуто на 90 градусов против часовой стрелки.
Затем сделайте то же самое для второго слайда по умолчанию, придав ему другое фоновое изображение.
Поверните ползунок
Затем поверните ползунок, используя опцию преобразования поворота:
Преобразовать Повернуть ось Z: 90 градусов
Высота слайдера
Нам не нужно беспокоиться о ширине ползунка, поскольку она автоматически охватывает 100% столбца. Столбец составляет 50% от 80vw (ширина строки), поэтому по умолчанию ширина будет 40vw. Теперь нам нужно задать ползунку соответствующую высоту 40vw на рабочем столе, а затем отрегулировать высоту до 80vw на планшете и 95vw на телефоне.
Обновите следующее:
Высота: 40vw (настольный компьютер), 80vw (планшет), 95vw (телефон)
Затем отрегулируйте отступ, чтобы выровнять текст справа от вертикального ползунка.
Отступ (рабочий стол): 0px сверху, 21vw снизу, 0px слева, 0px справа
Прокладка (планшет): 42вв низ
Набивка (телефон): 50вВт снизу
Обновить настройки текста
Настройте заголовок и основной текст следующим образом:
Выравнивание текста: по левому краю
Шрифт заголовка: Karla
Размер текста заголовка: 32 пикселя
Высота строки заголовка: 1,3 мкм
Интервал между буквами основного текста: 3 пикселя
Высота линии корпуса: 1,8 м
Стилизация кнопки
Чтобы стилизовать и расположить кнопку, обновите следующее:
Размер текста кнопки: 16 пикселей
Цвет фона кнопки: # 9a2508
Ширина границы кнопки: 0 пикселей
Расстояние между буквами кнопки: 2 пикселя
Толщина шрифта кнопок: полужирный
Значок кнопки: знак плюса (см. Снимок экрана)
Расположение кнопок: справа
Маржа кнопки: 10% сверху, 10% снизу
Фоновый градиент
Чтобы создать фон для текста заголовка вертикального слайдера, мы можем добавить фоновый градиент к слайдеру следующим образом:
Цвет фонового градиента слева: # 9a2508
Цвет фона градиента справа: rgba (0,0,0,0)
Стартовая позиция: 12%
Конечная позиция: 0%
Поместите градиент над фоновым изображением: ДА
Примечание. При желании можно настроить непрозрачность правого цвета градиента фона, чтобы создать наложение для изображений слайдов.
Вращение кнопки и стрелок ползунка с помощью настраиваемого CSS
Поскольку наша кнопка по-прежнему вертикальная, нам нужно будет повернуть ее обратно в предыдущее положение с помощью фрагмента CSS. Добавьте следующий CSS к кнопке слайда:
transform: rotate(-90deg);
Для стрелок ползунка вы можете добавить тот же фрагмент CSS, чтобы они указывали вправо и влево, а не вверх и вниз. И пока мы там, мы можем увеличить размер стрелок. Добавьте следующий CSS в
transform: rotate(-90deg); font-size: 80px;
Вот и все!
Посмотрим на окончательный результат.
Конечный результат
А вот и на планшете и телефоне.
Не стесняйтесь исследовать новые дизайны, настраивая вертикальные элементы. Вот пример того же дизайна с кнопкой, расположенной слева, и наложением текста.
Последние мысли
Вращающийся модуль слайдера Divi - это быстрый и эффективный способ добавить вертикальные элементы дизайна в ваш слайдер. На самом деле, единственная сложная часть - сделать размер и интервал приятными и отзывчивыми. Но, к счастью, Divi имеет достаточно встроенных опций, которые позволяют легко настроить дизайн, чтобы он отлично смотрелся на всех устройствах.
Этот вертикальный слайдер также отлично подойдет для других областей вашего сайта, помимо заголовка. Я вижу, что это используется для демонстрации избранных продуктов или отзывов в более узких колонках.
Надеюсь, это послужит вам источником вдохновения для вашего следующего проекта.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!