Divi: Kako prikazati izvatke članka pri lebdenju

Želite znati kako prikazati isječke članaka kada zadržite pokazivač Divi ?

Pregled isječaka postova na blogu pri lebdenju može biti učinkovit način za održavanje kompaktnog rasporeda mreže za svoje postove na blogu bez potpunog napuštanja tih isječaka. 

Dakle, ideja je u početku sakriti isječke, a zatim ih prikazati kada zadržite pokazivač iznad objave u mreži. Stoga čitateljima omogućuje da vide više postova, a također im daje mogućnost da vide isječke postova koji ih zanimaju.

Stoga ćemo vam u ovom vodiču pokazati kako stvoriti ovaj učinak isječaka posta na blogu pri prelasku pokazivača Divi. 

Krenimo!

pregled

Prvo, evo pregleda onoga što ćemo stvarati u ovom vodiču.

Izrada izgleda blog modula

Prvo, moramo stvoriti osnovni izgled za naše postove na blogu. Za ovaj vodič, dodat ćemo red u stupac i umetnuti blog modul u njega.

Napravite liniju

Za početak umetnite redak od jednog stupca u odjeljak

širina linije

Zatim idite na postavke linije. zatim, na kartici Stil, pod Određivanje veličine, promijenite širine na sljedeći način:

• Maksimalna širina: 90%
• Maksimalna širina: 1200px

Dodajte modul bloga

Zatim umetnite modul Blog u stupac prethodno kreiranog retka.

Postavke blog modula

Zatim idite na postavke modula Blog, u kartici Sadržaj, pod elementima, postavite opciju "Prikaži gumb Read More" na "Yes"

Sada idite na karticu Stil, u okviru Predložak odaberite predložak "Mreža" kao izgled bloga.

Na kraju idite na karticu Napredno i dodajte sljedeću CSS klasu: 

CSS klasa: prekidač-blog-izvod

Nakon toga, koristit ćemo ovu klasu kao selektor za naš prilagođeni CSS kod u sljedećem koraku.

Dodajte prilagođeni CSS s modulom Code.

U ovom su trenutku naši postovi na blogu raspoređeni u rešetku, a prilagođena CSS klasa dodana je izborniku Blog. Stoga ćemo upotrijebiti ovaj selektor CSS klasa za specifično ciljanje ovog modula bloga i dodavanje efekta prebacivanja kada lebdimo iznad članka.

Za dodavanje CSS-a koristit ćemo modul Code. Da biste to učinili, dodajte modul Code ispod modula Blog.

Zatim zalijepite prilagođeni CSS potreban za stvaranje efekta preklapanja isječka članka pri lebdenju. Iznad svega, svakako zalijepite CSS kod između potrebnih oznaka stila.

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

Pogledajmo do sada dobiveni rezultat.

rezultat

Dodajmo dodatni stil modulu Blog s Divi builderom

Sada kada je CSS postavljen kako bi nam omogućio efekt prebacivanja za naše isječke postova na blogu, možemo dodati bilo koji dodatni stil blog modulu pomoću konstruktora Divi.

Za ovaj primjer, minimalno ćemo prilagoditi stil, ali slobodno istražite i svoj stil.

Stil naslova članka

• Naslov prigušenog svjetla: podebljan tekst
• Boja teksta naslova: #6D6A7E
• Veličina teksta naslova: 20px
• Visina retka naslova: 1.3 em

Stil teksta "Pročitaj više"

• Pročitajte više Prigušeno svjetlo: podebljani tekst
• Opširnije Stil kopiranja: TT
• Boja teksta Pročitajte više: #6D6A7E
• Razmak između slova Opširnije: 1px
• Visina linije Opširnije: 3.5em

Promijenite prikaz paginacije teksta

• Prikaži paginaciju Prigušeno svjetlo: podebljani tekst
• Boja teksta Prikaži paginaciju: #6D6A7E
• Razmak između slova Prikaži paginaciju: 1px
• Prikaži paginaciju Stil kopiranja: TT

Uklonite obrub

• Širina obruba rasporeda mreže: 0px

Stil okvira za sjenu lebdeći

• Okvir sjene: pogledajte snimku zaslona
• Početna pozicija: 0px
• Jačina zamućenja sjene okvira: 38px
• Boja fonta titla: rgba (109,106,126,0.25)

Konačni rezultat

Zaključak

Zaključno, kao što je prikazano u ovom vodiču, dodavanje nekih CSS isječaka može vam dati funkcionalnost koja vam je potrebna za ljuljanje isječaka bloga s lijepim efektom lebdenja. 

Najvažnija stvar u vezi s ovom metodom jest da modulu bloga možemo dodati dodatni stil prema želji koristeći Divi integrirane opcije. Štoviše, omogućit će vam da prilagodite elemente posta uključujući dodavanje više efekata lebdenja. 

Nadamo se da će ovo pomoći blogu da bude vaš web stranica Divi dodatno pojačanje u pogledu dizajna i funkcionalnosti. Recite nam svoja iskustva u komentarima.