WordPress Gutenberg Selvstudium for brugere:indersiden

Maddy Osman Senest opdateret den 5.
11 Min.
Gutenberg -Guide
Senest opdateret den 5.

Hvis du overvejer at bruge et websted med WordPress du har sikkert været fra Gutenberg Hørt. Gutenberg er redaktør for WordPress , som blev udgivet med version 5.0. 

Siden den første udgivelse er der blevet WordPress Bloker editor, herunder blokgruppe og blokmønstre. Men hvorfor Gutenberg er så populær, er det primært fordi stillinger og sider kan redigeres meget mere visuelt end med standarden WordPress Editor.

WordPress Gutenberg Selvstudium for brugere:indersiden

Denne vejledning omfatter:

  • Hvad Gutenberg Er
  • en komplet vejledning til Gutenberg for udviklere:inde
  • en kort liste over de forskellige funktioner i Gutenberg

Og jeg kan allerede love dig én ting: Ifølge denne vejledning, du ved, hvordan man bruger Gutenberg oprette professionelle layout til dine hjemmesider.

WordPress 5,6 er her endelig!

Den seneste version af WordPress fokuserer på layout og design: en helt ny Theme , yderligere layoutindstillinger for indlæg og sider og blokmønstre for hele dit website. Alle detaljer kan findes i den officielle frigivelsesseddel og i WordPress Feltguide.

Nyheder på Gutenberg Blok editor?

Før vi går ind i WordPress Gutenberg tutorial, lad os først se på, hvad Gutenberg faktisk er. 

Gutenberg erstatter TinyMCE Editor og giver dig mulighed for at bruge indholdsblokke til at føje tekst, billeder og andre medier til dine indlæg og sider. Den klassiske TinyMCE Editor var tekstbaseret og begrænsede nye brugere, der ikke vidste, hvordan man koder. 

Mens HTML-viden ikke var afgørende for at bruge den klassiske editor, du ofte var nødt til at gå til HTML-visning for at foretage ændringer på alle. Ellers skal du have en separat Plugin for at tilføje enkle funktioner som tabeller eller billedgallerier til dit websted.

WordPress Gutenberg Selvstudium for brugere:indersiden

Med Gutenberg du kan designe din hjemmeside ikke med tekst, men med billeder. Med WordPress Gutenberg Block Editor giver dig mulighed for nemt at tilføje indholdsblokke til dine sider og indlæg. Der er blokke til billeder, til afsnit - og for næsten alle andre punkter, du ønsker på din hjemmeside.

WordPress Gutenberg Selvstudium for brugere:indersiden

Gutenberg er nu standard blok editor af WordPress og det kommer med mange blokke out-of-the-box. Du kan også WordPress Plugins tilføje endnu flere blokke for nemt at integrere forskellige funktioner i dine indlæg og sider. 

WordPress Gutenberg Tutorial

Når du opretter websteder, er det aldrig forkert at forenkle din arbejdsgang. Gutenberg kan spare dig for en masse tid. Så det er på høje tid at WordPress Bloker Editor for at se nærmere på det. For det første går vi sammen til Grundlæggende om Gutenberg Af.  

Sådan Gutenberg Anvendes

  1. Som sædvanlig skal du oprette en ny blog-indtastning i WordPress . 
  2. Klik på det blå plustegn i øverste venstre hjørne. 
  3. Vælg den blok, du vil medtage i dit indlæg. 
  4. Juster indstillingerne for blokken i kladdeposten. 
  5. Omarrangere dine blokke ved at trække og slippe dem.

Så er det nu! Bare for at forstå, hvordan hver blok fungerer, justere dem og gruppere dem, lidt mere forklaring er nødvendig. Det er præcis, hvad vi nu kommer til i resten af vores WordPress Gutenberg Tutorials. 

Detaljeret vejledning om Gutenberg Bloker editor 

Nu, hvor vi har ryddet det grundlæggende ud af vejen, er vi nu fordybe os i de særlige forhold i WordPress Blokredaktører. Første gang du bruger editorskærmen på en side eller et indlæg med Gutenberg redaktøren ser temmelig tom - endnu mere end den klassiske editor, fordi de traditionelle menupunkter mangler. Dette er ok. Det første skridt er at tilføje et par blokke. 

1. Tilføj blokke til dit indlæg

Hvis du vil føje en blok til dit indlæg, skal du trykke på plustegnet i øverste venstre hjørne af indlæggets design. En ny blok er overlejret med et lille sæt menupunkter. 

Vi fokuserer først på hovedmenuen og diskuterer derefter senere, hvordan vi foretager yderligere justeringer med den sekundære menu.

WordPress Gutenberg Selvstudium for brugere:indersiden

