Bästa original WordPress block [snabb översikt]

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.

Alla dessa standard WordPress-block för Gutenberg-redigeraren är fullt fungerande i vårt senaste projekt Gratis Citadela WordPress tema. Du kan använda den på vilken webbplats som helst, snälla skapa ett konto och ladda ner den gratis.

Med AitThemes Citadela 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
Textfärgformat WordPress 5.4

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.

Knapp WordPress-block

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.

Kolumner WordPress Block

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?

Täck WordPress-block

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.

Cover block gradient bakgrund WordPress 5.4

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.

Galleri WordPress-block

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.

WordPress-block för bilder

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.

Media & text WordPress-block

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.

Tabell WordPress 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!

9 svar på ”Best original WordPress blocks [Quick Overview]

    1. Hej, Bryan,

      tack för att du frågar. Vi är ledsna, Business Finder+ är inte kompatibelt med Gutenberg-block eftersom temat är baserat på vårt äldre ramverk II som stöder följande plugins: https://www.ait-themes.club/wordpress-plugins/#businessfinder

      Bästa hälsningar!
      Zlatko
      AIT-team

  1. Jag har livstidsmedlemskapet och nu är det så att ni inte vill svara på mina frågor. Därför har jag också valt detta medlemskap. 1 års teknisk support! Över den Support dauert es oft Tage bis man eine Antwort bekommt. Jag tycker att programvaran är bra i många Dingen till kompliziert, men när möjligheten finns frågor att ställa frågor inget problem. Men om det nu heter jag solle mir einen Programmierer suchen, då skulle jag ha detta tema ja inte gebraucht!
    Även jag sätter redan en gewisses Maß an Service voraus!

    1. Hej, Thomas,

      Tack för ditt svar. Tack för att du tog dig tid att berätta varför vår tjänst inte uppfyllde dina förväntningar.
      Vi värdesätter ditt företag och vill gärna ta itu med dina problem så snabbt och korrekt som möjligt.
      Jag förstår din frustration och jag ber uppriktigt om ursäkt för eventuella olägenheter som vi har orsakat dig på grund av sena svar, men du ska veta att våra tekniker är redo att svara dig så effektivt och så snabbt som möjligt när du bestämmer dig för en prioriterad fråga (uppenbarligen inom några arbetstimmar). Kundsupport tillhandahålls under arbetsdagar från kl. 08.00 till 17.00 centraleuropeisk tid.

      För det andra,
      vänligen notera att vi erbjuder följande tjänster: https://www.ait-themes.club/services/ och anpassning är en speciell begäran som vi inte tillhandahåller på grund av kapacitetsskäl etc. När du behöver ytterligare arbete på din webbplats, bör du kontakta erfarenheter wordpress utvecklare eller designer.

      Tack för din förståelse.

      Bästa hälsningar!
      AIT-team

    1. Hej, Tony,

      du kan hitta svaret genom att kontakta wordpress comunity forum jag är övertygad om ... hur som helst, det bästa sättet borde vara att kontakta vårt supportteam på: https://system.ait-themes.club/support/add-question.
      Våra tekniker är redo att svara dig så effektivt som möjligt, även så snabbt som möjligt när du bestämmer dig för en prioriterad fråga (uppenbarligen inom några arbetstimmar). Kundsupport tillhandahålls under arbetsdagar från kl. 8.00 till 17.00 centraleuropeisk tid.

      Tack för din förståelse.

      Bäst!
      Zlatko
      AIT-team

  2. Jag har en wordpress-webbplats för jobb. Jag måste designa anpassat tema för det. Om du har tillräcklig kunskap om webbdesign, vänligen skapa en komplett video om hur du designar wordpress-tema för jobbbräda. Jag är verkligen tacksam för dig för denna handling av vänlighet.

    1. Hallå där,

      tack för att du skrev in och för intressant idé och feedback.
      Vår huvudsakliga uppgift är att WordPress CMS-baserade produkter som mallar, plugins, grafik, och vår högsta prioritet är att fortsätta lägga till nya funktioner angående Citadela produktgrupp: http://citadelawp.com

      Hur som helst, vi kommer att överväga din idé och fatta beslut.

      Vänliga hälsningar!
      Zlatko
      AIT-team

Kommentarer är stängda.