Steg för steg Guide till Gutenberg Builder för WordPress

Steg för steg Guide till Gutenberg Builder för WordPress

Jag tror att du håller med när jag säger: Hela Gutenberg-verksamheten är förvirrande.


För det första, är den nya blockredigeraren svår att använda eller vad? Jag menar, du vet inte vart alla dina favoritverktyg gick. Nu tog du antagligen längre tid att skapa ett inlägg, eller hur?

Kanske lägger du till en länk (anslutet eller på annat sätt) en kurv och du kände dig besviken. Du kanske hade problem med att lägga till en bild bredvid din text.

Du kanske försökte lägga till flera kolumner, och saker fungerade inte som förväntat. Om det inte är så kan du kanske inte lägga till dina PDF-filer enkelt, eller så ser du det fruktade meddelandet “Uppdatering misslyckades” allvarligt.

Nåväl, oroa dig inte längre; Jag var i din exakta position för inte så länge sedan, men nu tycker jag Gutenberg är en spänning att använda. Det finns en inlärningskurva, ja, men i slutet av dagens inlägg kommer du att tänka på Gutenberg annorlunda.

Vad är Gutenberg Editor?

wordpress Gutenberg redaktör

Du tittar på Gutenberg, standardredigeraren för WordPress-block

Om du använder WordPress 5.0 och senare måste du ha stött på den nya och glänsande WordPress-redaktören, känd som Gutenberg.

Och precis som många andra användare vill du använda den revolutionära redaktören, men du är tveksam eftersom Gutenberg är komplicerat.

Eller kanske när du först träffade Gutenberg fungerade inte olika saker. När allt kommer omkring utvecklarna och gör fortfarande teman och plugins kompatibla med blockredigeraren.

Så du återvände snabbt till Klassisk redaktör, vilket, BTW, är okej med oss. Kom bara ihåg att WordPress inte kommer att stödja Classic Editor efter 2022. Dessutom missar du alla extra godsaker som Gutenberg erbjuder.

När det gäller funktionalitet gör Classic Editor och Gutenberg samma sak; du vet, båda verktygen hjälper dig att skapa innehåll utan kodning.

Men vi är så vana vid den gamla WYSIWYG-redaktören att vi tycker att anpassning till den nya Gutenberg UI är lite främmande, om inte helt förvirrande. Åtminstone det är vad jag tror.

Men exakt vad är Gutenberg?

Gutenberg är den nya standard WordPress-redigeraren. Det är till skillnad från den traditionella visuella / textredigeraren; Gutenberg använder innehållsblock ungefär som många moderna sidbyggare.

Det levereras med mer intuitiva funktioner än Classic Editor, vilket innebär att du kan skapa innehåll med rika medier på språng. Nu kan du snabbt piska upp extraordinära layouter, oavsett om du arbetar med WordPress-inlägg eller sidor.

Och med ett par tillägg kan Gutenberg positivt konkurrera med etablerade WordPress-sidbyggare som Brizy, Elementor och Divi.

Den enda nackdelen är att sidbyggare ofta erbjuder fler funktioner eftersom de främst är sidbyggare! Samtidigt är Gutenberg fortfarande ganska ung, och du kan bara förvänta dig att blockredaktören växer i höga steg.

I dagens inlägg ska vi ha en spännande tid att skapa ett WordPress-inlägg med Gutenberg-redaktören. Jag strävar efter att täcka alla små detaljer och funktioner så att du kan använda Gutenberg för att skapa innehåll som proffsen.

Är du redo? Om så är fallet, låt oss skapa det WordPress-inlägget.

Hur man skapar ett WordPress-inlägg med Gutenberg

Om du driver en WordPress-webbplats skapar du antagligen fler inlägg än sidor. I följande avsnitt skapar vi ett WordPress-inlägg i Gutenberg från början. Jag hoppas att du kommer att ha lika roligt som jag gjorde när jag testade Gutenberg.

Det ur vägen, navigera till Inlägg> Lägg till nytt som vi markerar i skärmdumpen nedan.

skapar ett nytt inlägg i Gutenberg

Om du gör det leder du direkt till Gutenberg-redaktören som visas nedan.

wordpress Gutenberg redaktör

Ganska snyggt, va? Låt oss nu rulla upp ärmarna och gå igång.

Lägga till en titel

lägger till en ny titel i Gutenberg

Du kan inte skriva ett inlägg utan en solid titel. Det bra är att Gutenberg gör det otroligt enkelt att lägga till en titel.

Det första blocket du ser är Titel längst upp i dokumentet när vi beskriver bilden ovan. Om du vill skapa en titel för ditt inlägg skriver du in i blocket. Enkelt som A, B, C.

Behöver du redigera permalänken? Du kan enkelt göra det i Titel blockera genom att klicka på Redigera som visas nedan.

redigera post permalänk i Gutenberg

När du har lagt till din titel trycker du på STIGA PÅ för att starta en ny rad. Åh ja, Gutenberg bevarar den inbyggda navigeringen du älskade i den klassiska WordPress-redigeraren.

Lägga till ett nytt stycke

nytt stycke block i Gutenberg

Slår på STIGA PÅ nyckeln skapar en ny Paragraf som visas ovan. Innan du skriver in någon text ger blocket ett par alternativ. Se den numrerade bilden nedan för mer information.

nya stycken blockalternativ gutenberg

Anteckningar. Du kan:

  1. Konvertera det nya stycket block till vilket annat block som helst, t.ex. bild, rubrik, omslag, galleri, WooCommerce, form osv.
  2. Använd genvägen för att ändra styckningsblocket till ett bildblock
  3. Ändra avsnittblocket till ett rubrikblock, dvs H2, H3 och H4
  4. Förvandla avsnittblocket till ett omslagsbild

Som illustrationssyfte reserverar jag första stycket för introduktionen efter inlägget. När du lägger till lite text visas ett formateringsverktyg som visas nedan.

verktygsfältet för formatering av gutenberg

Tack vare formateringsverktygsfältet kan du:

  • Konvertera stycket till en vers, citat, rubrik, lista, kod och förformaterad text
  • Djärv, Kursivera, strykning, och Understrykning innehåll
  • Rikta in text till vänster, höger, centrera och motivera
  • Lägg till en länk som också kan öppnas i en ny flik
  • Sätt in en inline-bild (ja, den finns!)
  • Dölj blockinställningar
  • Duplicera blocket
  • Sätt in ett block före eller efter det aktuella blocket (i vårt fall, det är det första stycket, så var inte lägger till något innan, bara efter.) Du kan lägga till ett omslagsbild innan det första stycket om du så vill eftersom det ser så ut Bra
  • Redigera blocket som HTML
  • Lägg till det aktuella blocket i återanvändbara block så att du kan använda det i andra inlägg
  • Ta bort blocket helt

Du kan ytterligare anpassa avsnittet med de alternativ som finns tillgängliga i Blockera fliken finns i sidofältmenyn som visas nedan.

gutenberg sidofältalternativ för styckeblock

Några anteckningar om bilden ovan:

  1. Välj den Blockera här för att visa alla blockalternativ och inställningar
  2. Välj teckensnittstorlek och aktivera Drop Cap här
  3. Lägg till bakgrundsfärg till ditt stycke. Jag ställde in den till blått för illustrationssyften. Du kan också anpassa textfärgen. I båda fallen kan du lägga till obegränsade anpassade färger
  4. Du kan lägga till en anpassad CSS-klass här, vilket betyder att du kan lägga till ytterligare CSS-stilar i ditt block
  5. Den blå bakgrunden och Drop Cap tillämpades redan i Gutenberg-redaktören

Dokumentfliken i sidofältet

Det finns en annan flik i sidofältmenyn; de Dokumentera som visas nedan.

avsnitt blockera sidofältet dokumentflik

Här anteckningar för ovanstående bild:

  1. Klicka här för att växla till Dokumentera flik
  2. Här kan du schemalägga ett inlägg, ställa in synlighet till endera Privat eller offentlig, sätta ett inlägg till Väntar på granskning status, välj inläggsformat och skapa ett klibbigt inlägg
  3. Avsnittet låter dig redigera din permalänk
  4. Du kan välja eller skapa nya kategorier här
  5. Lägg till taggar till ditt inlägg
  6. Ställ in bilden
  7. Skapa ett manuellt utdrag
  8. Tillåt kommentarer, pingbacks och trackbacks

Som du ser har du många alternativ att designa ett styckeblock (och hela inlägget), vilket sätt du än önskar. Förresten, olika block har olika inställningar som vi lär oss på en minut.

Efter första stycket, tryck på STIGA PÅ knapp igen för att skapa en ny rad (eller styckeblock). Låt oss nu lägga till en bild under första stycket.

Lägga till bilder i Gutenberg

lägger till en ny bild i Gutenberg

De säger att en bild talar tusen ord, och ett blogginlägg utan bilder är, ja, tråkigt. För att lägga till en bild i ditt WordPress-inlägg med Gutenberg, har du ett par alternativ.

När du träffar STIGA PÅ för några ögonblick sedan utlöste du ett nytt styckeblock Eftersom Gutenberg är intuitivt kan du lägga till en bild genom att klicka på plus (+), bilden eller omslagsikonerna när vi markerar i bilden nedan.

lägga till en ny bild i Gutenberg Editor

Ett par anteckningar:

  1. Du kan lägga till en bild via plussymbolerna (+)
  2. Här kan du lägga till en bild enkelt
  3. Det här alternativet låter dig lägga till en omslag bild (Dessa är vanligtvis större än andra foton. Dessutom kan du lägga till text på omslagsbilder, BTW)

Gå vidare och klicka på någon av plussymbolerna (+). Klicka sedan på Bild som visas nedan.

lägga till bilder i Gutenberg

Klicka på Bild fliken laddar Bild block som visas i skärmdumpen nedan.

gutenbergs bildblock

De Bild block låter dig ladda upp en bild eller lägga till en från en URL eller mediebiblioteket. Under processen kan du lägga till alt-text (viktigt för SEO), bildtexter och beskrivning via media skärminställningar eller Blockera sidofältet som visas på följande bilder.

De vanliga mediainställningarna …

wordpress mediainställningar

…och den Bild blockera inställningar.

Gutenberg-bildblockinställningar

Lär du något här idag? Jag hoppas det. Låt oss gå vidare.

Efter att ha lagt till din bild lägger Gutenberg till ett nytt avsnittblock precis under det. Du kan lägga till vad du vill, men för illustrationsändamål har jag lagt till lite text och sedan en knapp under det.

Hur man lägger till nedladdningsbara filer, t.ex. PDF, bilder, videor osv

Gutenberg gör det otroligt enkelt att lägga till nedladdningsbara filer till ditt WordPress-inlägg eller -sida.

I en ny Paragraf blockera, klicka på plussymbolen (+), navigera till Vanliga block och träffade Fil som vi markerar nedan.

lägga till nedladdningsbara filer i Gutenberg

Genom att göra detta startar följande block:

Gutenberg filblock

Från Fil blockera, kan du ladda upp en ny fil eller lägga till en från ditt mediebibliotek. Efter att ha lagt till din fil lägger Gutenberg till en söt Ladda ner -knappen automatiskt enligt bilden nedan.

lägga till fil i Gutenberg

Du kan leka med alternativen. Till exempel kan du redigera / radera “Gratis Gutenberg PDF-checklista”Titel liksom Ladda ner knapp. Du kan lägga till en CSS-klass i blocket och utforma det på vilket sätt du önskar.

Lägga till en offert i Gutenberg

Därefter lägger vi till en offert eftersom de är charmiga, fängslande och hjälper dig att driva punkten hem. I en ny rad klickar du på plustecknet (+) och navigerar till Vanliga block och träffade Citat som visas nedan.

lägga till citat i Gutenberg

Om du gör det läggs till Citat blockera i ditt inlägg som vi markerar i screengrab nedan.

gutenberg citat blockinställningar

Lägg märke till citatblockinställningarna i den högra sidofältet ovan?

För att lägga till din offert skriver du in i blocket. Här är mitt resultat.

gutenberg citat

Ser otroligt ut, rätt?

Lägga till mediabäddar i Gutenberg

Gutenberg kommer med flera block för att bädda in videor och andra medier från över 30 webbplatser som YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, och så vidare.

För att bädda in innehåll klickar du på plussymbolen (+) och navigerar till inbäddningar, och välj webbplatsen. Till exempel ville jag ha YouTube, som visas nedan.

gutenberg youtube bädda in

Nästa, kopiera och klistra in YouTube-webbadressen och klicka på Bädda in som visas på bilden nedan.

gutenberg youtube bädda in block

Så snart du träffar Bädda in -knappen täcker Gutenberg länken till en video automatiskt som vi markerar nedan.

inbäddad YouTube-video i Gutenberg

Smidig segling hela vägen. Låt oss nu lägga till en fristående knapp som är perfekt för att skapa en call to action (CTA).

Hur man lägger till en knapp i Gutenberg

Du borde inte ha svårt att lägga till block på denna punkt. Klicka bara på plus (+) och välj ditt block. Det kan inte bli lättare än så.

Så hur lägger vi till en knapp?

I en ny rad (eller block) klickar du på plussymbolen (+) och navigerar till Layoutelement och klicka på Knapp som visas nedan.

lägga till knappar i Gutenberg Editor

Om du gör det leder du till Knapp blockera som vi detaljerar nedan.

lägga till knappar i Gutenberg Editor

Som du ser från bilden ovan kan du redigera knapptexten och lägga till en länk. Dessutom kan du anpassa knappen via sidofältmenyn till höger om skärmen.

Efter ett par klick är det här jag fick.

gutenberg-knappexempel

Förresten, om du använder svåra att läsa färgkombinationer på dina knappar, Gutenberg meddelar dig omedelbart. Vad trevligt?

Hur man lägger till kolumner i Gutenberg

Låt oss lägga till några kolumner med en vacker knapp på plats. Jag lägger till två kolumner, så följ noggrant.

Här är vad du ska göra. Klicka på plus (+) -ikonen, navigera till Layoutelement och klicka på kolumner som visas på bilden nedan.

kolumner fliken Gutenberg redaktör

Gutenberg lägger till två kolumner som standard. Se bilden nedan, och kom ihåg att jag redan har lagt till innehåll i kolumnerna.

gutenberg kolumner i wordpress redaktör

Vilket får mig:

gutenbergs kolumner frontend

Inte illa för några sekunders arbete. Men kanske du inte vill skapa kolumner. Du kanske vill visa en bild bredvid lite text.

Finns det ett block för det? Ja, det finns det!

Hur man lägger till en bild bredvid text i Gutenberg

Vill du lägga till en bild bredvid text? I så fall kommer du att älska följande avsnitt.

Klicka som vanligt på plussymbolen (+) och naviger till Layoutelement och klicka Media & text enligt nedanstående.

media och text gutenberg block

Du borde se Media & text som visas nedan.

media och textblock i Gutenberg

Ladda sedan upp din bild / video / media eller lägg till en från mediebiblioteket. Lägg sedan till din text bredvid media, som visas på bilden nedan.

Jag lekte med Media & text blockera, och jag kom med följande. Märk väl; Jag lyckades också trycka in en knapp där ��

media och textblock i full action

Åh, det är baksidan! Låt mig visa dig framsidan. Här:

media text block i Gutenberg

Ser mycket professionell ut, eller hur? Du kan säkert föreställa dig hur mycket du kan uppnå med Gutenberg-redaktören.

Tredjeparts Gutenberg-block

WordPress-utvecklare är angelägna om att göra teman och plugins kompatibla med Gutenberg-redaktören. Några exempel inkluderar WooCommerce, Jetpack och Yoast SEO.

Till exempel kan du lägga till WooCommerce-block i ditt WordPress-inlägg. Först måste du installera och aktivera WooCommerce.

Nästa, i en ny rad, klicka på plus (+) -ikonen, navigera till WooCommerce och välj vilket block du vill som visas nedan.

woocommerce gutenberg block

Vet du vad det här betyder? Det betyder att du kan skapa rich media och fantastiska inlägg och sidor på några minuter.

Andra anmärkningsvärda block

Vi har redan över 2000 ord, och om vi fortsätter med det kommer vi att skriva en hel e-bok. Min bön är att du nu kan använda Gutenberg utan hicka.

Det ur vägen, här är en lista över de andra tillgängliga blocken.

  • widgets – Du kan lägga till innehåll från dina widgets i blogginlägg
  • kortkoder – Du kan fortfarande använda inbyggda WordPress-kortkoder
  • Klassisk – Ett bra block som innehåller ditt gamla innehåll
  • Mer – Blocket var tidigare känt som Läs mer märka
  • Sidbrytning, separatorer, mellanrum
  • Anpassad HTML, Pullquote, Tabell
  • Galleri och HTML5 ljud / video
  • Och så mycket mer beroende på vilka teman och plugins du använder

Åt sidan: Att skapa en WordPress-sida liknar det att skapa ett inlägg som sparas för några minuters skillnader, så vi kommer inte gå in på det idag.

Snabba Gutenberghackar och kortkommandon

Gutenberg kommer med ett par hacks och kortkommandon som gör det ännu enklare att göra. Om du till exempel skriver “/” i ett styckeblock kommer det att visa en lista med block.

Du kan till och med välja ett specifikt block genom att skriva titeln på blocket efter backslashen (/), t.ex. om du skriver “/ image” kommer bildblocket att uppstå bland andra bildrelaterade block. Se bild nedan för mer information.

Gutenberg-backspärrgenväg

Tangentbordsgenvägar: Tryck på för att visa alla tillgängliga genvägar SKIFT + ALT + H i Windows och OPT + CTRL + H i Mac.

Överst på dokumentet kan du se dokumentstrukturen genom att klicka på ikonen (i), som visas nedan.

Gutenbergs dokumentstruktur

Trevlig. Extraordinärt smidig.

Åh, och förresten, felet “Uppdatering misslyckades” händer vanligtvis på grund av en skakig internetanslutning ��


Mellan dig och mig är Gutenberg en fantabulös innehållsredaktör. Förutsatt att du är villig att lära dig repen; du kan skörda mycket från framtidens WordPress-redaktör.

Gutenberg är fortfarande relativt ung, och du kan förvänta dig att den ska växa när det gäller användbarhet och funktionalitet. Det kommer att vara en allvarlig kraft att räkna med de kommande dagarna. Sidbyggare bör bättre se upp, annars kommer de att gå slut

Vi hoppas att vår steg-för-steg-guide till Gutenberg-redaktören hjälpte dig att sätta saker i perspektiv. Vi tror att du nu kan använda blockredigeraren för att skapa innehåll som en proffs.

Dela dina bekymmer, tankar och frågor i kommentaravsnittet nedan.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map