Du kan gennemse bloktyperne eller bruge søgelinjen til at finde den ønskede bloktype. Tilføj derefter en blok ved at skrive "/" og bloktypen. Hvis du for eksempel vil indsætte et billede, skal du skrive "/billede".

Der er mange blokke til rådighed, herunder

  • Stk
  • Billeder
  • Overskrifter
  • Lister
  • Tabeller
  • Separator
  • Galleri
  • Knapper
  • Videoer
  • Lyd 

Hvis du Plugins med brugerdefinerede blokke, vises de også på denne liste. 

Alternativt kan du tilføje en blok ved at klikke på det sorte plustegn: Dette vises, når du klikker i kladden, hvor der står: "Skriv noget eller tryk for blokvalg". 

WordPress Gutenberg Selvstudium for brugere:indersiden

Eller du kan følge vejledningen i teksten og skrive "/" for at vælge på en rulleliste med indstillinger.  

WordPress Gutenberg Selvstudium for brugere:indersiden

2. Omarrangere dine blokke

Du kan trække og slippe blokke med pilene på selve blokken eller ved at trykke på punkterne mellem pilene til det sted, hvor du vil have dem vist.

WordPress Gutenberg Selvstudium for brugere:indersiden

Med WordPress Block Editor er meget nemmere at omorganisere dit indhold end med den klassiske editor. Du behøver ikke at bekymre dig om at bryde koden, da alle oplysninger om indholdet af blokken (herunder skrifttype, farve og størrelse) bevæger sig med blokken. 

Den enkelhed, hvormed du kan arrangere dine blokke er en af de bedste funktioner i Gutenberg Blokredaktører. Du sparer tid på at rette forkert kode, og du behøver ikke at stole på copy-and-paste for at få arbejdet gjort.

3. Tilpas typografiindstillingerne for din blok

Det næste skridt i vores WordPress Gutenberg Selvstudium lærer menuen Typografiindstillinger at kende. I nogle tilfælde vises nogle indstillinger i nærheden af blokken, når du klikker på den. Hvis du for eksempel arbejder på en afsnitsblok, vises nogle kendte indstillinger lige over blokken. 

WordPress Gutenberg Selvstudium for brugere:indersiden

Der vises dog også en sekundær menu i højre side af skærmen. Klik på fanen "Indstillinger".  

WordPress Gutenberg Selvstudium for brugere:indersiden

De indstillinger for typografiindstillinger, du kan tilpasse, afhænger af blokken. Indstillingerne for afsnitsblok ser f.eks.

WordPress Gutenberg Selvstudium for brugere:indersiden

Med menuen Typografiindstillinger kan du nemt tilpasse blokkene i dine indlæg. Igen, i modsætning til den klassiske editor, behøver du ikke at bekymre dig om at foretage ændringer i billedteksten til et billede for at ødelægge formateringen af den underliggende tekst. 

Genbrugelig Gutenberg Oprette redigeringsblokke

Nu kommer vi til de avancerede tips af WordPress Gutenberg Tutorials. Du sparer en masse tid og kræfter ved at gemme blokke, som du kan bruge i fremtidige indlæg, sider og andre WordPress kan genbruge websteder.

WordPress Gutenberg Selvstudium for brugere:indersiden

Genanvendelige blokke er nyttige, hvis du har elementer, der skal føjes regelmæssigt til en bestemt side eller type indlæg. 

Lad os sige, at du skriver filmanmeldelser og har en tabel, der viser dine ranglister for hver film. Dette bør altid se ens ud med specifik styling og det samme antal kolonner og rækker. Når du opretter en blokering, der kan genbruges, kan du spare en betydelig mængde tid ved at genskabte den med hvert indlæg. 

Lagring af styling og forskellige elementattributter kan også spare realtid for knapper. 

Lad os sige, at du har brug for den samme CTA (Opfordring til handling) i hvert indlæg, du skriver. Hvis du vil oprette en knap, der kan genbruges, skal du starte med at gennemgå den typiske proces med at tilføje en knapblok. Tilpas styling og tekst, indtil det ser ud, som du vil have den.  

WordPress Gutenberg Selvstudium for brugere:indersiden

Klik derefter på de tre prikker i blokmenuen, og vælg Føj til genanvendelige blokke

WordPress Gutenberg Selvstudium for brugere:indersiden

Her kan du give din nye blok et navn. 

WordPress Gutenberg Selvstudium for brugere:indersiden

Hvis du vil bruge denne blok igen, skal du gåtil menuen Almindeligeblokke, gå til fanen"Genanvendelige"og vælge din gemte blok. 

WordPress Gutenberg Selvstudium for brugere:indersiden

Du kan også eksportere genanvendelige blokke til brug på andre websteder. Du skal blot klikke på de tre prikker ved siden af blokken, skal du vælge Eksporter som JSON og downloade filen. 

