Bästa original WordPress block [snabb översikt]

Vi ger dig en guide om hur du använder Gutenberg WordPress Editor och block. Läs gärna nyheterna om blockändringar som kommer i nästa version 5.4. Vi har valt ut alla de block som används oftast och som måste användas på alla webbplatser. När de har släppts kommer vi att publicera mer information om alla funktioner.

När WordPress tillkännagav den nya Gutenberg-editorn 2018 var vi mycket glada över den. Nu ett par år senare ser vi en enorm förbättring. Gutenberg WordPress-redigeraren är ett utmärkt verktyg för att skapa en webbplats.

Med AitThemes CitadelaWP insticksprogramkan du skapa specifikt innehåll för en presentation av ett företag, en verksamhet, en blogg eller en ideell webbplats. Eller till och med starta en ny online-verksamhet. Webbplatsens hastighet och lätthet att redigera webbplatsen är de viktigaste faktorerna.

Vad är ett block?

Gutenberg WordPress-block är webbplatsens byggstenar. Var och en av dem har sin egen speciella plats och sitt eget syfte. Det är mycket viktigt att använda rätt WordPress-block för en viss typ av innehåll.

Men hur hittar du det block som passar bäst för dina syften?

För att du ska kunna förstå WordPress-blocken bättre har vi sammanställt en översikt över de mest populära blocken.

Block med textinnehåll

Det finns flera block som du kan använda för att infoga textinnehåll på din webbplats. Du kan använda flera block. Från och med WordPress 5.4 finns det en ny inställning, du kan ändra textfärg.

• Paragraf
• Rubrik
• Citat
• Lista
• Citat
• Tabell
• Vers
• Förformaterad

Förutom detta använder du Classic block som kan vara behändigare för ett långt stycke.

Knappblock

Att skapa en övertygande CTA-knapp i WordPress har blivit superenkelt med Button block. Du behöver inte ange anpassad CSS eller förstå HTML. Du kan - men behöver inte - ange hexadecimalkod för din favoritfärg för att få knappen att se snygg och iögonfallande ut.

Var ska man använda Button block?

När webbbesökaren väl har kommit till din webbplats vill du uppmuntra dem att vidta åtgärder. Det är vad CTA-knappar är till för.

I allmänhet finns det tre platser där du bör använda WordPress Button-blocket:

• Hemsida - för att utföra en åtgärd som leder till att du når ditt mål, t.ex. registrera dig för nyhetsbrev, ta del av ett specialerbjudande eller registrera dig för en gratis provperiod.
• Produktsida - beroende på hur produktsidan är uppbyggd kan det finnas 1 CTA-knapp (KÖP) eller fler knappar, t.ex. produktinformation, köp, lägg till i önskelistan osv.
• Blogg - CTA-knappar kan hänvisa till en annan användbar artikel eller köp av din produkt/tjänst.

Inställningar för knappblock

I Inspector, på höger sida, kan du enkelt hantera inställningar för din knapp:

• Stil
• Bakgrundsfärg
• Fontens färg
• Gräns

Texten i din CTA-knapp ska vara kort och rak och uppmuntra till den åtgärd du vill att dina besökare ska vidta.

Nyheter som kommer i nästa WordPress 5.4-version (release 31 mars 2020)

Knappblocket kommer att ersättas med en ny knapps block.
Av det nya namnet att döma kan du anta att du kommer att kunna skapa fler knappar bredvid varandra i en och samma blockcontainer. Ofta finns det ett behov av att skapa två CTA åt gången, till exempel: Köp nu och Läs mer. Dessutom kommer några nya stil- och färginställningar. Välj stilen Fyll eller Kontur och sedan bakgrundsfärgen. Du kan välja Solid eller Gradient-bakgrund. Vissa förinställningar som utgångspunkt kommer att finnas tillgängliga för mer enkel finjustering. Den goda nyheten är att alla befintliga knappblock kommer att fungera och att du inte behöver migrera dem.

Kolumnblock

Columns-blocket är ett fantastiskt WordPress-block som öppnar dörrar till nya layouter. Det ger dig fler alternativ för arrangemang av sidelement, vilket resulterar i fler designalternativ.

Det är enkelt att arbeta med Columns-blocket:

• Ingen extra plugin-installation.
• Ingen kodning krävs.
• Allt du behöver är lite känsla för snygg design.

