De beste originale WordPress-blokkene [Rask oversikt]

Vi gir deg en guide til hvordan du bruker Gutenberg WordPress-editor og blokker. Les nyheter om endringer i blokkene som kommer i den neste 5.4-versjonen. Vi har valgt ut alle de mest brukte blokkene som må brukes på ethvert nettsted. Når den er utgitt, vil vi legge ut mer informasjon om alle funksjonene.

Da WordPress kunngjorde den nye Gutenberg-editoren i 2018, var vi svært begeistret. Nå, et par år senere, ser vi en enorm forbedring. Gutenberg WordPress-editor er et flott verktøy for å lage et nettsted.

Alle disse standard WordPress-blokkene for Gutenberg-editoren er fullt funksjonelle i vårt nyeste prosjekt Gratis Citadela WordPress-tema. Du kan bruke den på alle nettsteder. opprette en konto og laste den ned gratis.

Med AitThemes Citadela-pluginsMed en webpresentasjon kan du lage spesifikt innhold for en bedrift, virksomhet, blogg eller ideell nettside. Eller til og med starte en ny online virksomhet. Nettstedets hastighet og enkel redigering av nettstedet er de viktigste faktorene.

Hva er en blokk?

Gutenberg WordPress-blokker er byggeenheter på nettstedet. Hver av dem har sin egen plass og sitt eget formål. Det er svært viktig å bruke riktig WordPress-blokk for en bestemt type innhold.

Men hvordan finner du den blokken som passer best til det du har tenkt?

For å hjelpe deg med å forstå WordPress-blokker bedre, har vi laget denne oversikten over de mest populære.

Blokker med tekstinnhold

Det finnes flere blokker som du kan bruke til å sette inn tekstinnhold på nettstedet ditt. Du kan bruke flere blokker. Fra WordPress 5.4 er det en ny innstilling, du kan endre tekstfarge.

• Paragraf
• Overskrift
• Sitat
• Liste
• Sitat
• Tabell
• Vers
• Forhåndsformatert

Bortsett fra dette bruker du Classic-blokken, som kan være mer praktisk for et langt avsnitt.

Knappeblokk

Det har blitt superenkelt å lage en overbevisende CTA-knapp i WordPress med Button block. Du trenger ikke å legge inn tilpasset CSS eller forstå HTML. Du kan - men trenger ikke - legge inn heksadesimalkode for favorittfargen din for å få knappen til å se fin og iøynefallende ut.

Hvor skal jeg bruke Button Block?

Når nettbesøkende kommer til nettstedet ditt, vil du oppfordre dem til å handle. Det er det CTA-knappene er til for.

Generelt sett er det tre steder du bør bruke WordPress Button-blokken:

• Hjemmeside - for å fullføre handlinger som vil føre til at du når målet ditt, for eksempel å melde deg på nyhetsbrev, oppdage spesialtilbud eller registrere deg for en gratis prøveperiode.
• Produktside - avhengig av hvordan produktsiden er utformet, kan det være én CTA-knapp (KJØP) eller flere knapper, f.eks. produktdetaljer, kjøp, legg til på ønskeliste osv.
• Blogg - CTA-knapper kan henvise til en annen nyttig artikkel eller kjøp av produktet/tjenesten din.

Innstillinger for knappeblokk

I Inspector, på høyre side, kan du enkelt administrere innstillingene for knappen din:

• Stil
• Bakgrunnsfarge
• Skriftfarge
• Grense

Teksten i CTA-knappen bør være kort og direkte, og oppfordre til den handlingen du ønsker at de besøkende skal utføre.

Nyheter som kommer i neste WordPress 5.4-versjon (lanseres 31. mars 2020)

Knappblokken kommer til å bli erstattet med en ny knapps blokk.
Du kan anta fra det nye navnet at du vil kunne opprette flere knapper ved siden av hverandre i en blokkbeholder. Ofte er det behov for å opprette to CTA om gangen, for eksempel: Kjøp nå og Les mer. Det kommer også noen nye stil- og fargeinnstillinger. Velg stilen Fyll eller Kontur og deretter fargen på bakgrunnen. Du kan velge Solid eller Gradient-bakgrunn. Noen forhåndsinnstillinger vil være tilgjengelige som et utgangspunkt for mer uanstrengt finjustering. Den gode nyheten er at alle eksisterende knappeblokker vil fungere, og at du ikke trenger å migrere dem.

Kolonneblokk

Columns-blokken er en fantastisk WordPress-blokk som åpner dører til nye layouter. Den gir deg flere alternativer for sideelementarrangementer, noe som resulterer i flere designalternativer.

Det er enkelt å jobbe med Columns-blokken:

• Ingen ekstra plugin-installasjon.
• Ingen koding er nødvendig.
• Alt du trenger er litt sans for ryddig design.

Sammenlignet med tidligere problemer du måtte gå gjennom før utgivelsen av WordPress-blokkeredigereren, er det superenkelt å bruke Columns WordPress-blokken.

Hvordan bruke Columns-blokken?

Som nevnt ovenfor, kan Columns-blokken brukes på to måter:

• For å organisere flyten i tekstene dine (i et blogginnlegg eller på den vanlige siden).
• Slik ordner du andre blokker i kolonner.

Når du organiserer tekst i kolonner, f.eks. i et blogginnlegg, øker du lesbarheten og gjør nettstedet ditt mer oversiktlig og brukervennlig.

Men når du bruker Columns-blokken til å legge inn andre blokker, for eksempel bilder, tekster og knapper, endrer du hele oppsettet på den valgte siden og lager nye design.

Innstillinger for kolonneblokker

Når du har satt inn en kolonneblokk på siden, velger du hvor mange kolonner du vil ha. Det kan være alt fra 2 til 6 kolonner. Deretter kan du begynne å skrive inn tekst eller legge til blokker i hver kolonne.

Justering av innholdet i kolonneblokken kan stilles inn separat for hele blokken og for de enkelte kolonnene. Du kan til og med velge andelen av kolonnens bredde. På denne måten kan én kolonne være bredere enn en annen.

Dekkblokk

La oss snakke om overskriften på nettstedet ditt. Det er en seksjon som definerer førsteinntrykket når noen kommer til hjemmesiden din. Ganske viktig, ikke sant? Og visste du at Cover-blokken kan brukes som overskrift på alle sidene dine?

Cover er en av de viktigste WordPress-blokkene som hjelper deg med å imponere besøkende på nettet. Spesielt når den brukes riktig, eller rettere sagt, når den er pent integrert i webdesignet ditt.

Hvor skal jeg bruke Cover block?

Som nevnt ovenfor kan Cover-blokken brukes på alle sidene dine. Dessuten kan den legges til hvor som helst på siden, i motsetning til overskriften på nettstedet ditt som er festet på toppen av nettstedet ditt.

Dekkblokken kan brukes som:

• Overskriften på alle sider, inkludert hjemmesiden.
• Bilde eller video overskrevet av tekst som brukes på produktsiden.
• Innholdsseparator i blogginnlegg.

Innstillinger for dekkblokk

Det er veldig enkelt å sette opp forsideblokken. Først velger du et bilde eller en video som bakgrunn. Du kan også bruke en enkelt farge i stedet. Når du har valgt bakgrunn, legger du til en tittel og en undertittel. 

Du kan velge justering av blokken, og selvfølgelig også justering av teksten i den.

Justering av dekselblokken gir følgende alternativer:

• Juster til venstre
• Align Center
• Juster til høyre
• Bred bredde
• Full bredde

Min personlige favoritt er fargeoverlegget som er tilgjengelig i inspektøren - bakgrunnsbildet for forsideblokken kan tones i hvilken som helst farge du ønsker. Sammen med tilpasset skriftstørrelse og -farge kan du skape vakre kontraster, og det endelige utseendet på forsideblokken din blir forbløffende.

Fra WordPress 5.4 kan du velge gradientbakgrunn i stedet for en ensfarget bakgrunn.

Galleriblokk

Vis frem bilder på nettstedet ditt ved hjelp av Gallery-blokken. Denne standard WordPress-blokken er designet for å holde på bildene dine og vise dem frem på en hvilken som helst side på nettstedet ditt. På samme måte som andre WordPress-blokker kan Gallery-blokken plasseres hvor som helst på nettstedet eller i blogginnlegget.

Du kan laste opp bildene dine ved å velge filer fra mediebiblioteket, fra datamaskinen eller ved hjelp av dra-og-slipp-funksjonen.

Hvor skal jeg bruke Gallery Block?

Avhengig av hvilken type nettsted du har, kan det være lurt å lage et komplekst bildegalleri eller en enkel bildepresentasjon. Du kan bruke Galleri-blokken på:

• Hjemmesiden din
• Individuelle undersider opprettet som album i bildegalleriet ditt
• Produktsider
• Blogginnlegg

Innstillinger for galleriblokker

I tillegg til de ulike justeringsalternativene i selve Gallery-blokken, finnes det et par interessante alternativer i denne blokken, for eksempel

• Antall kolonner bildene er stilt opp i.
• Bildebeskjæring for å matche samme størrelse (av det minste bildet).
• Hyperkobling for å gi deg muligheten til å lenke til en annen side eller mediefil.

Bildeblokk

