Как переключать выдержки из блога при наведении курсора в Divi

Опубликовано: 2021-08-02

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

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

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

Sneak Peek

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

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

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

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

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

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

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

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

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

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

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

окно уведомления divi

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

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

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

расширение угловых вкладок

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

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

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

Как переключать выдержки из блога при наведении курсора в Divi

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

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

Создать строку

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

Ширина ряда

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

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

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

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

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

Затем обновите настройки содержимого модуля блога, выбрав отображение кнопки «Читать дальше».

На вкладке дизайна выберите макет сетки для блога.

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

  • Класс CSS: переключение-блог-выдержка

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

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

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

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

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

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

Давайте проверим результат на живой странице.

Результат

Подробнее мы рассмотрим код в конце статьи. А пока давайте посмотрим на результат.

Добавьте дополнительный стиль в модуль блога с помощью Divi Builder

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

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

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

  • Толщина шрифта заголовка: полужирный
  • Цвет текста заголовка: # 6d6a7e
  • Размер текста заголовка: 20 пикселей
  • Высота строки заголовка: 1,3 мкм

Стиль Подробнее Текст

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

Пагинация стилей

  • Толщина шрифта пагинации: полужирный
  • Стиль шрифта разбивки на страницы: TT
  • Цвет текста разбивки на страницы: # 6d6a7e
  • Интервал между буквами при разбивке на страницы: 1 пиксель

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

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

Стиль Box Shadow при наведении курсора

  • Box Shadow: см. Снимок экрана
  • Вертикальное положение тени блока: 0 пикселей
  • Сила размытия тени коробки: 38 пикселей
  • Цвет тени (рабочий стол): прозрачный
  • Цвет тени (при наведении): rgba (109,106,126,0.25)

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

О коде CSS

Если вас интересует разбивка пользовательского CSS, добавленного в модуль кода ранее, вот он.

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

@media all and (min-width: 981px) {

}

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

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

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

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

В-четвертых, нам нужно по умолчанию скрывать контент / выдержку поста при загрузке страницы. Для этого мы используем видимость: скрытый, чтобы скрыть контент. Затем мы добавляем opacity: 0, чтобы мы могли получить эффект перехода между появлением и исчезновением изображения, когда мы добавляем opacity: 1 в состояние при наведении курсора. Мы также используем max-height: 0px, чтобы получить эффект скользящего переключения, когда мы добавляем max-height: 500px в состояние наведения.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

В-пятых, мы показываем содержимое / выдержку сообщения, когда элемент сообщения (.et_pb_post) находится в состоянии наведения. Для этого мы меняем видимость на видимую, непрозрачность на 1 и максимальную высоту на 500 пикселей.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

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

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

Вот еще один взгляд на окончательный код. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

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

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

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

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