Divi Blog-modulet har en layoutindstilling i form af et nyttigt gitter til dine blogindlæg. Netskabelon organiserer dine blogindlæg i kasser eller kort, der forenkler synligheden af ​​emner på en skærm i sammenligning med standardvisningen.

Blogmodulindstillingerne giver dig mulighed for at tilpasse det overordnede design af dit netværk. Du kan nemt få alle dine kort til at have den samme baggrundsfarve, skrifttype, margener osv. Imidlertid er stilmulighederne begrænset til designet af gitteret som helhed, hvilket gør det vanskeligt anvende flere eller forskellige designs på kortene i gitteret.

I dag vil jeg vise dig, hvordan du målretter og anvender mere end én stil på de kort, der udgør gitteret. din blog ved hjælp af tilpasset CSS. Jeg viser dig, hvordan du anvender en anden stil på hinandens kort for at skabe en skakternet effekt. Jeg vil også vise dig, hvordan du style hvert kort forskelligt pr. række, og jeg vil vise dig, hvordan du målretter mod ethvert individuelt kort.

Så disse er 4 eksempler på, hvordan man tilpasser din blog, inklusive nogle hover-effekter, du kan bruge. Ved slutningen af ​​denne tutorial vil du være i stand til at skabe fantastiske designs til din blog.

Andre tutorials om Divi-tema

• 5 websteder, der bruger Divi restaurant tema
• Hvordan at tilføje tekst på en WooCommerce produkt på Divi
• Sådan ændres menuen farve mellem sider på Divi
• Funktioner, som du ikke kender til Divi
• Sådan opretter du en skyder på Divi
• Sådan redigeres en brugerrolle på Divi

Lad os starte.

Konfiguration Layout Grid for din blog

Før du begynder med designet på blogmodulkortene, skal du sørge for at have mindst 12 artikler, der allerede er oprettet med et billede i boksen.

Når dine beskeder er oprettet, skal du oprette en ny side. På din nye side distribuerer blogmodulet i en kolonne med fuld bredde i en standarddel:

Klik for at redigere indstillingerne for Blog-modulet. Under Generelle indstillinger skal du ændre følgende indstillinger:

• Layout: Tabel (Gitter)
• Antal artikler: 12
• Vis udvalgt billede: JA
• Knap Læs mere: TIL

Indtast "gitterkort" i tekstfeltet CSS ID under Custom CSS. Det vil være en måde for os kun at personalisere dette blogmodul.

Gem dine ændringer

Sådan forståes "Grid" -layoutet til bloggen

Nu hvor du har din blog gitter på plads, er det vigtigt at forstå strukturen af ​​layoutet af nettet, så du kan finde kort over bloggen modul du vil tilpasse.

Bloggnet er konfigureret med et tre-søjles layout. Følgende er en illustration af bloggitteret med 12 blogartikler opdelt i tre kolonner:

Blogbilletkortene bestilles fra top til bund i hver af kolonnerne. Så hvis du vil give dem et tal, skal du tælle 1 til 4 på hver længde fra top til bund:

Da du kender den numeriske rækkefølge for hvert blogkort under hver kolonne, kan du også identificere hvert kort som et ulige eller lige antal som følger:

Designs gate Eksempel

Eksempel nr. 1: Design af et "rutet" gitter

I dette første eksempel målretter jeg mod alle ulige kort i blogmodulet (kort 1 og 3) i den første kolonne, hvilket giver dem en mørkegrå baggrundsfarve. For at gøre dette skal du gå til "Divi → Temaindstillinger" og tilføje følgende CSS i det tilpassede CSS-tekstfelt:

#gridcard .column: første barn artikel: n'te-barn (ulige) {baggrund: #333; }

Her er en oversigt over, hvad denne kode gør:

#gridcard = id'et for hele blogmodulet

.column: first-child = vælg den første kolonne i blogmodulet

post: nth-child (ulige) = vælger alle ulige elementer (eller kort) i kolonnen

Ved at sætte det hele sammen vælger dette de ulige nummererede kort i den første kolonne i blogmodulet med id'et "gitterkort".

Tilføj derefter din hvid tekst, der vil gå på den mørke baggrund ved at tilføje følgende CSS:

#gridcard .column: første barn artikel: n'te-barn (ulige) .entry-titel, #gridcard .column: første barn artikel: n'te-barn (ulige) .post-meta, #gridcard .column: første barn artikel: n'te-barn (ulige) .post-meta har #gridcard .column: første barn artikel: n'te-barn (ulige) .post-indhold p {color: #ffffff; }

