Особенности плагина Divi - Дополнения к блогу Divi

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

Divi Blog Extras - это сторонний плагин от Divi Extended, который добавляет новый модуль в Divi Builder с несколькими новыми функциями для отображения ваших сообщений в блоге. Он включает шесть различных макетов и добавляет функцию загрузки AJAX с кнопкой «Загрузить еще». Сообщения загружаются по мере прокрутки, и загрузка происходит быстро. Вы можете изменить текст как для кнопок «Читать дальше», так и для кнопок «Загрузить еще».

В этом выделении плагина мы взглянем на Divi Blog Extras и получим некоторые идеи о том, что можно сделать с помощью этого плагина. Изображения для этих примеров были взяты с Unsplash.com.

Divi Blog Extras Установка и настройка

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

Параметры содержимого включают знакомые параметры и шесть вариантов макета, длину отрывка, цвета категорий, загрузку дополнительного текста кнопки, наложение избранного изображения, дополнительные сведения о тексте кнопок и параметры цвета текста. Настройки дизайна включают заголовок, мета и основной текст, а также стиль границы. Макет Block Extended добавляет изображение, а Classic добавляет значки социальных сетей. Рассмотрим подробнее каждый из макетов.

Сетка расширенная

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

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

Коробка расширенная

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

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

Полная ширина

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

В этом примере отключается дата и метаинформация. В тексте используются собственные цвета. Я изменил текст кнопки "Читать дальше" и "Загрузить еще". Отрывок ограничен 200 символами.

Все макеты отзывчивы. Вот посмотрите на отзывчивый вид Full Width. Это показывает два модуля бок о бок в строке из 2 столбцов.

Блок расширен

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

Block Extended имеет три варианта отображения изображений. В этом примере миниатюрное изображение помещается на задний план с текстом в наложении.

В этом примере фоновое изображение чередуется между первыми двумя вариантами.

Фон полной ширины

Full Width Background отображает обрезанную версию изображения во всю ширину и помещает отрывок с мета наложением поверх изображения. Размещение отрывка чередуется. Мета отделяется от отрывка строкой.

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

Классический

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

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

Создание уникального макета с помощью Divi Blog Extras

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

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

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

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

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

Лицензия

Один сайт стоит 15 долларов. Расширенная лицензия стоит 30 долларов и может использоваться на неограниченном количестве сайтов для вас и ваших клиентов. Он включает пожизненные обновления.

Этот плагин не работает с Extra.

• Вы можете приобрести этот плагин на сайте Divi Extended.

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

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

Ждем вашего ответа. Вы пробовали Divi Blog Extras? Расскажите нам о своем опыте в комментариях ниже.

Лучшее изображение через pulsar011 / shutterstock.com