Divi: Как отображать выдержки из статей при наведении

Хотите знать, как отображать фрагменты статей при наведении Divi ?

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

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

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

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

обследование

Во-первых, вот обзор того, что мы будем создавать в этом уроке.

Создание макета модуля блога

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

Создать линию

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

ширина линии

Затем перейдите к настройкам линии. затем на вкладке «Стиль» в разделе «Размер» измените ширину следующим образом:

• Максимальная ширина: 90%
• Максимальная ширина: 1200 пикселей

Добавить модуль блога

Затем вставьте модуль блога в столбец ранее созданной строки.

Настройки модуля блога

Затем перейдите в настройки модуля «Блог», во вкладку СодержаниеВ разделе «Элементы» установите для параметра «Показать кнопку «Читать дальше»» значение «Да».

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

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

Класс CSS: toggle-blog-except

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

Добавьте пользовательский CSS с помощью модуля «Код».

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

Чтобы добавить CSS, мы будем использовать модуль Code. Для этого добавьте модуль «Код» в модуль «Блог».

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

1. @media all and (min-width: 981px) {
2.   /* add transition for post content*/
3.   .toggle-blog-excerpt .et_pb_post .post-content {
4.     -webkit-transition: all 500ms !important;
5.     transition: all 500ms !important;
6.   }
7.   /* keep post content visible in visual builder */
8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
9.     visibility:visible;
10.     opacity: 1;
11.     max-height:none;
12.   }
13.   /* hide post content */
14.   .toggle-blog-excerpt .et_pb_post .post-content {
15.     visibility: hidden;
16.     opacity: 0;
17.     max-height:0px;
18.   }
19.   /* show post content when hovering over post item */
20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
21.     visibility: visible;
22.     opacity:1;
23.     max-height: 500px;
24.   }
25.   /* set min-height for all post items */
26.   .toggle-blog-excerpt .et_pb_post {
27.     min-height: 400px; 
28.   }
29. }

Давайте посмотрим на результат, полученный на данный момент.

Результат

Давайте добавим дополнительные стили в модуль «Блог» с помощью конструктора Divi.

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

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

Стиль заголовка статьи

• Тусклое светлое название: полужирный текст
• Цвет текста заголовка: #6D6A7E
• Размер текста заголовка: 20 пикселей
• Высота строки заголовка: 1.3em

Стиль текста "Читать далее"

• Читать дальше Тусклый свет: Жирный текст
• Подробнее Стиль копирования: ТТ
• Цвет текста Подробнее: #6D6A7E
• Расстояние между буквами Подробнее: 1px
• Высота строки Подробнее: 3.5em

Изменить отображение разбивки на страницы текста

• Показать разбиение на страницы Приглушенный свет: Жирный текст
• Цвет текста Показать пагинацию: #6D6A7E
• Интервал между буквами Показать пагинацию: 1px
• Показать пагинацию Стиль копирования: TT

Удалить границу

• Ширина границы макета сетки: 0px

Стиль окна тени при наведении

• Поле теней: см. снимок экрана
• Начальная позиция: 0px
• Box Shadow Blur Strength: 38px
• Цвет шрифта субтитров: rgba (109,106,126,0.25)

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

Заключение

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

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

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