Особенности плагина Divi: насыщенный контент

Divi Builder включает модуль блога для отображения сообщений на основе категорий либо в полноразмерном, либо в сеточном макете. Вы когда-нибудь хотели большего контроля над макетом вашего блога? Возможно, вас заинтересует сторонний плагин Content Intense.

Content Intense - это плагин от BeSuperfly, который добавляет новые макеты и функции стиля, чтобы придать вашему модулю блога новый вид. Он основан на стандартном модуле блога, поэтому включает в себя все знакомые функции.

(Плагин доступен на сайте разработчика.)

В этом выделении плагина мы рассмотрим функции и посмотрим, как это выглядит на странице. Я также загружу его в Extra (но, конечно, он также совместим с Divi).

Установка Content Intense

Загрузите и активируйте Content Intense, как и любой другой плагин. После активации плагина вы увидите новый пункт меню в разделе «Настройки» на панели инструментов, который называется «Активация плагина Content Intense». Щелкните здесь, введите свой ключ API и адрес электронной почты, а затем сохраните изменения.

Модуль интенсивного контента

В Divi Builder добавлен новый модуль под названием Content Intense.

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

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

На вкладке «Дизайн» можно выбрать один из 5 макетов, включить наложение, настроить текст заголовка, основной текст и метатекст. Также настройте границу, кнопку, интервал и анимацию.

Advanced than включает функции взаимосвязи кнопок, поэтому вы можете указать значение атрибута rel ссылки. Это отлично подходит для создания закладок, установки ссылки на nofollow и т. Д.

Настройки Content Intense по умолчанию

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

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

Он добавляет цвет фону за текстом. Я также переместил кнопку вправо и установил отрывок на 150.

Есть пять разных раскладок. В примерах, которые мы видели до сих пор, используется Атлас - трехколоночный, вертикальный макет, с аватаром. Давайте посмотрим на каждый макет. Я использую настройки по умолчанию.

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

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

Это Скалистые горы - трехколонный вертикальный макет с эффектами наведения. Он также помещает избранное изображение в качестве фона. Эффекты наведения показывают полный отрывок и кнопку «Читать дальше». Мы внесем некоторые изменения, чтобы текст был более читабельным.

Это Andes - вертикальный макет с одной колонкой и аватаром. Он использует обрезанную версию избранного изображения и использует маленькие линии для разделения метаданных и более крупные линии для разделения сообщений.

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

Пример - Альпы с Атласом

Я создал этот макет блога, используя 2 модуля Content Intense. В первом используется макет Альп без навигации. Второй модуль использует Атлас. Я установил его смещение равным 1, поэтому он не отображает то же изображение, что и первый модуль. Я настроил цвет шрифта на Arimo (мой любимый). Кнопки используют градиент. При наведении курсора они переходят в сплошной цвет и увеличивают расстояние между буквами. Кнопка навигации совпадает.

Пример - Альпы

Я любитель альтернативных раскладок. Мне нравится внешний вид Альп без каких-либо изменений, поэтому я просто внес несколько небольших изменений. Я добавил красную рамку, красный оверлей и изменил цвета кнопки и заголовка. Я также изменил шрифт на Dosis и сделал его жирным. Это показывает наложение при наведении.

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

Пример - Анды

В этом примере используются 6 различных модулей Content Intense - все они используют Andes, и каждый смещен на 1 больше, чем предыдущий модуль. Я добавил фон в раздел с наложением. Шрифт заголовка - Comfortaa. Последний модуль использует навигацию. Я изменил кнопки на текст.

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

Пример - Гималаи

Здесь используются Гималаи с перекрытием текста. Я отключил мета, изменил текст на светлый, изменил стиль кнопки на белый и уменьшил шрифт кнопки до 12 пунктов. Текст заголовка - Горький. Единственная анимация, которую я включил, - это наведение курсора на кнопку. Это станет отличным призывом к действию или ссылками на страницы, описывающие ваши услуги.

Пример - Скалистые горы

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

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

Пример - Extra

Content Intense отлично работает с Extra. Мне нужно было только внести некоторые незначительные изменения, когда я использовал Andes. В моем примере я поместил белый фон для текстовой области. Поскольку я использовал белый текст, я просто изменил его на темный. Пример выше - Скалистые горы. Единственное отличие заключалось в цвете текста ссылки "Читать дальше".

Загружаемые стили

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

Лицензия и документация

Выберите одну из двух лицензий (ни одна из них не позволяет перепродажу):

• Стандартная лицензия: для использования на одном веб-сайте. Он включает 1 для проекта разработки и 1 для живого проекта.
• Неограниченная лицензия: может использоваться на неограниченном количестве веб-сайтов как для личного, так и для клиентского использования.

Обновления автоматические. Content Intense доступен на сайте разработчика.

Документация подтверждается на сайте разработчика. Он проведет вас через настройки и по пути предоставит демонстрации.

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

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

Ждем вашего ответа. Вы пробовали Content Intense? Сообщите нам о своем опыте работы с ним в комментариях ниже.

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