Как создавать мобильные прохождения с помощью модуля слайдера Divi (бесплатная загрузка!)

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

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

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

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

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

Статический

Гифка

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

Как создавать мобильные прохождения с помощью модуля слайдера Divi

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

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

Интервал

Приступим к созданию! Добавьте новую страницу или откройте существующую и добавьте к ней новый обычный раздел. Откройте настройки раздела и добавьте несколько пользовательских значений заполнения, соответствующих разным размерам экрана.

• Верхняя прокладка: 4vw (рабочий стол), 5vw (планшет), 3vw (телефон)
• Нижняя прокладка: 4vw (рабочий стол), 5vw (планшет), 3vw (телефон)
• Левая прокладка: 30vw (рабочий стол), 18vw (планшет), 3vw (телефон)
• Правая прокладка: 30vw (рабочий стол), 18vw (планшет), 3vw (телефон)

Добавить новую строку

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

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

Градиентный фон

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

• Цвет 1: # f9f9f9
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 40%
• Конечная позиция: 40%

Размеры

Продолжите, перейдя к настройкам размера строки и удалите все пространство между столбцами.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

Мы также добавляем к строке нижний отступ.

• Нижний отступ: 30 пикселей

Граница

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

Коробка Тень

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

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

Добавить модуль слайдера

Изменить цвет фона

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

• Цвет фона: rgba (255,255,255,0)

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

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

• Ориентация текста: по центру
• Цвет тени: rgba (0,0,0,0)

Настройки основного текста

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

• Шрифт основного текста: по умолчанию (Open Sans)
• Размер основного текста: 0,6 миллиметра (рабочий стол), 1,5 миллиметра (планшет), 2,4 миллиметра (телефон)
• Высота линии корпуса: 2,2 м (рабочий стол), 2,3 м (планшет), 2,4 м (телефон)

Интервал

Также добавьте несколько пользовательских отступов сверху и снизу.

• Верхняя обивка: 2vw
• Нижняя обивка: 2vw

Кнопка Custom CSS

Нам также нужно будет добавить некоторые пользовательские значения отступов и полей, в частности, для кнопки модуля Slider. Поскольку этот элемент объединен с разными элементами на каждом слайде, вам придется вручную добавить отступы и поля, используя код CSS на расширенной вкладке.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Удалить активные слайдеры

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

Настроить первый слайд

Настроить содержимое в поле содержимого

Добавьте новый слайд в модуль слайдера и начните настраивать содержимое в поле содержимого. На экранах печати ниже вы заметите, что мы добавляем изображение в поле содержимого, а не в настройки изображения. Это позволит нам разместить изображение над написанным контентом. Вы можете найти иллюстрации, которые мы использовали, перейдя в публикацию Graphic Illustrator Layout Pack и загрузив изображения в конце. Мы также добавляем и стилизуем заголовок H3 в поле содержимого вместо поля заголовка, чтобы он отображался именно там, где мы хотим.

Кнопка Ссылка

Перейдите к настройкам ссылки и добавьте ссылку на кнопку, которая будет перенаправлять посетителей на страницу с более подробными сведениями о рассматриваемом слайде.

Градиентный фон

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

• Цвет 1: #aaacff
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 30%
• Конечная позиция: 30%

Навигация

Затем измените параметры текста.

• Пользовательский цвет стрелок: # f4f4f4
• Пользовательский цвет Dot Nav: # 000000

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

И измените цвет текста в настройках текста слайда.

• Цвет текста: темный

Кнопка

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.8vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: #aaacff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 10 пикселей

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

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

Изменить содержимое в поле содержимого

Первое, что вам нужно изменить, это содержимое в поле содержимого. Это включает используемое изображение / иллюстрацию. Вы можете найти обе иллюстрации, которые использовались в этом руководстве, перейдя в публикацию Graphic Illustrator Layout Pack и загрузив изображения в конце.

Изменить ссылку

Также измените ссылку на кнопку.

Изменить градиентный фон

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

• Цвет 1: #ffccaa

Изменить цвет фона кнопки

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

• Цвет фона кнопки: #ffccaa

Загрузите раздел прохождения для мобильных устройств БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

Статический

Гифка

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

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