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

Ar trebui să adăugați liste la conținutul dvs. ori de câte ori trebuie să prezentați informații într-un format structurat, ușor de scanat. Cheia este să alegeți tipul corect de listă pentru conținutul dvs.

Folosiți o listă numerotată atunci când ordinea elementelor este importantă. Aceasta este ideală pentru tutoriale pas cu pas, clasamente top 10 sau orice proces care urmează o secvență specifică.

Folosiți o listă cu marcatori atunci când ordinea elementelor nu contează. Acest lucru este excelent pentru listarea caracteristicilor produsului, exemplelor sau unui grup de idei conexe.

Utilizarea corectă a listelor ajută vizitatorii să înțeleagă conținutul dvs. dintr-o privire, chiar dacă informațiile sunt complexe. Acest lucru îmbunătățește experiența utilizatorului și poate menține oamenii pe site-ul dvs. 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)

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

Acest lucru vă permite să creați liste simple numerotate sau cu marcatori, 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 widgeturi, 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 marcatori, 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ă”. Acesta mută cursorul un pas spre dreapta, pregătit 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.

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

Puteți, de asemenea, să adăugați linkuri sau să utilizați 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 „Actualizează” sau „Publică” 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, instalați pluginul WordPress din zona dvs. de administrare. După aceea, creați o nouă postare sau editați 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 utiliza 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ă introduceți icon_color="#008000". Puteți afla mai multe despre găsirea culorilor potrivite în articolul nostru despre cum să găsiți schema de culori perfectă pentru site-ul dvs. WordPress.

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

Iată cum arată codul nostru acum:

Când sunteți mulțumit de aspectul listei, puteți fie să faceți clic pe butonul „Actualizează” sau „Publică” pentru a o face live pe blogul sau site-ul dvs. WordPress.

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 stilizare personalizată, atunci ați putea dori să utilizați SeedProd.

Această temă WordPress avansată și pluginul page builder vă permit să creați pagini proiectate profesional folosind un editor simplu 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, facilitează proiectarea paginilor 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 SeedProd.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați SeedProd. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați 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 în diferite categorii, cum ar fi șabloane de pagină 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 puteți modifica după cum doriți. De exemplu, adăugarea de cuvinte cheie relevante la un URL îmbunătățește adesea SEO WordPress și ajută pagina să apară în rezultatele relevante ale căutării.

Pentru a afla mai multe, consultați ghidul nostru despre cum să faceți cercetare de cuvinte cheie pentru blogul dvs. 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 element de listă, dar are o bibliotecă încorporată de fonturi cu pictograme, care include 1400 de pictograme Font Awesome pe care le puteți utiliza î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, este posibil 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 lista să iasă cu adevărat în evidență, puteți chiar adăuga o umbră de casetă 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 pe site-ul dumneavoastră.

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

Puteți, de asemenea, să creați liste utilizând editorul de cod WordPress încorporat și HTML.

Deși editorul de blocuri este mai ușor, utilizarea editorului de cod vă oferă un control precis asupra structurii HTML, ceea ce poate fi util pentru depanare sau pentru a lipi liste complexe, pre-formatate.

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 puteți vedea în imaginea următoare, acest lucru creează o listă foarte simplă, dar o puteți personaliza adăugând alt HTML, cum ar fi etichete 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 -->

Întrebări frecvente despre adăugarea de puncte și liste numerotate în WordPress

Iată câteva întrebări pe care cititorii noștri le-au adresat frecvent cu privire la adăugarea de puncte și liste numerotate în WordPress:

Cum creezi o listă cu puncte și numerotare?

Poți crea o listă mixtă folosind butonul „Indentează”. Începe o listă numerotată și, când vrei să adaugi un sub-element cu puncte, pur și simplu apasă butonul „Indentează” din bara de instrumente. Acest lucru va crea un punct imbricat sub elementul tău numerotat.

Care este scurtătura pentru puncte în WordPress?

Scurtătura principală de la tastatură pentru a începe o listă cu puncte în editorul de blocuri WordPress este să tastezi un asterisc (*) urmat de bara de spațiu. Pentru o listă numerotată, tastează 1. urmat de bara de spațiu.

Cum poți face o listă numerotată a) dl b) ol c) list d) ul?

Poți face o listă numerotată folosind opțiunea (b), eticheta <ol> în HTML. „ol” înseamnă „ordered list” (listă ordonată), care este folosită atunci când secvența elementelor este importantă. Eticheta <ul> este folosită pentru liste neordonate (cu puncte).

Este mai bine să folosești liste sau div-uri?

Este întotdeauna mai bine să folosești etichete de listă corespunzătoare (cum ar fi <ul> sau <ol>) pentru conținutul listei, în loc de etichete <div>. Etichetele de listă oferă semnificație semantică, ceea ce este crucial pentru SEO și pentru instrumentele de accesibilitate, cum ar fi cititoarele de ecran, pentru a înțelege structura conținutului tău.

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați puncte și liste numerotate în WordPress. De asemenea, este posibil să doriți să aflați cum să adăugați colaborare în editorul de blocuri WordPress și selecțiile noastre experte ale celor mai bune pluginuri de blocuri Gutenberg pentru WordPress.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.