Bildeblokken er ikke noe annet enn blokken for å vise et bilde på nettstedet ditt.

Det er helt riktig. Hvis du bare vil legge til et bilde på noen av sidene dine, bør du bruke Image WordPress-blokken. Den ligner kanskje på andre presenterte blokker, men det er betydelige forskjeller som gjør den perfekt for enkeltbilder.

Når skal man bruke bildeblokk?

Bildeblokken bør brukes spesielt når objektet som vises på bildet, er spesielt viktig for de besøkende på nettet:

• Fang nettbesøkendes oppmerksomhet med et bestemt bilde.
• Vis bilde med bildetekst.
• Vis infografikk som hjelper de besøkende med å forstå det omtalte temaet bedre.

Innstillinger for bildeblokker

En av de største fordelene med Image WordPress-blokken er alternativene for bildestørrelse. Du kan enkelt endre størrelsen på et bilde ved å trekke det i hjørnet, velge en fast størrelse i piksler eller definere størrelsen i prosent.

Et annet viktig alternativ er inndatafelt for alternativ tekst, bildetekst og lenke. Jeg anbefaler på det sterkeste å bruke disse feltene, ettersom de spiller en viktig rolle i SEO på siden.

Media- og tekstblokk

La oss gå videre til mer avanserte sideoppsett som du kan lage ved hjelp av Media & text-blokken. Denne WordPress-kjerneblokken lar deg kombinere medier og tekst side om side, på en estetisk og kontekstuell måte.

Hvor skal jeg bruke medie- og tekstblokken?

Selv om Media & tekstblokken egner seg best til bruk i blogginnlegg, kan du med litt fantasi bruke den andre steder også. Du kan for eksempel lage en fin produkt- eller tjenesteoversikt ved å bruke bilder og tekst ved siden av hverandre.

Ikke glem å legge til en knappeblokk i tekstdelen av Media- og tekstblokken, hvis den brukes som produkt-/tjenesteoversikt. På denne måten kan du designe en fin CTA-seksjon på alle sider.

Fordeler med Media & tekstblokk

• Samle bilder og tekst som passer sammen i en kontekst.
• Unngå feilplassering av bilder i blogginnlegget.
• Hjelper med nettstedets responsivitet (bruk "Stack on mobile"-funksjonen).

Innstillinger for medier og tekstblokker

Når du ser på innstillingene for Media & tekstblokken, vil du legge merke til en rekke justeringsalternativer, og noen av dem er unike sammenlignet med de fleste andre blokker.

En interessant og nyttig innstilling i denne blokken er bakgrunnsfargen. Ved å fargelegge området rundt bildet og teksten som passer sammen, kan du visuelt fremheve forbindelsen mellom dem.

Sett inn en lenke fra WordPress versjon 5.4 (31.3.2020). Du kan velge mellom lenke, mediefil eller vedleggsside.

Tabellblokk

Tabellblokken er et av eksemplene på hvordan WordPress ble forbedret etter introduksjonen av WordPress Block Editor i versjon 5.0 og senere. Mens du før trengte en plugin for å sette inn tabeller på WordPress-nettstedet ditt, kan du nå ganske enkelt bruke tabellblokken.

Hvor skal jeg bruke tabellblokken?

Tabeller spiller en stor rolle når det gjelder å formidle nyttig innhold på en oversiktlig og transparent måte. De fleste nettsteder har sikkert brukt tabeller. Her er bare noen få eksempler på bruk av tabeller på ulike nettsteder:

• Sammenligning av data
• Pristabeller
• Tekniske detaljer om produktet
• Oppskrifter
• Oversikt over medlemspakker

Å ha tabellblokk som en del av gratis WordPress-kjernen er virkelig fantastisk.

Innstillinger for bordblokker

Når du setter inn en tabellblokk på siden, må du definere et antall kolonner og rader i tabellen. Ikke vær redd, dette antallet er ikke fast. Du kan legge til flere rader og kolonner (eller fjerne dem) når som helst.

Velg deretter en stil for tabellen: standard eller striper. Gå videre til justering og skrifttype, og fyll til slutt ut tabellen før du legger siste hånd på verket.

Flere alternativer inkluderer:

• Bakgrunnsfarge
• Celler med fast bredde
• Overskrift
• Bunntekst
• Lenke (tekst i en tabell kan lenke til andre sider)

Hvilken blokk ønsker du å se neste gang?

Håper du likte å lese om vårt utvalg av svært nyttige WordPress-kjerneblokker - gratis tilgjengelig for alle. Gi oss gjerne beskjed om hvilke blokker du ønsker å lese om neste gang, eller hvilke funksjoner du synes fortsatt mangler i WordPress-kjernen. Takk for at du leste!