Slik bruker du den nye WordPress Block Editor (Gutenberg Tutorial)

I WordPress 5.0 ble den klassiske innholdsredigereren erstattet med en helt ny blokkredaktør, kjent som Gutenberg. Siden den gang har flere av leserne våre bedt oss lage en omfattende tutorial om hvordan du bruker Gutenberg block editor i WordPress.


WordPress-blokkereditor er en helt ny og annerledes måte å lage innhold i WordPress. I denne opplæringen vil vi vise deg hvordan du bruker den nye WordPress-blokkereditoren og mestrer den for å lage visuelt fantastiske blogginnlegg og sider.

Bruker den nye WordPress-blokkereditoren aka Gutenberg

Hva er forskjellen mellom Block Editor (Gutenberg) og Classic Editor?

La oss først sammenligne og forstå forskjellene mellom Gutenberg Block Editor og Classic Editor før vi dykker inn i den nye redaktøren..

Slik så den klassiske redaktøren i WordPress ut:

Gammel WordPress-redaktør

Hvis du oppgraderer til WordPress 5.0, er det slik den nye blokkereditoren ser ut:

Ny WordPress Block Editor også kjent som Gutenberg

Som du ser er de to helt forskjellige redaktører for å lage innhold i WordPress.

Den gamle klassiske redaktøren var en tekstredigerer med formateringsknapper som var veldig lik Microsoft Word.

Den nye redaktøren bruker en helt annen tilnærming, kalt ‘Blocks’ (derav navnet Block Editor).

Blokker er innholdselementer som du legger til i redigeringsskjermen for å lage innholdsoppsett. Hvert element du legger til i innlegget eller siden din er en blokk.

Du kan legge til blokker for hvert avsnitt, bilder, videoer, gallerier, lyd, lister og mer. Det er blokker for alle vanlige innholdselementer, og mer kan legges til av WordPress-plugins.

Hvordan er den nye WordPress-blokkereditoren bedre enn den klassiske redaktøren?

Den nye WordPress-blokkereditoren tilbyr en enkel måte å legge til forskjellige typer innhold i innleggene og sidene dine.

Hvis du for eksempel tidligere ønsket å legge til en tabell i innholdet ditt, så trengte du en egen tabellplugin.

Med den nye redaktøren kan du ganske enkelt legge til en tabellblokk, velge kolonnene og radene og begynne å legge til innhold.

Bordblokk

Du kan flytte innholdselementer opp og ned, redigere dem som enkeltblokker og enkelt lage medierikt innhold.

Det viktigste er at den nye WordPress-blokkereditoren er enkel å bruke og lære.

Dette gir en enorm fordel for alle WordPress-nybegynnere som akkurat har startet sin første blogg eller bygger en DIY-bedriftsnettsted.

Når det er sagt, la oss se på hvordan du bruker den nye WordPress-blokkereditoren som en proff for å lage flott innhold.

Dette er hva vi vil dekke i denne Gutenberg-opplæringen:

  1. Bruke Gutenberg – Den nye WordPress-blokkereditoren
  2. Oppretter et nytt blogginnlegg eller -side
  3. Hvordan legge til en blokk i Gutenberg
  4. Jobber med blokker i den nye redaktøren
  5. Lagring og gjenbruk av blokker i Gutenberg
  6. Publisering og postinnstillinger i Gutenberg
  7. Plugin-innstillinger i ny editor
  8. Legger til noen vanlige blokker i Gutenberg
  9. Utforske noen nye innholdsblokker i Gutenberg
  10. Bonustips for å bruke Gutenberg som en proff
  11. Legger til flere blokker i Gutenberg Block Editor
  12. Vanlige spørsmål om Gutenberg

Klar? La oss dykke inn.

Bruke Gutenberg – Den nye WordPress Block Editor

Blokkeditoren er designet for å være intuitiv og fleksibel. Selv om det ser annerledes ut enn den gamle WordPress-redaktøren, gjør den fremdeles alle tingene du klarte å gjøre i den klassiske redaktøren.

La oss begynne med å dekke de grunnleggende tingene du gjorde i den klassiske redaktøren, og hvordan de gjøres i blokkereditoren.

Opprette et nytt blogginnlegg eller -side ved hjelp av blokkereditoren

