Divi Blog-modulen har et layoutalternativ i form av et nyttig rutenett for blogginnleggene dine. Rutenettmalen organiserer blogginnleggene dine i bokser eller kart som forenkler synligheten til elementer på en skjerm sammenlignet med standardvisningen.

Innstillingene for bloggmodulen lar deg tilpasse den generelle utformingen av nettverket ditt. Du kan enkelt få alle kortene dine til å ha samme bakgrunnsfarge, skrift, marginer osv. Men stilalternativene er begrenset til utformingen av rutenettet som helhet, noe som gjør det vanskelig bruke flere eller forskjellige design på kartene i rutenettet.

I dag skal jeg vise deg hvordan du målretter og bruker mer enn én stil på kortene som utgjør rutenettet. bloggen din ved hjelp av tilpasset CSS. Jeg skal vise deg hvordan du bruker en annen stil på hverandres kort, for å lage en sjakkbretteffekt. Jeg vil også vise deg hvordan du kan style hvert kort forskjellig per rad, og jeg vil vise deg hvordan du målretter mot et enkelt kort.

Så dette er 4 eksempler på hvordan du kan tilpasse bloggen din, inkludert noen sveveeffekter du kan bruke. Ved slutten av denne opplæringen vil du kunne lage fantastiske design for bloggen din.

Andre opplæringsprogrammer om Divi-tema

• 5 nettsteder for restaurant bruk Divi tema
• Hvordan legge til tekst på en WooCommerce produkt Divi
• Hvordan endre menyfargen mellom sider på Divi
• Funksjoner du ikke kjenner til Divi
• Hvordan lage en glidebryter på Divi
• Hvordan redigere en brukerrolle på Divi

La oss begynne.

Konfigurasjon Layout Grid for bloggen din

Før du begynner med utformingen av bloggmodulkortene, må du sørge for at du har minst 12 artikler som allerede er opprettet med et bilde i boksen.

Når meldingene dine er opprettet, oppretter du en ny side. Distribuer bloggmodulen på en kolonne med full bredde på en ny side i en standarddel:

Klikk for å redigere innstillingene for Blog-modulen. Endre følgende innstillinger under Generelle innstillinger:

• Layout: Grid (Rutenett)
• Antall artikler: 12
• Vis utvalgt bilde: JA
• Button Les mer: PÅ

Under Custom CSS skriver du inn "gridcard" i tekstboksen CSS ID. Det vil være en måte for oss å tilpasse bare denne bloggmodulen.

Lagre endringene

Hvordan forstå "Grid" -oppsettet for bloggen

Nå som du har bloggen din rutenett på plass, er det viktig å forstå strukturen i utformingen av brettet slik at du kan finne kart over bloggen modulen du vil tilpasse.

Blogggitteret er konfigurert med en tre-kolonne layout. Følgende er en illustrasjon av bloggnettet med 12 bloggartikler delt inn i tre kolonner:

Bloggkortkortene bestilles fra topp til bunn i hver av kolonnene. Så hvis du vil gi dem et nummer, må du telle 1 til 4 på hver lengde fra topp til bunn:

Siden du kjenner den numeriske rekkefølgen på hvert bloggkort under hver kolonne, kan du også identifisere hvert kort som et oddetall eller et partall som følger:

Designs gate Eksempel

Eksempel nr. 1: Design av et "rutet" rutenett

For dette første eksemplet skal jeg målrette mot alle odd-kortene i bloggmodulen (kort 1 og 3) i den første kolonnen og gi dem en mørk grå bakgrunnsfarge. For å gjøre dette, gå til "Divi → Temaalternativer" og legg til følgende CSS i den tilpassede CSS-tekstboksen:

#gridcard .column: første-barn artikkel: n-te-barn (ulike) {bakgrunn: #333; }

Her er en oversikt over hva denne koden gjør:

#gridcard = ID-en til hele bloggmodulen

.column: first-child = velg den første kolonnen i bloggmodulen

post: nth-child (odd) = velger alle rare elementer (eller kort) i kolonnen

Når du setter alt sammen, velger dette oddetallskortene i den første kolonnen i bloggmodulen med ID "gridcard".