I jämförelse med tidigare krångel som du var tvungen att gå igenom innan WordPress blockredigerare släpptes, är det superenkelt att använda Columns WordPress-blocket.

Hur använder man Columns block?

Som framgår ovan finns det två sätt att använda Columns-blocket:

• För att organisera flödet av dina texter (i ett blogginlägg eller på den vanliga sidan).
• För att ordna andra block i kolumner.

När du organiserar text i kolumner, t.ex. i ett blogginlägg, ökar du läsbarheten och gör din webbplats mer överskådlig och användarvänlig.

Men när du använder Columns-blocket för att hysa andra block, till exempel bilder, texter och knappar, ändrar du hela layouten på din valda sida och skapar nya mönster.

Inställningar för kolumnblock

När du har infogat ett Column-block på sidan väljer du hur många kolumner du vill ha. Det kan vara allt från 2 till 6 kolumner. Sedan kan du börja skriva din text eller lägga till block i varje kolumn.

Inriktningen av innehållet i ditt kolumnblock kan ställas in separat för hela blocket och för enskilda kolumner. Du kan även välja hur stor del av kolumnen som ska vara bred. På så sätt kan en kolumn vara bredare än en annan.

Täckblock

Låt oss prata om sidhuvudet på din webbplats. Det är en sektion som definierar det första intrycket när någon kommer till din hemsida. Ganska viktigt, eller hur? Och visste du att Cover-blocket kan användas som rubrik på alla dina sidor?

Cover är ett av de viktigaste WordPress-blocken som hjälper dig att imponera på dina besökare. Speciellt när det används på rätt sätt, eller rättare sagt, när det är snyggt integrerat i din webbdesign.

Var ska man använda Cover block?

Som nämnts ovan kan Cover-blocket användas på alla dina sidor. Dessutom kan det läggas till var som helst på sidan, till skillnad från sidhuvudet på din webbplats som är fast längst upp på din webbplats.

Täckblocket kan användas som:

• Huvudet på en sida, inklusive hemsida.
• Bild eller video skrivs över av text som används på produktsidan.
• Innehållsavskiljare i blogginlägg.

Inställningar för täckblock

Att skapa ett Cover-block är mycket enkelt. Först väljer du en bild eller en video som bakgrund. Du kan också använda en enda färg istället. När du har ställt in bakgrunden lägger du till en titel och en undertext. 

Du kan välja justering av blocket och naturligtvis justering av texten i blocket.

Inriktningen av täckblocket erbjuder följande alternativ:

• Justera vänster
• Rikta in centrum
• Justera höger
• Stor bredd
• Full bredd

Min personliga favorit är den färgöverlagring som finns tillgänglig i inspektören - Cover-blockets bakgrundsbild kan tonas till vilken färg du vill. Tillsammans med anpassad teckenstorlek och färg kan du skapa vackra kontraster och det slutliga utseendet på ditt omslagsblock kommer att bli häpnadsväckande.

Från och med WordPress 5.4 kan du välja en bakgrund med gradient istället för en enfärgad bakgrund.

Galleriblock

Visa upp bilder på din webbplats med hjälp av Gallery-blocket. Detta WordPress-block är ett standardblock som är utformat för att hålla dina bilder och visa dem på ett snyggt sätt på alla sidor på din webbplats. På samma sätt som andra WordPress-block kan Gallery-blocket placeras var som helst på webbplatsen eller i blogginlägget.

Uppladdning av dina bilder kan göras genom att välja filer från mediebiblioteket, från din dator eller med hjälp av drag&drop-funktionen.

Var ska man använda Gallery block?

Beroende på vilken typ av webbplats du har kanske du vill skapa ett komplext fotogalleri eller en enkel bildpresentation. Du kan använda Gallery-blocket på:

• Din hemsida
• Individuella undersidor som skapas som album i ditt fotogalleri
• Produktsidor
• Blogginlägg

Inställningar för galleriblock

Förutom de olika inriktningsalternativen för själva Gallery-blocket finns det ett par intressanta alternativ inom detta block, till exempel:

• Antal kolumner som bilderna är uppradade i.
• Bildbeskärning för att matcha samma storlek (av den minsta bilden).
• Hyperlänk för att ge dig möjlighet att länka till en annan sida eller mediefil.

Bildblock

