Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

Divi Blog-modulen har ett layoutalternativ i form av ett användbart rutnät för dina blogginlägg. Nätmallen organiserar dina blogginlägg i rutor eller kartor som förenklar synligheten för objekt på en skärm jämfört med standardvyn.

Med inställningarna för bloggmodulen kan du anpassa nätverkets övergripande design. Du kan enkelt få alla dina kort att ha samma bakgrundsfärg, teckensnitt, marginaler etc. Men stilalternativen är begränsade till utformningen av rutnätet som helhet, vilket gör det svårt använda flera eller olika mönster på kartorna i rutnätet.

Idag ska jag visa dig hur du kan rikta in dig och använda mer än en stil på de kort som utgör din bloggs rutnät med anpassad CSS. Jag ska visa dig hur du använder en annan stil på varandra kort för att skapa en schackbrädeffekt. Jag kommer också att visa dig hur du utformar varje kort annorlunda per rad och visar hur du riktar in dig på ett enskilt kort.

Så detta är 4 exempel på hur du kan anpassa din blogg, inklusive några museffekter som du kan använda. I slutet av denna tutorial kan du skapa fantastiska mönster för din blogg.

Andra handledning om Divi-tema

Låt oss börja.

Configuration Layout Grid för din blogg

Innan du börjar med designen av bloggmodulkorten, se till att du har minst 12 artiklar som redan har skapats med en bild i rutan.

När dina meddelanden har skapats skapar du en ny sida. På din nya sida distribuerar du bloggmodulen i en kolumn med full bredd i en standarddel:

Konfigurera layouten på en divi-blogg

Klicka för att redigera inställningarna för Blog-modulen. Ändra följande inställningar under Allmänna inställningar:

  • Layout: Grid (Grid)
  • Antal artiklar: 12
  • Visa utvald bild: JA
  • Button Läs mer: ON

Divi grid konfiguration

Under Anpassad CSS anger du "rutnät" i textrutan CSS-ID. Det kommer att vara ett sätt för oss att bara anpassa den här bloggmodulen.

Gridcard css-divi

Spara ändringarna

Hur man förstår "Grid" -layouten för bloggen

Nu när du har din blogg rutnät på plats, är det viktigt att förstå strukturen av utformningen av nätet så att du kan hitta kartor över bloggen modul du vill anpassa.

Bloggnätet är konfigurerat med en tre-kolumnlayout. Följande är en illustration av bloggnätet med 12 bloggartiklar uppdelade i tre kolumner:

Presentation av rutnätets divi-layout

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

Bloggbiljettkorten beställs från topp till botten i var och en av kolumnerna. Så om du vill ge dem ett nummer måste du räkna 1 till 4 på varje längd från topp till botten:

Räkna divi-artiklar

Eftersom du känner till den numeriska ordningen för varje bloggkort under varje kolumn kan du också identifiera varje kort som ett udda eller jämnt nummer enligt följande:

Jämnt och udda nummer divi

Mönster gate Exempel

Exempel nr 1: Design av ett rutigt rutnät

För det första exemplet riktar jag alla udda kort i bloggmodulen (kort 1 och 3) i den första kolumnen och ger dem en mörkgrå bakgrundsfärg. För att göra detta, gå till "Divi → Temalternativ" och lägg till följande CSS i den anpassade CSS-textrutan:

#gridcard .column: första-barn artikel: n: te-barn (udda) {bakgrund: #333; }

Här är en uppdelning av vad denna kod gör:

#gridcard = id för hela bloggmodulen

.column: first-child = välj den första kolumnen i bloggmodulen

post: nth-child (udda) = väljer alla udda objekt (eller kort) i kolumnen

Att sätta ihop allt, detta markerar de udda numrerade korten i den första kolumnen i bloggmodulen med ID "gridcard".

Tillsätt sedan din vit text som kommer att gå på den mörka bakgrunden genom att lägga till följande CSS:

#gridcard .column: första-barn artikel: n: te-barn (udda) .entry-titel, #gridcard .column: första-barn artikel: n: te-barn (udda) .POST-meta, #gridcard .column: första-barn artikel: n: te-barn (udda) .post-meta a, #gridcard .column: första barn artikeln: n: te-barn (udda) .POST-innehåll p {color: #FFFFFF; }

Den här koden riktar sig till alla textelement i bloggens modulkort (inklusive titel, artikelmetas, artikelmetalänkar och artikelinnehåll) och tilldelar dem den vita färgen.

Här är resultatet:

Vill du sälja dina produkter på internet?

Ladda ner WooCommerce gratis, de bästa plugins för e-handel för att sälja dina fysiska och digitala produkter på WordPress och enkelt skapa din onlinebutik. Perfekt för nybörjare.

Anpassning av udda divi rutnät

Nästa steg för att skapa vår schackrutlayout är att rikta in de udda numrerade korten i den tredje kolumnen och tillämpa den mörkgrå bakgrunden och den vita texten precis som du gjorde i den första kolumnen. Lägg till följande CSS i textrutan Anpassad CSS:

#gridcard .column: last-child article: nth-child (odd) {bakgrund: # 333; } #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last- barnartikel: nth-child (udda) .post-meta a, #gridcard .column: last-child article: nth-child (odd) .post-content p {color: #ffffff; }

Den här koden riktar sig mot den "sista" kolumnen (i detta fall är den tredje kolumnen den sista kolumnen) med smeknamnelementet "sista barn".

För den andra kolumnen (eller mitten), rikta in jämna kort för att slutföra schackruteffekten. För att göra detta måste vi lägga till följande CSS:

#gridcard .column: nth-child (2) article: nth-child (even) {bakgrund: # 333; } #gridcard .column: nth-child (2) article: nth-child (even) .post-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; }