Deretter legge til hvit tekst som vil gå på den mørke bakgrunnen ved å legge til følgende CSS:

#gridcard .column: første barnet artikkel: n'te barn (ulike) .entry-tittel, #gridcard .column: first-barn artikkel: n'te barn (ulike) .POST-meta, #gridcard .column: first-barn Artikkel: n-te-barn (ulike) .post-meta-a, #gridcard .column: første-barn artikkel: n-te-barn (ulike) .POST-innhold p {farge: #ffffff; }

Denne koden retter seg mot alle tekstelementer i bloggmodulkort (inkludert tittel, postmetaer, postmetalinker og innhold av artikkelen) og gir dem fargen hvit.

Her er resultatet:

Det neste trinnet i å opprette sjakkbrettoppsettet vårt er å målrette mot oddetallskortene i tredje kolonne og bruke den mørkegrå bakgrunnen og den hvite teksten akkurat som du gjorde i den første kolonnen. Legg til følgende CSS i tekstboksen Custom CSS:

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

Denne koden retter seg mot den "siste" kolonnen (i dette tilfellet er den tredje kolonnen den siste kolonnen) med kallenavnelementet "siste barn".

For den andre kolonnen (eller middels), målrett jevne kort for å fullføre sjakkbretteffekten. For å gjøre dette må vi legge til følgende CSS:

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

Nå går sjekke ut bloggen for å se rute layout av bloggen modulkort.

Eksempel nr. 2: Legge til sveveeffekter med rutet oppsett

Når du vet hvordan du målretter mot bloggmodulkortene, kan du endre hvilket som helst av elementene på kortet kreativt.

