Dëshironi të dini se si t'i shfaqni fragmentet e artikullit kur rri pezull Divi ?
Shikimi paraprak i fragmenteve të postimeve të blogut në lëvizje rri pezull mund të jetë një mënyrë efektive për të mbajtur një plan urbanistik kompakt për postimet tuaja të blogut pa i braktisur fare ato fragmente.
Pra, ideja është që fillimisht të fshihen fragmentet dhe më pas t'i shfaqen ato kur rri pezull mbi një postim në rrjet. Prandaj, i lejon lexuesit të shohin më shumë postime, ndërsa gjithashtu u jep atyre mundësinë për të parë fragmente të postimeve që u interesojnë.
Pra, në këtë tutorial, ne do t'ju tregojmë se si të krijoni këtë efekt të ndryshimit të fragmenteve të postimit të blogut kur rri pezull në Divi.
Le të fillojmë!
studim
Së pari, këtu është një përmbledhje e asaj që do të krijojmë në këtë tutorial.
Krijimi i paraqitjes së modulit të blogut
Së pari, ne duhet të krijojmë një plan urbanistik bazë për postimet tona në blog. Për këtë tutorial, ne do të shtojmë një rresht në një kolonë dhe do të futim një modul Blog në të.
Krijo një linjë
Për të filluar, futni një rresht me një kolonë në seksion
gjerësia e vijës
Pastaj shkoni te cilësimet e linjës. më pas, në skedën Style, nën Përmasat, modifikoni gjerësitë si më poshtë:
- Gjerësia maksimale: 90%
- Gjerësia maksimale: 1200 px
Shto një modul blogu
Më pas, futni një modul Blog në kolonën e rreshtit të krijuar më parë.
Cilësimet e modulit të blogut
Më pas, shkoni te cilësimet e modulit Blog, në skedën Përmbajtje, nën Elementet, vendosni opsionin "Trego lexoni më shumë" në "Po"
Tani shkoni te skeda Stil, nën Shablloni, zgjidhni shabllonin "Rrjeti" si paraqitje për blogun.
Më në fund, shkoni te skedari Advanced dhe shtoni klasën e mëposhtme CSS:
Klasa CSS: ndrysho-blog-fragment
Më pas, ne do ta përdorim këtë klasë si një përzgjedhës për kodin tonë të personalizuar CSS në hapin tjetër.
Shtoni CSS të personalizuar me modulin e Kodit.
Në këtë pikë, postimet tona të blogut vendosen në një rrjet dhe një klasë e personalizuar CSS është shtuar në menynë Blog. Pra, ne do të përdorim këtë përzgjedhës të klasës CSS për të synuar në mënyrë specifike këtë modul Blog dhe për të shtuar një efekt ndërrimi kur rri pezull mbi një artikull.
Për të shtuar CSS, ne do të përdorim modulin e Kodit. Për ta bërë këtë, shtoni një modul Kodi nën modulin Blog.
Më pas, ngjisni CSS-në e personalizuar më poshtë që nevojitet për krijimin e efektit të ndërrimit të fragmentit të artikullit në hover. Mbi të gjitha, sigurohuni që të ngjitni kodin CSS midis etiketave të nevojshme të stilit.
@mediaalland (min-width:981px) {/* add transition for post content*/.toggle-blog-excerpt .et_pb_post .post-content {-webkit-transition:all500ms!important;transition:all500ms!important;}/* keep post content visible in visual builder */body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {visibility:visible;opacity:1;max-height:none;}/* hide post content */.toggle-blog-excerpt .et_pb_post .post-content {visibility:hidden;opacity:0;max-height:0px;}/* show post content when hovering over post item */.toggle-blog-excerpt .et_pb_post:hover .post-content {visibility:visible;opacity:1;max-height:500px;}/* set min-height for all post items */.toggle-blog-excerpt .et_pb_post {min-height:400px;}}
Le të vizualizojmë rezultatin e marrë deri më tani.
Rezultat
Le të shtojmë një stil shtesë në modulin Blog me ndërtuesin Divi
Tani që CSS është krijuar për të na dhënë efektin e ndërrimit për fragmentet e postimeve tona në blog, më pas mund të shtojmë çdo stil shtesë në modulin e blogut duke përdorur konstruktorin Divi.
Për këtë shembull, ne do të bëjmë rregullime minimale në stil, por ndjehuni të lirë të eksploroni edhe stilin tuaj.
Stili i titullit të artikullit
- Titulli me dritë të zbehtë: Tekst i trashë
- Ngjyra e tekstit të titullit: #6D6A7E
- Madhësia e tekstit të titullit: 20 px
- Lartësia e linjës së titullit: 1.3em
Stili i tekstit "Lexo më shumë"
- Lexo më shumë Dim Light: Bold Text
- Lexo më shumë Stili i Kopjimit: TT
- Ngjyra e tekstit Lexo më shumë: #6D6A7E
- Hapësira e shkronjave Lexo më shumë: 1px
- Lartësia e linjës Lexo më shumë: 3.5em
Ndryshoni shfaqjen e faqes së tekstit
- Shfaq faqetimin Dritë e zbehtë: Tekst i trashë
- Ngjyra e tekstit Shfaq faqetimin: #6D6A7E
- Hapësira e shkronjave Trego faqëzimin: 1 px
- Shfaq faqetimin Stili i kopjimit: TT
Hiq kufirin
- Gjerësia e kufirit të paraqitjes së rrjetit: 0 px
Stili i Hover Shadow Box
- Shadow Box: Shiko pamjen e ekranit
- Pozicioni fillestar: 0px
- Forca e turbullimit të hijes së kutisë: 38 px
- Ngjyra e fontit të titrave: rgba (109,106,126,0.25)
Rezultati përfundimtar
Përfundim
Si përfundim, siç tregohet në këtë tutorial, shtimi i disa fragmenteve CSS mund t'ju japë funksionalitetin që ju nevojitet për të tronditur fragmentet e postimeve në blog me një efekt të këndshëm pezullimi.
Gjëja më e rëndësishme në këtë metodë është që ne mund të shtojmë stil shtesë sipas dëshirës në modulin e blogut duke përdorur opsionet e integruara të Divi. Për më tepër, do t'ju lejojë të personalizoni elementët e postimit, duke përfshirë shtimin e më shumë efekteve të pezullimit.
Shpresojmë se kjo do të ndihmojë për t'i dhënë blogut tuajin Site Web Ndani një nxitje shtesë për sa i përket dizajnit dhe funksionalitetit. Na tregoni për përvojat tuaja në komente.
