Как использовать Divi, чтобы направлять людей через разные запутанные шаги

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

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

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

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

Рабочий стол

Мобильный

Загрузите макет Sticky Steps БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Создать дизайн сечения

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

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

Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки этого раздела и примените градиентный фон:

• Цвет 1: #ffffff
• Цвет 2: # e5e5e5
• Тип градиента: линейный
• Направление градиента: 150 градусов

Фоновая картинка

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

• Размер фонового изображения: По размеру
• Расположение фонового изображения: вверху слева

Интервал

Удалите нижнее заполнение раздела по умолчанию, добавив «0px».

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

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

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

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

Фоновый цвет

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

• Цвет фона: rgba (130,100,239,0.09)

Размеры

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

• Выровнять высоту столбца: Да
• Выравнивание строк: по центру

Интервал

Также примените некоторые пользовательские значения интервала.

• Максимальная маржа: 5%
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Левый отступ: 5%
• Правое заполнение: 5%

Граница

Затем перейдите к настройкам границы и используйте закругленные углы.

• Все углы: 10 пикселей

Переполнения

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

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Столбец 1 Настройки

Интервал

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

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

Столбец 2 Настройки

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

Двигаясь дальше, мы добавим градиентный фон в столбец 2.

• Цвет 1: # 7b47ff
• Цвет 2: # 6929aa
• Тип градиента: линейный
• Направление градиента: 158 градусов

Интервал

Мы также добавим в этот столбец пользовательские отступы.

• Верхняя набивка: 5%
• Нижняя обивка: 5%
• Левый отступ: 5%
• Правое заполнение: 5%

Граница

Вместе с некоторыми закругленными углами.

• Все углы: 10 пикселей

Масштаб преобразования

И мы увеличим размер столбца в настройках преобразования, применив следующие значения масштаба преобразования:

• Оба: 107%

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

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

Пора добавить модули, начиная с текстового модуля в столбце 1. Введите содержимое H3 по вашему выбору.

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

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

• Шрифт заголовка 3: Poppins
• Цвет текста заголовка 3: # 6929aa
• Размер текста заголовка 2: 35 пикселей
• Интервал между буквами заголовка 3: -1px

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

Видимость

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

• Показать разделитель: Да

Линия

Перейдите на вкладку дизайна модуля и измените цвет линии.

• Цвет линии: # f5ca4e

Размеры

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

• Вес разделителя: 6 пикселей
• Ширина: 20%
• Высота: 6 пикселей

Граница

Завершите настройки модуля, добавив закругленные углы в настройки границы.

• Все углы: 20 пикселей

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

Добавить содержимое

В столбце 2 нам нужен только текстовый модуль с некоторым описанием.

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

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

• Шрифт текста: Playfair Display
• Размер текста: 16 пикселей
• Высота текстовой строки: 2,1 м

Интервал

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

• Верхняя набивка: 5%
• Нижняя обивка: 5%
• Левый отступ: 5%
• Правое заполнение: 5%

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

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

Изменить все копии

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

2. Добавьте панель строк Step в нижнюю часть раздела.

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

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

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

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

Откройте настройки строки и используйте градиентный фон.

• Цвет 1: # ffdf51
• Цвет 2: # e5ac49
• Тип градиента: линейный
• Направление градиента: 150 градусов

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Выравнивание строк: по центру

Интервал

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

• Максимальная маржа: 5%
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Граница

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

• Все углы: 10 пикселей

Коробка Тень

Также примените следующую тень блока:

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

Переполнения

Затем перейдите на вкладку «Дополнительно» и установите видимость переполнения.

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Столбец 2 Интервал

Затем откройте настройки столбца 2 и используйте пользовательские отступы сверху и снизу.

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

Столбец 3 Интервал

Мы также добавляем пользовательские отступы сверху и снизу в столбец 3.

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

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

Добавить содержимое

Пришло время добавить модули к нашей липкой ступенчатой ​​строке строки. Добавьте текстовый модуль в столбец 1 и укажите шаг в поле содержимого.

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

Затем примените градиентный фон.

• Цвет 1: # 7b47ff
• Цвет 2: # 6929aa
• Тип градиента: линейный
• Направление градиента: 158 градусов

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

Перейдите на вкладку дизайна модуля и задайте соответствующий стиль для текста:

• Шрифт текста: Поппинс
• Толщина шрифта текста: полужирный
• Цвет текста: #ffffff
• Размер текста: 27 пикселей

Размеры

Также внесите некоторые изменения в настройки размера.

• Ширина: 60%
• Выравнивание модуля: по центру

Интервал

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

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

Граница

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

• Все углы: 10 пикселей

Коробка Тень

Мы также используем тонкую тень блока.

• Цвет тени: rgba (0,0,0,0.3)

Преобразовать Перевести

И мы завершим настройку модуля, немного изменив его положение с помощью настроек Divi transform translate.

• Справа: -20 пикселей

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

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

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

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

Перейдите на вкладку дизайна модуля и настройте параметры текста H2 следующим образом:

• Шрифт заголовка 2: Poppins
• Толщина шрифта заголовка 2: средний
• Выравнивание текста заголовка 2:
  • Рабочий стол: левый
  • Планшет и телефон: Центр
• Цвет текста заголовка 2: # 6d40ed
• Интервал между буквами заголовка 2: -1px

Интервал

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

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

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

Добавить содержимое

Переходим к следующему и последнему столбцу. Добавьте текстовый модуль с некоторым описанием.

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

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

• Шрифт текста: Playfair Display
• Толщина шрифта текста: полужирный
• Цвет текста: rgba (109,64,237,0.46)
• Размер текста: 20 пикселей
• Выравнивание текста:
  • Рабочий стол: левый
  • Планшет и телефон: Центр

3. Примените липкие эффекты к панели строк Step

Настройки закрепленной строки

Теперь, когда дизайн нашей липкой ступенчатой ​​полосы был завершен, пришло время закрепить его внизу. Откройте настройки строки, перейдите на вкладку «Дополнительно» и примените следующие настройки закрепленной позиции:

• Липкое положение: придерживаться низа
• Смещение липкого дна: 1 пикс.
• Верхний предел липкости: раздел
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

Фильтр липких строк

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

• По умолчанию: 0%
• Липкий: 100%

4. Повторно использовать весь раздел для следующих шагов.

Клонировать раздел столько раз, сколько необходимо

Теперь, когда создан наш первый раздел, посвященный шагу №1, мы можем повторно использовать весь раздел в зависимости от количества шагов, которые у нас есть.

Изменить всю копию в повторяющихся разделах

Убедитесь, что вы изменили все копии в повторяющихся разделах. Вот и все!

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

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

Рабочий стол

Мобильный

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

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

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