Nu går kolla in bloggen för att se schack layout bloggen modulkorten.

Checkerboard rutnät divi layout

Exempel 2: Lägga till svävareffekter med rutig layout

När du väl vet hur du riktar in dig på bloggmodulkorten kan du ändra något av elementen på kortet på ett kreativt sätt.

För det här exemplet ska jag använda schackrutans layout och den här gången kommer jag att ändra bilderna från mörkgrå kartor till svartvitt när jag svävar över kartan. Och jag ska göra förstasidans bilder av de vita korten ljusare när jag svävar över kortet. För att göra detta, lägg till följande CSS i området Custom CSS (se till att inaktivera eller klippa ut den andra koden så att den inte är oförenlig med den nya):

#gridcard .column: first-child article: nth-child (odd), #gridcard .column: last-child article: nth-child (odd), #gridcard .column: nth-child (2) article: nth-child (jämn) {bakgrund: # 333; } #gridcard .column: first-child article: nth-child (odd) .entry-title, #gridcard .column: first-child article: nth-child (odd) .post-meta, #gridcard .column: first- underartikel: nth-child (udda) .post-meta a, #gridcard .column: first-child article: nth-child (odd) .post-content p, #gridcard .column: last-child article: nth-child (udda) .post-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). post-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; } #gridcard .column: nth-child (2) article: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (odd): hover img, #gridcard .column: last -barnsartikel: nth-child (udda): sväva img {-webkit-filter: gråskala (1); filter: gråskala (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 -barnartikel: nth-child (jämnt): sväva img {-webkit-filter: ljusstyrka (1.5); filter: ljusstyrka (1.5); }

Du kan också lägga till en inversionseffekt på korten så att när du svävar över de vita korten blir de mörkgrå och när du svävar över de mörkgrå korten blir de vita.

Lägg till följande CSS och CSS ovan:

#gridcard .column article, #gridcard .column article img {-webkit-transition: all 0.8s; -moz-övergång: alla 0.8 sekunder; övergång: alla 0.8s; } #gridcard .column: first-child article: nth-child (odd): hover, #gridcard .column: last-child article: nth-child (odd): hover, #gridcard .column: nth-child (2) artikel: nth-child (jämnt): sväva {bakgrund: #fff; } #gridcard .column: first-child article: nth-child (odd): hover .entry-title, #gridcard .column: first-child article: nth-child (odd): hover .post-meta, #gridcard. column: first-child article: nth-child (odd): hover .post-meta a, #gridcard .column: first-child article: nth-child (odd): hover .post-content p, #gridcard .column: sista barnartikel: nth-child (udda): hover .entry-title, #gridcard .column: last-child article: nth-child (udda): sväva .post-meta, #gridcard .column: sista barnartikel : nth-child (udda): 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) artikel: nth-child (jämn): sväva .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) artikel: nth-child (udda): sväva {bakgrund: # 333; } #gridcard .column: first-child article: nth-child (even): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard. column: first-child article: nth-child (even): hover .post-meta a, #gridcard .column: first-child article: nth-child (even): hover .post-content p, #gridcard .column: sista barnartikel: nth-child (jämnt): 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 article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) artikel: nth-child (udda): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) artikel: nth-child (udda): sväva .post-meta a, #gridcard .column: nth-child (2) article: nth-child (udda): sväva .post-innehåll p {färg: #fff; }

Gå nu och se effekten på din blogg.

Anpassa galler när du svävar divi

Exempel # 3: Anpassa kartlägger vid linjer

För det tredje exemplet ska jag tillämpa samma mörka bakgrund och vita text på korten i varannan rad (inte kolumn). För att göra detta måste du rikta in alla jämna kort i var och en av kolumnerna. Gå till "Divi → Alternativ" i temat och se till att inaktivera eller ta bort eventuell tidigare CSS-kod som du har lagt till sedan början av denna handledning. Lägg sedan till följande CSS:

#gridcard-artikel: nth-child (even) {bakgrundsfärg: # 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 (even) .post-content p {color: #fff; }

Så här är resultatet:

Konfigurationsresultat efter divi-linje

Exempel # 4: Designa en specifik rutnätkarta

Vissa av er kanske vill välja ett specifikt kort. För att göra detta måste du hitta det unika artikel-ID som automatiskt tilldelas vart och ett av dina kort. I det här exemplet använder jag webbläsaren Chrome.

Gå till sidan som visar din bloggmodul och högerklicka på ett av dina kort. I alternativrutan som visas väljer du "Inspektera" (vissa webbläsare kan ha "Inspektera objekt" eller något liknande. Detta distribuerar fönstret för utvecklarverktyg som visar både html och css för din webbsida. Hitta artikeltaggen som omsluter din artikel och skriv ner artikel-ID som tilldelats den. Detta är väljaren du ska använda för att rikta in dig på ditt enskilda kort. För mitt exempel har jag högerklickade och klickade inspekterade för att hitta id "post-3466".

Som nedan:

Ändring av en enda artikel

Om du vill rikta detta CSS-kort för att ge honom en grå bakgrund med en vit typsnitt, måste du använda följande CSS:

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

Nu har kartan den specifika stilen som tillämpas på den.

Det är allt!

Avslutande tankar

Det här är bara några exempel på de många olika stilar du kan uppnå med den här typen av CSS-inriktning på bloggmodulkort. Du behöver inte längre behålla samma stil för varje kort. Du kan designa dem hur du vill.

Om du har några frågor eller förslag gärna erbjuda dem till mig.

[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 = "platt" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] LADDA NER DIVI TEMA [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "tom" layout = "expanderad" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" platt "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" EMPL D fa-LOAD ] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andra Divi tutorials

20 aktier
del7
tweet2
Enregistrer11