Модулът Divi Blog има опция за оформление под формата на полезна решетка за вашите публикации в блога. Шаблонът на мрежата организира публикациите в блога ви в кутии или карти, които опростяват видимостта на елементите на екрана в сравнение със стандартния изглед.

Настройките на модула Blog позволяват да персонализирате цялостния дизайн на вашата мрежа. Можете лесно да накарате всичките си карти да имат еднакъв цвят на фона, шрифт, полета и др. Опциите за стил обаче са ограничени до дизайна на мрежата като цяло, което затруднява прилагане на множество или различни дизайни към картите в мрежата.

Днес ще ви покажа как да таргетирате и прилагате повече от един стил към картите, които съставляват мрежата на вашия блог, използвайки персонализиран CSS. Ще ви покажа как да приложите различен стил към всяка друга карта, за да създадете ефект на шахматна дъска. Ще ви покажа също как да стилизирате всяка карта различно по ред и как да се насочите към всяка отделна карта.

Това са 4 примера за това как да персонализирате блога си, включително някои ефекти, които можете да използвате, когато задържите курсора на мишката. До края на този урок ще можете да създавате впечатляващи дизайни за вашия блог.

Други уроци по тема Divi

• Ресторант 5, който използва темата на Divi
• Как да добавите текст на продукт Divi WooCommerce
• Как да промените цвета на менюто между страниците в Divi
• Функции, които не знаете за Divi
• Как да създадете плъзгач на Divi
• Как да редактирате потребителска роля в Divi

Нека да започнем.

Конфигуриране на оформлението за вашия блог

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

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

Кликнете, за да редактирате настройките на блога модул. Под Общи настройки променете следните настройки:

• Разпределение: Решетка
• Брой статии: 12
• Покажи представено изображение: ДА
• Бутон Прочетете повече: ON

Под Custom CSS въведете "gridcard" в текстовото поле на CSS ID. Това ще бъде начин за нас да персонализираме само този блог модул.

Запазете промените си

Как да разберете оформлението на "Grid" за блога

Сега, когато имате вашата блог мрежа в място, че е важно да се разбере структурата на оформлението на мрежата, така че да можете да намерите карти на блога модул, който искате да персонализирате.

Решетката на блога е конфигурирана с оформление на три колони. Следва илюстрация на мрежата на блога със статии за блогове 12, разделени в три колони:

Картите за блогови билети се подреждат отгоре надолу във всяка от колоните. Така че, ако искате да им дадете номер, ще трябва да преброите 1 до 4 за всяка дължина от горе до долу:

Тъй като знаете числовия ред на всяка блог карта под всяка колона, можете също да идентифицирате всяка карта като нечетно или четно число, както следва:

Примерни модели на мрежата

Пример n ° 1: Проектиране на "карирана" мрежа

За този първи пример ще насоча всички нечетни карти в блог модула (карти 1 и 3) в първата колона, като им дам тъмно сив цвят на фона. За да направите това, отидете на "Divi → Опции на темата" и добавете следния CSS в персонализираното текстово поле на CSS:

#gridcard .column: първа статия: nth-child (нечетно) {background: #333; }

Тук е разбивката на това, което прави този код:

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

. колона: първо дете = изберете първата колона в блог модула

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

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

След това добавете белия си текст, който ще премине през тъмния фон, като добавите следния CSS:

#gridcard. колона: първа статия: nth-child (странно) .entry-title, #gridcard .column: first-child статия: n-дете (странно) .post-meta a, #gridcard. колона: първо дете }

Този код е насочен към всички текстови елементи в картите на модула на блога (включително заглавие, метадани на публикация, мета връзки към публикация и съдържание на публикация) и ги настройва в бяло.

Ето резултата:

Следващата стъпка при създаването на нашето оформление на шахматната дъска е да насочите нечетни номерирани карти в третата колона и да приложите тъмно сивия фон и белия текст точно както направихте в първата колона. Добавете следния CSS в текстовото поле Персонализиран CSS:

#gridcard .column: статия от последното дете: n-то дете (нечетно) {background: # 333; } #gridcard .column: статия от последното дете: n-то дете (нечетно) .заглавие на входа, #gridcard .column: статия от последното дете: nth-child (neparno) .post-meta, #gridcard .column: last- дъщерна статия: nth-child (neparno) .post-meta a, #gridcard .column: last-child article: nth-child (neparno) .post-content p {color: #ffffff; }

Този код е насочен към "последната" колона (в този случай третата колона е последната колона) с псевдонима "last-child".

За втората колона (или среда), насочвайте дори карти, за да завършите ефекта на шахматната дъска. За целта трябва да добавим следния 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) article: nth-child (even) .post-meta, # gridcard .column: nth-child (2) статия: nth-child (even) .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even) .post-content p {color : #Ф ф ф; }

Сега разгледайте страницата на блог, за да видите оформлението на шахматната дъска на модулните карти на блога.

Пример # 2: Добавяне на ефекти при задържане с карирано оформление

След като знаете как да насочвате блоковите модулни карти, можете да промените творчески всеки от елементите в картата.

За този пример ще използвам оформлението на шахматната дъска и този път ще променя представените изображения от тъмно сиви карти на черно-бели, когато задържите курсора на мишката върху картата. И ще направя изображенията на първите страници на белите карти по-ярки, когато задържите курсора на мишката върху картата. За да направите това, добавете следния CSS в областта на персонализирания CSS (не забравяйте да деактивирате или изрежете другия код, така че да не е несъвместим с новия):

#gridcard .column: статия от първо дете: n-то дете (нечетно), #gridcard .column: статия от последно дете: nth-child (нечетно), #gridcard .column: nth-child (2) статия: nth-child (четно) {background: # 333; } #gridcard .column: статия от първо дете: n-то дете (нечетно) .заглавие на входа, #gridcard .column: статия от първо дете: nth-child (neparno) .post-meta, #gridcard .column: first- детска статия: nth-child (neparno) .post-meta a, #gridcard .column: first-child article: nth-child (neparno) .post-content p, #gridcard .column: last-child article: nth-child (нечетно) .entry-title, #gridcard .column: last-child article: nth-child (neparno) .post-meta, #gridcard .column: last-child article: nth-child (neparno) .post-meta a , #gridcard .column: статия от последното дете: nth-child (neparno) .post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard. колона: nth-child (2) статия: nth-child (even) .post-meta, #gridcard .column: nth-child (2) article: 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 (neparno): hover img, #gridcard .column: last статия за дете: n-то дете (нечетно): задръжте img {-webkit-filter: сива скала (1); филтър: сива скала (1); } #gridcard .column: nth-child (2) статия: nth-child (нечетна): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last статия за дете: n-то дете (четно): задръжте img {-webkit-filter: яркост (1.5); филтър: яркост (1.5); }

Можете също да добавите ефект на инверсия върху картите, така че когато задържите курсора на мишката върху белите карти, те да станат тъмно сиви, а когато задържите курсора на мишката върху тъмно сивите карти, те да побелеят.

Добавете следните CSS в допълнение към горния CSS:

