Hur man enkelt lägger till punktlistor & numrerade listor i WordPress

Att skapa välorganiserat innehåll med punktlistor och numrerade listor kan verka grundläggande, men vi har upptäckt att många användare kämpar med att få dem att se precis rätt ut. 📋

Efter att ha utforskat olika formateringsmetoder i blockredigeraren har vi upptäckt de enklaste sätten att skapa rena, konsekventa listor.

Genom omfattande tester i våra demonstrationsmiljöer har vi identifierat flera metoder för att lägga till och styla listor i WordPress, från enkla punktlistor till anpassade listor.

Det som är bra är att du inte behöver några kodningskunskaper för att få dina listor att se professionella ut.

I den här nybörjarvänliga guiden visar vi dig exakt hur du lägger till och formaterar punktlistor och numrerade listor i WordPress.

När man ska lägga till punktlistor och numrerade listor i WordPress

Du bör lägga till listor i ditt innehåll närhelst du behöver presentera information i ett strukturerat, lättöverskådligt format. Nyckeln är att välja rätt typ av lista för ditt innehåll.

Använd en numrerad lista när ordningen på objekten är viktig. Detta är idealiskt för steg-för-steg-handledningar, topp 10-listor eller någon process som följer en specifik sekvens.

Använd en punktlista när ordningen på objekten inte spelar någon roll. Detta är utmärkt för att lista produktfunktioner, exempel eller en grupp relaterade idéer.

Att använda listor korrekt hjälper besökare att förstå ditt innehåll med en blick, även om informationen är komplex. Detta förbättrar användarupplevelsen och kan få folk att stanna kvar på din WordPress-webbplats längre.

Med det i åtanke, låt oss se hur du kan lägga till punktlistor och numrerade listor i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Method 1: Using the Built-in WordPress List Block (Easy)
• Metod 2: Använda Shortcodes Ultimate (Listor med anpassade ikoner)
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• Vanliga frågor om att lägga till punktlistor och numrerade listor i WordPress

Metod 1: Använda det inbyggda WordPress-listblocket (enkelt)

Det enklaste sättet att lägga till punktlistor och numrerade listor är att använda List-blocket och WordPress Gutenberg-blockredigerare.

Detta gör att du kan skapa enkla numrerade eller punktlistor utan att installera ett separat WordPress-plugin. Med det sagt har detta standardblock bara några få anpassningsalternativ.

Om du vill finjustera dina listor med anpassade ikoner, horisontella layouter, olika färger och mer, rekommenderar vi att du använder en av de andra metoderna i den här artikeln.

För att komma igång, öppna helt enkelt blockredigeraren för WordPress-inlägget eller sidan där du vill lägga till en lista. Eller så kan du öppna widgetredigeraren för att lägga till punktlistan i ett widgetområde, som en sidofält.

Du kan sedan välja om du vill skapa en punktlista eller en numrerad lista.

Hur man skapar en punktlista i WordPress

För att skapa en punktlista klickar du på '+' ikonen för att lägga till ett nytt WordPress-block.

I popup-fönstret som visas, skriv in 'List.'

När rätt block visas, klicka för att lägga till det på sidan.

Detta skapar det första objektet i en punktlista. Skriv helt enkelt in den text du vill använda för det första listobjektet.

När det är gjort, tryck på 'Enter'-tangenten på ditt tangentbord för att gå till nästa rad. WordPress kommer automatiskt att skapa den andra punktlistan.

Du kan nu fortsätta och skriva in den text du vill använda för den andra punkten. Upprepa helt enkelt dessa steg för att lägga till fler objekt i listan.

Om du vill skapa en nästlad lista, klicka på knappen 'Indrag'. Detta flyttar markören ett steg åt höger, redo för dig att skriva in den indragna texten.

Du kan klicka på knappen 'Indrag' igen för att skapa två nivåer av nässlade punkter.

Som du kan se på följande bild använder varje nivå en annan ikon.

För att minska indraget, klicka på knappen ‘Outdent’.

Detta flyttar markören ett steg åt vänster, redo för dig att börja skriva.

Genom att trycka på knapparna 'Indrag' och 'Utöka indrag' kan du skapa kapslade listor med flera olika nivåer.

