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

Добавление динамического содержимого в шаблон сообщения блога необходимо для предоставления таких вещей, как заголовок сообщения, метаданные, избранное изображение и т. Д. Обычно эти динамические элементы размещаются как обычные статические элементы в дизайне макета. Однако может быть полезно держать некоторые из этих динамических элементов в центре внимания ваших читателей. Здесь пригодится динамическая информационная панель поста. Информационная панель динамического сообщения остается фиксированной в верхней части браузера (как фиксированный заголовок) и включает полезные фрагменты динамического контента и другие призывы к действию. Например, вы можете использовать эту панель, чтобы напоминать читателям о публикации, которую они сейчас читают, ссылку, чтобы оставить комментарий, или ссылку на связанную категорию.

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

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

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке. Обратите внимание, как якорные ссылки («Оставить комментарий» и «Подписаться») отправляют пользователей в соответствующую область сообщения.

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет раздела в свой конструктор тем Divi, перейдите в конструктор тем Divi.

Щелкните значок переносимости.

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

Затем нажмите кнопку импорта.

После этого шаблон раздела появится в Divi Theme Builder.

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

Часть 1: Импорт готовых шаблонов

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

ВАЖНО: лучше всего импортировать эти шаблоны на тестовый сайт, чтобы не испортить работающий сайт.

Импортировать шаблон веб-сайта по умолчанию

Во-первых, вам нужно будет загрузить Шестой БЕСПЛАТНЫЙ пакет для создания тем для Divi. Затем разархивируйте файл.

На панели управления WordPress перейдите в Divi> Theme Builder. Затем щелкните значок переносимости в правом верхнем углу. Во всплывающем окне переносимости выберите вкладку импорта. Затем выберите json-файл шаблона веб-сайта по умолчанию из загруженной папки и нажмите кнопку импорта. Будет импортирован новый шаблон веб-сайта по умолчанию с глобальным верхним и нижним колонтитулами.

Импортируйте шаблон сообщения

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

Отключить глобальный заголовок шаблона сообщения

Мы собираемся добавить нашу динамическую информационную панель сообщения в заголовок шаблона сообщения. Однако, поскольку мы хотим, чтобы информационная панель сообщения была только в шаблоне сообщения, нам нужно отключить глобальную строку в заголовке, чтобы наша панель не добавлялась ко всем заголовкам на уровне всего сайта. Чтобы отключить глобальное значение в глобальном заголовке, откройте меню настроек в глобальном заголовке и выберите «Отключить глобальный».

Теперь заголовок должен быть серым с надписью «Custom Header». Когда все будет готово, щелкните значок редактирования, чтобы отредактировать шаблон макета заголовка.

Создание панели информации о динамическом посте

Добавление раздела и строки

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

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

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

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

• Цвет фона: #eceffe
• Отступ: 10 пикселей сверху, 10 пикселей снизу.

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

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

• Ширина желоба: 1
• Padding: 0px сверху, 0px снизу

На вкладке «Дополнительно» добавьте следующий настраиваемый CSS к основному элементу:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Это обеспечит стопку столбцов на мобильном устройстве.

Добавить динамический контент заголовка сообщения

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

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

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

Добавить заголовок публикации / архива как динамический контент

Затем щелкните значок «Использовать динамическое содержимое» при наведении указателя мыши на область основного текста с настройками текста. Выберите «Заголовок публикации / архива» из списка.

Откройте настройки динамического содержимого для заголовка публикации / архива и добавьте следующее в поле ввода перед:

You're Reading: 

Затем сохраните изменения.

Настройки дизайна

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

• Шрифт текста: Ubuntu
• Толщина шрифта текста: средний
• Цвет текста текста: # 121212
• Размер текста: 14 пикселей (рабочий стол), 12 пикселей (планшет), 11 пикселей (телефон)

Добавить информацию о динамических категориях сообщений

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

Затем откройте настройки модуля дублирования текста и добавьте категории сообщений как динамическое содержимое в тело.

Откройте настройки динамического содержимого категорий публикаций и обновите следующее:

• До: В
• Разделитель категорий: &

Обновить цвет ссылки

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

• Цвет текста ссылки: # 4160fd

Добавление информации о динамическом количестве комментариев

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

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

Затем добавьте счетчик комментариев публикации как динамическое содержимое к тексту.

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

• После: комментарий (и)

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

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

Чтобы создать CTA, продублируйте текстовый модуль в столбце 2, в котором указано количество комментариев.

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

<a href="#respond">Leave a Comment</a>

Добавление кнопки подписки

Последнее, что мы добавим в информационную панель поста, - это кнопка подписки. Это также будет якорная ссылка, которая приведет пользователя к разделу шаблона сообщения, который включает форму подписки по электронной почте.

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

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

• Размер текста кнопки: 14 пикселей (рабочий стол), 12 пикселей (планшет), 11 пикселей (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона градиента кнопки слева: # 7e5ce6
• Правый градиент фона кнопки: # 25b8ee
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Ubuntu
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопки: TT
• Отступ (рабочий стол): 10 пикселей сверху, 10 пикселей снизу, 20 пикселей слева, 20 пикселей справа.
• Отступ (планшет): 6 пикселей сверху, 6 пикселей снизу, 14 пикселей слева, 14 пикселей справа.

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

• URL ссылки на кнопку: #subscribe

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

Отключить столбец 1 на мобильном устройстве

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

Для этого откройте настройки столбца 1. На вкладке «Дополнительно» отключите видимость на телефоне и планшете.

Придание секции фиксированного положения и высокого индекса Z

Как только дизайн будет завершен, мы можем задать фиксированное положение секции. Идея состоит в том, чтобы изначально скрыть панель за разделом с заголовком. Затем, когда пользователь прокручивает, фиксированная информационная панель сообщения будет отображаться из-под заголовка.

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

• Позиция: фиксированная
• Индекс Z: 998

Обратите внимание, что индекс z равен 998, потому что я хочу, чтобы фиксированная полоса располагалась над остальным содержимым сообщения.

Обновить индекс Z заголовка раздела

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

• Индекс Z: 999 (на единицу больше, чем раздел с полосой)

Сохраните изменения в редакторе макета.

Добавить CSS ID в строку подписки по электронной почте в шаблоне основного текста

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

Для этого откройте область «настраиваемое тело» шаблона сообщения в построителе тем.

Найдите строку с формой подписки по электронной почте внизу макета и добавьте следующий идентификатор CSS:

• CSS ID: подписаться

Это позволит якорной ссылке кнопки подписки перейти к этой конкретной области шаблона.

После этого сохраните изменения в макете и в построителе тем.

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

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

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

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

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

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