Hur man använder WordPress blockredigerare (Gutenberg-handledning)

Att skapa vackert innehåll i WordPress behöver inte kännas överväldigande.

Blockredigeraren (även känd som Gutenberg) designades specifikt för att göra det lika enkelt att bygga sidor och inlägg som att dra och släppa block på plats, utan att kräva tekniska kunskaper.

Tänk på det som att bygga med digitala Lego-bitar. Varje innehållsdel – oavsett om det är text, bilder eller knappar – blir ett block som du enkelt kan flytta runt och anpassa.

Vi gick över till Gutenberg tidigt och har använt det i flera år. Detta har hjälpt oss att guida tusentals WPBeginner-användare genom att bemästra detta system.

I den här handledningen visar vi exakt hur WordPress blockredigerare fungerar.

Du kommer att lära dig de enkla teknikerna som gör innehållsskapande snabbare och roligare, plus upptäcka funktioner som kan ge din webbplats ett polerat utseende utan någon kodningskunskap.

Vad är skillnaden mellan blockredigeraren (Gutenberg) och den klassiska redigeraren?

Innan vi dyker ner i blockredigeraren, låt oss jämföra och förstå skillnaderna mellan Gutenberg Block Editor och den äldre klassiska redigeraren.

Här är hur den klassiska redigeraren i WordPress såg ut:

Den hade en textredigeringsruta med några grundläggande formateringsalternativ. Den var ganska begränsad i funktionalitet och visuellt utseende.

Så här ser blockredigeraren ut i WordPress:

Som du kan se är de två helt olika redigerare för att skapa innehåll i WordPress.

Den gamla klassiska redigeraren var en textredigerare med formateringsknappar som liknade Microsoft Word.

Den nya redigeraren använder ett annat tillvägagångssätt som kallas 'Block' (därav namnet Blockredigerare).

Block är innehållselement som du kan lägga till på redigeringsskärmen för att skapa layouter. Varje objekt du lägger till i ditt inlägg eller din sida är ett block.

Till exempel kan du lägga till block för stycken, bilder, videor, gallerier, ljud, listor och mer. Det finns block för alla vanliga innehållselement, och fler kan läggas till via WordPress-plugins.

Hur är WordPress blockredigerare bättre än den klassiska redigeraren?

WordPress blockredigerare erbjuder ett enkelt sätt att lägga till olika typer av innehåll i dina inlägg och sidor.

Till exempel, om du tidigare ville lägga till en tabell i ditt innehåll med den klassiska redigeraren, behövde du ett separat tabellplugin.

Med blockredigeraren kan du helt enkelt lägga till ett tabellblock, välja dina kolumner och rader och börja lägga till innehåll.

Du kan flytta innehållselement upp och ner, redigera dem som enskilda block och enkelt skapa medieberikat innehåll.

Viktigast av allt är att WordPress blockredigerare är lätt att använda och lära sig.

Detta ger en enorm fördel för alla WordPress-nybörjare som precis startar sin första blogg eller bygger en webbplats för småföretag.

Med det sagt, låt oss undersöka hur man använder WordPress blockredigerare för att skapa bra innehåll som ett proffs.

Här är vad vi kommer att täcka i den här Gutenberg-handledningen:

• Använda Gutenberg – WordPress blockredigerare
• Skapa ett nytt blogginlägg eller en ny sida med blockredigeraren
• Hur man lägger till ett block i blockredigeraren
• Arbeta med block i den nya redigeraren
• Organisera block i grupper och kolumner
• Spara och återanvänd innehåll med synkroniserade mönster (återanvändbara block)
• Publicerings- och hanteringsalternativ i Gutenbergs blockredigerare
• Plugininställningar i Gutenberg
• Lägga till några vanliga block i blockredigeraren
• Utforska andra innehållsblock i blockredigeraren
• Bonustips för att använda Gutenberg som ett proffs
• Lägga till fler block i Gutenberg Block Editor i WordPress
• Vanliga frågor om Gutenberg – Blockredigeraren i WordPress
• Videohandledning
• Bonusresurser

Redo? Låt oss dyka in.

Använda Gutenberg – WordPress blockredigerare

Blockredigeraren är utformad för att vara intuitiv och flexibel. Även om den ser annorlunda ut än den gamla WordPress-redigeraren, gör den fortfarande allt som du kunde göra i den klassiska redigeraren.

Låt oss börja med att gå igenom de grundläggande saker du gjorde i den klassiska redigeraren och hur de görs i blockredigeraren.

Skapa ett nytt blogginlägg eller en ny sida med blockredigeraren

Du börjar skapa ett nytt blogginlägg eller en ny sida som du normalt skulle göra. Klicka helt enkelt på menyn Inlägg » Lägg till nytt inlägg i din WordPress-admin.

Om du skapar en sida, gå istället till menyn Sidor » Lägg till ny.

Detta startar blockredigeraren.

Hur man lägger till ett block i blockredigeraren

Det första blocket på varje inlägg eller sida är titeln.

Du kan använda musen för att flytta dig under titeln eller trycka på Tab-tangenten på ditt tangentbord för att flytta markören nedåt och börja skriva.

Som standard är nästa block ett Styckesblock. Detta gör att användare kan börja skriva direkt.

Om du vill lägga till något annat kan du dock klicka på knappen för att lägga till nytt block [+] i det övre vänstra hörnet av redigeraren, under ett befintligt block, eller till höger om ett block.

Att klicka på knappen visar menyn för att lägga till block med ett sökfält högst upp och vanliga block nedanför.

Du kan klicka på flikar för att bläddra bland blockkategorier eller skriva ett nyckelord för att snabbt söka efter ett specifikt block.

Om du inte vill använda musen för att klicka på knappen kan du också använda en tangentbordsgenväg.

Börja med att skriva / för att söka efter ett block och infoga det sedan genom att trycka på Enter-tangenten på ditt tangentbord.

Arbeta med block i den nya redigeraren

Varje block har en verktygsfält som visas ovanför det. Knapparna i verktygsfältet ändras beroende på vilket block du redigerar.

Till exempel, i skärmdumpen nedan arbetar vi med ett stycke-block som visar grundläggande formateringsknappar som textjustering, fetstil, kursiv stil, infoga länk och fler alternativ som finns tillgängliga under menyn med tre punkter.

Utöver verktygsfältet kan varje block ha sina egna blockinställningar, som visas i den högra kolumnen på redigeringsskärmen.

Dessa inställningar varierar beroende på vilket block du redigerar. Till exempel låter Paragraph-blocket dig redigera text-, bakgrunds- och länkfärg, samt typografin.

Du kan flytta block upp och ner och ordna om dem.

Om du vill göra detta, klicka bara för att dra eller släppa eller klicka på upp- och nedpilarna i verktygsfältet för blocket.

Relaterat: Se vår guide om hur man tar bort ett block i WordPress.

Organisera block i grupper och kolumner

Blockredigeraren kommer också med praktiska verktyg för att hantera och organisera dina innehållslayouter.

Du kan välja flera block genom att klicka på dem samtidigt som du håller nere Skift-tangenten på ditt tangentbord.

Klicka sedan på knappen för blocktyp i verktygsfältet för att omvandla de valda blocken till Grupper eller Kolumner.

Du kan sedan tillämpa stilar på hela gruppblocket, som att ändra justering eller marginal.

Blockredigeraren låter dig också lägga till en tom Grupp- eller Kolumnblock.

Därefter kan du fylla dem med andra block.

Du kan lägga till vilken typ av block som helst i varje kolumn efter behov.

Detta gör att du kan skapa vackra layouter för olika användningsområden.

Spara och återanvänd innehåll med synkroniserade mönster (återanvändbara block)

En av de mest kraftfulla funktionerna i blockredigeraren är möjligheten att spara och återanvända innehåll över hela din webbplats. Detta görs med hjälp av Synkroniserade mönster, som tidigare var kända som Återanvändbara block.

Ett synkroniserat mönster är ett block, eller en grupp av block, som du kan använda på flera inlägg och sidor.

Det bästa är att när du redigerar ett mönster uppdateras det automatiskt överallt där du har använt det. Detta är perfekt för innehåll som behöver förbli konsekvent, som en ruta för uppmaning till handling, en författarbiografi eller kontaktinformation.

För att skapa en, välj helt enkelt det block eller de block du vill spara. Klicka sedan på ikonen med tre punkter i verktygsfältet för blocket och välj alternativet 'Skapa mönster'.

Ett popup-fönster kommer att visas. Här kan du ge ditt mönster ett namn och tilldela det en kategori för att hålla saker organiserade.

Viktigast av allt är att du måste se till att alternativet 'Synkroniserad' är aktiverat. Det är detta som gör att mönstret uppdateras överallt samtidigt.

Efter att du klickat på 'Skapa' sparas ditt nya synkroniserade mönster.

För att använda det i ett annat inlägg eller en annan sida, klicka bara på knappen för att infoga block (+) och hitta det under fliken 'Mönster', eller sök helt enkelt efter det genom namn.

Mönster gör det enkelt för webbplatsägare att lägga till vanliga element i sina layouter, som uppmaningar till handling, knappar för sociala medier, banderoller och mer.

Ditt WordPress-tema eller dina plugins kan till och med komma med egna mönster, eller så kan du hitta mönster skapade av andra i WordPress Block Patterns-bibliotek.

Om du behöver mer hjälp har vi en separat guide för nybörjare om att hitta och använda WordPress blockmönster.

Publicerings- och hanteringsalternativ i Gutenbergs blockredigerare

Varje WordPress-inlägg innehåller mycket metadata. Detta inkluderar information som publiceringsdatum, kategorier och taggar, utvalda bilder och mer.

Alla dessa alternativ är snyggt placerade i den högra kolumnen på redigeringsskärmen.

Plugin-alternativ i Gutenberg

WordPress-plugins kan dra nytta av blockredigerarens API för att integrera sina inställningar inom redigeringsskärmen.

Vissa populära plugins kommer med egna block.

Till exempel, WPForms, det bästa WordPress kontaktformulärspluginet, låter dig lägga till formulär i ditt innehåll med hjälp av ett block.

Andra WordPress-plugins kan också lägga till sina inställningar på blockredigerarens skärm.

Till exempel, här är hur Allt i ett SEO för WordPress låter dig redigera dina SEO-inställningar längst ner i blockredigeraren:

På samma sätt, om du driver en onlinebutik med WooCommerce, kommer du att märka att det också har sina egna block.

Dessa block låter dig lägga till dina produkter i något av dina WordPress-inlägg och sidor.

Lägga till några vanliga block i blockredigeraren

Blockredigeraren kan göra allt som den äldre klassiska redigeraren kunde.

Du kommer dock att göra saker snabbare och elegantare än tidigare. Dessutom kan den göra mycket mer, som att låta dig styla ditt innehåll med en mängd no-code-alternativ.

Här är några av de vanliga blocken som du kan använda.

1. Lägga till en bild i WordPress blockredigerare

Det finns ett färdigt bildblock i WordPress blockredigerare. Lägg bara till blocket och ladda sedan upp en bildfil eller välj den från mediebiblioteket.

Du kan också dra och släppa bilder från din dator, och redigeraren kommer automatiskt att skapa ett bildblock.

När du har lagt till en bild kommer du att kunna se blockinställningarna, där du kan lägga till metadata för bilden, som alt-text, bildens upplösning och lägga till en länk till bilden.

För mer information, ta bara en titt på vår handledning om hur man lägger till bilder i WordPress.

2. Lägga till en länk i blockredigeraren

Blockredigeraren kommer med flera block där du kan lägga till text. Det vanligaste är styckesblocket, som har en knapp för att infoga en länk i verktygsfältet.

Alla andra vanligt förekommande textblock har också en länkknapp i verktygsfältet.

Du kan också infoga en länk med hjälp av kortkommandot, vilket är Command + K för Mac och CTRL + K på Windows-datorer.

3. Lägga till ett bildgalleri i Gutenberg

Galleribladet fungerar som bildbladet. Du lägger till det och laddar sedan upp eller väljer bildfiler.

För mer information, se vår guide om att skapa ett bildgalleri i WordPress.

4. Lägga till kortkoder i WordPress-inlägg med Gutenberg

Alla dina kortkoder kommer att fungera precis som de gjorde i den klassiska redigeraren. Du kan helt enkelt lägga till dem i ett styckesblock, eller så kan du använda kortkodsblocket.

Utforska andra innehållsblock i blockredigeraren

Gutenberg-redigeraren lovade att lösa några långvariga användbarhetsproblem i WordPress genom att introducera nya block.

Följande är några av favoriterna som vi tror att användarna kommer att finna oerhört hjälpsamma.

1. Lägga till en bild bredvid text i WordPress

Många av våra användare kunde inte placera en bild bredvid texten med den gamla redigeraren. Du kan göra detta nu med blocket Media & Text.

Detta enkla block levereras med två block placerade sida vid sida, vilket gör det enkelt att lägga till en bild med lite text bredvid.

2. Lägga till en knapp i WordPress-inlägg och sidor

En annan irritation med den gamla redigeraren var att lägga till en knapp i dina blogginlägg eller sidor. Du var antingen tvungen att använda ett plugin som skapade en kortkod för knappen eller byta till HTML-läge och skriva kod.

Lyckligtvis har Gutenberg ett knappblock som låter dig snabbt lägga till en knapp i vilket inlägg eller sida som helst.

Du kan lägga till en länk för din knapp, ändra färger och mer. För detaljer, se vår artikel om hur man enkelt lägger till knappar i WordPress.

3. Lägga till vackra omslagsbilder i blogginlägg och landningssidor

En annan cool funktion du kanske vill prova är täckblocksfunktionen, som låter dig lägga till täckbilder eller bakgrundsfärger till dina inlägg och sidor.

En omslagsbild är en bredare bild som ofta används för en ny sektion på en sida eller början av en berättelse. Den ser vacker ut och låter dig skapa engagerande innehållslayouter.

Lägg bara till ett Omslagsblock och ladda sedan upp bilden du vill använda. Du kan välja en överläggsfärg för omslaget eller göra det till en fast bakgrundsbild för att skapa en parallaxeffekt när användare scrollar ner på sidan.

För mer information, se vår artikel om skillnaden mellan omslagsbilder och utvalda bilder i WordPress.

4. Skapa tabeller inuti artiklar

Den klassiska redigeraren hade ingen knapp för att lägga till tabeller i dina WordPress-inlägg. Du var tvungen att använda ett plugin eller skapa en tabell genom att skriva anpassad CSS och HTML.

Nu har blockredigeraren ett standardblock för tabeller, vilket gör det superenkelt att lägga till tabeller i dina inlägg och sidor. Lägg bara till blocket och välj antalet kolumner och rader du vill infoga.

Du kan nu börja lägga till data i tabellrader. Du kan alltid lägga till fler rader och kolumner vid behov, och två grundläggande stilalternativ finns tillgängliga.

5. Skapa innehåll i flera kolumner

Att skapa innehåll i flera kolumner var ett annat problem som den klassiska redigeraren inte hanterade alls.

Lyckligtvis tillåter blockredigeraren dig att lägga till ett Kolumnblock, som lägger till två kolumner med paragrafblock.

Detta kolumnblock är ganska flexibelt. Du kan lägga till upp till 6 kolumner i en rad och till och med använda andra block inuti varje kolumn.

Bonustips för att använda Gutenberg som ett proffs

När du tittar på blockredigeraren kanske du undrar om du kommer att spendera mer tid på att lägga till och justera block än på att skapa faktiskt innehåll.

Tja, blockredigeraren är otroligt snabb, och även mycket grundläggande användning under några minuter gör att du kan lägga till block omedelbart utan att ens tänka.

Snart kommer du att inse hur mycket snabbare ditt arbetsflöde blir med detta tillvägagångssätt.

Här är några bonustips för kraftanvändare som hjälper dig att arbeta ännu snabbare med WordPress blockredigerare.

1. Flytta blockverktygsfältet till toppen

Du kanske har märkt på skärmbilderna ovan att en verktygsfält visas högst upp på varje block. Du kan flytta detta verktygsfält till toppen av redigeraren.

För att komma åt alternativet 'Övre verktygsfält' klickar du på knappen med tre punkter längst upp till höger på skärmen.

2. Använd tangentbordsgenvägar

Gutenberg levereras med flera praktiska genvägar som gör ditt arbetsflöde ännu snabbare och enklare. Den första du bör börja använda direkt är /.

Ange bara /, börja skriva, och sedan kommer redigeraren att visa dig matchande block som du omedelbart kan lägga till.

För fler genvägar, klicka på menyn med tre punkter längst upp till höger på skärmen och välj 'Tangentbordsgenvägar'.

Detta kommer att öppna ett popup-fönster med en lista över alla tangentbordsgenvägar du kan använda. Listan kommer att ha olika genvägar för Windows- och Mac-användare.

3. Dra och släpp media för att automatiskt skapa medieblock

Gutenberg låter dig dra och släppa filer var som helst på skärmen, och skapar automatiskt ett block åt dig.

Du kan till exempel släppa en enskild bild- eller videofil, och den skapar blocket åt dig. Alternativt kan du släppa flera bildfiler för att skapa ett Galleriblock.

4. Lägga till YouTube, Twitter, Vimeo och andra inbäddningar

Blockredigeraren gör det enklare att bädda in innehåll från tredje part i ditt WordPress-innehåll. Det finns block för alla populära tredjepartstjänster.

Du kan dock bara kopiera och klistra in inbäddnings-URL:en när som helst, så skapas automatiskt ett block åt dig.

Till exempel, om du lägger till en YouTube-videolänk skapas automatiskt ett YouTube-inbäddningsblock och videon visas.

Medan du klistrar in en URL direkt inte fungerar för Facebook- och Instagram-inlägg, är lösningen enkel.

Du behöver bara aktivera funktionen 'oEmbeds' med hjälp av Smash Balloon Social Photo Feed och klistra in URL:en i blocket 'Bädda in'.

För fullständiga detaljer, se vår artikel om inbäddning av Facebook- och Instagram-inlägg i WordPress.

Lägga till fler block i Gutenberg Block Editor i WordPress

Blockredigeraren i WordPress tillåter utvecklare att skapa sina egna block. Vissa utmärkta WordPress-plugins erbjuder blockpaket för den nya redigeraren.

Här är några av dem:

1. Spectra WordPress Gutenberg-block

Spectra WordPress Gutenberg Blocks är ett blockbibliotek med många avancerade block som hjälper dig att lägga till fler designelement i ditt innehåll.

Spectra, skapat av personerna bakom det populära Astra WordPress-tema, hjälper dig att skapa vackra designer utan att skriva någon kod.

För mer information, se vår kompletta Spectra-recension.

2. PublishPress Blocks

PublishPress Blocks är ett annat kraftfullt blockbibliotek som kommer med ytterligare block för att utöka Gutenberg-blockredigeraren.

Den innehåller vackra layoutalternativ, sliders, knappar, ikoner, bildgallerier, kartor, flikar, vittnesmål, dragspel och mer.

3. Stapelbara – Gutenberg-block

Stackable – Gutenberg Blocks är en samling vackert designade Gutenberg-block som du kan använda på din webbplats. Den innehåller block för behållare, inlägg, funktionsrutnät, dragspel, bildruta, ikonlista, uppmaning till handling och mer.

För fler alternativ, se vår kompletta lista över de bästa WordPress Gutenberg-blockplugins.

Vanliga frågor om Gutenberg – Blockredigeraren i WordPress

Sedan Gutenberg blev standardredigeraren i WordPress har vi fått många frågor om hur man använder den. Här är svaren på några av de vanligaste frågorna om blockredigeraren.

1. Vad händer med mina äldre inlägg och sidor i blockredigeraren? Kan jag fortfarande redigera dem?

Blockredigeraren påverkar inte dina gamla inlägg och sidor. Du kan fortfarande redigera dem, och blockredigeraren kommer automatiskt att öppna dem i ett block som innehåller den klassiska redigeraren.

Du kan redigera dem i den gamla redigeraren, eller så kan du konvertera äldre artiklar till block och använda blockredigeraren.

2. Kan jag fortfarande använda den gamla redigeraren?

Ja, du kan fortfarande fortsätta använda den gamla redigeraren. Installera och aktivera bara pluginet Classic Editor.

Vid aktivering kommer blockredigeraren att inaktiveras, och du kommer att kunna fortsätta använda den klassiska redigeraren.

Classic Editor-pluginet kommer att stödjas officiellt under överskådlig framtid. Vi rekommenderar dock starkt att du börjar använda blockredigeraren nu för att bekanta dig med det moderna sättet att skapa innehåll i WordPress.

3. Vad gör jag om blockredigeraren inte fungerar med ett plugin eller tema som jag använder?

Project Gutenberg var under utveckling länge, vilket gav plugin- och temautvecklare gott om tid att testa sin kod för kompatibilitet.

Det finns dock fortfarande en chans att vissa plugins och teman kanske inte fungerar bra med blockredigeraren. I så fall kan du installera Classic Editor-pluginet, be utvecklaren att lägga till Gutenberg-stöd eller hitta ett alternativt plugin eller tema.

4. Hur kan jag lära mig mer om Gutenberg-tips och tricks?

WPBeginner är den bästa platsen att lära sig om blockredigeraren i WordPress. Vi är den största WordPress-resurswebbplatsen på internet.

Vi kommer att publicera nya artiklar och uppdatera våra gamla resurser för att hjälpa dig att bemästra blockredigeraren.

Under tiden, om du har några frågor, är du välkommen att kontakta oss genom att lämna en kommentar eller använda kontaktformuläret på vår webbplats.

5. Kör du på Gutenberg-problem?

Om du har problem med WordPress blockredigerare, har vi skapat en snabb felsökningsguide som listar alla vanliga problem med blockredigeraren som användare stöter på och hur man löser dem.

Videohandledning

Om du inte föredrar skriftliga instruktioner, titta bara på vår videoguide:

Prenumerera på WPBeginner

Bonusresurser

Följande är några ytterligare resurser som hjälper dig att använda blockredigeraren mer effektivt:

• WordPress blockredigerare vs sidbyggare: Vad är skillnaden?
• Hur man skapar ett anpassat WordPress-block (enkelt sätt)
• Hur importerar/exporterar du dina WordPress Gutenberg-block (2 steg)
• WordPress Widgets vs Block – Vad är skillnaden? (Förklarat)
• En komplett nybörjarguide till WordPress Full Site Editing
• Bästa blockteman för fullständig webbplatsredigering i WordPress
• Tips för att bemästra WordPress innehållsredigerare

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.