Divi: Cum se afișează fragmente de articol la trecerea cursorului

Doriți să știți cum să afișați fragmente de articol la trecerea cursorului Divi ?

Previzualizarea fragmentelor de postări de blog la hover poate fi o modalitate eficientă de a păstra un aspect compact al grilei pentru postările de blog fără a abandona acele fragmente cu totul. 

Deci, ideea este să ascundeți inițial fragmentele și apoi să le afișați atunci când treceți cu mouse-ul peste o postare din grilă. Prin urmare, le permite cititorilor să vadă mai multe postări, oferindu-le și posibilitatea de a vedea fragmente din postările care îi interesează.

Așadar, în acest tutorial, vă vom arăta cum să creați acest efect de comutare a fragmentelor de post de blog la trecerea cu mouse-ul în Divi. 

Să începem!

studiu

În primul rând, iată o prezentare generală a ceea ce vom crea în acest tutorial.

Crearea aspectului modulului de blog

În primul rând, trebuie să creăm un aspect de bază pentru postările noastre de blog. Pentru acest tutorial, vom adăuga un rând la o coloană și vom introduce un modul Blog în ea.

Creați o linie

Pentru a începe, inserați un rând dintr-o coloană în secțiune

lățimea liniei

Apoi accesați setările liniei. apoi, în fila Stil, sub Dimensiune, modificați lățimile după cum urmează:

• Latime maxima: 90%
• Latime maxima: 1200px

Adăugați un modul de blog

Apoi, inserați un modul Blog în coloana liniei create anterior.

Setări modul blog

Apoi, accesați setările modulului Blog, în fila Conținut, sub Elemente, setați opțiunea „Afișați butonul Citiți mai multe” la „Da”

Acum accesați fila Stil, sub Șablon, selectați șablonul „Grilă” ca aspect pentru blog.

În cele din urmă, accesați fila Avansat și adăugați următoarea clasă CSS: 

Clasa CSS: toggle-blog-excerpt

Ulterior, vom folosi această clasă ca selector pentru codul CSS personalizat în pasul următor.

Adăugați CSS personalizat cu modulul Cod.

În acest moment, postările noastre de blog sunt așezate într-o grilă și o clasă CSS personalizată a fost adăugată la meniul Blog. Așadar, vom folosi acest selector de clasă CSS pentru a viza în mod specific acest modul Blog și vom adăuga un efect de comutare atunci când trecem cu mouse-ul peste un articol.

Pentru a adăuga CSS, vom folosi modulul Cod. Pentru a face acest lucru, adăugați un modul Cod sub modulul Blog.

Apoi, inserați CSS-ul personalizat de mai jos, necesar pentru a crea efectul de comutare a fragmentului de articol la trecerea cu mouse-ul. Mai presus de toate, asigurați-vă că lipiți codul CSS între etichetele de stil necesare.

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

Sa vedem rezultatul obtinut pana acum.

rezultat

Să adăugăm un stil suplimentar la modulul Blog cu constructorul Divi

Acum că CSS-ul este în vigoare pentru a ne oferi efectul de comutare pentru fragmentele noastre de postări de blog, apoi putem adăuga orice stil suplimentar la modulul de blog folosind constructorul Divi.

Pentru acest exemplu, vom face ajustări minime la stil, dar nu ezitați să vă explorați și propriul stil.

Stilul titlului articolului

• Titlu cu lumină slabă: text aldine
• Culoarea textului titlului: #6D6A7E
• Dimensiunea textului titlului: 20px
• Înălțimea liniei de titlu: 1.3 em

Stilul text „Citește mai mult”

• Citește mai mult Dim Light: Bold Text
• Citește mai mult Copy Style: TT
• Culoarea textului Citiți mai multe: #6D6A7E
• Spațiere între litere Citește mai mult: 1px
• Înălțimea liniei Citește mai mult: 3.5em

Schimbați afișarea paginii text

• Afișează paginarea Lumină slabă: text aldine
• Culoarea textului Afișează paginarea: #6D6A7E
• Spațiere între litere Afișează paginarea: 1px
• Afișează paginarea Stil de copiere: TT

Eliminați chenarul

• Lățimea chenarului aspect grilă: 0px

Hover Shadow Box Style

• Caseta umbră: vezi captura de ecran
• Poziția de pornire: 0px
• Intensitatea estomparii umbrei casetei: 38px
• Culoare font subtitrare: rgba (109,106,126,0.25)

Rezultat final

Concluzie

În concluzie, așa cum se arată în acest tutorial, adăugarea unor fragmente CSS vă poate oferi funcționalitatea de care aveți nevoie pentru a crea fragmente de postări de blog cu un efect de hover plăcut. 

Cel mai important lucru în această metodă este că putem adăuga stil suplimentar după cum dorim la modulul de blog folosind opțiunile integrate ale Divi. În plus, vă va permite să personalizați elementele postării, inclusiv adăugarea de mai multe efecte de trecere. 

Sperăm că acest lucru vă va ajuta să vă oferi blogului site-ul web Divi un plus in plus in ceea ce priveste designul si functionalitatea. Povestește-ne despre experiențele tale în comentarii.