For dette eksemplet skal jeg bruke rutetavlen, og denne gangen skal jeg endre de fremhevede bildene fra mørkegrå kart til svart og hvitt når du svever over kartet. Og jeg skal gjøre forsiden av de hvite kortene lysere når jeg svever over kortet. For å gjøre dette, legg til følgende CSS i Custom CSS-området (sørg for å deaktivere eller kutte den andre koden slik at den ikke er inkompatibel 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 (jevn) {bakgrunn: # 333; } #gridcard .column: first-child article: nth-child (odd) .entry-title, #gridcard .column: first-child article: nth-child (odd) .post-meta, #gridcard .column: first- barneartikkel: nth-child (odd) .post-meta a, #gridcard .column: first-child article: nth-child (odd) .post-content p, #gridcard .column: last-child article: nth-child (odd) .oppføringstittel, #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) artikkel: 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 -barneartikkel: nth-child (odd): hover 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 -barneartikkel: nth-child (even): hover img {-webkit-filter: brightness (1.5); filter: lysstyrke (1.5); }

Du kan også legge til en inversjonseffekt på kortene, slik at når du holder markøren over de hvite kortene, blir de mørkegrå, og når du holder markøren over de mørkegrå kortene, blir de hvite.

Legg til følgende CSS og mer 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) artikkel: nth-child (even): hover {bakgrunn: #fff; } #gridcard .column: first-child article: nth-child (odd): hover .entry-title, #gridcard .column: first-child article: nth-child (odd): hover .post-meta, #gridcard. kolonne: første barn artikkel: nth-child (odd): hover .post-meta a, #gridcard .column: first-child article: nth-child (odd): hover .post-content p, #gridcard .column: siste barn artikkel: nth-child (odd): hover .entry-title, #gridcard .column: last-child article: nth-child (odd): hover .post-meta, #gridcard .column: last-child article : nth-child (odd): hover .post-meta a, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) artikkel: nth-child (even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) artikkel: nth-child (even): hover .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) artikkel: nth-child (odd): hover {bakgrunn: # 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-artikkel: nth-child (even): hover .post-meta a, #gridcard .column: first-child article: nth-child (even): hover .post-content p, #gridcard .column: siste barn artikkel: nth-child (even): 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) artikkel: nth-child (odd): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) artikkel: nth-child (odd): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-content p {color: #fff; }

Gå nå og se effekten på bloggen din.

Eksempel # 3: Tilpass kart med linjer

For det tredje eksemplet skal jeg bruke samme mørke bakgrunn og hvite tekst på kortene i annenhver rad (ikke kolonne). For å gjøre dette må du målrette mot alle de jevne kortene i hver av kolonnene. Gå til “Divi → Alternativer” for temaet og sørg for å deaktivere eller fjerne tidligere CSS-koder du har lagt til siden starten av denne opplæringen. Deretter legger du til følgende CSS:

#gitterkortartikkel: nth-child (even) {bakgrunnsfarge: # 333; } #gitterkortartikkel: 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; }

Dette er hva resultatet er:

Eksempel # 4: Designe et spesifikt rutenettkart

Noen av dere vil kanskje velge et bestemt kort. For å gjøre dette må du finne den unike vare-ID-en som automatisk tildeles hvert av kortene dine. For dette eksemplet bruker jeg Chrome-nettleseren.

Gå til siden som viser bloggmodulen din og høyreklikk på et av kortene dine. I alternativboksen som vises, velger du "Inspiser" (noen nettlesere kan ha "Inspiser element" eller noe lignende. Dette vil distribuere utviklerverktøy-vinduet som viser både html og css for din webside. Finn artikkelen som omslutter artikkelen din og skriv ned artikkel-IDen som er tilordnet den. Dette er velgeren du bør bruke til å målrette mot det enkelte kortet ditt. For mitt eksempel har jeg høyreklikket og klikket inspisert for å finne id "post-3466".

Som nedenfor:

For å målrette denne CSS-kort for å gi ham en grå bakgrunn med en hvit skrift, må du bruke følgende CSS:

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

Nå har kartet den spesifikke stilen brukt på det.

Det er alt!

avslutt~~POS=TRUNC tanker

Dette er bare noen få eksempler på de mange forskjellige stilene du kan oppnå ved å bruke denne typen CSS-målretting av Blog-modulkort. Du trenger ikke lenger å ha samme stil for hvert kort. Du kan designe dem slik du vil.

Hvis du har spørsmål eller forslag gjerne gi dem til meg.

[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”]LAST 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Andre divisjoner

• 5 nettsteder for restaurant bruk Divi tema
• Slik legger du til tekst på et Divi WooCommerce-produkt
• Slik endrer du menyfargen mellom Divi-sider
• Hvordan tilpasse rutenettene til en blogg med Divi
• Hvordan bruke rollen Divi editor på WordPress
• Hvordan lage en Divi-glidebryter på fullskjerm
• Hvordan endre farge på menyer mellom Divi-sider
• Funksjoner du sannsynligvis ikke kjenner til Divi
• Slik bruker du Divi Builder på WordPress
• Slik bruker du Divi video-rullemodulen
• Slik bruker du Divi Builder Flip-modulen
• Hvordan legge til en attestmodul på Divi Builder
• Slik bruker du Divi-tekstmodulen
• Hvordan lage en glidebryter på Divi
• Hvordan redigere en Divi-brukerrolle
• Slik bruker du Divi Social Media-modulen
• Hvordan bruke butikkmodulen på temaet WordPress Divi
• Slik bruker du Divi sidebar-modulen
• Slik bruker du Divi Price Table Module
• Slik bruker du tittelmodulen til Divi-publikasjoner
• Hvordan legge til en videomodul av Divi
• Slik bruker du artikkelen navigasjonsmodulen
• Slik bruker du Divi-søkemodulen
• Slik bruker du Divi-lommebokmodulen
• Slik bruker du personmodulen på Divi Builder
• Slik bruker du lommebokmodulen med Divi filter
• Slik bruker du skyvemodulen med full bredde
• Slik bruker du Divi Builder Image Module
• Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
• Slik bruker du bildegalleriemodulen
• Slik bruker du Divi Builder Full-Width Card Module
• Slik bruker du Divi Full Width Portfolio Module
• Hvordan bruke Divi-modulen i full bredde
• Slik bruker du Divi-tellermodulen
• Slik bruker du glidebryteren for artikler på Divi Builder
• Slik bruker du Divi Email Optin-modulen