Du vil begynne å opprette et nytt blogginnlegg eller -side slik du normalt ville gjort. Bare klikk på Innlegg »Legg til nytt -menyen i WordPress-administratoren din. Hvis du oppretter en side, gå til Sider »Legg til nytt Meny.

Legger til et nytt innlegg

Dette vil lansere den nye blokkereditoren.

Hvordan legge til en blokk i Gutenberg

Den første blokken på hvert innlegg eller side er tittelen.

Etter det kan du bruke musen til å bevege deg under tittelen eller trykke på tabutasten på tastaturet for å flytte ned og begynne å skrive.

Legger til en innleggstittel i Gutenberg

Som standard er neste blokk en avsnittsblokk. Dette lar brukerne begynne å skrive med en gang.

Hvis du imidlertid vil legge til noe annet, kan du klikke på legg til ny blokkeringsknapp øverst til venstre i redigeringsprogrammet, under en eksisterende blokk eller på venstre side av en blokk.

Legg til ny blokkeringsknapp

Ved å klikke på knappen vises menyen for å legge til blokkering med en søkefelt øverst og ofte brukte blokker nedenfor.

Du kan klikke på fanene for å bla gjennom blokkeringskategorier eller skrive inn nøkkelordet for raskt å søke etter en blokk.

Finne og legge til blokker i Gutenberg

Hvis du ikke vil bruke en mus for å klikke på knappen, kan du bruke en snarvei ved å skrive / for å søke og legge til en blokk.

Jobber med blokker i The New Editor

Hver blokk har en egen verktøylinje som vises på toppen av blokken. Knappene på verktøylinjen endres avhengig av blokken du redigerer.

I dette skjermbildet jobber vi for eksempel i en avsnittsblokk som viser grunnleggende formateringsknapper som: tekstjustering, fet, kursiv, insert-link og gjennomgående knapper..

Hver blokk har en egen verktøylinje

Bortsett fra verktøylinjen, kan hver blokk også ha sine egne blokkeringsinnstillinger som vil vises i høyre kolonne på redigeringsskjermen.

Blokker innstillinger

Du kan flytte blokker opp og ned ved å dra og slippe eller ved å klikke opp- og nedknappen ved siden av hver blokk.

Flytte en blokk opp og ned

Lagring og gjenbruk av blokker i Gutenberg

Noe av det beste med blokker er at de kan lagres og gjenbrukes individuelt. Dette er spesielt nyttig for bloggere som ofte trenger å legge til bestemte innholdsutdrag i artiklene sine.

Bare klikk på menyknappen som ligger i høyre hjørne av verktøylinjen for hver blokk. Velg alternativet ‘Legg til gjenbrukbare blokker’ fra menyen.

Lagrer en blokk for senere bruk

Du vil bli bedt om å oppgi et navn for denne gjenbrukbare blokken. Skriv inn et navn for blokken din, og klikk deretter på lagre-knappen.

Gi et navn til gjenbrukbar blokk

Blokkeditoren vil nå lagre blokken som en gjenbrukbar blokk.

Nå som du har lagret en blokk, la oss se hvordan du legger til den gjenbrukbare blokken i andre WordPress-innlegg og sider på nettstedet ditt.

Bare rediger innlegget eller siden der du vil legge til den gjenbrukbare blokken. Fra skjermbildet for redigering klikker du på knappen for å legge til blokkering.

Du finner den lagrede blokken under fanen ‘Gjenbrukbar’. Du kan også finne det ved å skrive navnet på det i søkefeltet.

Sett inn en gjenbrukbar blokk

Du kan ta musen over den for å se en rask forhåndsvisning av blokken. Bare klikk på blokken for å sette den inn i innlegget eller siden din.

Alle gjenbrukbare blokker er lagret i WordPress-databasen din, og du kan administrere dem ved å klikke på koblingen “administrer alle gjenbrukbare blokker”.

Administrer gjenbrukbare blokker

Dette vil føre deg til blokkeringshåndteringssiden. Herfra kan du redigere eller slette alle gjenbrukbare blokker. Du kan også eksportere gjenbrukbare blokker og bruke dem på et hvilket som helst annet WordPress-nettsted.

Importer gjenbrukbare eksportblokker i WordPress

