Divi: Slik viser du artikkelutdrag på hover

Vil du vite hvordan du viser artikkelutdrag når du peker på Divi ?

Forhåndsvisning av blogginnleggsbiter mens du holder musepekeren kan være en effektiv måte å holde et kompakt rutenettoppsett for blogginnleggene dine uten å forlate disse utdragene helt. 

Så ideen er først å skjule utdrag og deretter vise dem når du holder musepekeren over et innlegg i rutenettet. Derfor lar den leserne se flere innlegg samtidig som de gir dem muligheten til å se utdrag av innleggene som interesserer dem.

Så i denne opplæringen skal vi vise deg hvordan du oppretter dette blogginnlegget veksleeffekt for speiling i Divi. 

La oss begynne!

undersøkelsen

Først, her er en oversikt over hva vi skal lage i denne opplæringen.

Opprette bloggmoduloppsettet

Først må vi lage en grunnleggende layout for blogginnleggene våre. For denne opplæringen legger vi til en rad i en kolonne og setter inn en bloggmodul i den.

Lag en linje

For å starte, sett inn en rad med én kolonne til seksjonen

linje bredde

Gå deretter til linjeinnstillinger. deretter, i Stil-fanen, under Størrelse, endre breddene som følger:

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

Legg til en bloggmodul

Deretter setter du inn en bloggmodul i kolonnen på linjen som ble opprettet tidligere.

Bloggmodulinnstillinger

Gå deretter til Blogg-modulinnstillingene i fanen Innhold, under Elements, sett "Vis Les mer-knappen" til "Ja"

Gå nå til Stil-fanen, under Mal, velg "Grid"-malen som layout for bloggen.

Til slutt, gå til Avansert-fanen og legg til følgende CSS-klasse: 

CSS-klasse: toggle-blogg-utdrag

Deretter vil vi bruke denne klassen som en velger for vår egendefinerte CSS-kode i neste trinn.

Legg til tilpasset CSS med kodemodulen.

På dette tidspunktet er blogginnleggene våre lagt ut i et rutenett, og en tilpasset CSS-klasse er lagt til bloggmenyen. Så vi kommer til å bruke denne CSS-klassevelgeren til å spesifikt målrette mot denne bloggmodulen og legge til en veksleeffekt når du holder musepekeren over en artikkel.

For å legge til CSS bruker vi kodemodulen. For å gjøre dette, legg til en kodemodul under bloggmodulen.

Deretter limer du inn den egendefinerte CSS-en nedenfor som er nødvendig for å lage veksleeffekten for artikkelsnutt ved hovering. Fremfor alt, sørg for å lime inn CSS-koden mellom de nødvendige stiltaggene.

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

La oss se resultatet oppnådd så langt.

Resultat

La oss legge til litt ekstra styling til bloggmodulen med Divi-byggeren

Nå som CSS-en er på plass for å gi oss veksleeffekten for blogginnleggsutdragene våre, kan vi deretter legge til eventuell ekstra stil til bloggmodulen ved å bruke konstruktøren Divi.

For dette eksempelet vil vi gjøre minimale justeringer av stilen, men utforske gjerne din egen stil også.

Artikkeltittelstil

• Tittel med svakt lys: fet tekst
• Titteltekstfarge: #6D6A7E
• Tittel Tekststørrelse: 20px
• Tittellinjehøyde: 1.3em

Tekststil "Les mer"

• Les mer Dim lys: fet tekst
• Les mer Kopistil: TT
• Tekstfarge Les mer: #6D6A7E
• Bokstavavstand Les mer: 1px
• Linjehøyde Les mer: 3.5em

Endre visningen av tekstpaginering

• Vis paginering Dim lys: fet tekst
• Tekstfarge Vis paginering: #6D6A7E
• Bokstavavstand Vis paginering: 1px
• Vis paginering Kopistil: TT

Fjern kantlinje

• Rutenettoppsett kantlinjebredde: 0px

Hover Shadow Box Style

• Skyggeboks: Se skjermbilde
• Startposisjon: 0px
• Box Shadow Blur Styrke: 38px
• Tekstskriftfarge: rgba (109,106,126,0.25)

Endelig resultat

konklusjonen

Avslutningsvis, som vist i denne opplæringen, kan å legge til noen CSS-snutter gi deg funksjonaliteten du trenger for å rocke blogginnleggssnutter med en fin sveveeffekt. 

Det viktigste med denne metoden er at vi kan legge til ekstra styling som vi ønsker til bloggmodulen ved hjelp av Divis integrerte alternativer. Dessuten vil det tillate deg å tilpasse innleggselementer, inkludert å legge til flere sveveeffekter. 

Forhåpentligvis vil dette bidra til å gi bloggen din nettstedet Web Divi et ekstra løft når det gjelder design og funksjonalitet. Fortell oss om dine erfaringer i kommentarene.