WordPress Gutenberg Selvstudium for brugere:indersiden

For at konvertere en eksporteret genanvendelig blok til en anden WordPress Tilføj webstedet, gå til fanen Genanvendelig i menuen Blokke, og vælg Administrer alle genanvendelige blokke. 

WordPress Gutenberg Selvstudium for brugere:indersiden

Dette åbner op for et mere traditionelt udseende afsnit i WordPress Dashboard, hvor du kan administrere alle de genanvendelige blokke, du opretter. 

Hvis du har gemt genanvendelige blokke fra andre websteder, kan du overføre dem ved at klikke på Importér fra JSON. Når du har gjort dette, bør du kunne få adgang til det som sædvanlig fra fanen Genanvendelige i menuen Blokke. 

Placer dine blokke i grupper

I den næste Pro Tip af vores WordPress Gutenberg Selvstudier handler om grupperingsblokke. Hvis du placerer to eller flere blokke i en gruppe, kan du tilpasse og manipulere dem, som om de var en enkelt blok. 

gruppere en blokering af en social mediekald til handling med en blok, der indeholder ikoner for social deling. Du kan også gruppere en afsnitsblok med en knapblok for at oprette en standard-cta, som du kan indsætte i slutningen af dine indlæg. 

Hvis du vil oprette en blokgruppe med Gutenberg Bloker Editor, og vælg alle de blokke, du vil gruppere. Klik derefter på det lagdelte ikon i venstre side af den lille overlejringsmenu:

WordPress Gutenberg Selvstudium for brugere:indersiden

En ny menu vises med indskriften "Transform efter", skal du klikke på Gruppe. Sådan, det er det. Nu kan du flytte og tilpasse disse blokke, som om de var en. 

Du kan stadig foretage ændringer i indstillingerne for hver blok. føje tekst til en afsnitsblok og ændre dens udseende. 

Hvis du vil opdele grupperingsblokke, skal du markere gruppen og derefter klikke på de tre prikker i overlejringsmenuen. Rul ned, og klik på Opdel gruppe.

WordPress Gutenberg Selvstudium for brugere:indersiden

Denne funktion virker også med genanvendelige blokke. Når du har grupperet blokke, kan du gemme dem som genanvendelige blokke ved hjælp af den samme fremgangsmåde som beskrevet ovenfor. 

Bloker mønstre i WordPress Brug Bloker Editor

Med WordPress Blokmønstre giver dig mulighed for at oprette og dele foruddefinerede bloklayout. Blok mønstre kan du oprette komplekse layouts med blot et par klik med musen.

Hvis du vil have adgang til Blokmønstre, skal du klikke på det samme plustegn, som du brugte til at få adgang til blokmenuen. Vælg fanen Mønstre. 

WordPress Gutenberg Selvstudium for brugere:indersiden

Ved første øjekast ligner blokmønstre genanvendelige blokke. Bloker mønstre er imidlertid, hvad evnen til at oprette hele sider i Gutenberg kommer tættest på. 

Bloker Mønstre giver dig mulighed for at føje fulde layoutsektioner til dine indlæg eller sider med et enkelt klik. Disse er ideelle, hvis du vil oprette og gemme et layout til brug i flere indlæg. 

Den WordPress Block Editor leveres med forskellige præfabrikerede mønstre, herunder

  • flere tekstkolonner
  • Knapperne side om side
  • brugerdefinerede overskrifter
  • Citater med billeder
WordPress Gutenberg Selvstudium for brugere:indersiden

En anden fordel ved blokmønstre er, at de giver dig mulighed for lettere at skifte mellem Themes for at skifte. Da formateringen er bundet i selve blokkene, understøttes den ikke af en anden Theme Påvirket. 

Hvis du vil oprette dine egne blokmønstre manuelt, kræver det noget programmeringsviden. I udviklingsvejledningen kaldes de foruddefinerede bloklayout. 

Oprettelse af blokmønstre fra bunden kræver brug af API'en (Block Application Programming Interface). Den Plugin Blokmønstergenerator kan dog hjælpe. 

WordPress Gutenberg Selvstudium for brugere:indersiden

Yderligere blokke til Gutenberg Tilføj

Før vi begynder at bruge denne WordPress Gutenberg tutorial, bør du vide, at der er forskellige Plugins der giver dig mulighed for at tilføje endnu flere typer af blokke til redaktøren, herunder

  • Tabel
  • Pris
  • Google Maps
  • Kontaktformularer

Der er en Officielle WordPress Bloker mappe, hvor du kan oprette yderligere blokke til Gutenberg finde og tilføje. 

WordPress Gutenberg Selvstudium for brugere:indersiden

Oprindeligt var det planlagt at oprette en undermappe til Enkelt blok Plugins for at oprette. I stedet er den aktuelle mappe et underafsnit af Plugin Oversigt over mappe WordPress med en søgbar liste over blokbaserede Plugins . 

Fuld hjemmeside redigering i Gutenberg

I øjeblikket er det muligt at Gutenberg endnu ikke fuldt redigeret hjemmesiden. Den WordPress Men udviklingsteamet gør store fremskridt i dette mål, herunder ved at tilføje blokmønstre. 

Der findes i øjeblikket en eksperimentel udgave af Tyve Themes , som bruger den komplette hjemmeside redigering og tanken om en blokbaseret Themes Opfanger. 

Med WordPress Block Editor giver dig nu mulighed for at oprette fuldt tilpassede, blokbaserede layout – men kun til indlæg og sider. Så snart den komplette hjemmeside er behandlet af Gutenberg widgets bliver overflødige. Dette giver brugerne fuld kontrol over hvert layoutelement, herunder sidehoveder, sideoper og sidefødder. 

Selv om Gutenberg Block Editor endnu ikke en fuldgyldig WordPress Page Builder, han er på vej dertil. I mellemtiden er blokmønstre, f.eks. WordPress Gutenberg Block tutorial vil blive forklaret en funktion sæt, der er meget tæt på en komplet hjemmeside redigering. 

Ulemperne ved Gutenberg Redaktører 

Selvom Gutenberg er et nyttigt værktøj, der har ændret den måde, mange brugere: WordPress og skabe indhold, redaktøren er naturligvis ikke uden ulemper. 

Som Gutenberg for første gang var det ganske fejlbehæftet. Det meste af det er nu blevet fastsat. 

En ting er dog ikke en fejl er, at Gutenberg stadig med mange Themes er uforenelig. Så hvis du har en specifik Theme og du kan lide designet, er det sandsynligt, at du ikke vil tilpasse det eller Gutenberg kan bruge den. Når du prøver, resultatet er ofte simpelthen et rod. 

Nwo Gutenberg er med nogle Themes kompatibel, men ikke nok til at prale af udbredt kompatibilitet. 

Et andet problem, der Gutenberg på bordet, er det faktum, at det ikke giver den samme fleksibilitet som den klassiske editor. Sikker Gutenberg eliminerer nogle af de idiosynkratiske formateringsproblemer, der opstår med den klassiske editor – desværre er du begrænset i den type sider, du kan oprette. 

Som bredere muligheder for Theme Tilpasning til Gutenberg endnu ikke er tilgængelige, skal du affinde dig med, Gutenberg Kompatibel Themes tilgængelige, og hvilke blokke og blokke der er Plugins Tilgængelige. 

De oplysninger, der anvendes til brug af Gutenberg ressourcer, der er til rådighed, vokser i et støt tempo, en Theme Builder er Gutenberg men det gør den ikke. Ikke endnu. 

I sidste ende Gutenberg det ideelle valg for dem, der allerede er vant til sidebyggere eller rent visuelle redaktører og ønsker at bevare denne oplevelse, eller som bare ønsker at fokusere på indholdet og træk-og-slip designet. 

Afsluttende tanker: Guide til WordPress Gutenberg 

Den Gutenberg Redaktøren er nu en del af WordPress Core. Udviklingsteamet bag WordPress har store planer for det. På et tidspunkt vil du være i stand til at Gutenberg oprette navigationsmenuer, oprette komplette webstedslayout og oprette Gutenberg vil blive brugt med endnu mere Themes være kompatible. 

Indtil da kan du bruge de funktioner, som WordPress Block Editor tilbyder i øjeblikket, optimal brug og visuelt tiltalende indlæg og sider - uden selv at kende en linje kode. En ganske god aftale, hvis du spørger os. 

Så fortsæt: Brug tipsene i vores WordPress Gutenberg tutorial og begynde at tilpasse indholdet af dit websted. Og sørg for, at dit website er forbundet til en WordPress Website hosting tilbud fra RAIDBOXES optimal hastighed. 

WordPress Gutenberg Redaktør: Dine spørgsmål

Hvad synes du om WordPress Gutenberg Editor? Hvilke spørgsmål har du til Maddy? Brug kommentarfunktionen. Du vil have flere tips om WordPress ? Følg os derefter på Twitter, Facebook eller via vores nyhedsbrev.

Maddy Osman er SEO Content Strateg. Det fungerer sammen med udvalgte kunder i WordPress og web hosting område. På grund af deres baggrund i webdesign og WordPress hun har en dyb forståelse af SEO - og ved præcis, hvordan man forbinder brands med SEO-relevant indhold.

Lignende artikler

Kommentarer til denne artikel

Skriv svar på en

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *.