Cum să adăugați ușor puncte de marcator și liste numerotate în WordPress

Crearea de conținut bine organizat cu liste cu marcatori și liste numerotate poate părea de bază, dar am constatat că mulți utilizatori se luptă să le facă să arate exact așa cum trebuie. 📋

După explorarea diferitelor metode de formatare în editorul de blocuri, am descoperit cele mai ușoare moduri de a crea liste curate și consistente.

Prin testări extinse în mediile noastre de demonstrație, am identificat mai multe metode pentru adăugarea și stilizarea listelor în WordPress, de la simple puncte la liste personalizate.

Ceea ce este grozav este că nu aveți nevoie de cunoștințe de codare pentru a face ca listele dvs. să arate profesional.

În acest ghid prietenos pentru începători, vă vom arăta exact cum să adăugați și să formatați puncte și liste numerotate în WordPress.

Când să adăugați puncte și liste numerotate în WordPress

În loc să afișați vizitatorilor un zid de text, este o idee bună să vă împărțiți conținutul în secțiuni scanabile. Există multe modalități de a face paginile dvs. mai ușor de citit, inclusiv crearea de tabele, utilizarea de subtitluri, adăugarea de videoclipuri și crearea de liste.

O listă poate ajuta vizitatorii să înțeleagă conținutul dintr-o privire (cum ar fi într-un cuprins), chiar dacă împărtășești informații complicate. Acest lucru poate îmbunătăți experiența utilizatorului și poate menține oamenii pe site-ul tău WordPress mai mult timp.

Având în vedere acest lucru, să vedem cum puteți adăuga puncte și liste numerotate în WordPress. Pur și simplu utilizați linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1: Utilizarea blocului listă încorporat WordPress (Ușor)
• Metoda 2: Folosind Shortcodes Ultimate (Liste cu pictograme personalizate)
• Metoda 3: Utilizarea unui plugin de Page Builder (Cel mai bun pentru pagini de destinație)
• Metoda 4: Utilizarea codului pentru a adăuga puncte și liste numerotate (Avansat)

Metoda 1: Utilizarea blocului listă încorporat WordPress (Ușor)

Cel mai simplu mod de a adăuga puncte și liste numerotate este prin utilizarea blocului Listă și a editorului de blocuri WordPress Gutenberg.

Acest lucru îți permite să creezi liste simple numerotate sau cu puncte fără a instala un plugin WordPress separat. Acestea fiind spuse, acest bloc implicit are doar câteva opțiuni de personalizare.

Dacă doriți să ajustați listele cu pictograme personalizate, aspecte orizontale, culori diferite și multe altele, vă recomandăm să utilizați una dintre celelalte metode din acest articol.

Pentru a începe, pur și simplu deschideți editorul de blocuri pentru postarea sau pagina WordPress unde doriți să adăugați o listă. Alternativ, puteți deschide editorul de widgeturi pentru a adăuga lista cu marcatori într-o zonă de widget, cum ar fi o bară laterală.

Puteți apoi alege dacă doriți să creați o listă cu marcatori sau o listă numerotată.

Cum să creați o listă cu puncte în WordPress

Pentru a crea o listă cu puncte, faceți clic pe pictograma „+” pentru a adăuga un nou bloc WordPress.

În fereastra pop-up care apare, tastați „Listă”.

Când apare blocul corect, faceți clic pentru a-l adăuga pe pagină.

Aceasta creează primul element dintr-o listă cu marcatori. Pur și simplu introduceți textul pe care doriți să îl utilizați pentru primul element al listei.

După ce ați terminat, apăsați tasta „Enter” de pe tastatură pentru a trece la linia următoare. WordPress va crea automat al doilea punct de pe listă.

Acum puteți continua și introduce textul pe care doriți să îl utilizați pentru al doilea punct. Pur și simplu repetați acești pași pentru a adăuga mai multe elemente la listă.

Dacă doriți să creați o listă imbricată, faceți clic pe butonul „Indentează”. Acest lucru mută cursorul cu un pas spre dreapta, gata pentru a introduce textul indentat.

Puteți face clic din nou pe butonul „Indentează” pentru a crea două niveluri de puncte imbricate.

După cum puteți vedea în imaginea următoare, fiecare nivel folosește o pictogramă diferită.

Pentru a reduce indentarea, faceți clic pe butonul „Outdent”.

Aceasta mută cursorul cu un pas spre stânga, gata pentru a începe să tastați.

