Модуль Divi Blog имеет опцию макета в виде полезной сетки для ваших сообщений в блоге. Шаблон сетки организует ваши записи в блоге в блоки или карты, которые упрощают видимость элементов на экране по сравнению со стандартным представлением.
Параметры модуля Блог позволяют вам настроить общий дизайн вашей сети. Вы можете легко сделать все свои карточки одинаковыми по цвету фона, шрифту, полям и т. Д. Однако варианты стиля ограничены дизайном сетки в целом, что затрудняет применение нескольких или разных дизайнов к картам в сетке.
Сегодня я собираюсь показать вам, как нацелить и применить более одного стиля к карточкам, составляющим сетку. ваш блог используя собственный CSS. Я покажу вам, как применить разные стили к каждой карточке, чтобы создать эффект шахматной доски. Я также покажу вам, как оформить каждую карту по-разному в каждой строке, и покажу, как настроить таргетинг на любую отдельную карту.
Итак, это 4 примера того, как настроить ваш блог, включая некоторые эффекты при наведении, которые вы можете использовать. К концу этого урока вы сможете создавать потрясающие дизайны для ваш блог.
Другие учебники по теме Divi
- сайты 5 для использования ресторана Divi темы
- Как добавить текст на DiVi продукта WooCommerce
- Как изменить цвет меню между страницами на Divi
- Особенности, которые вы не знаете о Divi
- Как создать слайдер на Divi
- Как редактировать роль пользователя в Divi
Давайте начнем.
Настройка макета сетки для вашего блога
Прежде чем приступить к дизайну карточек модуля блога, убедитесь, что у вас уже есть хотя бы статьи 12 с изображением в коробке.
Как только ваши сообщения будут созданы, создайте новую страницу. На новой странице разверните модуль блога в полноразмерном столбце в стандартной части:
Нажмите, чтобы изменить настройки модуля «Блог». В разделе «Общие настройки» измените следующие параметры:
- Макет: Сетка (Grid)
- Количество статей: 12
- Показать избранное изображение: ДА
- Кнопка Подробнее: ON
В разделе Custom CSS введите «gridcard» в текстовое поле CSS ID. Это позволит нам персонализировать только этот модуль блога.
Сохраните изменения
Как понять макет «Сетка» для блога
Теперь, когда у вас есть свой блог сетки на месте, важно понять структуру макета сетки, так что вы можете найти карты модуля блога вы хотите настроить.
Сетка блога настроена с макетом из трех столбцов. Ниже приведена иллюстрация сетки блога со статьями блога 12, разделенными на три колонки:
Карты билета блога упорядочены сверху вниз в каждой из колонок. Итак, если вы хотите дать им число, вам нужно будет посчитать 1 в 4 на каждую длину сверху вниз:
Поскольку вы знаете порядковый номер каждой карточки блога в каждом столбце, вы также можете определить каждую карточку как нечетное или четное число следующим образом:
Пример Конструкции ворот
Пример №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; }
Этот код нацелен на все текстовые элементы в карточках модуля блога (включая заголовок, мета-сообщения, мета-ссылки на сообщения и содержание статьи) и придает им белый цвет.
Вот результат:
Следующим шагом в создании нашего макета шахматной доски является нацеливание на карточки с нечетными номерами в третьем столбце и применение темно-серого фона и белого текста, как вы это делали в первом столбце. Добавьте следующий 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; }
А теперь посмотрите, как это повлияет на ваш блог.
Пример # 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; }
Вот каков результат:
Пример # 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
- сайты 5 для использования ресторана Divi темы
- Как добавить текст в продукт Divi WooCommerce
- Как изменить цвет меню между страницами Divi
- Как персонализировать сетки блога с Divi
- Как использовать роль DiVi редактор на WordPress
- Как создать полноэкранный слайдер Divi
- Как изменить цвет меню между страницами Divi
- Особенности, которые вы, вероятно, не знаете о Divi
- Как использовать Divi Builder в WordPress
- Как использовать модуль прокрутки видео Divi
- Как использовать модуль Flip Builder Flip
- Как добавить отзыв модуль на Divi Builder
- Как использовать текстовый модуль Divi
- Как создать слайдер на Divi
- Как редактировать роль пользователя Divi
- Как использовать модуль Divi Social Media
- Как пользоваться магазинным модулем на тему WordPress Divi
- Как использовать боковую панель Divi
- Как использовать модуль таблицы цен Divi
- Как использовать титульный модуль изданий Divi
- Как добавить видео модуль Divi
- Как использовать навигационный модуль статьи
- Как использовать модуль поиска Divi
- Как использовать модуль кошелька Divi
- Как использовать модуль пользователя в Divi Builder
- Как использовать модуль кошелька с фильтром Divi
- Как использовать ползунок полной ширины
- Как использовать модуль изображения Divi Builder
- Как использовать полноразмерный навигационный модуль Divi Builder
- Как использовать модуль галереи изображений
- Как использовать модуль карты полной ширины Divi Builder
- Как использовать модуль Divi Full Width Portfolio
- Как использовать полноразмерный заголовочный модуль Divi
- Как использовать Divi Counter Module
- Как использовать слайдер статей в Divi Builder
- Как использовать модуль Divi Email Optin
Доброе утро ! Знаете ли вы, можно ли изменить количество столбцов этого объекта блога?
Я хотел бы, чтобы каждая карта отображалась в полную ширину. СПАСИБО !
Привет,
Я попытался отобразить сообщения блога в «сетке» с идентификатором «gridcard», но это не сработало. Вы можете помочь мне ?
Bonsoir,
Извините за поздний ответ.
Не могли бы вы перефразировать ваш запрос?
Привет,
Я действительно новичок, но благодаря онлайн-урокам мне удалось создать хороший блог.
На самом деле, спасибо, потому что мне просто нужно было скопировать коды, и все прошло безупречно, я очень доволен результатом.
Еще раз спасибо, хорошего дня!
Я вас умоляю Спасибо, что читаете нас.
Bonsoir,
в блоге DIVI рядом с именем автора стоит предлог «от» (например, от Стефано). Хотелось бы узнать, можно ли поменять его на "де"
Привет,
Да, этот элемент можно изменить с помощью Divi.
Привет Тьерри
Супер учебник
Я хотел бы знать, можно ли увеличить размер избранного изображения
Я хотел бы применить этот стиль к своему блогу
спасибо
Привет,
Да, это возможно.
Привет,
Как оптимизировать этот макет для мобильного (планшета)? У меня нет Schabrettmuster, но разные цвета для каждого сообщения в блоге в определенном порядке. Конечно, это меняется, когда вы переключаетесь на мобильный, и цвета больше не связаны с нужными сообщениями ...
У кого-нибудь есть идея?
Привет,
К сожалению, нет.
Привет,
Спасибо за эту статью! Я также хотел бы изменить «читать дальше» внизу статей.
Не могли бы вы привести примеры CSS-кода для изменения текста и, например, поместить его в удобную центральную кнопку?
En уоиз remerciant.
Софи
Привет 🙂 Чтобы изменить текст кнопки «читать дальше», это происходит в «Настройки блога» > «Стиль» > «Читать больше текста». Вы можете изменить типографику и текст «подробнее». Однако я не знаю, как сделать из него кнопку. Хорошая установка!
Cuándo lo pones в CSS personalizado, por ejemplo:
#gridcard. Колонка: искусство первого ребенка: nth-child (impar) {background: #333; }
da error como el seigue: Ожидается FUNCTION или IDENT после двоеточия в строке 1, col 18
привет
Bonsoir,
Наш блог автоматически переводится с французского. Поэтому я предлагаю вам выбрать французский язык в языковом виджете, расположенном на верхней панели нашего блога, и будет отображаться правильный код CSS.
usted escribió artículo evil escrito, debería ser: artículo del primer hijo: no arte del primer hijo:
Вы ошибочно написали статью, это должно быть: статья первого ребенка: не искусство первого ребенка:
Здравствуйте,
Другие языки 70.
привет
Спасибо за статью. У меня есть презентация в виде сетки (тема Divi). У меня есть эскизы (фотографии) для презентации статей, с другой стороны, когда я нажимаю, чтобы получить доступ к статье, изображение отображается в большом размере в начале 'статья. Есть ли способ сделать его такого же размера, что и эскиз, или удалить его из просмотра публикации.
спасибо
Патрик
Bonsoir,
Извините, но наша поддержка divi ограничена нашими учебниками. Пожалуйста, свяжитесь с Eleganthemes SVP.
Bonjourn, супер статья
Я пытаюсь здесь удачи, иногда мы неделями обходили тему, не находя ответа, тогда как эта же тема имеет смысл для других.
Поэтому я ищу решение, чтобы настроить сетку сообщений, состоящую только из визуальных элементов, но разной высоты, чтобы быть более точным, чтобы один из двух визуальных элементов имел двойную высоту визуализации рядом с ним.
Идея?
Жюльен
Привет Джулиан,
Я рекомендую вам связаться с командой DIVI. В этом случае так удобнее.
Большой учебник! Я проверю Са в эти выходные для моего сайта.
у вас есть решение для удаления экстрактов в сетках?
Merci à уоиз
Sofhy