Publiserings- og administrasjonsalternativer i Gutenberg Block Editor

Hvert WordPress-innlegg inneholder mange metadata. Dette inkluderer informasjon som publiseringsdato, kategorier og tagger, kjennetegnet bilder og mer.

Alle disse alternativene er pent plassert i høyre kolonne på redigeringsskjermen.

Dokumentinnstillinger i Gutenberg, den nye WordPress-redigereren

Plugin-alternativer i Gutenberg

WordPress-plugins kan dra nytte av blokkeredaktørens API for å integrere sine egne innstillinger i redigeringsskjermen.

Noen populære plugins er allerede tilgjengelige som blokker. For eksempel, WPForms, den beste WordPress-skjemabyggeren-plugin lar deg legge til skjemaer i innholdet ditt ved hjelp av en widgetblokk.

WPForms blokkerer i nye Gutenberg-redaktør

Slik lar Yoast SEO deg redigere SEO-innstillingene dine i den nye redaktøren:

Yoast SEO-innstillinger i ny Gutenberg-redaktør

WooCommerce kommer også med widgetblokker som du enkelt kan legge til noen av dine WordPress-innlegg og sider.

WooCommerce-produkter blokkerer

Legge til noen vanlige blokker i New Editor

I utgangspunktet kan den nye redaktøren gjøre alt den klassiske redaktøren gjorde. Imidlertid vil du gjøre ting raskere og elegant enn før.

1. Legge til et bilde i en ny WordPress-editor

Det er en klar til å bruke bildeblokk i den nye WordPress-redigereren. Bare legg til blokken, og last deretter opp en bildefil eller velg fra mediebiblioteket.

Bildeblokk i ny WordPress-editor

Du kan også dra og slippe bilder fra datamaskinen din, og redaktøren oppretter automatisk en bildeblokk for den.

Når du har lagt til et bilde, vil du kunne se blokkinnstillingene der du kan legge til metadata for bildet som alt tekst, størrelse og legge til en lenke til bildet.

Innstillinger for bildeblokk

2. Legge til en kobling i en ny blokkereditor

Blokkereditoren kommer med flere blokker der du kan legge til tekst. Den mest brukte en er avsnittsblokken som leveres med en innstikkslinkknapp i verktøylinjen.

Alle andre ofte brukte tekstblokker inkluderer også en lenkknapp på verktøylinjen.

Link-knapp i listeblokken

Du kan også sette inn en kobling ved hjelp av hurtigtasten, som er Kommando + K for Mac og CTRL + K på Windows-datamaskiner.

3. Legge til et bildegalleri i Gutenberg

Galleri-blokken fungerer som bildeblokken. Du legger til den og deretter laster du opp eller velger bildefiler.

Legger til bildegalleri i ny WordPress-editor

4. Legge til snarveier i WordPress-innlegg ved hjelp av Gutenberg

Alle kortnummerene dine fungerer akkurat som de gjorde i den klassiske redaktøren. Du kan ganske enkelt legge dem til i en avsnittsblokk, eller du kan bruke kortkodeblokken.

Legger til en kortkodeblokk

Utforske noen nye innholdsblokker i Gutenberg

Gutenberg-redaktøren lover å løse noen langvarige brukervennlighetsproblemer i WordPress ved å introdusere noen nye blokker.

Følgende er noen av favorittene som vi tror brukerne vil være svært nyttige.

1. Legge til et bilde ved siden av tekst i WordPress

Ved hjelp av den gamle redigereren klarte ikke mange av brukerne våre å plassere et bilde ved siden av teksten. Du kan gjøre dette nå med Media & Tekst blokkere.

Media- og tekstblokk

Denne enkle blokken har to blokker plassert side om side slik at du enkelt kan legge til et bilde og legge til litt tekst ved siden av.

2. Legge til en knapp i WordPress-innlegg og sider

Å legge til en knapp til blogginnleggene eller sidene dine var en annen irritasjon i den klassiske redaktøren. Du måtte enten bruke en plugin som opprettet en kortkode for knappen, eller du måtte bytte til HTML-modus og skrive kode.

Gutenberg kommer med en knappeblokk som lar deg raskt legge til en knapp til ethvert innlegg eller side.

Legger til en knappeblokk i Gutenberg

