Пропустить

Как настроить сетки с блога DiVi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример # 1: создание клетчатой ​​сетки

В этом первом примере я нацеливаю все нечетные карточки модуля блога (карточки 1 и 3) в первом столбце на темно-серый цвет фона. Для этого перейдите в «Divi → Theme Options» и добавьте следующий 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; }

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

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

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

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

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

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

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

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

#gridcard .column: nth-child (2) статья: nth-child (even) {background: #333; } #gridcard .column: статья nth-child (2): nth-child (even) .entry-title, #gridcard .column: nth-child (2): nth-child (even) .post-meta, # gridcard .column: nth-child (2): nth-child (even) .post-meta, #gridcard .column: nth-child (2): nth-child (even) .post-content p {color : #fff; }

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

Пример # 2: добавление эффектов наведения с помощью клетчатого макета

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

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

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

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

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

#gridcard. статья в столбце, #gridcard .column article img {-webkit-transition: все 0.8s; -moz-переход: все 0.8; переход: все 0.8; } #gridcard .column: статья первого ребенка: nth-child (нечетный): hover, #gridcard .column: last-child article: nth-child (нечетный): hover, #gridcard .column: nth-child (2) статья: nth-child (even): hover {background: #fff; } #gridcard .column: первый ребенок статья: п-й ребенок (нечетная): парить .entry-заголовок, #gridcard .column: первый ребенок статья: п-й ребенок (нечетный): парить .POST-мету, #gridcard. column: first-child article: nth-child (нечетный): hover .post-meta, #gridcard .column: статья первого ребенка: nth-child (нечетное): hover .post-content p, #gridcard .column: last-child article: nth-child (odd): hover .entry-title, #gridcard .column: last-child article: nth-child (odd): hover .post-meta, #gridcard .column: статья последнего ребенка : п-й ребенок (нечетный): парить .post-мета имеет #gridcard .column: последний ребенок статья: п-й ребенок (нечетные): парить .post-контента р #gridcard .column: п-го ребенка (2) : nth-child (even): hover .entry-title, #gridcard .column: nth-child (2): nth-child (even): hover .post-meta, #gridcard .column: nth-child 2): nth-child (even): hover .post-meta, #gridcard .column: nth-child (2): nth-child (even): hover .post-content p {color: #333; } #gridcard .column: первый-ребенок статья: п-й ребенок (даже): парить, #gridcard .column: последний ребенок статья: п-й ребенок (даже): парить, #gridcard .column: п-й ребенок (2) статья: nth-child (нечетный): hover {background: #333; } #gridcard .column: статья первого ребенка: nth-child (even): hover .entry-title, #gridcard .column: статья первого ребенка: nth-child (even): hover .post-meta, #gridcard. column: first-child article: nth-child (even): hover .post-meta, #gridcard .column: статья первого ребенка: nth-child (even): hover .post-content p, #gridcard .column: last-child article: 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, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) Статья: nth-child (нечетный): hover .entry-title, #gridcard .column: nth-child (2): nth-child (нечетный): hover .post-meta, #gridcard .column: nth-child 2): nth-child (нечетный): hover .post-meta, #gridcard .column: nth-child (2): nth-child (нечетный): hover .post-content p {color: #fff; }

Теперь идите увидеть эффект на вашем блоге.

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

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

#gridcard статья: nth-child (even) {background-color: #333; } #gridcard: nth-child (even) .entry-title, #gridcard: nth-child (even) .post-meta, #gridcard: nth-child (even) .post-meta, #gridcard статья : nth-child (even) .post-content p {color: #fff; }

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

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

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

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

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

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

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

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

# post-3466 {background: #333333; } # пост-3466 .entry-title, # пост-3466 .post-meta, # пост-3466 .post-meta, # пост-3466 .post-content p {color: #fff; }

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

Вот так!

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

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

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

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

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

  2. Bonsoir,
    В блоге DIVI рядом с именем автора помещается предлог «де» (например, Стефано). Я хотел бы знать, если это возможно, чтобы изменить его на "от"

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

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

  5. Привет,

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

    En уоиз remerciant.
    Софи

  6. 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:

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

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

    1. Bonsoir,

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

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

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

    Идея?

    Жюльен

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

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

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

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

Вверх
16 акции
доля7
чирикать2
Регистрация7