Divi: Hur man visar artikelutdrag när man svävar

Vill du veta hur du visar artikelutdrag när du håller muspekaren in Divi ?

Att förhandsgranska blogginlägg när du svävar kan vara ett effektivt sätt att hålla en kompakt rutnätslayout för dina blogginlägg utan att överge dessa utdrag helt och hållet. 

Så, tanken är att först dölja utdrag och sedan visa dem när du håller muspekaren över ett inlägg i rutnätet. Därför tillåter det läsare att se fler inlägg samtidigt som de ger dem möjlighet att se utdrag av inläggen de är intresserade av.

Så i den här handledningen kommer vi att visa dig hur du skapar det här blogginlägget växlingseffekt för att sväva in Divi. 

Låt oss börja!

undersökningen

Först, här är en översikt över vad vi kommer att skapa i den här handledningen.

Skapa bloggmodulens layout

Först måste vi skapa en grundläggande layout för våra blogginlägg. För den här handledningen lägger vi till en rad i en kolumn och infogar en bloggmodul i den.

Skapa en linje

För att börja, infoga en rad med en kolumn i avsnittet

linjebredd

Gå sedan till linjeinställningar. sedan, på fliken Stil, under Storlek, ändra bredderna enligt följande:

• Maximal bredd: 90 %
• Maximal bredd: 1200px

Lägg till en bloggmodul

Infoga sedan en bloggmodul i kolumnen på raden som tidigare skapats.

Bloggmodulinställningar

Gå sedan till bloggmodulens inställningar på fliken Innehåll, under Element, ställ in alternativet "Visa Läs mer-knappen" till "Ja"

Gå nu till fliken Stil, under Mall, välj mallen "Grid" som layout för bloggen.

Slutligen, gå till fliken Avancerat och lägg till följande CSS-klass: 

CSS-klass: toggle-blogg-utdrag

Därefter kommer vi att använda den här klassen som en väljare för vår anpassade CSS-kod i nästa steg.

Lägg till anpassad CSS med kodmodulen.

Vid det här laget är våra blogginlägg upplagda i ett rutnät, och en anpassad CSS-klass har lagts till på bloggmenyn. Så vi kommer att använda denna CSS-klassväljare för att specifikt rikta in den här bloggmodulen och lägga till en växlingseffekt när du håller muspekaren över en artikel.

För att lägga till CSS använder vi kodmodulen. För att göra detta, lägg till en kodmodul under bloggmodulen.

Klistra sedan in den anpassade CSS nedan som behövs för att skapa växlingseffekten för artikelutdrag vid hovring. Framför allt, se till att klistra in CSS-koden mellan de nödvändiga stiltaggarna.

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

Låt oss se resultatet hittills.

Resultat

Låt oss lägga till lite extra styling till bloggmodulen med Divi-byggaren

Nu när CSS är på plats för att ge oss växlingseffekten för våra blogginläggsutdrag, kan vi sedan lägga till ytterligare stil till bloggmodulen med hjälp av konstruktorn Divi.

För det här exemplet kommer vi att göra minimala justeringar av stilen, men utforska gärna din egen stil också.

Artikeltitelstil

• Rubrik med svagt ljus: Fet text
• Titeltextfärg: #6D6A7E
• Titel Textstorlek: 20px
• Titelradens höjd: 1.3 em

Textstil "Läs mer"

• Läs mer Dim ljus: fet text
• Läs mer Copy Style: TT
• Textfärg Läs mer: #6D6A7E
• Bokstavsavstånd Läs mer: 1px
• Linjehöjd Läs mer: 3.5em

Ändra visningen av textpaginering

• Visa paginering Dim ljus: Fet text
• Textfärg Visa paginering: #6D6A7E
• Bokstavsavstånd Visa paginering: 1px
• Visa paginering Kopieringsstil: TT

Ta bort gränsen

• Rutnätslayout Kantbredd: 0px

Hover Shadow Box Style

• Shadow box: Se skärmdump
• Startposition: 0px
• Box Shadow Blur Styrka: 38px
• Textningstypsnittsfärg: rgba (109,106,126,0.25)

Slutresultat

Slutsats

Sammanfattningsvis, som visas i den här handledningen, kan lägga till några CSS-snuttar ge dig den funktionalitet du behöver för att rocka blogginlägg med en trevlig svävningseffekt. 

Det viktigaste med denna metod är att vi kan lägga till ytterligare styling som vi önskar till bloggmodulen med hjälp av Divis integrerade alternativ. Dessutom låter det dig anpassa inläggselement inklusive att lägga till fler svävningseffekter. 

Förhoppningsvis kommer detta att bidra till att ge bloggen din webbplats Divi ett extra lyft vad gäller design och funktionalitet. Berätta för oss om dina erfarenheter i kommentarerna.