Du kan legge til en kobling for knappen din, endre farger og velge mellom tre knappestiler.

3. Legge til vakre omslagsbilder i blogginnlegg og landingssider

En annen kul funksjon som du kanskje vil prøve er “Cover” -blokken, som lar deg legge til omslagsbilder til innleggene og sidene dine.

Et forsidebilde er et bredere bilde som ofte brukes som omslag for en ny seksjon på en side eller begynnelsen av en historie. De ser vakre ut og lar deg lage engasjerende innholdsoppsett.

Bare legg til en omslagsblokk, og last deretter opp bildet du vil bruke. Du kan velge et overleggsfarge for omslaget eller gjøre det til et fast bakgrunnsbilde for å skape parallakseffekt når brukere ruller nedover siden.

Forsidebildet i Gutenberg-redaktør

4. Opprette tabeller i artikler

Den klassiske redaktøren hadde ikke en knapp for å legge til tabeller i WordPress-innleggene dine. Du måtte bruke en plugin eller lage en tabell som skrev tilpassede CSS og HTML.

Ny Gutenberg-redaktør kommer med en standard tabellblokk, som gjør det superenkelt å legge til tabeller i innleggene og sidene dine. Bare legg til blokken, og velg deretter antall kolonner og rader du vil sette inn.

Bordblokk

Du kan nå gå videre og begynne å legge til data i tabellradene. Du kan alltid legge til flere rader og kolonner om nødvendig. Det er også to grunnleggende stilalternativer tilgjengelig.

5. Lage innhold med flere kolonner

Å lage innhold med flere kolonner var et annet problem som den klassiske redaktøren ikke taklet i det hele tatt. Blokkereditoren lar deg legge til kolonneblokker, som i utgangspunktet legger til to kolonner med avsnittsblokker.

Innhold i flere kolonner

Denne kolonneblokken er ganske fleksibel. Du kan legge til opptil 6 kolonner på rad og til og med bruke andre blokker inne i hver kolonne.

Bonustips for å bruke Gutenberg som en proff

Når du ser på den nye blokkereditoren, lurer du kanskje på om du vil bruke mer tid på å legge til og justere blokker enn å lage faktisk innhold?

Vel, den nye redaktøren er utrolig rask og til og med veldig grunnleggende bruk i noen minutter vil tillate deg å legge til blokker med en gang uten å tenke på det.

Ganske snart vil du innse hvor mye raskere arbeidsflyten din blir med denne nye tilnærmingen.

For strømbrukere er her noen bonustips som hjelper deg å jobbe enda raskere med den nye WordPress-redigereren.

1. Flytt blokkeringsverktøylinjen til toppen.

Som du kanskje har lagt merke til i skjermbildene at det er en verktøylinje som vises på toppen av hver blokkering. Du kan flytte denne verktøylinjen til toppen av redaktøren.

Bare klikk på trepunktsknappen øverst til høyre på skjermen og velg deretter alternativet Topp verktøylinje.

Flytt blokkverktøylinjen til toppen av redaktøren

2. Bruk snarveier

Gutenberg kommer med flere nyttige snarveier som vil gjøre arbeidsflyten din enda bedre. Den første du bør begynne å bruke med en gang er /.

Bare skriv inn / og begynn å skrive, så viser den matchende blokker du umiddelbart kan legge til.

For flere snarveier, klikk på trepunktsmenyen øverst til høyre på skjermen og velg deretter ‘Tastatursnarveier’.

Start hurtigtaster

Dette viser en popup med listen over alle snarveiene du kan bruke. Listen vil ha forskjellige snarveier for Windows- og Mac-brukere.

3. Dra og slipp media for automatisk å lage medieblokker

Gutenberg lar deg bare dra og slippe filer hvor som helst på skjermen, og det vil automatisk opprette en blokk for deg.

Du kan slippe et enkelt bilde eller en videofil, og den vil lage blokken for deg. Du kan også slippe flere bildefiler for å lage en galleriblokk.

Dra og slipp galleriblokk i den nye WordPress-redigereren

4. Legge til YouTube, Twitter, Facebook, Vimeo og andre innebygninger

Gutenberg introduserer nye innebygde blokker for blokkeredaktøren. Det er en blokkering for alle støttede innebygdstyper, inkludert YouTube, Twitter, Facebook og mer.

