WordPress Gutenberg Självstudiekurs för användare:inuti

Maddy Osman Senast uppdaterad den 5 januari 2021
11 Min.
Gutenberg -Guide
Senast uppdaterad den 5 januari 2021

Om du funderar på att använda en webbplats med WordPress du förmodligen har varit från Gutenberg Hört. Gutenberg är redaktör för WordPress , som släpptes med version 5.0. 

Sedan den första publiceringen har många funktioner WordPress Blockredigerare, inklusive blockgrupps- och blockmönster. Men varför Gutenberg är så populärt beror det främst på att inlägg och sidor kan redigeras mycket mer visuellt än med standarden WordPress Editor.

WordPress Gutenberg Självstudiekurs för användare:inuti

Den här guiden innehåller:

  • Vad Gutenberg Är
  • en komplett guide till Gutenberg för utvecklare:inuti
  • en kort lista över de olika funktionerna i Gutenberg

Och jag kan redan lova dig en sak: Enligt den här guiden vet du hur man använder Gutenberg skapa professionella layouter för dina webbplatser.

WordPress 5.6 är äntligen här!

Den senaste versionen av WordPress fokuserar på layout och design: en helt ny Theme , ytterligare layoutalternativ för inlägg och sidor och blockmönster för hela webbplatsen. Alla detaljer finns i den officiella noten och i WordPress Fältguide.

Vad är nytt på Gutenberg Blockredigeraren?

Innan vi går in i WordPress Gutenberg handledning, låt oss först titta på vad Gutenberg det är det faktiskt. 

Gutenberg ersätter TinyMCE Editor och låter dig använda innehållsblock för att lägga till text, bilder och andra media i dina inlägg och sidor. Den klassiska TinyMCE Editor var textbaserad och begränsade nya användare som inte visste hur man kodar. 

Även om HTML-kunskap inte var nödvändig för att använda den klassiska redigeraren, var du ofta tvungen att gå till HTML-vyn för att göra några ändringar alls. Annars måste du ha en separat Plugin för att lägga till enkla funktioner som tabeller eller bildgallerier på din webbplats.

WordPress Gutenberg Självstudiekurs för användare:inuti

Med Gutenberg du kan designa din webbplats inte med text, men med bilder. Med WordPress Gutenberg Med Block Editor kan du enkelt lägga till innehållsblock på dina sidor och inlägg. Det finns block för bilder, för stycken – och för nästan alla andra objekt du vill ha på din webbplats.

WordPress Gutenberg Självstudiekurs för användare:inuti

Gutenberg är nu standardblockredigeraren för WordPress och det kommer med många block out-of-the-box. Du kan också WordPress Plugins lägg till ännu fler block för att enkelt bädda in olika funktioner i dina inlägg och sidor. 

WordPress Gutenberg Tutorial

När du skapar webbplatser är det aldrig fel att förenkla arbetsflödet. Gutenberg kan spara mycket tid. Så det är hög tid att WordPress Block Editor för att ta en närmare titt. Först går vi tillsammans till Grunderna i Gutenberg Av.  

Hur du Gutenberg Används

  1. Som vanligt skapar du ett nytt blogginlägg i WordPress . 
  2. Klicka på det blå plustecknet i det övre vänstra hörnet. 
  3. Markera det block som du vill inkludera i inlägget. 
  4. Justera inställningarna för blocket i utkastet till inlägg. 
  5. Ordna om blocken genom att dra och släppa dem.

Så ja! Bara för att förstå hur varje block fungerar, justera dem och gruppera dem behövs lite mer förklaring. Det är precis vad vi nu kommer fram till i resten av vår WordPress Gutenberg Tutorials. 

Detaljerad handbok om Gutenberg Blockera redigerare 

Nu när vi har rensat grunderna ur vägen, fördjupar vi oss nu i särdragen hos WordPress Blockera redigerare. När du först använder redigeringsskärmen på en sida eller ett inlägg med Gutenberg redigeraren ser ganska tom ut – ännu mer än den klassiska redigeraren eftersom de traditionella menyalternativen saknas. Det är ok. Det första steget är att lägga till några block. 

1. Lägg till block i ditt inlägg

Om du vill lägga till ett block i inlägget trycker du på plustecknet i det övre vänstra hörnet av inläggsdesignen. Ett nytt block är överlagrad med en liten uppsättning menyalternativ. 

Vi fokuserar först på huvudmenyn och diskuterar sedan senare hur man gör ytterligare justeringar med den sekundära menyn.

WordPress Gutenberg Självstudiekurs för användare:inuti

Du kan bläddra bland blocktyperna eller använda sökfältet för att hitta den blocktyp du vill ha. Lägg sedan till ett block genom att skriva "/" och blocktypen. Om du till exempel vill infoga en bild skriver du "/bild".

Det finns många block tillgängliga, inklusive

  • Punkterna
  • Bilder
  • Rubriker
  • Listor
  • Tabeller
  • Avgränsare
  • Galleri
  • Knappar
  • Videor
  • Ljud 

Om du Plugins med anpassade block visas de också i den här listan. 

Alternativt kan du lägga till ett block genom att klicka på det svarta plustecknet: detta visas när du klickar i utkastet, där det står: "Skriv något eller tryck för blockval". 

WordPress Gutenberg Självstudiekurs för användare:inuti

Du kan också följa anvisningarna i texten och skriva "/" för att välja från en listruta med alternativ.  

WordPress Gutenberg Självstudiekurs för användare:inuti

2. Ordna om dina block

Du kan dra och släppa block med pilarna på själva blocket eller genom att trycka på punkterna mellan pilarna där du vill att de ska visas.

WordPress Gutenberg Självstudiekurs för användare:inuti

Med WordPress Block Editor är mycket enklare att omorganisera ditt innehåll än med den klassiska redigeraren. Du behöver inte oroa dig för att bryta koden, eftersom all information om innehållet i blocket (inklusive teckensnitt, färg och storlek) flyttas med blocket. 

Enkelheten med vilken du kan ordna dina block är en av de bästa funktionerna i Gutenberg Blockera redigerare. Du sparar tid på att fixa felaktig kod och du behöver inte förlita dig på kopiera och klistra in för att få jobbet gjort.

3. Anpassa stilinställningarna för ditt block

Nästa steg i vår WordPress Gutenberg Handledningen börjar lära känna menyn Formatinställningar. I vissa fall visas vissa alternativ nära blocket när du klickar på det. Om du till exempel arbetar med ett styckeblock visas några kända alternativ precis ovanför blocket. 

WordPress Gutenberg Självstudiekurs för användare:inuti

Men en sekundär meny visas också till höger på skärmen. Klicka på fliken" Inställningar".  

WordPress Gutenberg Självstudiekurs för användare:inuti

Vilka formatinställningar du kan anpassa beror på blocket. Styckeblocksinställningarna ser till exempel annorlunda ut än bildblocket.

WordPress Gutenberg Självstudiekurs för användare:inuti

Med menyn Formatinställningar kan du enkelt anpassa blocken i dina inlägg. Återigen, till skillnad från den klassiska redigeraren behöver du inte oroa dig för att göra ändringar i bildtexten på en bild för att förstöra formateringen av den underliggande texten. 

Återanvändbara Gutenberg Skapa redigeringsblock

Nu kommer vi till de avancerade tipsen från WordPress Gutenberg Tutorials. Du sparar mycket tid och ansträngning genom att spara block som du kan använda i framtida inlägg, sidor och andra WordPress kan återanvända webbplatser.

WordPress Gutenberg Självstudiekurs för användare:inuti

Återanvändbara block är användbara om du har objekt som behöver läggas till regelbundet på en viss sida eller typ av inlägg. 

Låt oss säga att du skriver filmrecensioner och har ett bord som visar dina topplistor för varje film. Detta bör alltid se likadant ut, med specifik formatering och samma antal kolumner och rader. När du skapar ett återanvändbart block kan du spara en ansenlig tid genom att återskapa det med varje inlägg. 

Att lagra styling och olika elementattribut kan också spara realtid för knappar. 

Låt oss säga att du behöver samma CTA (Call to Action) i varje inlägg du skriver. Om du vill skapa en återanvändbar knapp börjar du med att gå igenom den typiska processen att lägga till ett knappblock. Anpassa formateringen och texten tills den ser ut som du vill.  

WordPress Gutenberg Självstudiekurs för användare:inuti

Klicka sedan på de tre punkterna på blockmenyn och välj Lägg till i återanvändbara block

WordPress Gutenberg Självstudiekurs för användare:inuti

Här kan du ge ditt nya block ett namn. 

WordPress Gutenberg Självstudiekurs för användare:inuti

Om du vill använda det här blocket igen går du tillmenyn Vanliga block,går tillfliken "Återanvändbar"och väljer det sparade blocket. 

WordPress Gutenberg Självstudiekurs för användare:inuti

Du kan också exportera återanvändbara block för användning på andra webbplatser. Klicka bara på de tre punkterna bredvid blocket, välj Exportera som JSON och ladda ner filen. 

WordPress Gutenberg Självstudiekurs för användare:inuti

För att konvertera ett exporterat återanvändbart block till ett annat WordPress Lägg till webbplatsen, gå till fliken Återanvändbarblockmenyn och välj Hantera alla återanvändbara block. 

WordPress Gutenberg Självstudiekurs för användare:inuti

Detta öppnar upp ett mer traditionellt sektion i WordPress Instrumentpanel, där du kan hantera alla återanvändbara block du skapar. 

Om du har sparat återanvändbara block från andra webbplatser kan du ladda upp dem genom att klicka på Importera från JSON. När du har gjort detta bör du kunna komma åt det som vanligt från fliken Återanvändbarblockmenyn. 

Placera blocken i grupper

I nästa Pro Tip of our WordPress Gutenberg Självstudier handlar om att gruppera block. Om du lägger två eller flera block i en grupp kan du anpassa och ändra dem som om de vore ett enda block. 

Du kan till exempel gruppera ett call to action-block för sociala medier med ett block som innehåller ikoner för social delning. Du kan också gruppera ett styckeblock med ett knappblock för att skapa ett standard-CTA som du kan infoga i slutet av dina inlägg. 

Så här skapar du en blockgrupp med Gutenberg Blockera redigerare, markera alla block som du vill gruppera. Klicka sedan på ikonen i lager till vänster på menyn små överlägg:

WordPress Gutenberg Självstudiekurs för användare:inuti

En ny meny visas med inskriptionen "Omforma efter", klicka på Grupp. Det var allt. Nu kan du flytta och anpassa dessa block som om de vore ett. 

Du kan fortfarande göra ändringar i inställningarna för varje block. Du kan till exempel lägga till text i ett styckeblock och ändra dess utseende. 

Om du vill dela upp block markerar du gruppen och klickar sedan på de tre punkterna på överläggsmenyn. Rulla nedåt och klicka på Dela upp.

WordPress Gutenberg Självstudiekurs för användare:inuti

Den här funktionen fungerar också med återanvändbara block. När du har grupperat block kan du spara dem som återanvändbara block med samma procedur som beskrivs ovan. 

Blockera mönster i WordPress Använd Block Editor

Med WordPress Med Blockmönster kan du skapa och dela fördefinierade blocklayouter. Med Blockmönster kan du skapa komplexa layouter med bara några musklick.

Om du vill komma åt Blockera mönster klickar du på samma plustecken som du använde för att komma åt blockmenyn. Välj flikenMönster. 

WordPress Gutenberg Självstudiekurs för användare:inuti

Vid första anblicken ser blockmönster ut som återanvändbara block. Blockmönster är dock vad möjligheten att skapa hela sidor i Gutenberg kommer närmast. 

Med Blockera mönster kan du lägga till avsnitt med fullständig layout i dina inlägg eller sidor med ett enda klick. Dessa är idealiska om du vill skapa och spara en layout för användning i flera inlägg. 

Den WordPress Block Editor levereras med olika prefabricerade mönster, inklusive

  • flera textkolumner
  • Knappar sida vid sida
  • anpassade rubriker
  • Citat med bilder
WordPress Gutenberg Självstudiekurs för användare:inuti

En annan fördel med Block Patterns är att de gör att du lättare kan växla mellan Themes för att växla. Eftersom formateringen är bunden i själva blocken stöds den inte av en annan Theme Påverkas. 

Om du vill skapa dina egna blockmönster manuellt kräver detta viss programmeringskunskap. I utvecklingsguiden kallas de fördefinierade blocklayouter. 

Att skapa blockmönster från grunden kräver användning av API (Block Application Programming Interface). Den Plugin Block Pattern Builder kan dock hjälpa till. 

WordPress Gutenberg Självstudiekurs för användare:inuti

Ytterligare block till Gutenberg Add

Innan vi börjar använda den här WordPress Gutenberg handledning bör du veta att det finns olika Plugins som gör att du kan lägga till ännu fler typer av block i redigeraren, inklusive

  • Tabell
  • Pris
  • Google Maps
  • Kontaktformulär

Det finns en Officiella WordPress Blockkatalog, där du kan skapa ytterligare block för Gutenberg hitta och lägga till. 

WordPress Gutenberg Självstudiekurs för användare:inuti

Ursprungligen var det planerat att skapa en underkatalog för Ett enda block Plugins för att skapa. I stället är den aktuella katalogen ett underavsnitt av standardkatalogen Plugin Katalog över WordPress med en sökbar lista över blockbaserade Plugins . 

Fullständig webbplatsredigering i Gutenberg

För närvarande är det möjligt att Gutenberg ännu inte helt redigerat webbplatsen. Den WordPress Utvecklingsteamet gör dock stora framsteg i detta mål, bland annat genom att lägga till blockmönster. 

Det finns för närvarande en experimentell version av Tjugo tjugo Themes , som använder den fullständiga webbplatsredigeringen och idén om en blockbaserad Themes Plockar upp. 

Med WordPress Med Block Editor kan du nu skapa helt anpassade, blockbaserade layouter – men bara för inlägg och sidor. Så snart hela webbplatsen behandlas av Gutenberg widgets blir överflödiga. Detta ger användarna fullständig kontroll över varje layoutelement, inklusive sidhuvuden, sideponer och sidfötter. 

Även om Gutenberg Block Editor ännu inte en fullfjädrad WordPress Page Builder, han är på väg dit. Under tiden kan blockmönster, t.ex. de som används högst upp i WordPress Gutenberg Blockera handledning kommer att förklaras en funktionsuppsättning som ligger mycket nära en komplett webbplatsredigering. 

Nackdelar med Gutenberg Redaktörer 

Även Gutenberg är ett användbart verktyg som har förändrat hur många användare: WordPress och skapa innehåll är redaktören naturligtvis inte utan nackdelar. 

Som Gutenberg Till exempel var det för första gången ganska felbenäget. Det mesta har nu åtgärdats. 

En sak som dock inte är en bugg är det faktum att Gutenberg fortfarande med många Themes är oförenligt. Så om du har en specifik Theme och du gillar designen är det troligt att du inte kommer att anpassa den eller Gutenberg kan använda den. När du försöker är resultatet ofta helt enkelt en röra. 

Nwo Gutenberg är med några Themes kompatibel, men inte tillräckligt för att skryta med utbredd kompatibilitet. 

Ett annat problem som Gutenberg på bordet, är det faktum att det inte erbjuder samma flexibilitet som den klassiska redigeraren. Säker Gutenberg eliminerar några av de idiosynkratiska formateringsproblem som uppstår med den klassiska redigeraren – tyvärr är du begränsad till vilken typ av sidor du kan skapa. 

Som bredare alternativ för Theme Anpassning till Gutenberg ännu inte är tillgängliga, måste du komma till rätta med vilka Gutenberg Kompatibel Themes tillgängliga och vilka block och block som är Plugins Tillgängliga. 

Den information som används för användning av Gutenberg tillgängliga resurserna växer i stadig takt, en Theme Builder är Gutenberg Det gör det dock inte. Inte ännu. 

Slutändan Gutenberg det perfekta valet för dem som redan är vana vid sidbyggare eller rent visuella redaktörer och vill behålla den här upplevelsen, eller som bara vill fokusera på innehållet och dra och släpp designen. 

Sista tankar: Guide till WordPress Gutenberg 

Den Gutenberg Redaktören är nu en del av WordPress Core. Utvecklingsteamet bakom WordPress har stora planer för det. Någon gång kommer du att kunna Gutenberg skapa navigeringsmenyer, skapa fullständiga webbplatslayouter och skapa Gutenberg kommer att användas med ännu mer Themes vara kompatibla. 

Fram till dess kan du använda de funktioner som WordPress Block Editor erbjuder för närvarande optimal användning och visuellt tilltalande inlägg och sidor - utan att ens känna till en kodrad. En ganska bra affär om du frågar oss. 

Så fortsätt: Använd tipsen i vår WordPress Gutenberg handledning och börja anpassa innehållet på din webbplats. Och se till att din webbplats är ansluten till en WordPress Erbjudande om webbhotell från RAIDBOXES vid optimal hastighet. 

WordPress Gutenberg Insändare: Dina frågor

Vad tycker du om WordPress Gutenberg Editor? Vilka frågor har du till Maddy? Använd kommentarsfunktionen. Du vill ha fler tips på WordPress ? Följ oss sedan på Twitter, Facebook eller via vårt nyhetsbrev.

Maddy Osman är SEO Content Strateg. Det fungerar med utvalda kunder i WordPress och webbhotell område. På grund av sin bakgrund inom webbdesign och WordPress hon har en djup förståelse för SEO - och vet exakt hur man kopplar varumärken med SEO-relevant innehåll.

Liknande artiklar

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.