Divi: Sådan viser du artikeluddrag, når du svæver

Vil du vide, hvordan du viser artikeluddrag, når du svæver ind Divi ?

Forhåndsvisning af blogindlægsuddrag, når du svæver, kan være en effektiv måde at holde et kompakt gitterlayout for dine blogindlæg uden at opgive disse uddrag helt. 

Så ideen er først at skjule uddrag og derefter vise dem, når du holder markøren over et indlæg i gitteret. Derfor giver det læserne mulighed for at se flere opslag, samtidig med at de giver dem mulighed for at se uddrag af de opslag, der interesserer dem.

Så i denne tutorial vil vi vise dig, hvordan du opretter dette blogindlæg uddrag til/fra-effekt ved svæv i Divi. 

Lad os starte!

undersøgelse

Først, her er en oversigt over, hvad vi vil skabe i denne øvelse.

Oprettelse af blogmodulets layout

Først skal vi lave et grundlæggende layout til vores blogindlæg. Til denne øvelse tilføjer vi en række til en kolonne og indsætter et blogmodul i den.

Opret en linje

For at starte skal du indsætte en række med én kolonne til sektionen

linjebredde

Gå derefter til linjeindstillinger. derefter, på fanen Stil, under Størrelse, skal du ændre bredderne som følger:

• Maksimal bredde: 90 %
• Maksimal bredde: 1200px

Tilføj et blogmodul

Indsæt derefter et blogmodul i kolonnen på den tidligere oprettede linje.

Indstillinger for blogmodul

Gå derefter til Blog-modulets indstillinger på fanen Indhold, under Elementer, indstil "Vis Læs mere-knap" til "Ja"

Gå nu til fanen Stil, under Skabelon, vælg skabelonen "Gitter" som layout for bloggen.

Til sidst skal du gå til fanen Avanceret og tilføje følgende CSS-klasse: 

CSS-klasse: toggle-blog-uddrag

Efterfølgende vil vi bruge denne klasse som en vælger for vores tilpassede CSS-kode i næste trin.

Tilføj tilpasset CSS med kodemodulet.

På dette tidspunkt er vores blogindlæg lagt i et gitter, og en tilpasset CSS-klasse er blevet tilføjet til Blog-menuen. Så vi vil bruge denne CSS-klassevælger til specifikt at målrette mod dette blogmodul og tilføje en skifte-effekt, når du holder musemarkøren over en artikel.

For at tilføje CSS bruger vi kodemodulet. For at gøre dette skal du tilføje et kodemodul under blogmodulet.

Dernæst skal du indsætte den tilpassede CSS nedenfor, der er nødvendig for at oprette skift-effekten for artikeluddrag ved svævning. Frem for alt skal du sørge for at indsætte CSS-koden mellem de nødvendige style tags.

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. }

Lad os se det opnåede resultat indtil videre.

Resultat

Lad os tilføje noget ekstra styling til Blog-modulet med Divi-byggeren

Nu hvor CSS'en er på plads for at give os skifte-effekten for vores blogindlægsuddrag, kan vi derefter tilføje enhver yderligere styling til blogmodulet ved hjælp af konstruktøren Divi.

I dette eksempel vil vi lave minimale justeringer af stilen, men du er velkommen til også at udforske din egen stil.

Artiklens titelstil

• Dæmpet lys titel: Fed tekst
• Titeltekstfarve: #6D6A7E
• Titel Tekststørrelse: 20px
• Titellinjehøjde: 1.3 em

Tekststil "Læs mere"

• Læs mere Dim Light: Fed tekst
• Læs mere Kopistil: TT
• Tekstfarve Læs mere: #6D6A7E
• Bogstavafstand Læs mere: 1px
• Linjehøjde Læs mere: 3.5em

Skift visningen af ​​tekstpaginering

• Vis paginering Dæmpt lys: Fed tekst
• Tekstfarve Vis paginering: #6D6A7E
• Bogstavafstand Vis sidedeling: 1px
• Vis paginering Kopistil: TT

Fjern kant

• Gitterlayout kantbredde: 0px

Hover Shadow Box Style

• Skyggeboks: Se skærmbillede
• Startposition: 0px
• Box Shadow Blur Styrke: 38px
• Undertekstskriftfarve: rgba (109,106,126,0.25)

Endelig resultat

Konklusion

Afslutningsvis, som vist i denne tutorial, kan tilføjelse af nogle CSS-uddrag give dig den funktionalitet, du har brug for til at rocke blogindlægsuddrag med en flot svæveeffekt. 

Det vigtigste ved denne metode er, at vi kan tilføje yderligere styling, som vi ønsker til blogmodulet ved hjælp af Divis integrerede muligheder. Desuden vil det give dig mulighed for at tilpasse post-elementer, herunder tilføje flere hover-effekter. 

Forhåbentlig vil dette være med til at give bloggen din Websted Divi et ekstra løft i form af design og funktionalitet. Fortæl os om dine oplevelser i kommentarerne.