Doriți să difuzați postări de blog în Divi?
Astăzi vă vom arăta o modalitate creativă de a prezenta postările de blog ca cărți plutitoare în Divi. Fiecare blog sau site-ul web ar trebui să urmărească să aibă un excelent cuprins atractiv și, poate la fel de important sau accesibil.
O modalitate de a vă asigura că cuprins rămâne accesibil utilizatorilor este de a-l face să plutească pe pagină.
Iar pentru bloggeri, vă vom arăta cum să prezentați articole din blogul tău ca carduri plutitoare, astfel încât acestea să rămână vizibile în timpul derulării paginii.
Să mergem.
studiu
Iată o scurtă prezentare a rezultatului pe care îl vom obține la sfârșitul acestui tutorial.
Ce ai nevoie pentru a începe
Înainte de a începe să creați acest design în Divi, va trebui să faceți următoarele:
- Creați o pagină nouă, dați un nume relevant și faceți clic pe „Utilizați Divi Builder”
- Selectați opțiunea Alegeți aspectul".
- Găsiți și selectați aspectul 'pagina de destinație a bloggerului".
- Faceți clic pe buton Alegeți aspectul pentru a-l încărca pe pagină.
După aceea, veți avea aspectul prestabilit gata de utilizat pentru acest tutorial.
Cum se creează carduri flotante pentru postări de blog folosind modulul blog al Divi
Acum că aspectul este încărcat pe pagină, suntem gata să creăm carduri flotante pentru postările noastre de blog.
Citiți și: Cum se creează un antet global lipicios în Divi
Creați o nouă secțiune în partea de jos a aspectului.
Apoi adăugați un nou rând cu o singură coloană la secțiune.
Adăugați un modul Blog și un titlu la rând/coloană
În loc să creați un nou modul Blog aici, derulați în sus și găsiți modulul Blog existent care afișează trei postări de blog (este în a treia secțiune, aproape de mijlocul paginii). Deschis " Alți parametri ai modulului »Și selectați« Copiere modul".
Apoi lipiți modulul în noul rând cu o singură coloană pe care l-am creat în partea de jos a paginii făcând clic dreapta pe pictograma plus gri și selectând „ Lipire modul".
În continuare, vom adăuga un titlu deasupra postărilor de pe blog, care va pluti și deasupra cardurilor de blog. Pentru a face acest lucru, copiați modulul Text existent cu textul mic de titlu " Stil de viață".
Apoi lipiți modulul chiar deasupra noului modul Blog pe care tocmai l-am adăugat.
Apoi, editați textul titlului pentru a descrie tipul de postări pe blog pe care doriți să le prezentați. În acest exemplu, vom folosi doar „ top Story".
Personalizarea liniei cu poziție fixă și lățime personalizată
Dorim să reducem dimensiunea postărilor de blog plutitoare, astfel încât acestea să nu ocupe prea mult spațiu pe pagină atunci când au o poziție fixă. Ar fi distractiv. Pentru a face acest lucru, deschideți setările liniei și actualizați următoarele:
Pentru a face obiectele să plutească, trebuie să dăm liniei o poziție fixă. Sub fila Avansat, actualizați următoarele:
- Poziție: fixă
- Locație: dreapta jos
- Offset vertical: 20px
- Offset orizontal: 20px
- Index Z: 12
Modul blog actualizat cu conținut minim și umbră
În general, modulul Blog are deja un aspect grilă cu trei coloane și un stil frumos care vine cu pachetul de layout pe care l-am ales. Dar sunt câteva lucruri pe care trebuie să le facem.
Vezi și: Cum se creează un antet global cu formular de conectare în Divi
În primul rând, trebuie să reducem dimensiunea hărților (vertical) și să eliminăm unele elemente din cuprins.
Pentru a face acest lucru, deschideți setările blogului și ascundeți toate elementele, cu excepția imaginii prezentate. Acest lucru va face ca postarea să arate doar imaginea și titlul prezentate.
Sub fila Stil, configurați umbra casetei după cum urmează:
- Caseta umbră: vezi captura de ecran
- Intensitatea estomparii umbrei casetei: 28px
- Culoare font subtitrare: rgba(0,0,0,0.19)
studiu
Iată o previzualizare a rezultatului pe care îl avem până acum.
Faceți linia de articole să apară pe hover
În cele din urmă, putem adăuga un efect de hover care încurajează utilizatorii să interacționeze cu articolele plutitoare.
Citiți și: Cum se creează pagina de blog cu modulul Blog în Divi
Deschideți setările liniei și opțiunile de actualizare:
Pentru birou
- Transformare: 50%
Pentru starea hover
- Transformare: 0%
Acest lucru va aduce inițial întreaga linie în afara ferestrei de vizualizare a browserului cu 50%. Odată ce utilizatorul trece cu mouse-ul peste linie, aceasta revine complet la vedere.
Ascundeți rândul pe mobil
Cu excepția cazului în care doriți să publicați o singură postare de blog, nu are sens să plasați acele postări de blog pe mobil. Probabil că ar ocupa prea mult spațiu și ar cauza probleme atunci când încercați să defilați.
Vezi și: Cum să adăugați un formular de contact la un antet global în Divi
Pentru a ascunde hărțile pe mobil, deschideți setările secțiunii și dezactivați vizibilitatea secțiunii pe telefon și tabletă.
Rezultat final
Descărcați DIVI acum!!!
Concluzie
Asa de ! V-am arătat în acest tutorial un mod creativ și original de a prezenta postările de blog pe care doriți să le evidențiați.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
