De Divi Blog-module heeft een lay-outoptie in de vorm van een handig raster voor uw blogberichten. De rastersjabloon organiseert uw blogberichten in dozen of kaarten die de zichtbaarheid van items op een scherm vereenvoudigen in vergelijking met de standaardweergave.

Met de instellingen van de Blog-module kunt u het algehele ontwerp van uw netwerk aanpassen. U kunt gemakkelijk al uw kaarten dezelfde achtergrondkleur, lettertype, marges, enz. Laten hebben. De stijlopties zijn echter beperkt tot het ontwerp van het raster als geheel, wat het moeilijk maakt meerdere of verschillende ontwerpen toepassen op de kaarten binnen het raster.

Vandaag laat ik je zien hoe je meer dan één stijl kunt targeten en toepassen op de kaarten waaruit het raster bestaat. jouw blog gebruik van aangepaste CSS. Ik laat je zien hoe je op elke kaart een andere stijl kunt toepassen, om een ​​dambordeffect te creëren. Ook laat ik je zien hoe je elke kaart per rij anders kunt stylen en laat ik je zien hoe je elke individuele kaart kunt targeten.

Dit zijn dus 4 voorbeelden van hoe je kunt personaliseren jouw blog, inclusief enkele zweefeffecten die u kunt gebruiken. Aan het einde van deze tutorial kun je geweldige ontwerpen maken voor jouw blog.

Andere tutorials over Divi-thema

Laten we beginnen.

De lay-out configureren voor uw blog

Voordat u begint met het ontwerp van de kaarten van de blogmodule, moet u ervoor zorgen dat ten minste 12-artikelen al zijn gemaakt met een afbeelding in de doos.

Nadat uw berichten zijn gemaakt, maakt u een nieuwe pagina. Implementeer op uw nieuwe pagina de blogmodule op een volledige kolom in een standaardonderdeel:

De lay-out van een divi-blog configureren

Klik om de instellingen van de Blog-module te bewerken. Wijzig onder Algemene instellingen de volgende instellingen:

  • Lay-out: Grid
  • Aantal artikelen: 12
  • Toon uitgelichte afbeelding: JA
  • Button Lees meer: ​​ON

Divi grid configuratie

Voer onder Aangepaste CSS "gridcard" in het tekstvak CSS ID in. Het zal voor ons een manier zijn om alleen deze blogmodule te personaliseren.

Rasterkaart css gedeeld

Sla uw wijzigingen op

Hoe de "Raster" -lay-out voor de blog te begrijpen

Nu dat u uw blog rooster op zijn plaats, is het belangrijk om de structuur van de lay-out van het net te begrijpen, zodat u kaarten van de blog module u wilt aanpassen kunt vinden.

Het blograster is geconfigureerd met een lay-out met drie kolommen. Het volgende is een illustratie van het blograster met 12 blogartikelen verdeeld in drie kolommen:

Presentatie van de grid divi layout

De kaarten van de blogkaartjes worden in elke kolom van boven naar beneden geordend. Dus als je ze een nummer wilt geven, moet je 1 tot 4 op elke lengte van boven naar beneden tellen:

Tel divi-artikelen

Omdat je de numerieke volgorde van elke blogkaart onder elke kolom kent, kun je elke kaart ook als een oneven of even getal identificeren:

Even en oneven nummer divi

Design Grid Voorbeeld

Voorbeeld nr. 1: Ontwerp van een "geruit" raster

Voor dit eerste voorbeeld richt ik me op alle oneven kaarten in de blogmodule (kaarten 1 en 3) in de eerste kolom, waardoor ze een donkergrijze achtergrondkleur krijgen. Ga hiervoor naar "Divi → Thema-opties" en voeg de volgende CSS toe aan het aangepaste CSS-tekstvak:

#gridcard .column: eerste kindartikel: nth-kind (oneven) {achtergrond: #333; }

Hier is een uiteenzetting van wat deze code doet:

#gridcard = de id van de volledige blogmodule

.column: first-child = selecteer de eerste kolom in de blogmodule

post: nth-child (oneven) = selecteert alle oneven items (of kaarten) in de kolom

Alles bij elkaar genomen, selecteert dit de oneven genummerde kaarten in de eerste kolom van de blogmodule met de ID "gridcard".