Prin apăsarea butoanelor „Indentează” și „Dez-indentează”, puteți crea liste imbricate cu mai multe niveluri diferite.

În mod implicit, editorul de blocuri WordPress va folosi dimensiunea de font „Mediu”, dar puteți comuta între mică, mare și extra mare folosind setările „Tipografie” din opțiunile blocului din dreapta.

Puteți, de asemenea, adăuga linkuri sau utiliza opțiuni standard de formatare a textului, cum ar fi aldine și italice. Acest lucru face listele dvs. și mai ușor de scanat și de înțeles dintr-o privire.

Cum să creezi o listă numerotată în WordPress

Pentru a crea o listă numerotată în WordPress, pur și simplu apăsați tasta „1” de pe tastatură, urmată de un punct (.)

WordPress va transforma automat acest text în primul element dintr-o listă numerotată.

Acum sunteți gata să introduceți primul element din lista numerotată.

După aceea, apăsați pur și simplu tasta „Enter” de pe tastatură, iar WordPress va crea automat următorul punct numerotat.

La fel ca la punctele cu marcatori, puteți crea liste imbricate făcând clic pe butoanele „Indentează” și „Dez-indentează”.

Acest lucru creează un punct de marcator indentat sub punctul de marcator numerotat.

Spre deosebire de listele cu puncte, puteți folosi doar un singur nivel de indentare.

Când sunteți mulțumit de aspectul listei, pur și simplu faceți clic pe butonul „Actualizare” sau „Publicare” pentru a o face live pe site-ul dvs. WordPress.

Metoda 2: Folosind Shortcodes Ultimate (Liste cu pictograme personalizate)

Blocul Listă încorporat este perfect pentru crearea listelor bazate pe text, dar uneori, s-ar putea să doriți să creați o listă cu pictograme personalizate. Astfel, puteți face listele dvs. mai atrăgătoare vizual și mai potrivite temei conținutului dvs.

Cel mai simplu mod de a face acest lucru este prin utilizarea Shortcodes Ultimate. Acest plugin vă permite să creați liste cu pictograme personalizate folosind shortcode-uri simple.

Pentru aceasta, vom folosi versiunea gratuită a pluginului, deoarece este deja suficientă pentru această metodă. Dar dacă doriți funcționalități mai avansate, puteți face upgrade la un plan plătit.

Pentru a utiliza Shortcodes Ultimate, instalează pluginul WordPress în zona ta de administrare. După aceea, creează o postare nouă sau editează una existentă în editorul de blocuri.

Acum, faceți clic pe butonul „+” oriunde pe pagină și selectați blocul „Shortcode”.

În acest stadiu, continuă și lipește shortcode-ul de mai jos în bloc:

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

Acest shortcode va afișa trei elemente de listă cu marcatori și pictograme de stea galbenă, astfel:

Pentru a personaliza pictograma și culoarea, puteți accesa site-ul web Fork Awesome. Aici veți vedea toate pictogramele pe care le puteți folosi pentru listele dvs. cu marcatori. Aici, pur și simplu căutați o pictogramă pe care doriți să o utilizați.

De exemplu, vom folosi pictograma „steag”. Acum, copiați numele pictogramei și reveniți la editorul de blocuri.

Odată ajuns acolo, înlocuiți doar star cu acesta. Deci, în loc de icon: star, vom folosi icon: flag.

Pentru a schimba culoarea, înlocuiți codul HEX din icon_color="#ffde0f" cu codul HEX al culorii dorite.

Deci, dacă doriți să faceți pictograma verde, trebuie să tastați icon_color="#008000". Puteți afla mai multe despre cum să găsiți culorile potrivite în articolul nostru despre cum să găsești schema de culori perfectă pentru site-ul tău WordPress.

Acum, nu uitați să înlocuiți Element listă cu textul dvs.

Iată cum arată codul nostru acum:

Când ești mulțumit de aspectul listei, poți fie să dai clic pe butonul „Actualizare” sau „Publicare” pentru a o face live pe blogul tău WordPress sau pe site-ul web.

Aceasta este cum arată lista pe partea vizibilă a site-ului:

Metoda 3: Utilizarea unui plugin de Page Builder (Cel mai bun pentru pagini de destinație)

Dacă doriți să creați liste frumoase cu stil personalizat, atunci ați putea dori să utilizați SeedProd.

Această temă WordPress avansată și plugin de page builder vă permite să creați pagini proiectate profesional folosind un editor simplu de tip drag-and-drop.

