Så här addar du enkelt till punktlistor och numrerade listor i WordPress

Vill du lägga till punktlistor och numrerade listor i WordPress?

Att dela upp din text i listor kan göra den mer lättläst. De är också ett bra sätt att dela med sig av Step-by-Step-instruktioner eller komplicerade data till dina besökare. Ibland kan search engines till och med ge högre ranking till pages som använder listor.

I den här artikeln visar vi hur du enkelt kan add to punktlistor och numrerade listor i WordPress med customize styles.

När ska man add to punktlistor och numrerade listor i WordPress

Istället för att visa besökarna en vägg av text är det en bra idé att dela upp ditt content i skanningsbara sections. Det finns många sätt att göra dina pages mer läsarvänliga, till exempel genom att skapa tabeller, använda subheadings, lägga till videoklipp och skapa listor.

En lista kan hjälpa besökare att förstå ditt content på ett ögonblick (gillar en innehållsförteckning), även om du delar komplicerad information. Detta kan förbättra användarupplevelsen och få folk att stanna kvar längre på din WordPress website.

De är också perfekta för att skapa att-göra-listor eller dela Step-by-Step-instruktioner med dina besökare. Du kan till exempel göra om ett recept till en numrerad lista på din blogg om mat.

Med detta i åtanke, låt oss se hur du kan add to punktlistor och numrerade listor i WordPress. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

Metod 1: Använda det inbyggda WordPress List Block (Lätt)

Det enklaste sättet att add to punktlistor och numrerade listor är att använda List-blocket och WordPress Gutenberg block editor.

Detta allow you att skapa enkla numrerade eller punktlistor utan att installera ett separat plugin för WordPress. Detta standard block har dock endast ett fåtal alternativ för customize.

Om du vill finjustera dina listor med custom icons, horisontella layouts, olika färger och mer, rekommenderar vi att du använder någon av de andra metoderna i den här artikeln.

För att komma igång öppnar du helt enkelt Block Editor för det WordPress post eller page där du vill add to en lista. Eller så kan du öppna widget editor för att add punktlistan till ett widget area, som gillar en sidebar.

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

Så här skapar du en punktlista i WordPress

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

I popupen som visas skriver du in ”List”.

När rätt block visas klickar du på det för att add to the page.

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

När detta är gjort trycker du på ”Enter” på ditt tangentbord för att gå vidare till nästa rad. WordPress kommer att skapa den andra punktlistan automatiskt.

Du kan nu gå vidare och skriva in den text du vill använda för den andra punkten. Upprepa bara dessa steg för att add to fler objekt till listan.

Om du vill skapa en nästlad lista klickar du på knappen ”Indent”. Markören flyttas ett steg åt höger, så att du kan skriva in den indragna texten.

You can click on the ”Indent” button again to create two levels of nested bullet points.

Som du kan se i följande image använder varje nivå en annan icon.

Om du vill minska indraget klickar du på knappen ”Outdent”.

Detta flyttar markören ett steg till vänster, så att du kan börja skriva.

Genom att trycka på knapparna ”Indent” och ”Outdent” kan du skapa nästlade listor med flera olika nivåer.

Som standard kommer WordPress Block Editor att använda fontstorleken”Medium”, men du kan växla mellan små, stora och extra stora med hjälp av inställningarna ”Typografi” i de högra blockalternativen.

You can also add links or use standard text formatting options, such as bold and italic. På så sätt blir dina listor ännu enklare att läsa och förstå klarsynt.

Så här skapar du en numrerad lista i WordPress

För att skapa en numrerad lista i WordPress trycker du bara på ”1”-tangenten på ditt tangentbord följt av en punkt/full stopp (.)

WordPress gör automatiskt denna text till det första objektet i en numrerad lista.

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

Därefter trycker du bara på ”Return”-tangenten på ditt tangentbord, så skapar WordPress automatiskt nästa numrerade punkt.

Precis som med punktlistor kan du skapa nästlade listor genom att clicka på knapparna ”Indent” och ”Outdent”.

Detta skapar en indragen punkt under den numrerade punkten.

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

När du är nöjd med hur listan ser ut klickar du bara på knappen ”Update” eller ”Publicera” för att göra den live på din WordPress website.

Metod 2: Använda tillägget Super List Block WordPress (Skapa multimedielistor)

Det built-in List-blocket är perfekt för att skapa textbaserade listor, men ibland kanske du vill inkludera annat content. You kanske till exempel vill skapa en pristabell med utvalda images, text och en call-to-action knapp.

Det enklaste sättet att göra detta är att använda Super List Block. Detta gratis plugin lägger till ett new block som allow you att använda alla WordPress block i your lists.

Du kan även skapa multimediala punktlistor genom att lägga till flera block i ett enda listobjekt. I Följer bild använder vi ett Paragraph och Image block i varje listobjekt.

Super List Block allow you också att växla mellan vertikala och horisontella liststilar och skapa ”no marker”-listor som inte har en bullet point icon eller ett nummer.

Först måste du installera och aktivera pluginet Super List Block. Om du behöver hjälp, vänligen se vår guide för nybörjare om hur man installerar ett plugin för WordPress.

Därefter går du till den page eller post där du vill add to en lista. Click on the ”+” icon and start typing in ”Super List”.

När rätt block appearance, ge det ett click.

Detta lägger till ett new block med två standard listobjekt.

Till att börja med kan du växla mellan horisontell och vertikal layout med hjälp av pilarna i toolbaren och i menyn till höger.

Du kan också välja mellan en numrerad lista eller en punktlista med hjälp av icons under ”Change List Style”.

Ett annat alternativ är ”No Marker”, som är en unik liststil som tillhandahålls av plugin.

När du är nöjd med hur listan är konfigurerad är du redo att skapa ditt första objekt.

Klicka bara på knappen ”+” i hörnet av Super List-blocket.

Välj sedan det första blocket som du vill add to.

Super List är kompatibel med alla standard WordPress block, så du kan add to en image, heading eller något annat block som du vill.

Du kan sedan styla blocket som vanligt. Du kan till exempel uploada en image, add to en download link eller skriva in lite text.

För att add to ytterligare ett block till punktsatsen trycker du bara på Enter på ditt tangentbord. Detta addar en new ”Type / to choose a block”-rad under det första blocket.

Du kan nu klicka på ikonen ”+” i listobjektet och lägga till ytterligare ett block genom att följa samma process som beskrivs ovan.

När du är nöjd med hur det första listobjektet är konfigurerat kan du konfigurera det andra standardobjektet genom att följa samma steg.

Om du vill add to fler punktlistor måste du selecta ett helt listobjekt. Detta kan vara lite knepigt, eftersom du måste välja objektet som helhet snarare än de enskilda blocken i listobjektet.

När du ser en ”+”-icon i toolbaren har du valt rätt objekt. När det är gjort är det bara att gå vidare och klicka på knappen ”+”.

Detta adderar ett nytt, tomt objekt till listan.

Fortsätt upprepa dessa steg för att add to fler punkter och block.

När du är nöjd med hur listan ser ut kan du antingen clicka på knappen ”Update” eller ”Publicera” för att publicera den på din blogg eller website i WordPress.

Metod 3: Använda ett Page Builder-plugin (bäst för Landing Pages)

Om du vill skapa beautiful listor med custom styling, då kanske du vill använda SeedProd.

Detta avancerade WordPress theme och page builder plugin låter dig skapa professionellt utformade pages med hjälp av en enkel drag-and-drop editor.

Det kommer också med ett färdigt List block som låter dig finjustera varje del av listdesignen, inklusive att ändra utrymmet mellan enskilda objekt, ersätta standardpunkterna med custom icons och mer.

SeedProd gör det enkelt att designa fristående sidor som har en unik design, så detta är också ett bra val om du vill add listor till en custom home page eller landing page.

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

Vid aktivering måste du enter din license key.

You can find this information in your account on the SeedProd website. När du har lagt till license key klickar du bara på ”Verify Key”.

Välj en professionellt utformad templates

Gå sedan till SeedProd ” Landing Pages och klicka på ’Add New Landing Page’.

På nästa vy ombeds du att välja en template.

SeedProd levereras med över 300+ beautiful templates som är organiserade i olika kategorier, till exempel 404-sidmallar och custom WooCommerce ”thank you” pages.

Klicka bara på en tabs för att se de olika templates som finns inom den kategorin.

När du hittar en template som du vill använda, hoverar du med musen över den och klickar sedan på ikonen med bocken.

Vi använder templaten ”Explosive Growth Webinar” i alla våra images, men du kan använda vilken design du vill.

Därefter måste du ge sidan en rubrik.

SeedProd skapar automatiskt en URL baserat på sidans rubrik, men du kan ändra detta till vad du vill. Om du till exempel lägger till relevanta keywords i en URL förbättras ofta din WordPress sökmotorsoptimering och hjälper sidan att visas i relevanta sökresultat.

Om du vill veta mer kan du vänligen läsa vår guide om hur du söker efter keywords för din WordPress blogg.

När du är nöjd med rubriken och URL:en klickar du bara på ”Save and Start Editing the Page”.

Bygg din custom page layout

SeedProd kommer nu att öppna din template i sin drag and drop editor. Till höger ser du en live preview av page-designen, med några inställningar till vänster.

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

För mer information, vänligen se vår guide om hur du skapar en custom page i WordPress.

För att add to en lista till din design, leta upp blocket ”List” och dra det till din page.

Detta addar en vertikal lista till din page med placeholder ”Item 1”.

Om du istället vill skapa en horisontell lista klickar du på tabben ”Advanced” och väljer sedan knappen ”Horizontal”.

You are now ready to start building your list by select the ’Content’ tabs.

Om du vill ersätta standardtexten med ditt eget message, clickar du på ”Item 1” i menyn till vänster.

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

Här kan du också tillämpa de format du vill använda, t.ex. fetstil eller kursiv stil.

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

För att ersätta bocken, hovera musen över den och klicka sedan på ”Icon Library” när den dyker upp.

Detta öppnar en popup där du kan välja den icon du vill använda istället.

You can use different icons for individual bullet points within the list, so this is a great way to create more interesting and eye-catching lists.

Om du vill skapa fler punkter klickar du bara på knappen ”Add New Item”.

Du kan nu add to text och ändra standard icon genom att Följa exakt samma process som beskrivs ovan.

När du har lagt till alla objekt i din lista kan du ändra storleken på fonten och justeringen med hjälp av inställningarna i menyn till vänster.

Du kan också öka eller minska avståndet mellan de enskilda listobjekten med hjälp av slidern ”Space Between”.

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

Om du är osäker på vilka färger du ska använda, vänligen se vår guide om hur du väljer ett perfekt färgschema för din WordPress webbplats.

För att göra denna ändring klickar du på ”Icon Color” area och väljer sedan en new färg från popupen som visas.

När du har gjort det kan du klicka på ”Advanced” och titta på ytterligare några Settings. Vi har redan sett hur du kan växla mellan vertikala och horisontella layouts för listor, men du kan också ändra textfärg och font.

För att verkligen få din lista att sticka ut kan du till och med add to en box shadow eller CSS-animering.

De flesta Settings i tabben ”Advanced” är ganska självförklarande, så det är värt att utforska dem för att se vilka effekter you kan skapa.

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

När you är nöjd med hur page ser ut, click the dropdown menu on the ”Save” button and select ”Publicera”.

You can now visit this page to see the list live on your online store or website.

Metod 4: Använda kod för att add to Bullet Points och Number Lists (Advanced)

Du kan också skapa listor med hjälp av den built-in WordPress code editor och HTML.

Detta är mer komplicerat, så det är inte den bästa metoden för Beginner. Det gör dock att du kan använda fler format och formateringar i det built-in List-blocket. Till exempel kan du snabbt och enkelt lägga till heading-stilar till listobjekt med hjälp av taggar som h1 och h2.

Mer information om ämnet finns i vår guide om hur du editerar HTML i WordPress Code Editor.

För att komma igång öppnar du den page eller det post där du vill visa listan. Klicka sedan på den treprickiga iconen i det övre högra hörnet och välj ”Code editor”.

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

Hur man skapar en punktlista med hjälp av kod

För att skapa en punktlista börjar du med att skriva in Följer:

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

Ul står för ”unordered list”, vilket innebär att listan inte har några nummer, och wp: list talar om för WordPress att du skapar ett List-block manuellt.

Tryck sedan på ”Return”-tangenten för att gå till en new 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 ”listobjekt”, och vi closear 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 slutförd, close kod blocket med en annan ”unordered list” flagga:

</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 image skapas en mycket enkel lista, men du kan customize den genom att lägga till annan HTML, t.ex. heading-taggar.

Hur man skapar en numrerad lista med hjälp av kod

För att skapa en numrerad lista skriver du helt enkelt in Följer:

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

Du kan sedan skriva in ol som står för ordered list:

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

Följ därefter upp 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, close den ordnade listan med hjälp av 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 -->

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du addar punktlistor och numrerade listor i WordPress. Du kanske också vill lära dig hur du tjänar pengar på att blogga online eller kontrollera vårt expertval av de bästa tilläggen för kontaktformulär i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.