Cum să comutați fragmente de postări pe blog pe Hover în Divi

Comutarea fragmentelor de postări de blog pe hover poate fi o modalitate eficientă de a păstra un aspect compact al grilei pentru postările dvs. de pe blog, fără a abandona complet aceste fragmente. Ideea este să ascundeți fragmentele inițial și apoi să le comutați vizibilitatea atunci când treceți peste un articol din grilă. Aceasta permite utilizatorilor să vadă mai multe postări în fereastra de vizualizare a browserului, oferind în același timp utilizatorului opțiunea de a vedea extrase de postări de care sunt interesați, trecând cu mouse-ul peste postare.

În acest tutorial, vă vom arăta cum să comutați fragmente de postări pe blog pe Dover. Pentru a face acest lucru, vom adăuga câteva fragmente de CSS personalizate, care vor comuta extrasele articolului de postare al unui modul de blog pe hover (nu este nevoie de JQuery). Odată ce codul este în poziție, puteți stiliza modulul blogului oricum doriți utilizând setările încorporate ale Divi.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Cum să comutați fragmente de postări pe blog pe Hover în Divi

Crearea aspectului modulului de blog

În primul rând, trebuie să creăm un aspect de bază pentru postările noastre de pe blog. Pentru acest exemplu, vom adăuga un rând cu o coloană cu un modul de blog în interiorul său.

Creați rândul

Adăugați un rând cu o coloană la secțiune.

Lățimea rândului

În modul de setări rând, actualizați următoarele setări de proiectare pentru a regla lățimea.

• Lățime: 95%
• Lățime maximă: 1200 px

Adăugați un modul Blog

În coloana rândului, adăugați un nou modul de blog.

Setări modul blog

Apoi, actualizați setările de conținut ale modulului blog selectând pentru a afișa butonul Citiți mai multe.

Sub fila de proiectare, selectați aspectul grilei pentru blog.

Sub fila avansată, adăugați următoarea clasă CSS:

• Clasa CSS: comutare-blog-extras

Vom folosi această clasă ca selector pentru codul nostru CSS personalizat în pasul următor.

Adăugați CSS personalizat cu modulul de cod

În acest moment, avem un aspect de grilă de bază pentru postările noastre de blog, cu o clasă CSS personalizată adăugată la modulul blog. Vom folosi acest selector de clasă CSS pentru a viza acest modul de blog specific și vom adăuga un efect de comutare la plimbare la porțiunea din fragmentul de postare a articolului postării.

Pentru a adăuga CSS, vom folosi un modul de cod. Adăugați un nou modul de cod sub modulul blogului.

Inserați următoarele CSS personalizate necesare pentru efectul de comutare a extrasului postului. Asigurați-vă că înfășurați CSS în etichetele de stil necesare.

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !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;  
  }
}

Să verificăm rezultatul de până acum pe pagina live.

Rezultat

Vom trece peste cod un pic mai detaliat la sfârșitul articolului. Dar, deocamdată, să verificăm rezultatul de până acum.

Adăugați un stil suplimentar la modulul Blog cu Divi Builder

Acum că CSS este în poziție pentru a ne oferi efectul de comutare pentru fragmentele postărilor noastre pe blog, putem adăuga orice stil suplimentar la modulul blog folosind Divi Builder.

Pentru acest exemplu, vom face ajustări minime ale stilului, dar nu ezitați să explorați și stilul dvs.

Titlu postare stil

• Greutatea fontului titlului: Bold
• Culoarea textului titlului: # 6d6a7e
• Dimensiune text titlu: 20 px
• Înălțimea liniei de titlu: 1.3em

Stil Citește mai mult text

• Citește mai mult Greutate font: Bold
• Citește mai mult Stilul fontului: TT
• Citește mai mult Culoare text: # 6d6a7e
• Citește mai mult Spațierea literelor: 1 px
• Citește mai mult Înălțimea liniei: 3.5em

Paginarea stilului

• Greutate font paginare: îndrăzneț
• Stilul fontului de paginare: TT
• Culoarea textului paginării: # 6d6a7e
• Distanțarea literelor de paginare: 1 px

Eliminați chenarul

• Lățimea marginii aspectului grilei: 0 px

Style Box Shadow pe Hover

• Box Shadow: Vedeți Captura de ecran
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 38 px
• Culoare umbră (desktop): transparent
• Culoare umbra (hover): rgba (109.106.126,0.25)

Rezultat final

Despre Codul CSS

Dacă sunteți interesat de defalcarea CSS personalizat adăugat mai devreme la modulul de cod, iată-l.

Mai întâi, trebuie să înfășurăm toate CSS-urile într-o interogare media care va aplica CSS numai browserelor desktop.

@media all and (min-width: 981px) {

}

În al doilea rând, trebuie să adăugăm o tranziție cu o durată de 500 ms la conținutul / extrasul postului la modificările de stil care vor avea loc atunci când treceți cu mouse-ul peste articolul postat.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

În al treilea rând, trebuie să ne asigurăm că conținutul / fragmentul postării rămâne vizibil atunci când se utilizează generatorul vizual, astfel încât să putem face modificări.

  /* 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;
  }

În al patrulea rând, trebuie să ascundem conținutul / fragmentul postării în mod implicit atunci când pagina se încarcă. Pentru a face acest lucru folosim vizibilitate: ascuns pentru a ascunde conținutul. Apoi adăugăm opacitatea: 0, astfel încât să putem obține un efect de tranziție fade in și fade out atunci când adăugăm opacitatea: 1 la starea de plutire. De asemenea, folosim înălțimea maximă: 0 px pentru a obține efectul de comutare glisantă atunci când adăugăm înălțimea maximă: 500 px la starea de plutire.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

În al cincilea rând, afișăm conținutul / extrasul postării atunci când articolul postat (.et_pb_post) se află în starea de plutire. Pentru a face acest lucru, schimbăm vizibilitatea la vizibil, opacitatea la 1 și înălțimea maximă la 500 px.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

Pentru fragmentul final, putem oferi tuturor articolelor postării aceeași înălțime minimă pentru un aspect mai curat al grilei aliniate vertical.

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

Iată încă o privire asupra codului final.

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !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;  
  }
}

Gânduri finale

Așa cum se arată în acest tutorial, adăugarea câtorva fragmente de CSS vă poate oferi funcționalitatea necesară pentru a comuta fragmente de postări de blog cu un efect frumos de plutire. Cea mai bună parte a acestei metode este că ne putem baza pe această funcționalitate prin adăugarea oricărui stil suplimentar pe care îl dorim la modulul blog folosind opțiunile încorporate ale Divi. Acest lucru vă va permite să adăugați un stil mai avansat la articolele de postare, inclusiv mai multe efecte de plutire. Sperăm că acest lucru vă va oferi blogului site-ului dvs. web Divi un impuls suplimentar în design și funcționalitate.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!