Som standard använder WordPress blockredigerare teckensnittsstorleken ‘Medium’, men du kan växla mellan liten, stor och extra stor med hjälp av inställningarna för ‘Typografi’ i blockalternativen till höger.

Du kan också lägga till länkar eller använda standardtextformateringsalternativ, som fetstil och kursiv stil. Detta gör dina listor ännu enklare att skanna och förstå med en blick.

Hur man skapar en numrerad lista i WordPress

För att skapa en numrerad lista i WordPress, tryck helt enkelt på tangenten '1' på ditt tangentbord följt av en punkt (.)

WordPress kommer automatiskt att omvandla denna text till det första objektet i en numrerad lista.

Du är nu redo att skriva det första objektet i den numrerade listan.

Efter det, tryck bara på 'Retur'-tangenten på ditt tangentbord, så skapar WordPress nästa numrerade punkt automatiskt.

Precis som med punktlistor kan du skapa nästlade listor genom att klicka på knapparna 'Indrag' och 'Utan indrag'.

Detta skapar en indragen punkt under den numrerade punkten.

Till skillnad från punktlistor kan du bara använda en enda nivå av indrag.

När du är nöjd med hur listan ser ut, klickar du helt enkelt på knappen 'Uppdatera' eller 'Publicera' för att göra den live på din WordPress-webbplats.

Metod 2: Använda Shortcodes Ultimate (Listor med anpassade ikoner)

Det inbyggda List-blocket är perfekt för att skapa textbaserade listor, men ibland kanske du vill skapa en lista med anpassade ikoner. På så sätt kan du göra dina listor mer visuellt tilltalande och bättre anpassade till ditt innehags tema.

Det enklaste sättet att göra detta är att använda Shortcodes Ultimate. Detta plugin låter dig skapa listor med anpassade ikoner med hjälp av enkla kortkoder.

För detta kommer vi att använda gratisversionen av pluginet eftersom den redan räcker för denna metod. Men om du vill ha mer avancerade funktioner kan du uppgradera till en betald plan.

För att använda Shortcodes Ultimate, fortsätt och installera WordPress-pluginet i ditt adminområde. Därefter, skapa ett nytt inlägg eller redigera ett befintligt i blockredigeraren.

Klicka nu på ‘+’-knappen var som helst på sidan och välj blocket ‘Shortcode’.

I det här skedet, fortsätt och klistra in kortkoden nedan i blocket:

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

Denna kortkod kommer att visa tre punktlistobjekt med gula stjärnikoner, så här:

För att anpassa ikonen och färgen kan du gå till webbplatsen Fork Awesome. Det är här du ser alla ikoner du kan använda för dina punktlistor. Leta helt enkelt efter en ikon du vill använda.

Till exempel kommer vi att använda ikonen 'flagga'. Kopiera nu ikonens namn och gå tillbaka till blockredigeraren.

Väl där, ersätt bara star med den. Så istället för icon: star, kommer vi att använda icon: flag.

För att ändra färgen, ersätt HEX-koden i icon_color="#ffde0f" med HEX-koden för din önskade färg.

Så om du vill göra ikonen grön, måste du skriva in icon_color="#008000". Du kan lära dig mer om hur du hittar rätt färger i vår artikel om hur du hittar det perfekta färgschemat för din WordPress-webbplats.

Glöm nu inte att ersätta List item med din egen text.

Här är hur vår kod ser ut nu:

När du är nöjd med hur listan ser ut kan du antingen klicka på knappen 'Uppdatera' eller 'Publicera' för att göra den live på din WordPress-blogg eller webbplats.

Så här ser listan ut på framsidan:

Metod 3: Använda ett sidbyggarplugin (bäst för landningssidor)

Om du vill skapa vackra listor med anpassad styling, kanske du vill använda SeedProd.

Detta avancerade WordPress-tema och sidbyggarplugin låter dig skapa professionellt designade sidor med en enkel dra-och-släpp-redigerare.

Den levereras också med ett färdigt List-block som låter dig finjustera varje del av listans design, inklusive att ändra utrymmet mellan enskilda objekt, ersätta standardpunktlistan med anpassade ikoner och mer.

Dessutom gör det det enkelt att designa fristående sidor som har en unik design, så detta är också ett utmärkt val om du vill lägga till listor på en anpassad startsida eller landningssida.

Vi har grundligt testat verktyget och funnit att det är extremt nybörjarvänligt. För att lära dig mer, se vår SeedProd-recension.

Det första du behöver göra är att installera och aktivera SeedProd. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering måste du ange din licensnyckel.

Du hittar denna information i ditt konto på SeedProd-webbplatsen. Efter att ha lagt till licensnyckeln, klicka helt enkelt på 'Verifiera nyckel'.

Välj en professionellt utformad mall

Gå sedan till SeedProd » Landningssidor och klicka på 'Lägg till ny landningssida.'

På nästa skärm kommer du att bli ombedd att välja en mall.

SeedProd kommer med över 300 vackra mallar som är organiserade i olika kategorier, såsom 404-sidmallar och anpassade WooCommerce 'tack'-sidor.

Klicka bara på en flik för att se de olika mallarna inom den kategorin.

När du hittar en mall du vill använda, för muspekaren över den och klicka sedan på bockikonen.

Vi använder mallen 'Explosive Growth Webinar' i alla våra bilder, men du kan använda vilken design du vill.

Därefter behöver du ge sidan en titel.

SeedProd skapar automatiskt en URL baserad på sidtiteln, men du kan ändra detta till vad du vill. Till exempel förbättrar tillägg av relevanta nyckelord till en URL ofta din WordPress SEO och hjälper sidan att visas i relevanta sökresultat.

För att lära dig mer, se vår guide om hur man gör nyckelordsanalys för din WordPress-blogg.

När du är nöjd med titeln och URL:en klickar du bara på ‘Spara och börja redigera sidan.’

Bygg din anpassade sidlayout

SeedProd kommer nu att öppna din mall i dess dra-och-släpp-redigerare. Till höger ser du en liveförhandsgranskning av sidans design, med vissa inställningar till vänster.

SeedProd levereras med massor av block som du kan lägga till i din design, inklusive block som låter dig lägga till sociala delningsknappar, videor, kontaktformulär och mer.

För mer information, se vår guide om hur man skapar en anpassad sida i WordPress.

För att lägga till en lista i din design, hitta blocket 'List' och dra det till sidan.

Detta lägger till en vertikal lista på din sida med en platshållare för ‘Artikel 1.’

Om du vill skapa en horisontell lista istället, klicka sedan på fliken 'Advanced' och välj sedan knappen 'Horizontal'.

Du är nu redo att börja bygga din lista genom att välja fliken 'Innehåll'.

För att ersätta standardtexten med ditt eget meddelande, klicka på 'Objekt 1' i menyn till vänster.

Du kan nu skriva ditt listobjekt i den lilla textredigerare som visas.

Här kan du också tillämpa all formatering du vill använda, som fetstil eller kursiv stil.

Som standard använder SeedProd en bock för varje punkt, men det har ett inbyggt bibliotek av ikonfonter, som inkluderar 1400 Font Awesome-ikoner som du kan använda istället.

För att ersätta kryssmarkeringen, för bara muspekaren över den och klicka sedan på 'Ikonbibliotek' när det visas.

Detta öppnar ett popup-fönster där du kan välja den ikon du vill använda istället.

Du kan använda olika ikoner för enskilda punkter inom listan, så detta är ett utmärkt sätt att skapa mer intressanta och iögonfallande listor.

För att skapa fler punktlistor, klicka helt enkelt på knappen 'Lägg till nytt objekt'.

Du kan nu lägga till text och ändra standardikonen genom att följa exakt samma process som beskrivs ovan.

Efter att ha lagt till alla objekt i din lista kan du ändra teckenstorlek och justering med hjälp av inställningarna i menyn till vänster.

Du kan också öka eller minska utrymmet mellan de enskilda listobjekten med reglaget 'Utrymme mellan'.

Därefter kanske du vill ändra färgen på ikonerna i listan. Även om du använder olika ikoner, kommer SeedProd att tillämpa samma färg på varje objekt så att designen alltid ser konsekvent ut.

För att göra denna ändring, klicka på området ‘Ikonfärg’ och välj sedan en ny färg från popup-fönstret som visas.

När det är gjort kanske du vill klicka på ‘Avancerat’ och titta på ytterligare inställningar. Vi har redan sett hur du kan växla mellan vertikala och horisontella listlayouter, men du kan också ändra textfärg och teckensnitt.