Denne kode er målrettet mod alle tekstelementer i blogmodulkort (inklusive titel, post-metaer, post-metalinks og indhold af artiklen) og giver dem farven hvid.

Her er resultatet:

Det næste trin i oprettelse af vores skakternetlayout er at målrette mod de ulige nummererede kort i den tredje kolonne og anvende den mørkegrå baggrund og den hvide tekst ligesom du gjorde i den første kolonne. Tilføj følgende CSS i tekstfeltet Custom CSS:

#gridcard .column: last-child article: nth-child (odd) {baggrund: # 333; } #gridcard .column: last-child article: nth-child (odd) .indgang-titel, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last- underartikel: nth-child (ulige) .post-meta a, #gridcard .column: last-child article: nth-child (odd) .post-content p {color: #ffffff; }

Denne kode er målrettet mod den "sidste" kolonne (i dette tilfælde er den tredje kolonne den sidste kolonne) med kaldenavnelementet "sidste barn".

For den anden kolonne (eller midten), målrette lige kort for at fuldføre skakbræteffekten. For at gøre dette skal vi tilføje følgende CSS:

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

Gå nu tjekke bloggen siden for at se det skakternede layout af bloggen modul kortene.

Eksempel 2: Tilføjelse af svæveeffekter med det ternede layout

Når du ved, hvordan du målretter mod blogmodulkortene, kan du ændre ethvert af elementerne inde i kortet kreativt.

I dette eksempel skal jeg bruge skakternes layout, og denne gang skal jeg ændre de fremhævede billeder fra mørkegrå kort til sort og hvid, når jeg svæver over kortet. Og jeg vil gøre forsiden af ​​de hvide kort lysere, når jeg svæver over kortet. For at gøre dette skal du tilføje følgende CSS i området Custom CSS (sørg for at deaktivere eller klippe den anden kode, så den ikke er uforenelig med den nye):

#gridcard .column: first-child article: nth-child (odd), #gridcard .column: last-child article: nth-child (odd), #gridcard .column: nth-child (2) article: nth-child (lige) {baggrund: # 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 (ulige) .post-meta a, #gridcard .column: first-child article: nth-child (odd) .post-content p, #gridcard .column: last-child article: nth-child (ulige) .indgang-titel, #gitterkort .kolonne: sidste barn-artikel: n-barn (ulige) .post-meta, #gitterkort .kolonne: sidste barn-artikel: n-barn (ulige) .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. kolonne: 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): svæve img, #gridcard .column: last -barnartikel: nth-child (ulige): svæver img {-webkit-filter: gråtoner (1); filter: gråtoner (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 -barnsartikel: nth-child (even): hover img {-webkit-filter: brightness (1.5); filter: lysstyrke (1.5); }

Du kan også tilføje en inversionseffekt på kortene, så når du holder markøren over de hvide kort, bliver de mørkegrå, og når du holder markøren over de mørkegrå kort, bliver de hvide.

Tilføj følgende CSS og mere CSS ovenfor:

#gridcard .column article, #gridcard .column article img {-webkit-transition: all 0.8s; -moz-overgang: alle 0.8s; overgang: alle 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 (even): svæver {baggrund: #fff; } #gridcard .column: first-child article: nth-child (odd): hover .entry-title, #gridcard .column: first-child article: nth-child (odd): svæver .post-meta, #gridcard. kolonne: første-barn-artikel: nth-child (ulige): svæver .post-meta a, #gridcard .column: first-child article: nth-child (odd): svæver .post-indhold p, #gridcard .column: sidste barn-artikel: nth-child (ulige): svæver .entry-title, #gridcard .column: last-child article: nth-child (ulige): svæver .post-meta, #gridcard .column: last-child artikel : nth-child (ulige): svæver .post-meta a, #gridcard .column: last-child article: nth-child (odd): svæver .post-content p, #gridcard .column: nth-child (2) artikel: nth-child (even): svæver .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): svæver .post-meta, #gridcard .column: nth-child ( 2) artikel: nth-child (even): svæver .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): svæver .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 (ulige): svæver {baggrund: # 333; } #gridcard .column: first-child article: nth-child (even): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard. kolonne: første barn-artikel: n-barn (lige): svæver .post-meta a, #gridcard .column: first-child article: nth-child (even): svæver .post-content p, #gridcard .column: sidste barn-artikel: nth-child (even): svæver .indgang-titel, #gridcard .column: sidste-child-artikel: nth-child (even): svæver .post-meta, #gridcard .column: last-child artikel : 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 (ulige): svæver .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): svæver .post-meta, #gridcard .column: nth-child ( 2) artikel: nth-barn (ulige): svæver .post-meta a, #gridcard .column: nth-child (2) artikel: nth-child (ulige): svæver .post-indhold p {farve: #fff; }

Se nu effekten på din blog.

Eksempel # 3: Tilpas kort efter linjerne

For det tredje eksempel skal jeg anvende den samme mørke baggrund og den hvide tekst på kortene i hver anden række (ikke kolonne). For at gøre dette skal du målrette mod alle de lige kort i hver af kolonnerne. Gå til "Divi → Indstillinger" i temaet, og sørg for at deaktivere eller fjerne enhver tidligere CSS-kode, som du har tilføjet siden starten af ​​denne tutorial. Tilføj derefter følgende CSS:

#gitterkortartikel: nth-child (even) {baggrundsfarve: # 333; } #gitterkortartikel: nth-barn (jævn) .indtastning-titel, #gitterkortartikel: nth-barn (lige) .post-meta, #gitterkortartikel: nth-barn (lige) .post-meta a, #gitterkortartikel : nth-child (even) .post-content p {color: #fff; }

Dette er, hvad resultatet er:

Eksempel # 4: Design af et specifikt gitterkort

Nogle af jer vil måske vælge et bestemt kort. For at gøre dette skal du finde det unikke vare-id, der automatisk tildeles hvert af dine kort. I dette eksempel bruger jeg Chrome-browseren.

Gå til siden, der viser dit blogmodul, og højreklik på et af dine kort. I "Indstillingsfeltet, der vises, skal du vælge" Undersøg "(nogle browsere kan have" Undersøg element "eller noget lignende. Dette vil implementere vinduet med udviklerværktøjer, der viser både html og css til din webside. Find det artikeltag, der omslutter din artikel, og skriv det artikel-id, der er tildelt det. Dette er den vælger, du skal bruge til at målrette mod dit individuelle kort. For mit eksempel har jeg højre klik og klik inspiceret for at finde id'et "post-3466".

Som nedenfor:

For at målrette dette kort CSS til at give det en grå baggrund med en hvid skrift, skal du bruge følgende CSS:

# post-3466 {baggrund: # 333333; } # post-3466 .indgang-titel, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-indhold p {farve: #fff; }

Nu har kortet den specifikke stil anvendt på det.

Det er alt!

endelige tanker

Dette er blot nogle få eksempler på de mange forskellige stilarter, du kan opnå ved hjælp af denne type CSS-målretning af Blog-modulkort. Du behøver ikke længere holde den samme stil for hvert kort. Du kan designe dem, hvordan du vil.

Hvis du har spørgsmål eller forslag er du velkommen til at tilbyde dem til 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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andre Divi tutorials

• 5 websteder, der bruger Divi restaurant tema
• Sådan tilføjer du tekst på et Divi WooCommerce-produkt
• Sådan ændres menuen farve mellem Divi sider
• Sådan tilpasses tavlerne på en blog med Divi
• Sådan bruges rolle Divi redaktør på WordPress
• Sådan opretter du en Divi-skyder på fuld skærm
• Sådan ændres menuenes farve mellem Divi-sider
• Funktioner, som du sandsynligvis ikke kender til Divi
• Sådan bruger du Divi Builder på WordPress
• Sådan bruges Divi-video-rullemodulet
• Sådan bruges Divi Builder Flip-modulet
• Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
• Sådan bruges Divi-tekstmodulet
• Sådan opretter du en skyder på Divi
• Sådan redigeres en Divi-brugerrolle
• Sådan bruges Divi Social Media-modulet
• Sådan bruges butikmodulet med temaet WordPress Divi
• Sådan bruges Divi sidebar modul
• Sådan bruges Divi Price Table Module
• Sådan bruges titelmodulet i Divi-publikationer
• Sådan tilføjes et videomodul til Divi
• Sådan bruges artikelnavigationsmodulet
• Sådan bruges Divi-søgemodulet
• Sådan bruges Divi wallet-modulet
• Sådan bruges personmodulet på Divi Builder
• Sådan bruges tegnebogen modulet med Divi filter
• Sådan bruges glidemodulet i fuld bredde
• Sådan bruges Divi Builder Image Module
• Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
• Sådan bruges billedgallerimodulet
• Sådan bruges Divi Builder Fuldbredde-kortmodul
• Sådan bruges Divi Full Width Portfolio Module
• Sådan bruges Divi-modulet i fuld bredde
• Sådan bruges Divi Counter Module
• Sådan bruges artikelskyderen på Divi Builder
• Sådan bruges Divi Email Optin-modulet