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

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

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

Проверьте это!

Sneak Peek

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

Загрузите БЕСПЛАТНО последние сообщения с разбивкой по категориям

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

Создание раздела последних публикаций по категориям в Divi

Создайте строку из 4 столбцов

Чтобы начать работу в Divi Builder, создайте строку из 4 столбцов.

Создание блога Модуль 1

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

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

Содержание блога

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

• Тип сообщения: Сообщения
• Количество сообщений: 1
• Включенные категории: Новости (или ваши собственные)
• Использовать выдержки из сообщений: НЕТ
• Длина отрывка: 120

Параметры элемента

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

• Показать категории: НЕТ
• Показать выдержку: НЕТ (рабочий стол), ДА (наведение и планшет)
• Показать разбиение на страницы: НЕТ

Дизайн блога

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

• Цвет фона (рабочий стол): #ffffff
• Цвет фона (при наведении): # 8ac829
• Плотность шрифта заголовка: полужирный
• Стиль шрифта заголовка: TT
• Размер текста заголовка: 24 пикс.
• Интервал между заглавными буквами: 1 пиксель
• Высота строки заголовка: 1,4 мкм
• Цвет основного текста: #ffffff
• Толщина мета-шрифта: легкий
• Интервал между буквами в мета: 3 пикселя

• Мин. Высота: 450 пикселей (рабочий стол), авто (планшет)
• Заполнение: 5% сверху, 5% снизу, 5% слева, 5% справа.
• Box Shadow: см. Снимок экрана
• Стиль анимации: Zoom

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

Создание тега категории 1

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

Текстовый контент

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

Разработка тега категории

В настройках оформления текста обновите следующее:

• Цвет фона: # 8ac829
• Толщина шрифта текста: Ультра полужирный
• Цвет текста текста: #ffffff
• Выравнивание текста: по центру
• Ширина: 120 пикселей
• Поля: сверху 80 пикселей, снизу -80 пикселей
• Отступ: 10 пикселей сверху, 10 пикселей снизу.
• Стиль анимации: Затухание
• Задержка анимации: 1000 мс
• Индекс Z: 1

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

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

Скопируйте модуль текста и блога в столбец 1 и вставьте их в столбцы 2, 3 и 4, чтобы у вас были точно такие же модули в каждом столбце.

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

Обновить модули в столбце 2

Оставаясь в каркасном представлении, откройте настройки модуля блога в столбце 2 и обновите следующее:

• Включенные категории: бизнес (или ваш собственный)
• Цвет фона (при наведении): # f64937

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

• Тело: «Бизнес»
• Цвет фона: # f64937

Обновить модули в столбце 3

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

• Включенные категории: деньги (или ваши собственные)
• Цвет фона (при наведении): # 6529c7

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

• Тело: «Деньги»
• Цвет фона: # 6529c7

Обновить модули в столбце 4

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

• Включенные категории: Коучинг (или ваш собственный)
• Цвет фона (при наведении): # f17809

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

• Тело: «Коучинг»
• Цвет фона: # f17809

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

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

• Использовать нестандартную ширину желоба: ДА
• Ширина желоба: 2
• Ширина: 94%
• Максимальная ширина: 1400 пикселей
• Высота: 540 пикселей (рабочий стол), авто (планшет)
• Padding: 0px сверху, 0px снизу

Мы устанавливаем высоту строки 540 пикселей на рабочем столе, чтобы строка не расширялась и не перемещала другой контент на странице при наведении курсора на карточку блога. Убедитесь, что на планшете установлена ​​автоматическая высота, чтобы не скрывать содержимое.

Обновление настроек для каждого столбца

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

• Масштаб трансформации (при наведении): 115%

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

transform: none !important

Этот небольшой фрагмент отключит эффект наведения курсора на масштаб трансформации для мобильных устройств.

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

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

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

• Цвет фонового градиента слева: # 6529c7
• Правый цвет градиента фона: # f64937
• Направление градиента: 270 градусов
• Набивка: 10vw сверху, 10vw снизу

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

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

А вот анимация и эффекты наведения.

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

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

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

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

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