Divi: Uittreksels van artikelen weergeven in de muisaanwijzer

Wilt u weten hoe u artikelfragmenten kunt weergeven bij de muisaanwijzer in Divi ?

Het bekijken van een voorbeeld van blogpostfragmenten met de muisaanwijzer kan een effectieve manier zijn om een ​​compacte rasterlay-out voor uw blogposts te behouden zonder die fragmenten helemaal te verlaten. 

Het idee is dus om in eerste instantie fragmenten te verbergen en ze vervolgens weer te geven wanneer je de muisaanwijzer over een bericht in het raster beweegt. Daarom kunnen lezers meer berichten zien en krijgen ze ook de mogelijkheid om fragmenten te zien van de berichten waarin ze geïnteresseerd zijn.

Dus in deze zelfstudie laten we u zien hoe u deze blogpost-fragmenten kunt schakelen met een wisseleffect bij zweven in Divi. 

Laten we beginnen!

overzicht

Eerst volgt hier een overzicht van wat we in deze zelfstudie gaan maken.

De lay-out van de blogmodule maken

Eerst moeten we een basislay-out maken voor onze blogposts. Voor deze zelfstudie voegen we een rij toe aan een kolom en voegen we er een blogmodule aan toe.

Maak een regel

Voeg om te beginnen een rij van één kolom in de sectie in

lijnbreedte

Ga dan naar lijninstellingen. pas vervolgens op het tabblad Stijl onder Maatvoering de breedtes als volgt aan:

• Maximale breedte: 90%
• Maximale breedte: 1200px

Een blogmodule toevoegen

Voeg vervolgens een Blog-module in de kolom van de eerder gemaakte regel in.

Instellingen blogmodule

Ga vervolgens naar de Blogmodule-instellingen op het tabblad InhoudStel onder Elementen de optie 'Knop Lees meer weergeven' in op 'Ja'

Ga nu naar het tabblad Stijl, selecteer onder Sjabloon de sjabloon "Raster" als de lay-out voor de blog.

Ga ten slotte naar het tabblad Geavanceerd en voeg de volgende CSS-klasse toe: 

CSS-klasse: toggle-blog-uittreksel

Vervolgens gebruiken we deze klasse in de volgende stap als selector voor onze aangepaste CSS-code.

Voeg aangepaste CSS toe met de Code-module.

Op dit moment zijn onze blogberichten ingedeeld in een raster en is er een aangepaste CSS-klasse toegevoegd aan het Blog-menu. We gaan deze CSS-klassekiezer dus gebruiken om deze blogmodule specifiek te targeten en een schakeleffect toe te voegen wanneer we de muisaanwijzer op een artikel houden.

Om CSS toe te voegen, gebruiken we de Code-module. Voeg hiervoor een Code-module toe onder de Blog-module.

Plak vervolgens de aangepaste CSS hieronder die nodig is voor het maken van het wisseleffect van het artikelfragment bij de muisaanwijzer. Zorg er vooral voor dat u de CSS-code tussen de benodigde stijltags plakt.

1. @media all and (min-width: 981px) {
2.   /* add transition for post content*/
3.   .toggle-blog-excerpt .et_pb_post .post-content {
4.     -webkit-transition: all 500ms !important;
5.     transition: all 500ms !important;
6.   }
7.   /* keep post content visible in visual builder */
8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
9.     visibility:visible;
10.     opacity: 1;
11.     max-height:none;
12.   }
13.   /* hide post content */
14.   .toggle-blog-excerpt .et_pb_post .post-content {
15.     visibility: hidden;
16.     opacity: 0;
17.     max-height:0px;
18.   }
19.   /* show post content when hovering over post item */
20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
21.     visibility: visible;
22.     opacity:1;
23.     max-height: 500px;
24.   }
25.   /* set min-height for all post items */
26.   .toggle-blog-excerpt .et_pb_post {
27.     min-height: 400px; 
28.   }
29. }

Laten we eens kijken naar het tot nu toe behaalde resultaat.

Resultaat

Laten we wat extra styling toevoegen aan de Blog-module met de Divi-builder

Nu de CSS aanwezig is om ons het schakeleffect voor onze blogpostfragmenten te geven, kunnen we vervolgens eventuele extra styling aan de blogmodule toevoegen met behulp van de constructor Divi.

Voor dit voorbeeld zullen we minimale aanpassingen aan de stijl maken, maar voel je vrij om ook je eigen stijl te verkennen.

Artikeltitelstijl

• Titel dimlicht: vetgedrukte tekst
• Titel tekstkleur: #6D6A7E
• Titel tekstgrootte: 20px
• Hoogte titelregel: 1.3em

Tekststijl "Lees meer"

• Lees meer Dim Light: vetgedrukte tekst
• Lees meer Kopieerstijl: TT
• Tekstkleur Lees meer: ​​#6D6A7E
• Letterafstand Lees meer: ​​1px
• Lijnhoogte Lees meer: ​​3.5em

De weergave van tekstpaginering wijzigen

• Paginering weergeven Gedimd licht: vetgedrukte tekst
• Tekstkleur Toon paginering: #6D6A7E
• Letterafstand Toon paginering: 1px
• Toon paginering Kopieer stijl: TT

Rand verwijderen

• Rasterindeling Randbreedte: 0px

Hover Shadow Box-stijl

• Schaduwdoos: Zie screenshot
• Startpositie: 0px
• Doos Schaduwvervaging Sterkte: 38px
• Letterkleur ondertitel: rgba (109,106,126,0.25)

Eindresultaat

Conclusie

Concluderend, zoals te zien is in deze tutorial, kan het toevoegen van enkele CSS-fragmenten je de functionaliteit geven die je nodig hebt om blogpostfragmenten te rocken met een mooi zweefeffect. 

Het belangrijkste van deze methode is dat we desgewenst extra styling kunnen toevoegen aan de blogmodule met behulp van Divi's geïntegreerde opties. Bovendien kun je berichtelementen aanpassen, inclusief het toevoegen van meer hover-effecten. 

Hopelijk helpt dit om de blog jouw Site web Divi een extra boost qua design en functionaliteit. Vertel ons over uw ervaringen in de opmerkingen.