#gridcard .column article, #gridcard .column article img {-webkit-prelaz: всички 0.8s; -moz-преход: всички 0.8s; преход: всички 0.8s; } #gridcard .column: първо дете: статия: nth-child (нечетно): hover, #gridcard .column: last-child article: nth-child (neparno): hover, #gridcard .column: nth-child (2) статия: nth-child (even): hover {background: #fff; } #gridcard .column: статия от първо дете: n-то дете (нечетно): hover .entry-title, #gridcard .column: първо дете-дете: nth-child (neparno): hover .post-meta, #gridcard колона: статия от първо дете: n-то дете (нечетно): hover .post-meta a, #gridcard .column: първо дете-член: nth-child (нечетно): hover .post-content p, #gridcard .column: статия от последно дете: n-то дете (нечетно): задръжте .entry-заглавие, #gridcard .column: последно-дете (нечетно): hover .post-meta, #gridcard .column: последно-дете : nth-child (neparno): hover .post-meta a, #gridcard .column: last-child article: nth-child (neparno): hover .post-content p, #gridcard .column: nth-child (2) статия: nth-child (even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) статия: nth-child (even): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: статия от първо дете: 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: first-child article: nth-child (even): hover .post-meta, #gridcard. колона: статия от първо дете: n-то дете (четно): hover .post-meta a, #gridcard .column: първо дете-член: nth-child (четно): hover .post-content p, #gridcard .column: статия от последното дете: n-то дете (четно): задръжте .entry-заглавие, #gridcard .column: последно дете (статия): hover .post-meta, #gridcard .column: последно дете : nth-child (even): hover .post-meta a, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) статия: nth-дете (нечетно): hover .entry-title, #gridcard .column: nth-child (2) статия: nth-child (neparno): hover .post-meta, #gridcard .column: nth-child ( 2) статия: nth-дете (нечетно): hover .post-meta a, #gridcard .column: nth-child (2) статия: nth-child (neparno): hover .post-content p {color: #fff; }

Сега отидете да видите ефекта върху вашия блог.

Пример # 3: Персонализиране на картите по редове

За третия пример ще приложа същия тъмен фон и бял текст към картите във всеки друг ред (не колона). За да направите това, трябва да насочите всички четни карти във всяка от колоните. Отидете на „Divi → Опции“ на темата и не забравяйте да деактивирате или премахнете всеки предишен CSS код, който сте добавили от началото на този урок. След това добавете следния CSS:

#gridcard статия: n-то дете (четно) {background-color: # 333; } #gridcard статия: nth-child (even) .entry-title, #gridcard article: nth-child (even) .post-meta, #gridcard article: nth-child (even) .post-meta a, #gridcard article : nth-child (even) .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 насочване на модулни карти Blog. Вече не трябва да поддържате един и същ стил за всяка карта. Можете да ги проектирате както искате.

Ако имате някакви въпроси или предложения, можете да ги предложите.

[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" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] ИЗТЕГЛЕТЕ ТЕМАТА DIVI [/ vcex_button] [/ colu width_m»n_colum » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] EM DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Други уроци по Диви

• Ресторант 5, който използва темата на Divi
• Как да добавяте текст към продукт Divi WooCommerce
• Как да промените цвета на менюто между страниците на Divi
• Как да персонализирате решетките на блог с Divi
• Как да използвате редактора на роли Divi в WordPress
• Как да създадете плъзгач Divi на цял екран
• Как да промените цвета на менютата между страниците на Divi
• Функции, които вероятно не знаете за Divi
• Как да използвате Divi Builder на WordPress
• Как да използвате модула за превъртане на видео Divi
• Как да използвате модула за обръщане на Divi Builder
• Как да добавите препоръчителен модул на Divi Builder
• Как да използвате текстовия модул Divi
• Как да създадете плъзгач на Divi
• Как да редактирате потребителска роля на Divi
• Как да използвате модула Divi Social Media
• Как да използвате магазинния модул по темата WordPress Divi
• Как да използвате модула Sidebar на Divi
• Как да използвате модула на таблицата с цени за Divi
• Как да използвате заглавния модул на публикациите на Divi
• Как да добавите видео модул на Divi
• Как да използвате навигационния модул на статията
• Как да използвате модула за търсене Divi
• Как да използвате модула на портфейла Divi
• Как да използвате модула за лице на Divi Builder
• Как да използвате портфейла с филтър на Divi
• Как да използвате модула на плъзгача с пълна ширина
• Как да използвате модула за изображения на Builder на Divi
• Как да използвате навигационния модул с пълна ширина на Divi Builder
• Как да използвате модула за галерия на изображения
• Как да използвате модула на карта с пълна ширина Divi Builder
• Как да използвате модула за портфейли с пълна ширина Divi
• Как да използвате заглавния модул Divi с пълна ширина
• Как да използваме Counter модула Divi
• Как да използвате плъзгача за статии в Divi Builder
• Как да използвате модула Divi Email Optin

Блеър Jersyer

Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на плъгини, теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Вижте пълната биография