Cum să creați un cuprins care poate fi făcut clic pentru o postare pe blog cu blocul de aspect Divi

Adăugarea unui cuprins pe care se poate face clic la o postare de blog este o modalitate excelentă de a îmbunătăți experiența utilizatorului. În multe cazuri, un cuprins al postărilor pe blog folosește linkuri de ancorare pentru a ajuta utilizatorii să navigheze prin conținut. Și, un cuprins (cu linkuri ancoră) este foarte simplu de construit folosind HTML de bază. Cu toate acestea, adăugarea unui design personalizat / CSS pentru a-l personaliza poate fi o provocare. Aici este util Blocul de aspect Divi.

În acest tutorial, vom proiecta un cuprins pe care se poate face clic pentru o singură postare de blog (în Gutenburg) care utilizează linkuri de ancorare pentru a aduce utilizatorii la titlurile desemnate de-a lungul postării. Pentru a face acest lucru, vom folosi blocul Divi Layout pentru a crea Cuprinsul cu toate instrumentele de proiectare puternice ale constructorului Divi la dispoziția noastră.

Să începem!

Trage cu ochiul

Descărcați GRATUIT blocul de layout al cuprinsului reutilizabil

Pentru a pune mâinile pe blocul de aspect al Cuprinsului din acest tutorial, va trebui mai întâi să le 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!

Cum se folosește descărcarea pentru a importa acest bloc de aspect pe site-ul dvs.

Pentru a importa aceste blocuri de imagini Divi Image reutilizabile pe site-ul dvs., mai întâi, trebuie să dezarhivați fișierul de descărcare. Acolo veți găsi cele trei fișiere JSON pe care va trebui să le importați pe site-ul dvs.

Mergeți pentru a edita o postare folosind editorul implicit (Gutenberg). Deschideți meniul „Mai multe instrumente și opțiuni” din partea dreaptă sus a paginii și selectați „Gestionați toate blocurile reutilizabile”.

Apoi faceți clic pe Import din butonul JSON. Alegeți unul dintre fișierele JSON din folderul de descărcare și faceți clic pe butonul de import.

După ce ați terminat, adăugați un bloc nou în Gutenberg. Vom putea găsi blocurile de aspect reutilizabile importate sub comutarea opțiunii Reutilizabile. Pur și simplu faceți clic pe cel numit „Cuprins” pentru ao adăuga la postarea dvs.

Asta e!

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

Ce trebuie să începem

Pentru a începe, va trebui să facem următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o postare nouă în WordPress și utilizați editorul implicit (Gutenberg) pentru a adăuga conținut fals (titlu, titluri, paragrafe, imagine prezentată etc.). Asigurați-vă că creați cel puțin trei blocuri de titlu cu conținut sub fiecare. Deoarece vom adăuga linkuri de ancorare la cuprins, avem nevoie de trei titluri pentru a le lega mai jos.

După aceea, suntem gata să începem.

Crearea unui cuprins pe care se poate face clic pentru o postare pe blog cu blocul de aspect Divi

Adăugați un bloc de aspect Divi

Mai întâi, adăugați un nou bloc Divi Layout în partea de sus a conținutului postării pe blog.

Apoi faceți clic pe butonul Construiți un aspect nou. Aceasta va implementa editorul de aspect care este constructorul Divi pentru un bloc de aspect.

Adăugați rând

În Editorul de aspect, începeți designul adăugând un rând cu o coloană.

Adăugați Divizor de top

În interiorul coloanei, adăugați un modul divizor. Acesta va fi unul dintre cei doi separatori pe care îi vom folosi pentru a încadra cuprinsul.

Setări divizor

Următorul actualizează setările divizorului după cum urmează:

• Culoare linie: #eeeeee
• Poziția liniei: centrat vertical
• Greutatea divizorului: 3 px
• Lățime: 25%
• Căptușeală: 30 px sus, 30 px jos

Adăugați divizorul inferior

