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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сетка css divi

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

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

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

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

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

Карты билета блога упорядочены сверху вниз в каждой из колонок. Итак, если вы хотите дать им число, вам нужно будет посчитать 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

Следующим шагом в создании нашего макета шахматной доски является нацеливание на карточки с нечетными номерами в третьем столбце и применение темно-серого фона и белого текста, как вы это делали в первом столбце. Добавьте следующий 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".

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

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

Чтобы настроить таргетинг на этот 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-таргетинга карточек модуля блога. Вам больше не нужно сохранять одинаковый стиль для каждой карты. Вы можете создавать их, как хотите.

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

[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

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