Липкие боковые панели чрезвычайно эффективны для привлечения внимания посетителей не навязываясь и не отвлекая. Хитрость заключается в том, чтобы включить в боковую панель один или два элемента, которые «остаются видимыми» или закрепляются сбоку от панели. содержание публикации, когда пользователь прокручивает страницу. Это обновленная альтернатива традиционному макету боковой панели, поскольку он создает впечатление современного макета во всю ширину (без боковой панели) с преимуществом представления призывов к действию, важных для боковой части страницы, когда это необходимо.
В этом уроке мы покажем вам, как добавить призыв к действию в шаблон сообщения блога с помощью Divi Theme Builder. Применение этого макета значительно. Он будет работать практически для любой страницы или любого шаблона сообщения. Кроме того, вам не нужно ограничиваться только призывами к действию; вы можете добавить выбранные вами модули Divi.
Что нужно для начала
Для начала вы должны установить и активировать тему Divi . Убедитесь, что у вас установлена последняя версия Divi.
Вам также понадобится хотя бы одно сообщение, созданное с помощью Divi Builder, для тестирования, чтобы отобразить желаемый результат.
После этого вы готовы уйти.
обследование
Вот краткий обзор липких ACT, которые были добавлены в шаблон блога в Divi.
Как добавить фиксированные призывы к действию в шаблон сообщения блога в Divi
Добавление шаблона компоновщика темы
Первый шаг - импортировать наш предопределенный шаблон на наш сайт. Мы собираемся использовать шаблон публикации Divi Theme Builder Pack # 1.
Чтобы начать, перейдите в раздел Divi > Генератор. темы. Щелкните значок переносимости в правом верхнем углу страницы. В модальном окне переносимости выберите вкладку импорта и выберите файл divi-theme-builder-pack-1-post-template.json из папки. Если на вашем сайте в настоящее время установлены шаблоны, обязательно снимите флажки со всех параметров, которые могут перезаписать ваши текущие шаблоны. Затем нажмите кнопку импорта.
Создать шаблон блога
Как только шаблон будет импортирован, мы готовы добавить наши новые CTA на боковую панель, прикрепленную к макету шаблона. Для этого щелкните значок редактирования для настраиваемой области тела.
Добавлен макет двойной боковой панели для размещения призывов к действию на боковой панели.
В редакторе макета модели найдите строку, содержащую модуль «Опубликовать». содержание и замените расположение столбцов на структуру столбцов «одна пятая на три пятых на одну пятую» (1/5 3/5 1/5). Это позволит нам удерживать столбец по центру для содержание поста, одновременно предоставляя два раздела с каждой стороны для наших прикрепленных призывов к действию.
После изменения структуры столбца перетащите модуль публикации контента в центральный столбец.
Обновить параметры линии
Откройте настройки линии и обновите следующие параметры дизайна:
- Использовать произвольную ширину желоба: ДА
- Ширина желоба: 2
- Ширина: 100% (рабочий стол), 90% (планшет)
- Максимальная ширина: 1500px
Это даст нам место, необходимое для конфигурации с двумя боковыми панелями.
Обновить настройки столбца 1
Затем откройте настройки столбца 1 и присвойте этому столбцу собственный класс CSS:
- Класс CSS: sticky-cta
Добавление боковой панели CTA в левый столбец
Теперь мы готовы к первому призыву к действию. Добавьте призыв к модулю действий в левом столбце.
Стилизовать боковую панель CTA
Обновите настройки следующим образом:
Содержание
- Кнопка: «Нажмите здесь»
- Тело: «Здесь размещается ваш контент. Отредактируйте или удалите этот текст онлайн или в настройках содержимого модуля. ”
- URL ссылки кнопки: #
Дизайн основного текста
- Body Font: Монтсеррат
- Вес шрифта: полужирный
- Основной текст: выравнивание по правому краю
- Цвет текста: # 444444
- Размер основного текста: 22px (рабочий стол), 18px (планшет)
- Рост тела: 1.3em
кнопка
- Размер текста кнопки: 14px
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: # 6148df
- Ширина границы кнопки: 0px
- Радиус кнопки: 80px
- Вес шрифта: жирный
- Стиль шрифта кнопки: TT
- Падение кнопок: 12px вверху, 12px внизу, 22px слева, 22px справа
Ширина, выравнивание, прокладка и бордюры
- Ширина: 100%
- Максимальная ширина: 320px
- Выравнивание модуля: справа
- Заполнение: 10px слева, 10px справа
- Ширина верхней границы: 10px
- Цвет верхней границы: #eeeeee
- Ширина нижней границы: 10px
- Цвет нижней границы: #eeeeee
Добавление боковой панели CTA в правую колонку
Чтобы создать CTA для правого столбца, скопируйте только что созданный и вставьте его в крайний правый столбец. Затем обновите настройки дубликата следующим образом:
- Выравнивание текста по левому краю
- Выравнивание модуля: слева
Обновите настройки столбца 3
Для этого CTA в правом столбце мы добавим верхнее поле к столбцу, чтобы установить начальную позицию боковой панели CTA в нижней точке страницы.
Начните с открытия параметров столбца 3 и добавьте тот же класс CSS, который мы добавили в столбец 1:
- Класс CSS: sticky-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 ниже на странице, чтобы он появлялся постепенно и прикреплялся к прокрутке, делая его более заметным для людей. посетителей. И не забудь. Вы можете заменить CTA любым модулем Divi или комбинацией модулей, чтобы создать практически все, что захотите. Вы также можете оставить только один CTA на одной стороне. Кажется, у него много приложений.