De asemenea, vine cu un bloc Listă gata făcut, care vă permite să ajustați fin fiecare parte a designului listei, inclusiv modificarea spațiului dintre elementele individuale, înlocuirea marcatorilor standard cu pictograme personalizate și multe altele.

În plus, face ușor de proiectat pagini independente care au un design unic, deci aceasta este, de asemenea, o alegere excelentă dacă doriți să adăugați liste la o pagină de pornire personalizată sau la o pagină de destinație.

Am testat amănunțit instrumentul și am constatat că este foarte ușor de utilizat pentru începători. Pentru a afla mai multe, consultați recenzia noastră despre SeedProd.

Primul lucru pe care trebuie să-l faci este să instalezi și să activezi SeedProd. Pentru mai multe detalii, vezi ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

La activare, trebuie să introduceți cheia de licență.

Puteți găsi aceste informații în contul dvs. de pe site-ul SeedProd. După adăugarea cheii de licență, pur și simplu faceți clic pe „Verificare cheie”.

Alegeți un șablon proiectat profesional

După aceea, accesați SeedProd » Pagini de destinație și faceți clic pe „Adăugare pagină de destinație nouă”.

Pe ecranul următor, vi se va cere să alegeți un șablon.

SeedProd vine cu peste 300 de șabloane frumoase, organizate pe diferite categorii, cum ar fi șabloane pentru pagina 404 și pagini personalizate de mulțumire WooCommerce.

Pur și simplu faceți clic pe orice filă pentru a vedea șabloanele diferite din acea categorie.

Când găsești un șablon pe care vrei să-l folosești, plasează mouse-ul peste el și apoi apasă pe pictograma de bifă.

Folosim șablonul „Explosive Growth Webinar” în toate imaginile noastre, dar puteți folosi orice design doriți.

Apoi, trebuie să dați un titlu paginii.

SeedProd va crea automat un URL bazat pe titlul paginii, dar îl poți schimba cu orice dorești. De exemplu, adăugarea de cuvinte cheie relevante la un URL îmbunătățește adesea SEO-ul WordPress și ajută pagina să apară în rezultatele de căutare relevante.

Pentru a afla mai multe, vă rugăm să consultați ghidul nostru despre cum să faci cercetare de cuvinte cheie pentru blogul tău WordPress.

Când sunteți mulțumit de titlu și URL, faceți clic pe „Salvează și începe editarea paginii”.

Construiește-ți aspectul paginii personalizate

SeedProd va deschide acum șablonul în editorul său drag-and-drop. În dreapta, veți vedea o previzualizare live a designului paginii, cu unele setări în stânga.

SeedProd vine cu multe blocuri pe care le puteți adăuga la designul dvs., inclusiv blocuri care vă permit să adăugați butoane de partajare socială, videoclipuri, formulare de contact și multe altele.

Pentru mai multe informații, vă rugăm să consultați ghidul nostru despre cum să creați o pagină personalizată în WordPress.

Pentru a adăuga o listă la designul tău, găsește blocul 'Listă' și trage-l pe pagină.

Acest lucru adaugă o listă verticală pe pagina dvs. cu un element implicit „Element 1”.

Dacă vrei să creezi o listă orizontală în schimb, apasă pe fila 'Avansat' și apoi selectează butonul 'Orizontal'.

Acum sunteți gata să începeți să vă construiți lista selectând fila „Conținut”.

Pentru a înlocui textul implicit cu propriul mesaj, faceți clic pe „Element 1” din meniul din stânga.

Acum puteți introduce elementul listei în micul editor de text care apare.

Aici, puteți aplica și orice formatare doriți să utilizați, cum ar fi aldine sau italice.

În mod implicit, SeedProd folosește o bifă pentru fiecare punct de listă, dar are o bibliotecă încorporată de fonturi cu pictograme, care include 1400 de pictograme Font Awesome pe care le puteți folosi în schimb.

Pentru a înlocui bifa, pur și simplu treceți mouse-ul peste ea și apoi faceți clic pe „Biblioteca de pictograme” atunci când apare.

Aceasta deschide o fereastră pop-up unde puteți alege pictograma pe care doriți să o utilizați în schimb.

Puteți folosi pictograme diferite pentru punctele individuale din listă, deci acesta este un mod excelent de a crea liste mai interesante și mai atrăgătoare.

Pentru a crea mai multe elemente de listă, pur și simplu faceți clic pe butonul „Adăugare element nou”.

