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 riktar in dig på och använder mer än en stil på korten som utgör rutnätet. din blogg med anpassad CSS. Jag ska visa dig hur du applicerar en annan stil på varandras kort för att skapa en schackbrädeeffekt. Jag kommer också att visa dig hur du utformar varje kort olika per rad och jag kommer att visa dig hur du riktar in dig på ett individuellt kort.
Så det här är 4 exempel på hur man anpassar din blogg, inklusive några hovringseffekter som du kan använda. I slutet av denna handledning kommer du att kunna skapa fantastiska mönster för din blogg.
Andra handledning om Divi-tema
- 5 webbplatser för restaurang användning Divi tema
- Hur man lägger till text på en WooCommerce produkt Divi
- Så här byter du menyfärg mellan sidor på Divi
- Funktioner du inte känner till Divi
- Hur man skapar en reglage på Divi
- Hur man redigerar en användarroll på Divi
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:
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
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.
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:
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:
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:
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 bloggmodulkort (inklusive titel, inläggsmetas, inläggsmetalänkar och innehåll i artikeln) och ger dem färgen vit.
Här är resultatet:
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.
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.
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:
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:
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 NED DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column] /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_right=”fa fa-download”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andra Divi tutorials
- 5 webbplatser för restaurang användning Divi tema
- Så här lägger du till text på en Divi WooCommerce-produkt
- Så här byter du menyfärg mellan Divi-sidor
- Hur du anpassar rutorna på en blogg med Divi
- Hur man använder roll Divi editor på Wordpress
- Hur man skapar en Divi-skjutreglage på full skärm
- Hur man ändrar menyens färg mellan Divi-sidor
- Funktioner du antagligen inte känner till Divi
- Så här använder du Divi Builder på WordPress
- Så här använder du Divi video-rullningsmodulen
- Så här använder du Divi Builder Flip-modulen
- Hur man lägger till en vittnesmodul om Divi Builder
- Så här använder du Divi-textmodulen
- Hur man skapar en reglage på Divi
- Hur man redigerar en Divi-användarroll
- Så här använder du Divi Social Media-modulen
- Hur man använder butikmodulen på temat WordPress Divi
- Så här använder du Divi sidebar-modulen
- Så här använder du Divi Price Table Module
- Hur man använder titelfodulen i Divi-publikationer
- Hur lägger jag till en videomodul av Divi
- Så här använder du artikelnavigationsmodulen
- Så här använder du Divi-sökmodulen
- Så här använder du Divi-plånboksmodulen
- Hur man använder personmodulen på Divi Builder
- Hur man använder plånboksmodulen med Divi-filter
- Hur man använder skjutreglaget med hela bredden
- Så här använder du Divi Builder Image Module
- Så här använder du Divi Builder med fullbredd navigationsmodul
- Hur man använder modulen för bildgalleri
- Så här använder du Divi Builder Full-Width Card Module
- Så här använder du Divi Full Width Portfolio Module
- Hur du använder Divi-modulen med full bredd
- Så här använder du Divi Counter Module
- Hur man använder artiklarna på Divi Builder
- Så här använder du Divi Email Optin-modulen
God morgon ! Vet du om det är möjligt att ändra antalet kolumner i detta bloggobjekt?
Jag vill att varje kort ska visas i full bredd. TACK !
Hej!
Jag försökte visa blogginlägg i "grid" med id "gridcard" men det fungerar inte. Kan du hjälpa mig ?
God kväll,
Ledsen för det sena svaret.
Kan du omformulera din begäran tack?
Hej!
Jag är verkligen en nybörjare men tack vare online-tutorials lyckas jag bygga en trevlig blogg.
Verkligen, tack för den här för att jag bara var tvungen att kopiera koderna och allt gick felfritt, jag är mycket nöjd med resultatet.
Tack igen, ha en trevlig dag 🙂
Jag ber dig. Tack för att du läste oss.
God kväll,
DIVI-bloggen, bredvid författarens namn, placerar prepositionen "av" (t.ex. Stefano). Jag skulle vilja veta om det är möjligt att ändra det till "de"
Hej!
Ja, det är möjligt att ändra detta element med Divi.
hello Thierry
Super handledning
Jag skulle vilja veta om det är möjligt att öka storleken på den presenterade bilden
Jag skulle vilja använda denna stil på min blogg
tack
Hej!
Ja det är möjligt.
Hej!
Hur kan jag optimera denna layout för mobil (surfplatta)? Jag har ingen Schabrettmuster men olika färger för varje blogginlägg, i en specifik ordning. Naturligtvis förändras det när du byter till mobil och färgerna är inte längre associerade med rätt inlägg ...
Har någon en idé här?
Hej!
Ingen tyvärr.
Hej!
Tack för den här artikeln! Jag skulle också vilja ändra "läs mer" längst ner i artiklarna.
Kan du ge oss exempel på CSS-kod för att ändra texten och placera den i en bra centrerad knapp till exempel?
Sv vous remerciant.
Sophie
Hej 🙂 För att ändra texten på knappen "läs mer" sker det i Blogginställningar > Stil > Läs mer Text. Du kan ändra typografin och texten i "läs mer". Jag vet dock inte hur man gör en knapp av det. Bra upplägg!
Cuándo lo pones i CSS personalizado, por ejemplo:
#gridcard. Kolumn: första barnkonst: nth-barn (impar) {bakgrund: #333; }
da error como el seigue: Förväntade en FUNCTION eller IDENT efter kolon på rad 1, col 18
hälsningar
God kväll,
Vår blogg översätts automatiskt från franska. Jag uppmanar dig därför att välja det franska språket i språkwidgeten som finns i toppfältet på vår blogg och rätt CSS-kod visas.
usted escribió an artículo evil escrito, debería ser: artikulos del primer hijo: ingen arte del primer hijo:
Du felstavade artikeln, det borde vara: första barnartikeln: inte första barnkonst:
Hej,
70 andra språk.
Hallå
Tack för artikeln. Jag har en rutnätpresentation (Divi Theme) Jag har miniatyrer (foton) för presentation av artiklarna, å andra sidan när jag klickar för att få tillgång till artikeln visas bilden i stort i början av 'artikel. Finns det ett sätt att göra den lika stor som miniatyrbilden eller ta bort den från postvyn.
tack
Patrick
God kväll,
Tyvärr, men vårt divi-stöd är begränsat till våra handledning. Vänligen kontakta Eleganthemes SVP.
Bonjourn, bra artikel
Jag försöker lyckan här, ibland gick vi runt ett ämne i flera veckor utan att hitta svaret när samma ämne är vettigt för andra.
Jag letar därför efter lösningen för att sätta upp ett postgaller, endast sammansatt av visuellt men med olika höjder, för att vara mer tydligt, att en av två bilder har dubbelt så hög som den visuella bredvid.
En idé?
Julien
Hej Julian,
Jag rekommenderar att du kontaktar DIVI-teamet. Det är bekvämare i det här fallet.
Stor handledning! Jag kommer att testa ca helgen för min webbplats.
du har en lösning för att ta bort utdrag i näten?
Merci à vous
Sofhy