Pentru a crea al doilea divizor, copiați divizorul anterior.

Creați Cuprinsul cu titlul cu un modul Blurb

Odată ce separatoarele sunt la locul lor, să creăm titlul nostru pentru cuprins.

Adăugați un nou modul de blurb între cele două separatoare.

Conținut Blurb

Deschideți setările de blurb și actualizați conținutul după cum urmează:

• Titlu: „Cuprins”
• Utilizați pictograma: DA
• Pictogramă: vezi captura de ecran

Setări de design Blurb

Sub fila Proiectare, actualizați următoarele:

• Culoare pictogramă: #eeeeee
• Plasare imagine / pictogramă: stânga
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 100 px
• Titlu Nivel antet: H2
• Lățimea conținutului: 100%
• Înălțime: 38 px

Observați că înălțimea blurbului este mai mică decât înălțimea pictogramei. Aceasta permite pictogramei să se extindă în jos lângă elementele de blurb pe care le vom adăuga în continuare.

Odată ce blurul de titlu este la locul său, suntem pregătiți să începem să adăugăm elementele / blur-urile care pot fi făcute clic și care alcătuiesc cuprinsul nostru. Pentru a face acest lucru, vom folosi și module blurb.

Adăugați articolul # 1 Blurb

Adăugați un nou modul Blurb sub titlul Blurb.

Conținut Blurb

Deschideți setările de blurb și scoateți conținutul implicit al corpului, astfel încât doar titlul să fie vizibil. Titlul este locul unde veți adăuga blocul de text care corespunde secțiunii / titlului pe care dorim să îl legăm pentru a afla mai jos mesajul.

Apoi actualizați conținutul cu pictograma săgeată dreapta de pe desktop.

Implementați opțiunea de deplasare pentru pictogramă și schimbați pictograma cu săgeata în jos pe plimbare. Aceasta va fi o micro-interacțiune frumoasă, subliniază că linkul va derula până la o locație în josul postului.

Blurb Design

Acum putem proiecta modulul blurb oricum dorim. Pentru acest exemplu, să actualizăm setările de blurb după cum urmează:

• Culoare pictogramă: # b856c7
• Pictogramă cerc: DA
• Culoarea cercului: #ffffff
• Afișați marginea cercului: DA
• Culoarea chenarului cercului: # b856c7
• Plasare imagine / pictogramă: stânga
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 16 px
• Dimensiune text text: 16 px
• Înălțimea liniei de titlu: 2em
• Lățimea conținutului: 100%
• Marja: 118px stânga
• Căptușeală: partea superioară de 10 px
• Căptușeală (hover): 10 px stânga

Dublu duplicat pentru mai multe articole

Acum, după ce primul nostru element blurb este terminat, îl putem duplica de câte ori este nevoie, în funcție de numărul de linkuri pe care dorim să le includem în postare. Deocamdată, să îl dublăm de două ori pentru a crea un total de trei elemente pentru cuprinsul nostru.

Adăugarea adreselor URL de ancorare

