Vill du använda Gutenberg block editor (även kallad WordPress editor) men är inte säker på hur du lägger till eller använder block?
I det här inlägget kommer du att lära dig hur du använder den nya WordPress-redigeraren och hur du utökar dess möjligheter.
Redo? Låt oss börja:
Hur man använder Gutenberg block editor
Du kommer att använda blockredigeraren när du skapar inlägg. och sidor i WordPress. Det är ett intuitivt verktyg som låter dig lägga till innehåll på din webbplats utan att behöva skriva HTML själv, även om du fritt kan växla mellan visuella (block) och kodredigerare (HTML).
Sidor och inlägg kallas “inläggstyper” i WordPress. Blockredigeraren är i stort sett densamma för alla, med några skillnader här och där beroende på typ av inlägg.
Vi håller oss till Inlägg, en typ av inlägg som du kan skapa genom att hålla muspekaren över Inlägg i admin-menyn till vänster i instrumentpanelen och välja Lägg till nytt.
Vi kommer också att använda Kadence WordPress-temat, så vår redaktör kan ha några andra inställningar än din och vårt inlägg kan se lite annorlunda ut i gränssnittet. Vi har också SEOPress SEO-plugin installerat, så du kommer att se några SEO-relaterade instrumentpaneler i våra skärmbilder.
Blockredigeraren hälsar dig välkommen med en välkomsttur när du först öppnar den (och, tyvärr, när du rensar webbläsarens cache). Ta gärna en sekund att utforska det.
Börja med att infoga en titel i fältet “Lägg till titel”. Det här behöver inte vara den faktiska titeln du vill använda ännu. Du kan använda en arbetstitel tills du är redo att publicera inlägget. Att lägga till en titel nu hjälper dig helt enkelt att känna igen utkastet när du visar listan Alla inlägg.
Vet bara att titeln du lägger här kommer att representera titeln ditt inlägg har på din webbplats och när det delas på sociala medier.
Klicka på Spara utkast nedan. Detta är en länk som finns i den övre högra menyn i editorn. Alternativt, tryck på Ctrl/Cmd+S på ditt tangentbord. WordPress-editorn har en inbyggd funktion för autospara, men om du sparar den manuellt då och då eliminerar du risken att du tappar ditt utkast om strömmen eller internetanslutningen plötsligt skulle bryta.
Om du vill se hur ditt inlägg ser ut i frontend även utan att publicera det, klicka på länken Förhandsgranska och välj sedan Förhandsgranska på ny flik.
Notera: Så fort du trycker på knappen Publicera kommer ditt inlägg att vara tillgängligt för alla som besöker din webbplats att se. Det är därför det är bäst att trycka på Spara utkast för att hålla det offline tills vidare.
Detta låter dig se hur ditt inlägg ser ut i ditt temas stil.
Använder Gutenberg Block Library
Alla inlägg eller sidor som du skapar med WordPress-blockredigeraren består av innehållsblock. Det betyder att om ditt inlägg har två stycken, sedan en rubrik och slutligen en bild, så har du faktiskt två styckeblock, ett rubrikblock och ett bildblock.
WordPress har några dussin block som standard, men du kan utöka ditt bibliotek med plugins. Vissa teman och plugins från tredje part kommer till och med med sina egna block.
Låt oss hålla fast vid standard WordPress-blocken för nu. Börja med att klicka där det står Börja skriva. Detta skapar ett styckeblock automatiskt och du kan börja skriva om du vill lägga till ett stycke.
Klicka istället på plus +-knappen om du vill använda ett annat block.
Gutenberg-blockredigeraren ärver ditt temas teckensnitt som standard så att ditt inlägg ser ut som det kommer att visas i gränssnittet medan du skapar det. Det är därför texten i våra skärmdumpar förmodligen ser lite annorlunda ut än din.
När du placerar markören i ett styckeblock visas ett flytande verktygsfält. Det låter dig omvandla stycketext på många sätt, som att lägga till fetstil eller kursiv stil eller till och med inkludera en länk. Det skiljer sig inte mycket från Microsoft Word eller Google Docs.
Låt oss prata om blockinställningar, börja med Paragraph-blocket. Om du tittar på sidofältet på höger sida av editorn, kommer du att märka att det finns två flikar: en för hela inläggsinställningarna (Publicera) och en för de individuella blockinställningarna (Blockera).
Klicka på fliken Block om den inte redan finns där. Styckeblocket har typografiinställningar som du kan använda för att anpassa teckensnittsstorleken som detta stycke använder, samt höjden varje rad i stycket ska vara.
Ditt tema använder redan en global teckenstorlek och radhöjd, så vi rekommenderar att du lämnar dessa inställningar som de är om du inte vill att det här stycket ska ha andra inställningar. Anpassa ditt temas standardtypografiinställningar genom att gå till Utseende → Anpassare.
Färgpanelen är stängd som standard. Klicka på den för att öppna den, men kom ihåg att textfärgen är en annan global inställning som du kan konfigurera i Customizer. Ändå låter den här panelen dig anpassa färgerna för ett specifikt stycke och till och med lägga till en bakgrund till det.
Den här sista inställningen kan vara användbar när du vill uppmärksamma en speciell notering eller varning.
Varje nytt stycke du skapar är ett annat styckeblock och har därför olika inställningar. Om du vill kontrollera inställningarna för flera styckeblock samtidigt måste du gruppera dem.
Markera flera stycken med markören, klicka sedan på menyn med tre punkter ovanför dem och välj Gruppera.
Du kan nu redigera färginställningarna för flera styckeblock. Tyvärr måste textinställningarna fortfarande konfigureras individuellt, eftersom gruppfunktionaliteten är designad för att användas för att skapa flera återanvändbara block samtidigt.
På tal om det, när du klickar på menyn med tre punkter för grupp- och individuella block, kommer du också att märka ett alternativ som heter Lägg till i återanvändbara block.
Detta gör att du kan spara block som du har skapat till ditt eget personliga bibliotek. Det kommer att spara ditt innehåll och dina inställningar. Du kan till och med ge dem unika namn, som “Social Media Call to Action”. När du vill använda blocket på en annan sida behöver du bara söka efter det när du lägger till ett nytt block.
När det gäller styckeblock är återanvändbara block bra för information som du tenderar att upprepa i flera inlägg. Detta inkluderar avslöjande av affiliate-länkar och ofta använda uppmaningar, som “följ mig på Twitter och Instagram” med länkar till båda profilerna.
Återanvändbara block fungerar som globala block. Detta innebär att om du infogar ett skrapblock i inlägg A, inlägg B och inlägg C och sedan lägger till det i inlägg D med inställningarna redigerade, kommer den inställningen också att ändras i inlägg A, B och C.
Om du bara vill ändra blocket för Post D, måste du klicka på menyn med tre punkter igen och välja Konvertera till normalt block.
rubrikblock
Titlar hjälper oss att dela upp blogginlägg i sektioner och dessa sektioner i underavdelningar. Det är inte annorlunda än hur tidnings- och tidskriftsartiklar har delats upp i olika sektioner i flera år.
Webbsidor innehåller upp till sex rubriker: H1 till H6 eller rubrik 1 till 6. H1-H6-taggar är HTML-taggar som representerar storleken och betydelsen av en rubrik i SEO.
Ditt tema använder H1, den största och viktigaste rubriken, för inläggstitlar, så du bör använda H2 för huvudrubriker i hela ditt inlägg och H3 för sekundära titlar. H4-H6 är mindre vanliga, men du kan använda dem vid behov.
Om du har problem med att hitta plusknappen igen, placera markören i slutet av sista stycket och tryck på Enter. Använd sedan knappen för att lägga till ett rubrikblock till ditt inlägg.
H2-taggen är vald som standard. Klicka på den för att välja en annan etikett när du behöver den.
Inställningarna är desamma för stycketaggar, så vi bryr oss inte om att gå igenom dem. Tänk bara på att ditt temas typografiinställningar i Customizer också bör ha globala inställningar för titlar.
bildblock
Följ samma steg för att lägga till ett bildblock, men välj Bild den här gången.
WordPress erbjuder dig tre sätt att ladda upp bilder:
- Öka – Välj en fil från din enhet att ladda upp till WordPress. Filen kommer att lagras på din värdserver som standard om du inte ställer in en nedladdningsfunktion för mediefiler.
- Media bibliotek – Välj en bild från WordPress mediebibliotek. Detta bibliotek låter dig hantera mediafiler i WordPress. Genom att välja det här alternativet kan du också ladda upp flera bilder samtidigt, men ändå välja att bara tilldela en till det här blocket.
- Bädda in från URL – Lägg till en webbadress som innehåller din bild och välj sedan vilken bild du vill infoga i ditt inlägg. Det här alternativet är inte tillrådligt av många anledningar. För det första kan bilden tas bort från webbadressen du infogar, vilket gör att den går sönder på din webbplats. För det andra kan det sluta med att du gör intrång i upphovsrätten om bilden du infogar inte är fri från tillskrivning. Slutligen är det bäst att skapa dina egna originalbilder för att få din blogg att se mer professionell ut.
När du har valt en bild kommer ett flytande verktygsfält att visas precis som det såg ut för stycke- och rubrikblocken. Det låter dig ändra justeringen av bilden till vänster, höger eller mitt, lägga till en länk till bilden, lägga till text över den och till och med beskära den.
Du kan till och med lägga till en bildtext under bilden.
För inställningar kan du lägga till en stil till din bild och alternativ text. Använd en kort men beskrivande titel som alt-text som representerar vad bilden är. Detta är för SEO-ändamål.
Du bör också välja “Full Size” som bildstorlek i de flesta fall. WordPress kommer automatiskt att krympa din bild till bredden på ditt blogginnehåll.
Se till att kolla in vår guide om bildoptimering för webben för mer hjälp på detta område.
Andra block och tredjepartsblock
Som vi sa har WordPress ett helt bibliotek fyllt med dussintals innehållsblock organiserade i olika sektioner. När du lägger till ett nytt block klickar du på knappen Bläddra alla för att se dem alla.
Nedan är några av de vanligaste du kan använda:
- Lista
- Utnämning
- Dragcitat
- Tabell
- Galleri
- Omslag
- Media och text
- Video
- Knappar
- kolumner
- Sociala ikoner
- Inbäddade sociala medier
- Vanliga frågor
Om du vill komma åt fler block, använd ett blockplugin från tredje part. Detta ger dig tillgång till fler innehållsblock, av vilka några är förbättringar av standardblocken i WordPress.
Ultimata block Det är ett av de mest populära alternativen där ute. Detta gratis plugin ger dig tillgång till 20 ytterligare block för Gutenberg-redigeraren. Dessa inkluderar vittnesmål, uppmaningar, innehållsväxlingar, innehåll med flikar, innehållsförteckning och mer.
Ett annat bra alternativ är Kadensblockoch en fantastisk kombination med Kadence WordPress-temat. Kadence-temat har webbplatsdemos för Gutenberg-redigeraren och Elementor, så de extra Gutenberg-blocken är bra om du föredrar att använda den lättare Gutenberg-redigeraren för att bygga din webbplats ovanpå Elementor.
Insticksprogrammet lägger till 15 block till din samling som erbjuder bättre versioner av standard Gutenberg-blocken, samt några extrafunktioner. Dessa inkluderar vittnesmål, informationslåda, dragspel, register, nedräkning och mer.
Du kan använda Ultimate Blocks och Kadence Blocks sida vid sida om du vill lägga till båda uppsättningarna av block till din samling.
Kadence Blocks har också Design Library, en knapp som du hittar i blockredigerarens övre meny. Det här biblioteket har tre nya kategorier av designelement som du kan använda. Först har du sektioner, som är fördesignade sidavsnitt, som en pristabell, kontaktformulär eller rad att visa för teammedlemmar, redo för dig att importera och använda.
Startpaket innehåller helt designade sidor. Kategorin Wireframe innehåller designelement som liknar kategorin Sektioner, förutom att trådramselement inte har demoinnehåll.
Vissa plugins är inte dedikerade Gutenberg-plugins, men har block som du kan använda för att enkelt lägga till deras funktionalitet i blockredigeraren. Detta är fallet med WP Table Builder, ett tabellplugin utvecklat av samma team bakom Ultimate Blocks.
Nu kan du infoga väldesignade prissättnings-, data- och jämförelsetabeller i blockredigeraren utan att behöva förlita dig på en sidbyggare.
Slutgiltiga tankar
Gutenberg-blockredigeraren har lite av en inlärningskurva när du jämför den med WYSIWYG-redigerare som den klassiska WordPress-redigeraren, men den är otroligt enkel att använda när du väl kommer över dessa hinder. Dessutom låter det dig använda fler designelement i dina blogginlägg utan att behöva ta till ett plugin för sidbyggare.
Det låter dig också bli mer effektiv om du skriver dina utkast utanför WordPress i applikationer som Google Docs eller Microsoft Word. Dessa appar låter dig kopiera dina inlägg och klistra in dem i Gutenberg-blockredigeraren samtidigt som du importerar dina länkar, rubriker och textstilar från dessa appar. Google Dokument exporterar till och med dina bilder.
Relaterad läsning:
