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

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

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

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

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

Фоновый цвет

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

• Цвет фона: #ffffff

Добавить строку №1

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

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

Интервал

Еще не добавляя никаких модулей, откройте настройки строки и примените нижнее поле.

• Нижняя маржа: 5%

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

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

Добавьте текстовый модуль с некоторым содержанием H2 по вашему выбору.

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

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

• Шрифт заголовка 2: Alata
• Толщина шрифта заголовка 2: полужирный
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2:
  • Рабочий стол: 55 пикселей
  • Таблетка: 40 пикселей
  • Телефон: 30 пикселей

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

Видимость

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

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

Линия

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

• Цвет линии: # 3a7a84
• Стиль линии: Двойной

Размеры

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

• Вес разделителя: 10 пикселей
• Ширина: 8%
• Выравнивание модуля: по центру
• Высота: 10 пикселей

Добавить строку №2

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2
• Выровнять высоту столбца: Да
• Ширина: 95%
• Максимальная ширина: 2580 пикселей

Интервал

Затем удалите все стандартные верхние и нижние отступы.

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

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

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

Затем откройте настройки столбца 1 и примените фоновое изображение.

• Размер фонового изображения: обложка

Граница

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

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

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

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

Пора добавить модули, начиная с модуля Blurb в столбце 2. Добавьте контент по вашему выбору.

Выбрать значок

Далее выберите значок.

Фоновый цвет

Затем примените белый цвет фона.

• Цвет фона: #FFFFFF

Настройки значков

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

• Цвет значка: # 3a7a84
• Расположение изображения / значка: слева

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

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

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Alata
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # 000000
• Размер текста заголовка:
  • Рабочий стол: 35 пикселей
  • Таблетка: 30 пикселей
  • Телефон: 20 пикселей

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

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

• Шрифт тела: Karla
• Размер основного текста:
  • Рабочий стол: 17 пикселей
  • Таблетка: 15 пикселей
  • Телефон: 14px
• Высота линии корпуса: 2,5 мм

Размеры

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

• Ширина содержимого: 100%

Интервал

И примените некоторые пользовательские значения отступов к настройкам интервала.

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

Граница

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

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

Коробка Тень

И мы добавим тонкую тень коробки.

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

Анимация

Затем удалите стандартную анимацию модуля Blurb в настройках анимации.

• Анимация изображения / значка: без анимации

Вставка заголовка CSS

И завершите настройки модуля, добавив одну строку кода CSS в поле CSS заголовка рекламного объявления на вкладке «Дополнительно».

margin-bottom: 20px;

Клонировать модуль Blurb дважды

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

Изменить содержимое

Измените содержимое в каждом повторяющемся модуле.

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

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

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

Добавить ссылку на кнопку

Добавьте ссылку на кнопку рядом.

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

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

• Цвет 1: rgba (59,120,130,0,53)
• Цвет 2: # 112730
• Тип градиента: линейный
• Направление градиента: 161 град.

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

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

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Alata
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: #ffffff
• Размер текста заголовка:
  • Рабочий стол: 50 пикселей
  • Планшет и телефон: 30 пикселей

Настройки кнопок

Далее стилизуйте кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки:
  • Рабочий стол: 20 пикселей
  • Таблетка: 17 пикселей
  • Телефон: 15px
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Alata
• Толщина шрифта кнопок: полужирный

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Отступ слева: 20 пикселей
• Отступ справа: 20 пикселей
• Горизонтальное положение тени блока: 0 пикселей
• Положение прямоугольной тени по вертикали: 3 пикселя
• Цвет тени: #ffffff

Размеры

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

• Ширина:
  • Рабочий стол: 95%
  • Планшет и телефон: 100%
• Выравнивание модуля: по центру

Интервал

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

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

Граница

Также добавьте закругленные углы.

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

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

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

• Верно:
  • Рабочий стол: -25 пикселей
  • Планшет и телефон: 0 пикселей

Применить липкий эффект к модулю CTA

Прикрепленные настройки

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

• Липкая позиция:
  • Рабочий стол: Придерживайтесь вершины
  • Планшет и телефон: не вставляйте
• Смещение липкой вершины: 50 пикселей
• Нижний липкий предел: столбец
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

Непрозрачность

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

• Непрозрачность по умолчанию:
  • Рабочий стол: 0%
  • Планшет и телефон: 100%
• Клейкая непрозрачность: 100%

Переход

И последнее, но не менее важное: мы изменим настройки перехода на вкладке «Дополнительно». Вот и все!

• Продолжительность перехода: 800 мс
• Кривая скорости перехода: легкость

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

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

Рабочий стол

Мобильный

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

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

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