Пропустить

Как добавить липкие CTA в шаблон статьи с Divi Builder

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Липкие боковые панели чрезвычайно эффективны для привлечения внимания посетителей, не отвлекаясь и не отвлекаясь. Уловка состоит в том, чтобы включить один или два элемента на боковую панель, которые «остаются видимыми» или неподвижными сбоку от содержимого сообщения, когда пользователь прокручивает страницу. Это освежающая альтернатива традиционному макету боковой панели, поскольку он создает впечатление современного макета во всю ширину (без боковой панели) с преимуществом представления призывов к действию. важно на боковой стороне страницы, когда это необходимо.

В этом уроке мы покажем вам, как добавить призыв к действию в шаблон сообщения блога с помощью Divi Theme Builder. Применение этого макета значительно. Он будет работать практически для любой страницы или любого шаблона сообщения. Кроме того, вам не нужно ограничиваться только призывами к действию; вы можете добавить выбранные вами модули Divi.

Что нужно для начала

Для начала вы должны установить и активировать тему Divi . Убедитесь, что у вас установлена ​​последняя версия Divi.

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

После этого вы готовы уйти.

обследование

Вот краткий обзор липких ACT, которые были добавлены в шаблон блога в Divi.

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

Добавление шаблона компоновщика темы

Первый шаг - импортировать наш предопределенный шаблон на наш сайт. Мы собираемся использовать шаблон публикации Divi Theme Builder Pack # 1.

Для начала перейдите в Divi> Theme generator. Щелкните значок переносимости в правом верхнем углу страницы. В модальном окне переносимости выберите вкладку импорта и выберите в папке файл divi-theme-builder-pack-1-post-template.json. Если на вашем сайте уже установлены какие-либо шаблоны, обязательно снимите флажки со всех опций, которые могут заменить ваши текущие шаблоны. Затем нажмите кнопку импорта.

Импортировать макет divi

Создать шаблон блога

Как только шаблон будет импортирован, мы готовы добавить наши новые CTA на боковую панель, прикрепленную к макету шаблона. Для этого щелкните значок редактирования для настраиваемой области тела.

Добавить собственное тело divi

Добавлен макет двойной боковой панели для размещения призывов к действию на боковой панели.

В редакторе макета шаблона найдите строку, содержащую модуль публикации контента, и измените макет столбца на одну пятую на три пятых на одну пятую структуру столбца (1/5 3/5 1/5 ). Это позволит нам удерживать столбец по центру для содержимого публикации, обеспечивая при этом по две секции с каждой стороны для наших липких CTA.

Добавить макет divi

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Обновить параметры линии

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

  • Использовать произвольную ширину желоба: ДА
  • Ширина желоба: 2
  • Ширина: 100% (рабочий стол), 90% (планшет)
  • Максимальная ширина: 1500px
Добавить раздел fix divi

Это даст нам место, необходимое для конфигурации с двумя боковыми панелями.

Обновить настройки столбца 1

Затем откройте настройки столбца 1 и присвойте этому столбцу собственный класс CSS:

  • Класс CSS: sticky-cta
Настроить столбец 1 css divi

Добавление боковой панели CTA в левый столбец

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

Добавить модуль призыв к действию

Стилизовать боковую панель CTA

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

Содержание
  • Кнопка: «Нажмите здесь»
  • Тело: «Здесь размещается ваш контент. Отредактируйте или удалите этот текст онлайн или в настройках содержимого модуля. ”
  • URL ссылки кнопки: #
Настроить модуль призыва к действию
Дизайн основного текста
  • Body Font: Монтсеррат
  • Вес шрифта: полужирный
  • Основной текст: выравнивание по правому краю
  • Цвет текста: # 444444
  • Размер основного текста: 22px (рабочий стол), 18px (планшет)
  • Рост тела: 1.3em
CTA колготки
кнопка
  • Размер текста кнопки: 14px
  • Цвет текста кнопки: #ffffff
  • Цвет фона кнопки: # 6148df
  • Ширина границы кнопки: 0px
  • Радиус кнопки: 80px
  • Вес шрифта: жирный
  • Стиль шрифта кнопки: TT
  • Падение кнопок: 12px вверху, 12px внизу, 22px слева, 22px справа
Раздел модуля Divi
Ширина, выравнивание, прокладка и бордюры
  • Ширина: 100%
  • Максимальная ширина: 320px
  • Выравнивание модуля: справа
  • Заполнение: 10px слева, 10px справа
  • Ширина верхней границы: 10px
  • Цвет верхней границы: #eeeeee
  • Ширина нижней границы: 10px
  • Цвет нижней границы: #eeeeee

Добавление боковой панели CTA в правую колонку

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

  • Выравнивание текста по левому краю
  • Выравнивание модуля: слева
Добавьте ct a справа

Обновите настройки столбца 3

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

Начните с открытия параметров столбца 3 и добавьте тот же класс CSS, который мы добавили в столбец 1:

  • Класс CSS: sticky-cta

Затем добавьте следующий собственный CSS к основному элементу:

офис

margin-top: 50%

таблетка

margin-top: 0%

Настроить стиль столбца divi

Это даст нам другую отправную точку для прикрепленного CTA в правом столбце, который составляет 50% ширины строки. Не стесняйтесь изменять это значение по мере необходимости для своего собственного сообщения в блоге.

Дублируйте модуль cta divi

Добавить пользовательский CSS в шаблон с помощью модуля кода

Чтобы добиться «липкого» позиционирования призывов к действию на боковой панели, нам нужно добавить собственный CSS. Для этого создайте новый модуль кода под модулем публикации контента (или в любом месте страницы).

Вставьте модуль типа кода divi

Затем вставьте следующий код CSS в поле кода:

<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>

Код параметра модуля Divi

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

Сохранить настройки

Как только вы закончите, сохраните макет шаблона.

Сохранить параметры модуля cta divi

А затем сохраните настройки компоновщика темы

Сохранить конструктор тем divi

Конечный результат

Чтобы просмотреть конечный результат, посетите статью блога, используя шаблон.

CTA колготки

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

Заключительные мысли

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля2
чирикать
Регистрация