Dan voeg uw witte tekst die zal gaan op de donkere achtergrond door toevoeging van de volgende CSS:

#gridcard .column: first-child artikel: n-kind (oneven) .entry-titel, #gridcard .column: first-child artikel: n-kind (oneven) .POST-meta, #gridcard .column: first-child artikel: n-kind (oneven) .post-meta een, #gridcard .column: first-child artikel: n-kind (oneven) .POST-gehalte p {color: #ffffff; }

Deze code richt zich op alle tekstelementen in blogmodulekaarten (inclusief titel, berichtmeta's, berichtmetalinks en inhoud van het artikel) en geeft ze de kleur wit.

Hier is het resultaat:

Aanpassing van oneven divi-raster

De volgende stap bij het maken van onze dambordlay-out is om de oneven genummerde kaarten op de derde kolom te targeten en de donkergrijze achtergrond en witte tekst toe te passen, net zoals je deed in de eerste kolom. Voeg de volgende CSS toe in het tekstvak Aangepaste CSS:

#gridcard .column: laatste-kindartikel: n-kind (oneven) {achtergrond: # 333; } #gridcard .column: last-child article: nth-child (oneven) .entry-title, #gridcard .column: last-child article: nth-child (oneven) .post-meta, #gridcard .column: last- kindartikel: nth-child (oneven) .post-meta a, #gridcard .column: last-child article: nth-child (oneven) .post-content p {color: #ffffff; }

Deze code is gericht op de "laatste" kolom (in dit geval is de derde kolom de laatste kolom) met het bijnaamelement "last-child".

Voor de tweede kolom (of in het midden), richt je op even kaarten om het schaakbordeffect te voltooien. Om dit te doen, moeten we de volgende CSS toevoegen:

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

Ga nu kijk op de blog pagina om de dambord lay-out van de Blog module kaarten te zien.

Dambord raster divi-indeling

Voorbeeld 2: Hover-effecten toevoegen met de geruite lay-out

Als u eenmaal weet hoe u de blogmodulekaarten moet targeten, kunt u elk van de elementen in de kaart creatief wijzigen.

Voor dit voorbeeld ga ik de dambordlay-out gebruiken en deze keer ga ik de afgebeelde afbeeldingen wijzigen van donkergrijze kaarten naar zwart-wit wanneer ik over de kaart zweef. En ik ga de afbeeldingen op de voorpagina van de witte kaarten helderder maken wanneer ik over de kaart zweef. Om dit te doen, voegt u de volgende CSS toe in het Aangepaste CSS-gebied (zorg ervoor dat u de andere code uitschakelt of knipt, zodat deze niet incompatibel is met de nieuwe):

#gridcard .column: eerste-kindartikel: n-kind (oneven), #gridcard .column: laatste-kindartikel: n-kind (oneven), #gridcard .column: n-kind (2) artikel: n-kind (even) {achtergrond: # 333; } #gridcard .column: eerste kindartikel: nde-kind (oneven) .entry-titel, #gridcard .column: eerste kindartikel: nde-kind (oneven) .post-meta, #gridcard .column: eerste- kindartikel: nth-child (oneven) .post-meta a, #gridcard .column: first-child article: nth-child (oneven) .post-content p, #gridcard .column: last-child article: nth-child (oneven) .entry-title, #gridcard .column: last-child article: nth-child (oneven) .post-meta, #gridcard .column: last-child article: nth-child (oneven) .post-meta a , #gridcard .column: last-child article: nth-child (oneven) .post-content p, #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 {kleur: #fff; } #gridcard .column: nth-child (2) article: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (oneven): hover img, #gridcard .column: last -kindartikel: n-kind (oneven): hover img {-webkit-filter: grijswaarden (1); filter: grijswaarden (1); } #gridcard .column: nth-child (2) article: nth-child (oneven): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -kindartikel: n-kind (even): hover img {-webkit-filter: helderheid (1.5); filter: helderheid (1.5); }

U kunt ook een inversie-effect op de kaarten toevoegen, zodat wanneer u over de witte kaarten beweegt, ze donkergrijs worden en wanneer u over de donkergrijze kaarten zweeft, ze wit worden.

Voeg de volgende CSS en CSS boven:

#gridcard .columnartikel, #gridcard .columnartikel img {-webkit-transitie: alle 0.8s; -moz-overgang: alle 0.8s; overgang: alle 0.8s; } #gridcard .column: eerste kindartikel: nth-child (oneven): hover, #gridcard .column: last-child article: nth-child (oneven): hover, #gridcard .column: nth-child (2) artikel: nth-child (even): hover {background: #fff; } #gridcard .column: first-child article: nth-child (oneven): hover .entry-title, #gridcard .column: first-child article: nth-child (oneven): hover .post-meta, #gridcard. column: first-child article: nth-child (oneven): hover .post-meta a, #gridcard .column: first-child article: nth-child (oneven): hover .post-content p, #gridcard .column: laatste-kindartikel: n-de-kind (oneven): hover .entry-title, #gridcard .column: laatste-kindartikel: n-de-kind (oneven): hover .post-meta, #gridcard .column: laatste-kindartikel : nth-child (oneven): 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) article: nth-child (even): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: eerste kindartikel: nth-child (even): hover, #gridcard .column: last-child article: nth-child (even): hover, #gridcard .column: nth-child (2) artikel: n-kind (oneven): hover {achtergrond: # 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: laatste-kindartikel: 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) article: nth-child (oneven): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) artikel: n-de-kind (oneven): hover .post-meta a, #gridcard .column: n-de-kind (2) artikel: n-de-kind (oneven): hover .post-inhoud p {kleur: #fff; }

Bekijk nu het effect op je blog.

De roosters aanpassen bij het zweven van divi

Voorbeeld # 3: Pas kaarten door lijnen

Voor het derde voorbeeld ga ik dezelfde donkere achtergrond en witte tekst toepassen op de kaarten in elke andere rij (niet in de kolom). Om dit te doen, moet je alle even kaarten in elk van de kolommen targeten. Ga naar “Divi → Opties” van het thema en zorg ervoor dat je alle vorige CSS-code die je hebt toegevoegd sinds het begin van deze tutorial uitschakelt of verwijdert. Voeg vervolgens de volgende CSS toe:

#gridcard article: nth-child (even) {background-color: # 333; } #gridcard artikel: nde-kind (even) .entry-titel, #gridcard artikel: nde-kind (even) .post-meta, #gridcard artikel: nde-kind (even) .post-meta a, #gridcard artikel : nth-child (even) .post-content p {color: #fff; }

Dit is wat het resultaat is:

Configuratieresultaat per divilijn

Voorbeeld # 4: een specifieke rasterkaart ontwerpen

Sommigen van jullie willen misschien een specifieke kaart kiezen. Om dit te doen, moet u de unieke item-ID vinden die automatisch aan elk van uw kaarten wordt toegewezen. Voor dit voorbeeld gebruik ik de Chrome-browser.

Ga naar de pagina met uw blogmodule en klik met de rechtermuisknop op een van uw kaarten. Selecteer 'Inspecteren' in het optievak dat verschijnt (sommige browsers hebben 'Inspect item' of iets dergelijks. Hierdoor wordt het venster voor ontwikkelaarstools geïmplementeerd dat zowel de html als de css voor uw webpagina. Zoek de artikeltag die uw artikel omhult en noteer de artikel-ID die eraan is toegewezen. Dit is de selector die u moet gebruiken om uw individuele kaart te targeten. Voor mijn voorbeeld heb ik klik met de rechtermuisknop en klik op geïnspecteerd om de id "post-3466" te vinden.

Zoals hieronder:

Wijziging van een enkel artikel

Om alleen deze kaart in CSS te richten om het een grijze achtergrond te geven met een wit lettertype, moet u het volgende CSS gebruiken:

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

Nu is op de kaart die specifieke stijl toegepast.

Dat is alles!

Final gedachten

Dit zijn slechts enkele voorbeelden van de vele verschillende stijlen die u kunt bereiken met dit type CSS-targeting van Blog-modulekaarten. U hoeft niet langer voor elke kaart dezelfde stijl aan te houden. U kunt ze ontwerpen zoals u dat wilt.

Als u nog vragen of suggesties heeft, doe deze dan vrijblijvend aan mij.

[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”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /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 DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi-zelfstudies