Image-blocket är inget annat än blocket för att visa en bild på din webbplats.

Just det, det stämmer. Om du bara vill lägga till en bild på någon av dina sidor bör du använda WordPress-blocket Image. Det kan likna andra block som presenteras, men det finns betydande skillnader som gör det perfekt för enstaka bilder.

När ska man använda Image block?

Bildblock bör användas särskilt när objektet som visas på bilden är särskilt viktigt för din webbbesökare som du vill:

• Fånga webbbesökarens uppmärksamhet med en specifik bild.
• Visa bild med bildtext.
• Visa infografik som hjälper besökarna att bättre förstå det diskuterade ämnet.

Inställningar för bildblock

En av de största fördelarna med WordPress-blocket Image är dess alternativ för bildstorlek. Du kan enkelt ändra storlek på en bild genom att dra den i hörnet, välja en fast storlek i pixlar eller definiera storleken i procent.

Ett annat viktigt alternativ är inmatningsfält för alternativ text, bildtext och länk. Jag rekommenderar starkt att du använder dessa fält eftersom de spelar en viktig roll i SEO på sidan.

Media- och textblock

Låt oss gå vidare till mer avancerade sidlayouter som du kan skapa med hjälp av Media & text-blocket. Med detta WordPress-block kan du kombinera media och text sida vid sida på ett estetiskt och kontextuellt sätt.

Var kan man använda Media & textblock?

Även om Media & text-blocket är mest lämpat för användning i blogginlägg kan du med lite fantasi använda det på andra ställen också. Du kan t.ex. skapa en snygg produkt- eller tjänsteöversikt med hjälp av bild och text bredvid varandra.

Glöm inte att lägga till ett Button-block i textavsnittet i Media & text-blocket, om det används som produkt-/tjänsteöversikt. På så sätt kan du designa en snygg CTA-sektion på vilken sida som helst.

Fördelar med Media & textblock

• Sammanföra bild och text som passar ihop i sammanhanget.
• Undvik att placera bilden fel i blogginlägget.
• Hjälpa till med webbplatsens responsivitet (använd funktionen "Stack on mobile").

Inställningar för media- och textblock

När du tittar på inställningarna för Media & text-blocket kommer du att märka en hel del justeringsalternativ, några av dem är unika jämfört med de flesta andra block.

En intressant och användbar inställning i detta block är bakgrundsfärgen. Genom att färglägga området runt bild och text som passar ihop kan du visuellt markera deras koppling.

Infoga en länk från WordPress version 5.4 (31.3.2020). Du kan välja mellan länk, mediefil eller bifogad sida.

Tabellblock

Tabellblocket är ett av exemplen på hur WordPress har förbättrats efter införandet av WordPress blockredigerare i version 5.0 och senare. Medan du tidigare behövde plugin för att infoga tabeller på din WordPress-webbplats, kan du nu helt enkelt använda Table block.

Var ska man använda bordsblock?

Tabeller spelar en stor roll när det gäller att tillhandahålla användbart innehåll på ett överskådligt och transparent sätt. Säkert har de flesta webbplatser använt tabeller. Här är bara några exempel på hur tabeller används på olika webbplatser:

• Jämförelse av data
• Prissättningstabeller
• Tekniska detaljer om produkten
• Recept
• Översikt över medlemspaketen

Att ha Table block som en del av den kostnadsfria WordPress-kärnan är verkligen fantastiskt.

Inställningar för bordsblock

När du infogar ett Table-block på sidan måste du definiera ett antal kolumner och rader i din tabell. Oroa dig inte, det här antalet är inte fast. Du kan lägga till fler rader och kolumner (eller ta bort dem) när som helst.

Välj sedan en stil för din tabell: standard eller ränder. Gå vidare till justering och typsnitt och fyll slutligen i din tabell innan du lägger till en sista touch på den.

Fler alternativ inkluderar:

• Bakgrundsfärg
• Celler med fast bredd
• Huvud
• Sidfot
• Länk (en text i en tabell kan länka till andra sidor)

Vilket block skulle du vilja se härnäst?

Hoppas att du tyckte om att läsa om vårt urval av mycket användbara WordPress-kärnblock - tillgängliga gratis för alla. Vänligen meddela oss vilka block du vill läsa om nästa gång eller vilka funktioner du tycker fortfarande saknas i WordPress-kärnan. Tack för att du läste!