För att verkligen få din lista att sticka ut kan du till och med lägga till en skuggbox eller CSS-animation.

De flesta inställningarna i fliken 'Avancerat' är ganska självförklarande, så det är värt att utforska dem för att se vilka effekter du kan skapa.

När det är gjort kan du fortsätta att arbeta med din sidlayout genom att lägga till fler block och sedan anpassa dem med hjälp av inställningarna i menyn till vänster.

När du är nöjd med hur sidan ser ut, klickar du bara på rullgardinsmenyn på knappen 'Spara' och väljer 'Publicera'.

Du kan nu besöka den här sidan för att se listan live på din webbutik eller webbplats.

Metod 4: Använda kod för att lägga till punktlistor och numrerade listor (Avancerat)

Du kan också skapa listor med den inbyggda WordPress-kodredigeraren och HTML.

Medan blockredigeraren är enklare, ger kodredigeraren dig exakt kontroll över HTML-strukturen, vilket kan vara användbart för felsökning eller för att klistra in komplexa, förformaterade listor.

För mer om detta ämne, se vår guide om hur man redigerar HTML i WordPress kodredigerare.

För att komma igång, öppna sidan eller inlägget där du vill visa listan. Klicka sedan på ikonen med tre punkter i det övre högra hörnet och välj 'Kodredigerare'.

Nästa steg varierar beroende på om du vill lägga till en punktlista eller en numrerad lista.

Hur man skapar en punktlista med kod

För att skapa en punktlista, börja med att skriva följande:

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

ul står för 'unordered list' (numrerad lista), vilket innebär att listan inte har några nummer, och wp:list talar om för WordPress att du skapar ett Listblock manuellt.

Tryck sedan på 'Retur'-tangenten för att gå till en ny rad och skapa ditt första listobjekt:

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

Här står li för 'list item' (listobjekt), och vi avslutar raden med /li.

Du kan upprepa denna process för att skapa fler listobjekt. Till exempel:

<!-- 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 -->

När du är klar, stäng kodblocket med en annan flagga för 'oordnad lista':

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

Detta ger oss följande listkod:

<!-- 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 -->

Som du kan se i följande bild skapar detta en mycket enkel lista, men du kan anpassa den genom att lägga till annan HTML, som t.ex. rubrik-taggar.

Hur man skapar en numrerad lista med kod

För att skapa en numrerad lista, skriv helt enkelt följande:

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

Du kan sedan skriva in ol vilket står för ordnad lista:

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

Lägg sedan till varje listobjekt genom att följa samma process som beskrivs ovan:

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

Slutligen, stäng den numrerade listan med en /ol-tagg och 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 -->

Vanliga frågor om att lägga till punktlistor och numrerade listor i WordPress

Här är några frågor som våra läsare ofta har ställt om att lägga till punktlistor och numrerade listor i WordPress:

Hur skapar man en lista med punkter och numrering?

Du kan skapa en blandad lista genom att använda knappen 'Indrag'. Börja en numrerad lista, och när du vill lägga till ett punktlist-underobjekt, klickar du helt enkelt på knappen 'Indrag' i verktygsfältet. Detta skapar en nästlad punktlista under ditt numrerade objekt.

Vilken är genvägen för punktlistor i WordPress?

Huvudgenvägen för att starta en punktlist i WordPress blockredigerare är att skriva en asterisk (*) följt av mellanslagstangenten. För en numrerad lista, skriv 1. följt av mellanslagstangenten.

Hur kan du göra en numrerad lista a) dl b) ol c) list d) ul?

Du kan göra en numrerad lista med alternativ (b), HTML-taggen <ol>. 'ol' står för "ordered list" (numrerad lista), som används när ordningen på objekten är viktig. Taggen <ul> används för oordnade (punktlistor).

Är det bättre att använda listor eller divs?

Det är alltid bättre att använda korrekta listtaggar (som <ul> eller <ol>) för listinnehåll istället för <div>-taggar. Listtaggar ger semantisk mening, vilket är avgörande för SEO och för hjälpmedel som skärmläsare för att förstå ditt innehålls struktur.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till punktlistor och numrerade listor i WordPress. Du kanske också vill lära dig hur du lägger till samarbete i WordPress blockredigerare och våra experters val av bästa Gutenberg-blockplugins för WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.