În acest moment, elementele noastre de blurb nu pot fi făcute clic, așa că trebuie să adăugăm adresele URL de legătură de ancorare necesare la fiecare dintre ele. Adresa URL a legăturii de ancorare începe întotdeauna cu un hashtag (#) urmat de orice ID doriți să includeți.

Anchor Link #one

Pentru simplitate, vom adăuga link-ul de ancorare „#one” la prima blurb din listă. Pentru a face acest lucru, deschideți setările pentru primul modul de blurb din listă (nu blurbul de titlu) și actualizați următoarele:

• Adresă URL a modulului: #one

Anchor Link #two

Apoi deschideți setările celui de-al doilea element blurb și adăugați următorul link:

• Adresă URL a modulului: #two

Anchor Link #three

În cele din urmă, adăugați următorul link la al treilea element blurb:

• Adresă URL a modulului: #three

Strângerea spațiului

Setări rând

În acest moment, există un pic prea mult spațiu între elementele rândului nostru. Pentru a remedia acest lucru, deschideți setările rândului și actualizați lățimea jgheabului și căptușeala după cum urmează:

• Lățimea jgheabului: 1
• Lățime: 100%
• Căptușeală: 0 px sus, 0 px jos

Setări secțiune

Să scoatem și capitonarea secțiunii. Deschideți setările secțiunii și actualizați următoarele:

• Căptușeală: 0 px sus, 0 px jos

Salvați aspectul

Am terminat cu proiectarea cuprinsului nostru. Asigurați-vă că salvați și ieșiți din editorul de aspect.

Acum ar trebui să vedeți noul dvs. cuprins în editorul de blocuri implicit.

Adăugarea ancorelor HTML la titlurile postărilor

Am adăugat adresele URL ale legăturilor de ancorare la fiecare dintre elementele care conțin elementele din cuprinsul nostru. Acum trebuie să adăugăm ID-ul CSS corespunzător (sau Ancora HTML) la blocurile de titlu aflate mai jos în post.

HTML Anchor one

Faceți clic pe blocul care conține primul antet la care doriți să legați / săriți. Apoi deschideți setările pentru acel bloc. Sub comutarea Opțiuni avansate, adăugați „una” în caseta de introducere HTML Anchor:

Ancoră HTML: una

Amintiți-vă, primul nostru articol blurb are adresa URL „#one” care va face legătura cu acesta. Dar nu adăugați hashtagul la această ancoră HTML. Nu este necesar.)

HTML Ancora doi

Apoi, selectați al doilea bloc de titlu și actualizați următoarele:

• Ancoră HTML: două

HTML Ancora trei

Și, în cele din urmă, selectați al treilea bloc de titlu și adăugați Ancora HTML după cum urmează:

• Ancoră HTML: trei

Rezultat final

Să vedem rezultatul final pe postarea live.

Iată cum vor funcționa legăturile de ancorare. Observați efectul de deplasare pe pictograme și modul în care legătura derulează ușor către ancora corespunzătoare de sub pagină.

Adăugarea cuprinsului ca un bloc de aspect reutilizabil

Dacă doriți să utilizați în continuare acest bloc de aspect ca șablon pentru postările viitoare, ar fi o idee bună să salvați blocul de aspect ca un bloc de aspect reutilizabil. Acest lucru vă va permite să adăugați cu ușurință un bloc „cuprins” din lista încorporată de blocuri.

Pentru a face acest lucru, faceți clic pe Divi Layout Block care conține cuprinsul și deschideți meniul pentru mai multe setări. Apoi selectați „Adăugați la blocurile de aspect reutilizabile”.

Introduceți un nume pentru blocul reutilizabil („Cuprins”) și faceți clic pe salvare.

Acum veți avea blocul disponibil în lista Blocuri reutilizabile atunci când adăugați un bloc nou la postare.

Acum, blocul de aspect servește ca un șablon convenabil pentru construirea unui cuprins pentru postarea dvs. Nu uitați să convertiți blocul într-un bloc de aspect obișnuit înainte de a-l personaliza pentru o anumită postare. Nu doriți să modificați blocul de aspect reutilizabil.

Pentru a face acest lucru, deschideți meniul cu mai multe setări ale blocului de aspect reutilizabil și selectați „Convertiți în bloc normal”.

Gânduri finale

Sper că acest cuprins al blocului de aspect Divi se dovedește a fi util pentru acele postări care sunt suficient de lungi pentru a avea nevoie de ele. Dacă sunteți interesat să faceți acest lucru în mod dinamic pentru dvs. (cum ar fi construirea unui cuprins pentru dvs. în funcție de titlurile unei postări), există pluginuri, cum ar fi Table of Contents Plus, care fac acest lucru pentru dvs. Această postare este pentru cei cărora le place să proiecteze cu Divi și nu se deranjează să construiască cuprinsul pe bază de post cu post.

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

Noroc!