Пропустить

Как персонализировать сетки блога с Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Модуль Divi Blog имеет опцию макета в виде полезной сетки для ваших сообщений в блоге. Шаблон сетки организует ваши записи в блоге в блоки или карты, которые упрощают видимость элементов на экране по сравнению со стандартным представлением.

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

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

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

Другие учебники по теме Divi

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

Настройка макета сетки для вашего блога

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

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

Настройка макета блога divi

Нажмите, чтобы изменить настройки модуля «Блог». В разделе «Общие настройки» измените следующие параметры:

  • Макет: Сетка (Grid)
  • Количество статей: 12
  • Показать избранное изображение: ДА
  • Кнопка Подробнее: ON

Настройка сетки divi

В разделе Custom CSS введите «gridcard» в текстовое поле CSS ID. Это позволит нам персонализировать только этот модуль блога.

Сетка css divi

Сохраните изменения

Как понять макет «Сетка» для блога

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

Сетка блога настроена с макетом из трех столбцов. Ниже приведена иллюстрация сетки блога со статьями блога 12, разделенными на три колонки:

Представление макета сетки divi

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

Подсчитайте статьи divi

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

Четное и нечетное число divi

Пример Конструкции ворот

Пример №1: Дизайн "клетчатой" сетки

В этом первом примере я собираюсь настроить таргетинг на все нечетные карточки в модуле блога (карточки 1 и 3) в первом столбце, придав им темно-серый цвет фона. Для этого перейдите в «Divi → Параметры темы» и добавьте следующий CSS в текстовое поле настраиваемого CSS:

#gridcard .column: первый ребенок статья: п-й ребенок (нечетные) {фон: #333; }

Вот расстройство того, что делает этот код:

#gridcard = идентификатор всего модуля блога

.column: first-child = выбрать первый столбец в модуле блога

post: nth-child (odd) = выбирает все нечетные элементы (или карточки) в столбце

Собирая все вместе, это выбирает карточки с нечетными номерами в первом столбце модуля блога с идентификатором "gridcard".

Добавьте белый текст, который будет идти на темном фоне, добавив следующий CSS:

#gridcard .column: первая-ребенок статья: п-й ребенок (нечетный) .entry-заголовок, #gridcard .column: первая-ребенок статья: п-й ребенок (нечетная) .POST-мета, #gridcard .column: первый-ребенок Статья: п-й ребенок (нечетный) .post мета- а, #gridcard .column: первая-ребенок статья: п-й ребенок (нечетный) .POST содержания р {цвета: #ffffff; }

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

Вот результат:

Настройка нечетной сетки divi

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

#gridcard .column: last-child article: nth-child (odd) {background: # 333; } #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last- дочерняя статья: nth-child (нечетная) .post-meta a, #gridcard .column: последняя дочерняя статья: nth-child (нечетная) .post-content p {color: #ffffff; }

Этот код нацелен на «последний» столбец (в этом случае третий столбец является последним столбцом) с элементом псевдонима last-child.

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

#gridcard .column: nth-child (2) article: nth-child (even) {background: # 333; } #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta, # gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even) .post-content p {color : #fff; }

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

Макет диви сетки шахматной доски

Пример # 2: Добавление эффектов наведения с клетчатым макетом

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

В этом примере я собираюсь использовать макет шахматной доски, и на этот раз я собираюсь изменить избранные изображения с темно-серых карт на черно-белые при наведении курсора на карту. И я собираюсь сделать изображения белых карточек ярче при наведении курсора на карточку. Для этого добавьте следующий CSS в область Custom CSS (не забудьте отключить или вырезать другой код, чтобы он не был несовместим с новым):

#gridcard .column: статья первого ребенка: nth-child (нечетное), #gridcard .column: статья последнего ребенка: nth-child (нечетное), #gridcard .column: nth-child (2) article: nth-child (даже) {фон: # 333; } #gridcard .column: статья первого ребенка: nth-child (нечетное) .entry-title, #gridcard .column: статья первого ребенка: nth-child (нечетное) .post-meta, #gridcard .column: first- дочерняя статья: nth-child (нечетное) .post-meta a, #gridcard .column: статья первого ребенка: nth-child (нечетное) .post-content p, #gridcard .column: статья последнего ребенка: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last-child article: nth-child (odd) .post-meta a , #gridcard .column: last-child article: nth-child (odd) .post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard. column: nth-child (2) article: nth-child (even) .post-meta, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column : nth-child (2) article: nth-child (даже) .post-content p {color: #fff; } #gridcard .column: nth-child (2) article: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (odd): hover img, #gridcard .column: last -child article: nth-child (нечетное): hover img {-webkit-filter: grayscale (1); фильтр: оттенки серого (1); } #gridcard .column: nth-child (2) article: nth-child (odd): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -child article: nth-child (even): hover img {-webkit-filter: яркость (1.5); фильтр: яркость (1.5); }

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

Добавьте следующий CSS и больше CSS выше:

#gridcard .column article, #gridcard .column article img {-webkit-transition: all 0.8s; -моз-переход: все 0.8 с; переход: все 0.8 с; } #gridcard .column: first-child article: nth-child (odd): hover, #gridcard .column: last-child article: nth-child (odd): hover, #gridcard .column: nth-child (2) статья: nth-child (даже): hover {background: #fff; } #gridcard .column: статья первого ребенка: nth-child (нечетное): hover .entry-title, #gridcard .column: статья первого ребенка: nth-child (нечетное): hover .post-meta, #gridcard. column: статья первого ребенка: nth-child (нечетное): hover .post-meta a, #gridcard .column: статья первого ребенка: nth-child (odd): hover .post-content p, #gridcard .column: последняя дочерняя статья: nth-child (нечетное): hover .entry-title, #gridcard .column: last-child article: nth-child (odd): hover .post-meta, #gridcard .column: last-child article : nth-child (нечетный): hover .post-meta a, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) article: nth-child (even): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: first-child article: nth-child (even): hover, #gridcard .column: last-child article: nth-child (even): hover, #gridcard .column: nth-child (2) статья: nth-child (нечетное): hover {background: # 333; } #gridcard .column: статья первого ребенка: nth-child (even): hover .entry-title, #gridcard .column: статья первого ребенка: nth-child (even): hover .post-meta, #gridcard. column: статья первого ребенка: nth-child (even): hover .post-meta a, #gridcard .column: статья первого ребенка: nth-child (even): hover .post-content p, #gridcard .column: последняя дочерняя статья: nth-child (even): hover .entry-title, #gridcard .column: last-child article: nth-child (even): hover .post-meta, #gridcard .column: last-child article : nth-child (even): hover .post-meta a, #gridcard .column: статья last-child: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (odd): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) article: nth-child (odd): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-content p {color: #fff; }

А теперь посмотрите, как это повлияет на ваш блог.

Настройка сеток при наведении divi

Пример # 3: Настройка карты по линиям

В третьем примере я собираюсь применить тот же темный фон и белый текст к карточкам в каждой второй строке (не в столбце). Для этого вам нужно настроить таргетинг на все четные карты в каждом из столбцов. Перейдите в «Divi → Параметры» темы и обязательно отключите или удалите любой предыдущий код CSS, который вы добавили с начала этого руководства. Затем добавьте следующий CSS:

#gridcard article: nth-child (even) {background-color: # 333; } #gridcard article: nth-child (even) .entry-title, #gridcard article: nth-child (even) .post-meta, #gridcard article: nth-child (even) .post-meta a, #gridcard article : nth-child (даже) .post-content p {color: #fff; }

Вот каков результат:

Результат конфигурации по строке divi

Пример # 4: проектирование конкретной карты сетки

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

Перейдите на страницу с модулем вашего блога и щелкните правой кнопкой мыши одну из своих карточек. В появившемся окне параметров выберите «Проверить» (в некоторых браузерах может быть «Проверить элемент» или что-то подобное. При этом развернется окно «Инструменты разработчика», в котором отображаются как HTML, так и CSS для вашего веб-странице. Найдите тег статьи, который обертывает вашу статью, и запишите присвоенный ему идентификатор статьи. Это селектор, который вы должны использовать для таргетинга на свою индивидуальную карточку. В моем примере у меня есть щелкнул правой кнопкой мыши и нажал, чтобы найти идентификатор "post-3466".

Как показано ниже:

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Модификация отдельной статьи

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

# post-3466 {фон: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Теперь к карте применен этот особый стиль.

Вот и все!

Заключительные мысли

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

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

Другие учебные пособия Divi

Эта статья содержит комментарии 20

  1. Привет,
    Я попытался отобразить сообщения блога в «сетке» с идентификатором «gridcard», но это не сработало. Вы можете помочь мне ?

  2. Привет,
    Я действительно новичок, но благодаря онлайн-урокам мне удалось создать хороший блог.
    На самом деле, спасибо, потому что мне просто нужно было скопировать коды, и все прошло безупречно, я очень доволен результатом.
    Еще раз спасибо, хорошего дня!

  3. Bonsoir,
    в блоге DIVI рядом с именем автора стоит предлог «от» (например, от Стефано). Хотелось бы узнать, можно ли поменять его на "де"

  4. Привет Тьерри
    Супер учебник
    Я хотел бы знать, можно ли увеличить размер избранного изображения
    Я хотел бы применить этот стиль к своему блогу
    спасибо

  5. Привет,
    Как оптимизировать этот макет для мобильного (планшета)? У меня нет Schabrettmuster, но разные цвета для каждого сообщения в блоге в определенном порядке. Конечно, это меняется, когда вы переключаетесь на мобильный, и цвета больше не связаны с нужными сообщениями ...
    У кого-нибудь есть идея?

  6. Привет,

    Спасибо за эту статью! Я также хотел бы изменить «читать дальше» внизу статей.
    Не могли бы вы привести примеры CSS-кода для изменения текста и, например, поместить его в удобную центральную кнопку?

    En уоиз remerciant.
    Софи

  7. Cuándo lo pones в CSS personalizado, por ejemplo:
    #gridcard. Колонка: искусство первого ребенка: nth-child (impar) {background: #333; }

    da error como el seigue: Ожидается FUNCTION или IDENT после двоеточия в строке 1, col 18

    привет

    1. Bonsoir,

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

    2. usted escribió artículo evil escrito, debería ser: artículo del primer hijo: no arte del primer hijo:

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

  8. привет
    Спасибо за статью. У меня есть презентация в виде сетки (тема Divi). У меня есть эскизы (фотографии) для презентации статей, с другой стороны, когда я нажимаю, чтобы получить доступ к статье, изображение отображается в большом размере в начале 'статья. Есть ли способ сделать его такого же размера, что и эскиз, или удалить его из просмотра публикации.
    спасибо
    Патрик

    1. Bonsoir,

      Извините, но наша поддержка divi ограничена нашими учебниками. Пожалуйста, свяжитесь с Eleganthemes SVP.

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

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

    Идея?

    Жюльен

  10. Большой учебник! Я проверю Са в эти выходные для моего сайта.
    у вас есть решение для удаления экстрактов в сетках?
    Merci à уоиз
    Sofhy

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх