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

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

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

Давайте начнем!

Загрузите шаблон CTA Sticky Sidebar БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и добавьте один из json-файлов в Divi Theme Builder, используя опцию «Переносимость Theme Builder».

Давайте перейдем к руководству, ладно?

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

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

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

После этого все готово.

Sneak Peek

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

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

Добавление шаблона построителя тем

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

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

Создание шаблона сообщения в блоге

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

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

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

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

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

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

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

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

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

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

• Класс CSS: липкий-cta

Добавление призыва к действию на боковой панели в левый столбец

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

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

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

Содержание

• Кнопка: «Щелкните здесь»
• Тело: «Здесь размещается ваш контент. Отредактируйте или удалите этот текст в строке или в настройках содержания модуля ».
• URL ссылки на кнопку: #

Дизайн основного текста

• Шрифт: Montserrat
• Плотность основного шрифта: полужирный
• Выравнивание основного текста: вправо
• Цвет основного текста: # 444444
• Размер основного текста: 22 пикселей (рабочий стол), 18 пикселей (планшет)
• Высота линии корпуса: 1,3 м

Кнопка

• Размер текста кнопки: 14 пикселей
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 6148df
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 80 пикселей
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопки: TT
• Отступ кнопки: 12 пикселей сверху, 12 пикселей снизу, 22 пикселей слева, 22 пикселей справа

Ширина, выравнивание, отступы и границы

• Ширина: 100%
• Максимальная ширина: 320 пикселей
• Выравнивание модуля: правое
• Отступ: 10 пикселей слева, 10 пикселей справа
• Ширина верхней границы: 10 пикселей
• Цвет верхней границы: #eeeeee
• Ширина нижней границы: 10 пикселей
• Цвет нижней границы: #eeeeee

Добавление призыва к действию на боковой панели в правый столбец

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

• Выравнивание основного текста: по левому краю
• Выравнивание модуля: слева

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

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

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

• Класс CSS: липкий-cta

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

Рабочий стол

margin-top: 50%

Планшет

margin-top: 0%

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

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

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

Затем вставьте следующий 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>

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

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

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

А затем сохраните настройки построителя тем.

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

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

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

И вот он на мобильном дисплее.

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

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

Я надеюсь, что это поможет улучшить отображение CTA в шаблонах сообщений в будущем.

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!