Legge ned blokker

Imidlertid kan du bare kopiere og lime inn den innebygde URL-en når som helst, og den vil automatisk opprette en blokk for deg.

Hvis du for eksempel la til en YouTube-video-URL, oppretter den automatisk en YouTube-innebygningsblokk og viser videoen.

YouTube innebygd

Legger til flere blokker til Gutenberg Block Editor i WordPress

Den nye blokkereditoren i WordPress lar utviklere lage sine egne blokker. Det er noen fantastiske WordPress-plugins som tilbyr blokkbunter for den nye redaktøren.

Her er noen av dem:

1. Avansert Gutenberg

Avansert Gutenberg

Advanced Gutenberg kommer med flere blokker for populære innholdselementer som WooCommerce produktglidebryter, attester, kart, teller, faner, trekkspill og mer.

Det gir deg også avansert kontroll på hvilke brukere som kan få tilgang til blokker basert på brukerrollene deres. Du kan opprette brukerprofiler og velge hvilke blokker de kan legge til.

2. Stabelbar – Gutenbergblokker

Stabelbar - Gutenbergblokker

Stabelbar – Gutenberg Blocks er en samling av vakkert designet Gutenberg blokker som du kan bruke på nettstedet ditt. Det inkluderer blokker for containeren, innlegg, funksjonsnett, trekkspill, bildeboks, ikonliste, oppfordring til handling og mer.

3. Editor Blocks

Redaktørblokker for Gutenberg

Editor Blocks er en annen ryddig samling av Gutenberg-blokker som du kan bruke. Det kommer med nyttige blokker som forfatterprofil, heltebilde, prisbord, merker, funksjoner og mer.

Vanlige spørsmål om Gutenberg – The New Block Editor i WordPress

Siden Gutenberg ble den nye WordPress-redaktøren, har vi fått mange spørsmål. Her er svarene på noen av de mest stilte spørsmålene om Gutenberg.

1. Hva skjer med mine eldre innlegg og sider? Kan jeg fremdeles redigere dem?

De gamle innleggene og sidene dine er helt sikre og upåvirket av Gutenberg. Du kan fremdeles redigere dem, og Gutenberg åpner dem automatisk i en blokk med den klassiske redaktøren.

Redigering av eldre artikler i ny WordPress-editor

Du kan redigere dem inne i den gamle redaktøren, eller du kan konvertere eldre artikler til blokker og bruke den nye blokkredigereren.

2. Kan jeg fortsatt bruke den gamle redaktøren??

Ja, du kan fortsatt bruke den gamle redaktøren. Bare installer og aktivere Classic Editor-plugin.

Ved aktivering vil den deaktivere blokkereditoren, og du vil kunne fortsette å bruke den klassiske editoren.

Vær oppmerksom på at Classic Editor vil bli støttet til 2022.

3. Hva skal jeg gjøre hvis den nye redaktøren ikke fungerer med en plugin eller et tema jeg bruker?

Project Gutenberg var under utvikling i lang tid. Dette ga plugin- og temaforfattere god tid til å teste koden sin for kompatibilitet.

Imidlertid er det fortsatt en sjanse for at noen plugins og temaer kanskje ikke fungerer bra med den nye redaktøren. I så fall kan du installere den klassiske editor-plugin, be utvikleren legge til Gutenberg-støtte, eller ganske enkelt finne et alternativt plugin eller tema.

4. Hvordan lære mer Gutenberg-tips og triks?

WPBeginner er det beste stedet å lære om den nye blokkredigereren i WordPress. Vi er den største WordPress-ressurssiden på internett.

Vi vil publisere nye artikler og oppdatere de gamle ressursene våre for å hjelpe deg med å mestre den nye blokkredigereren.

I mellomtiden, hvis du har spørsmål, kan du gjerne kontakte oss ved å legge igjen en kommentar eller ved å bruke kontaktskjemaet på vår hjemmeside.

Vi håper denne Gutenberg-veiledningen hjalp deg med å lære hvordan du bruker den nye WordPress-blokkereditoren. Det kan også være lurt å se vår komplette WordPress-ytelsesguide for å forbedre nettstedets hastighet.

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