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
- 5 websites voor restaurant gebruik Divi thema
- Hoe u tekst toe te voegen op een WooCommerce product Divi
- Hoe de menukleur tussen pagina's op Divi te veranderen
- Functies die u niet kent over Divi
- Hoe maak je een schuifregelaar op Divi
- Hoe een gebruikersrol op Divi te bewerken
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:
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
Voer onder Aangepaste CSS "gridcard" in het tekstvak CSS ID in. Het zal voor ons een manier zijn om alleen deze blogmodule te personaliseren.
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:
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:
Omdat je de numerieke volgorde van elke blogkaart onder elke kolom kent, kun je elke kaart ook als een oneven of even getal identificeren:
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:
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.
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.
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:
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:
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
- 5 websites voor restaurant gebruik Divi thema
- Tekst toevoegen aan een Divi WooCommerce-product
- Hoe de menukleur tussen Divi-pagina's te veranderen
- Hoe de rasters van een blog personaliseren met Divi
- Hoe de rol Divi editor op WordPress
- Een Divi-schuifregelaar op volledig scherm maken
- Hoe de kleur van menu's tussen Divi-pagina's te veranderen
- Functies die u waarschijnlijk niet kent over Divi
- Divi Builder gebruiken op WordPress
- Hoe de Divi-scrolmodule video te gebruiken
- Hoe de Divi Builder Flip-module te gebruiken
- Hoe een getuigenismodule op Divi Builder toe te voegen
- Hoe de Divi-tekstmodule te gebruiken
- Hoe maak je een schuifregelaar op Divi
- Hoe u een Divi-gebruikersrol kunt bewerken
- Hoe de Divi Social Media-module te gebruiken
- Hoe de shopmodule te gebruiken met het thema WordPress Divi
- Hoe de Divi zijbalkmodule te gebruiken
- Hoe de Divi Price Table-module te gebruiken
- Hoe de titelmodule van Divi-publicaties te gebruiken
- Hoe een videomodule van Divi toe te voegen
- Hoe de artikelnavigatiemodule te gebruiken
- Hoe de Divi-zoekmodule te gebruiken
- Hoe de Divi wallet-module te gebruiken
- Hoe de persoonsmodule op Divi Builder te gebruiken
- De walletmodule gebruiken met Divi-filter
- De schuifregelaarmodule op de volledige breedte gebruiken
- Hoe de Divi Builder-beeldmodule te gebruiken
- De navigatiemodule op de volledige breedte van Divi Builder gebruiken
- Hoe de afbeeldingengalerij-module te gebruiken
- Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
- Hoe de Divi Full Width Portfolio Module te gebruiken
- Hoe de Divi header-module over de volle breedte te gebruiken
- Hoe de Divi Counter-module te gebruiken
- De schuifregelaar voor artikelen gebruiken in Divi Builder
- Hoe de Divi Email Optin-module te gebruiken
Hallo ! Weet u of het mogelijk is om het aantal kolommen van dit Blog-object te wijzigen?
Ik wil dat elke kaart in de volle breedte wordt weergegeven. Dankjewel !
Hallo,
Ik heb geprobeerd om de blogposts in "grid" weer te geven met de id "gridcard", maar het werkt niet. Kun je me helpen ?
Bonsoir,
Sorry voor de late antwoord.
Kunt u uw verzoek anders formuleren?
Hallo,
Ik ben echt een beginner maar dankzij de online tutorials slaag ik erin om een leuke blog op te bouwen.
Echt bedankt voor deze, want ik hoefde alleen maar de codes te kopiëren en alles verliep vlekkeloos, ik ben heel blij met het resultaat.
Nogmaals bedankt, fijne dag 🙂
Ik smeek je. Bedankt voor het lezen.
Bonsoir,
de DIVI-blog plaatst naast de naam van de auteur het voorzetsel “van” (bijv. van Stefano). Ik zou graag willen weten of het mogelijk is om dit te wijzigen in "de"
Hallo,
Ja, het is mogelijk om dit element te wijzigen met Divi.
Hallo Thierry
Super tutorial
Ik zou graag willen weten of het mogelijk is om de weergegeven afbeelding te vergroten
Ik zou deze stijl graag toepassen op mijn blog
dank u
Hallo,
Ja het is mogelijk.
Hallo,
Hoe kan ik deze lay-out optimaliseren voor mobiel (tablet)? Ik heb geen Schabrettmuster maar verschillende kleuren voor elke blogpost, in een specifieke volgorde. Dat verandert natuurlijk wanneer we mobiel gaan en de kleuren niet langer aan de juiste berichten worden gekoppeld ...
Heeft iemand hier een idee?
Hallo,
Nee helaas.
Hallo,
Bedankt voor dit artikel! Ik zou ook graag de "lees meer" onderaan de artikelen willen aanpassen.
Kunt u ons voorbeelden van CSS-code geven om de tekst te wijzigen en bijvoorbeeld in een mooie gecentreerde knop te plaatsen?
Bedankt.
Sophie
Hallo 🙂 Om de tekst van de knop "lees meer" te wijzigen, gebeurt dit in Bloginstellingen > Stijl > Lees meer tekst. U kunt de typografie en de tekst van de "lees meer" wijzigen. Ik weet echter niet hoe ik er een knop van moet maken. Goede opstelling!
Cuándo lo pones in de CSS personalizado, por ejemplo:
#gridcard .Column: first-child art: nth-child (impar) {background: #333; }
da error como el seigue: verwacht een FUNCTIE of IDENT na dubbele punt op regel 1, col 18
groeten
Bonsoir,
Onze blog is automatisch vertaald uit het Frans. Ik nodig je daarom uit om de Franse taal te kiezen in de taalwidget op de bovenste balk van onze blog en de juiste CSS-code wordt weergegeven.
usted escribió an artículo evil escrito, debería ser: artículo del primer hijo: no arte del primer hijo:
Je hebt het artikel verkeerd gespeld, het zou moeten zijn: eerste-kind-artikel: niet eerste-kind-kunst:
Hoi,
70 andere talen.
Dag
Bedankt voor het artikel. Ik heb een rasterpresentatie (Divi-thema) Ik heb miniaturen (foto's) voor de presentatie van de artikelen, aan de andere kant wanneer ik klik om toegang te krijgen tot het artikel, wordt de afbeelding groot weergegeven aan het begin van de 'artikel. Is er een manier om het even groot te maken als de miniatuur of om het uit de berichtweergave te verwijderen?
dank u
Patrick
Bonsoir,
Sorry, maar onze divi-ondersteuning is beperkt tot onze tutorials. Neem contact op met Eleganthemes SVP.
Bonjourn, super artikel
Ik beproef hier mijn geluk, soms liepen we weken rond een onderwerp zonder het antwoord te vinden, terwijl hetzelfde onderwerp voor anderen zinvol is.
Ik ben daarom op zoek naar de oplossing om een paalraster op te zetten, alleen samengesteld uit visuals maar van verschillende hoogtes, om explicieter te zijn, dat een op de twee visuals dubbel zo hoog is als het visual ernaast.
Een idee?
Julian
Hallo Julian,
Ik raad u aan contact op te nemen met het DIVI-team. In dit geval is het handiger.
Super tuto! Ik zal dit weekend voor mijn site testen.
Heeft u een oplossing om de extracten in de ratten te verwijderen?
Merci à vous
Sofhy