Acum puteți adăuga text și puteți schimba pictograma implicită urmând exact același proces descris mai sus.

După ce ați adăugat toate elementele la lista dvs., puteți modifica dimensiunea fontului și alinierea folosind setările din meniul din stânga.

Puteți, de asemenea, să măriți sau să micșorați spațiul dintre elementele individuale ale listei folosind glisorul „Spațiu între”.

După aceea, s-ar putea să doriți să schimbați culoarea pictogramelor din listă. Chiar dacă folosiți pictograme diferite, SeedProd va aplica aceeași culoare fiecărui element, astfel încât designul va arăta întotdeauna consecvent.

Pentru a face această modificare, faceți clic pe zona „Culoarea pictogramei” și apoi alegeți o nouă culoare din fereastra pop-up care apare.

După ce ați făcut acest lucru, s-ar putea să doriți să faceți clic pe „Avansat” și să examinați câteva setări suplimentare. Am văzut deja cum puteți comuta între aspectele listei verticale și orizontale, dar puteți, de asemenea, schimba culoarea textului și fontul.

Pentru a face cu adevărat lista dvs. să iasă în evidență, puteți chiar adăuga o umbră de cutie sau o animație CSS.

Majoritatea setărilor din fila „Avansat” sunt destul de explicite, așa că merită să le explorați pentru a vedea ce efecte puteți crea.

Cu aceasta făcută, puteți continua să lucrați la designul paginii dvs. adăugând mai multe blocuri și apoi personalizându-le folosind setările din meniul din stânga.

Când sunteți mulțumit de aspectul paginii, faceți clic pe meniul derulant de pe butonul „Salvează” și selectați „Publică”.

Acum puteți vizita această pagină pentru a vedea lista live pe magazinul online sau site-ul dvs.

Metoda 4: Utilizarea codului pentru a adăuga puncte și liste numerotate (Avansat)

Puteți crea liste și folosind editorul de cod încorporat WordPress și HTML.

Acest lucru este mai complicat, deci nu este cea mai bună metodă pentru începători. Cu toate acestea, vă permite să utilizați mai multe stiluri și formatări în blocul Listă încorporat. De exemplu, puteți adăuga rapid și ușor stiluri de antet la elementele listei folosind etichete precum h1 și h2.

Pentru mai multe informații despre acest subiect, consultați ghidul nostru despre cum să editați HTML în editorul de cod WordPress.

Pentru a începe, deschideți pagina sau postarea unde doriți să afișați lista. Apoi, faceți clic pe pictograma cu trei puncte din colțul din dreapta sus și selectați „Editor cod”.

Pașii următori vor varia în funcție de dacă doriți să adăugați o listă cu marcatori sau o listă numerotată.

Cum să creați o listă cu marcatori folosind cod

Pentru a crea o listă cu marcatori, începeți prin a tasta următoarele:

<!-- wp:list -->
<ul>

ul înseamnă 'listă neordonată', ceea ce înseamnă că lista nu are numere, iar wp:list îi spune WordPress-ului că creezi manual un bloc Listă.

Apoi, apăsați tasta „Enter” pentru a trece la o linie nouă și a crea primul element al listei:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Aici, li înseamnă 'element de listă', iar linia se închide cu /li.

Poți repeta acest proces pentru a crea mai multe elemente de listă. De exemplu:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Când ați terminat, închideți blocul de cod cu un alt indicator „listă neordonată”:

</ul>
<!-- /wp:list -->

Acest lucru ne oferă următorul cod de listă:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

După cum poți vedea în imaginea următoare, aceasta creează o listă foarte simplă, dar o poți personaliza adăugând alte elemente HTML, cum ar fi taguri de antet.

Cum să creezi o listă numerotată folosind cod

Pentru a crea o listă numerotată, tastați pur și simplu următoarele:

<!-- wp:list {"ordered":true} -->

Apoi puteți tasta ol, care înseamnă listă ordonată:

<!-- wp:list {"ordered":true} -->
<ol>

După aceea, adaugă fiecare element al listei urmând același proces descris mai sus:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

În cele din urmă, închideți lista ordonată folosind o etichetă /ol și wp:list.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați puncte și liste numerotate în WordPress. S-ar putea să doriți, de asemenea, să învățați cum să adaugi colaborare în editorul de blocuri WordPress și selecțiile noastre experte de cele mai bune pluginuri de blocuri Gutenberg pentru WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.