Gå till innehållet

Hur du anpassar rutorna på en blogg med Divi

Divi: det enklaste WordPress-temat att använda

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. [Rekommenderas]

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

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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:

Anpassning av udda divi rutnät

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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:

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Ä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.

Andra Divi tutorials

Den här artikeln innehåller kommentarer 20

  1. 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 🙂

  2. 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"

  3. 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

  4. 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?

  5. 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

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

    1. 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.

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

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

  8. 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

  9. 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

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
20 aktier
del7
tweet2
Enregistrer11