Как создать тикер сообщения в блоге с модулем слайдера сообщений Divi

Тикер сообщений в блоге - это удобный инструмент для динамической демонстрации сообщений блога (недавних, связанных и т. Д.) На вашем веб-сайте. Вы можете думать об этом как о ленте новостей для сообщений в блоге WordPress.

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

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

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

Sneak Peek

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

Вот как тикер сообщения красиво сочетается с дисплеем телефона.

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

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

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

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

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

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

СКАЧАТЬ

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

Импортируйте макет в библиотеку Divi

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

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера. Это будет файл JSON внутри папки с именем «макет тикера сообщения в блоге (библиотека Divi)».

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

После этого макет раздела будет доступен в Divi Builder.

Импортируйте шаблон заголовка в конструктор тем Divi

Если вы хотите импортировать шаблон сообщения в блоге с тикером сообщения, добавленным в заголовок, вам нужно будет перейти в Divi> Theme Builder.

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

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

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

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Создание тикера сообщения в блоге в Divi

Создание строки

Для начала создадим внутри раздела строку из одного столбца.

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

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

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

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

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

Текст заголовка и фон

Обновите основной текст, чтобы он читал «Последние сообщения:».

Затем обновите цвет фона:

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

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: полужирный
• Стиль шрифта текста: TT
• Цвет текста текста: rgba (255,255,255,0.7)
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 40 пикселей
• Выравнивание текста: по центру

• Ширина: 100%
• Макс. Ширина: 175 пикселей (компьютер и планшет), 100% (телефон)

Это касается заголовка тикера нашего сообщения. Теперь приступим к созданию тикера сообщения.

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

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

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

Публикация содержимого слайдера

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

Чтобы скрыть отрывок из сообщения, обязательно обновите следующее:

• Использовать выдержки из сообщений: НЕТ
• Длина отрывка: 0

Элементы слайдера публикации и фон

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

• Показать элементы управления: НЕТ
• Показать кнопку "Подробнее": НЕТ
• Показать мета сообщения: НЕТ

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

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

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

Стили наложения и стрелки

На вкладке «Дизайн» обновите наложение фона и цвет стрелки следующим образом:

• Использовать фоновое наложение: ДА
• Цвет фона наложения: rgba (248 248 248,0.9)
• Цвет стрелки: #ffffff (рабочий стол), # ef51f7 (при наведении)

Текст заголовка

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

• Шрифт заголовка: Poppins
• Плотность шрифта заголовка: средний
• Выравнивание текста заголовка: по левому краю
• Цвет текста заголовка: # 333333
• Цвет текста заголовка (при наведении): # ef51f7
• Размер текста заголовка: 16 пикселей (рабочий стол), 14 пикселей (телефон)
• Высота строки заголовка: 40 пикселей
• Тень текста заголовка: см. Снимок экрана
• Цвет тени текста заголовка: прозрачный

Интервал

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

• Поля: 175 пикселей слева (компьютер и планшет), 0 пикселей слева (телефон)
• Отступ: 0 пикселей сверху, 0 пикселей снизу, 0 пикселей слева, 0 пикселей справа

Автоматическая анимация

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

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

• Автоматическая анимация: ВКЛ.
• Скорость автоматической анимации: 3500

Не стесняйтесь увеличивать или уменьшать скорость до того, что вам удобнее.

Расширенный стиль

Класс CSS и пользовательский CSS

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

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

• Класс CSS: et-post-ticker

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

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Чтобы стрелки на слайде больше напоминали кнопку, добавьте следующий код CSS в стрелки слайдов:

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

Дополнительный CSS с модулем кода для позиционирования стрелок слайда

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

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

Затем вставьте следующий CSS-код, обернув его необходимыми тегами стиля.

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

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

Вот окончательный результат на живой странице.

Обратите внимание, как тикер сообщения обрабатывает переполнение текста заголовка.

А вот как тикер сообщения красиво сочетается с дисплеем телефона.

Добавление тикера сообщения в заголовок шаблона сообщения блога

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

Сохранение строки в библиотеке Divi

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

Добавление строки тикера публикации в шаблон заголовка

Редактировать настраиваемый заголовок

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

Вставить строку (тикер сообщения) из библиотеки

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

В модальном окне «Вставить строку» выберите вкладку «Добавить из библиотеки». Найдите строку тикера сообщения в блоге, которую вы ранее сохранили в библиотеке, и выберите ее.

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

Показать похожие сообщения для текущей категории

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

Во-первых, нам нужно обновить текст заголовка в нашем текстовом модуле на «Похожие сообщения:».

Затем откройте настройки слайдера публикации. В разделе «Включенные категории» выберите параметр «Текущая категория».

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

Результат в шаблоне сообщения в блоге

Вот автоматическая анимация в действии.

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

А вот как это выглядит на планшете и телефоне.

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

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

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

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