Med WordPress 5 blev Gutenberg introduceret til at være en ny måde at arbejde med indhold i WordPress. Hvis du ikke har hørt om Gutenberg, kan du læse min artikel om Gutenberg og Blok editor.
- Hvad er Gutenberg
- Sådan arbejder du med Blok editor
- Skift til Klassisk editor, hvis der er fejl i Gutenberg
Her vil vi kigge på, hvordan du arbejder med Blok-editor, der er WordPress nye avancerede skrivemaskine.
Når du skal i gang med Blok Editor, kan der være mange forvirrende små ting der driller.
Gutenberg er fremtiden, så lad være med bare at installere og skifte til Klassisk Editor, bare fordi du er doven. Der skal være en forbandet god grund til, ikke at gå i gang med Gutenberg med det samme!
Snup en tudekiks, og lær at bruge Gutenberg 🙂
— Michael Bredahl
Her får du alle de grundlæggende funktioner serveret og forklaret, så selv bedstemor kan være med.
Hvis du vil lege lidt med Gutenbergs Blok Editor, uden du kan gøre skade (på din egen hjemmeside i hvert fald) har WordPress Gutenberg teamet lavet en demoside du kan lege med:
https://wordpress.org/gutenberg/
I gang med Blok Editor
Når du laver et nyt Indlæg, eller en ny Side, får du et nyt layout til skrivemaskinen, som du lige skal vænne dig til.
Alting bliver lavet som blokke, der nemt kan arbejdes med, og flyttes rundt.
Når du peger på en blok, dukker der nogle gange ekstra muligheder frem.
Du skriver teksten som normalt, og når du laver linjeskift, får du helt automatisk en ny blok, der som standard er afsnit, men kan ændres på plusset i siden af blokken.
Når du peger i en blok hvor du har skrevet noget tekst, får du en værktøjslinje frem, afhængig af hvilken type blok det er – det kommer vi lige tilbage til.
Lad os lige tage et blik på højre side. Her er der to faner næsten øverst i panelet, hvor du kan se egenskaberne for dokumentet, og for den blok du har markøren stående i (altså den blok du har klikket på).
Dvs. at nogle ændringer til blokken kan du lave fra værktøjslinjen, mens andre ændringer kan tilpasses i panelet. Det skal nok give problemer, med at huske hvor de forskellige ting ligger henne 🙂
Nu er du klar, tror jeg, så lad os gå lidt mere i dybden, og se på de forskellige blokke, og hvad de kan …
Sidens titel – titelblokken
Noget af det første du skal lave, er overskrifter. Den øverste overskrift er lidt speciel, for det er sidens titel.
Sidens titel er normalt den de fleste temaer bruger som overskrift på siden, og formaterer den med en Overskrift 1 (H1).
Det er også den tekst, der giver Google en ide om, hvad siden indeholder, og hvis du ikke bruger et SEO plugin, bruges denne tekst i stedet for title-tag i Google søgninger, det er den blå tekst der fanger opmærksomheden i Google søgninger, så det er ret vigtigt. Men brug nu bare et SEO plugin, som f.eks. Yoast SEO til WordPress, så kan du selv definere det 🙂
Når du har gemt som kladde første gang, får du vist det permanente link (Permalink) over sidens titel, når du klikker i titel-blokken.
Permalink – URL’en
Du kan rette det permanente link, det der er selve sidens URL, ved at klikke i Titel blokken, og herefter knappen Rediger til højre i Permalink linjen.
Du kan kun rette denne artikels permalink, ikke domænet eller evt. kategorier/undersiders permalink.
Det er altid en god ide, at sørge for en kort URL struktur, så væk med alle fyldord (god, ny, 7 tips til, osv.). Brug bindestreger (-) mellem de enkelte ord, hvis der skal være flere, undlad at bruge underscore (_).
Sørg for at lave en passende URL inden du udgiver, for når først Google har opdaget siden, bør URL’en ikke ændres, medmindre du husker 301 Redirects!
Blokken overskrift
Blokken overskrift bruges til at formatere et afsnit som en overskrift, og bruges som regel kun på et eller enkelte ord.
Der er dog ingen regel uden undtagelse, og du bestemmer selv, hvor lange dine overskrifter skal være.
Hvis du er i et afsnit, kan du pege på afsnitsikonet i værktøjslinjen (når du peger med musen i afsnittet)
Nu skifter ikonet til Skift blok
Når du klikker på Skift bloktype, kan du vælge mellem alle de forskellige bloktyper der er, med mindre du har skrevet noget tekst, så kan du kun vælge mellem dem, der kan bruges til tekst.
- Klik nu på ikonet Overskrift
Nu skifter værktøjslinjen til Overskrift, og du kan vælge mellem de muligheder der er, når du bruger blokken Overskrift
Skift bloktype: Dette ikon skifter hele tiden, og har et udsende for hver bloktype. Til at starte med, kan du se hvilken bloktype du arbejder med, men når du peger på ikonet, skifter det til Skift bloktype.
Når du arbejder med blokken Overskrift, kan du kun skifte til tre andre bloktyper (som standard).
Ikoner i værktøjslinjen Overskrift
H2 til H4: du kan umiddelbart skifte til en af de foreslåede overskriftstyper, H1 er brugt til titlens overskrift, og reserveres som sådan til det.
Hvis du vil bruge H5 og H6, kan du kigge i panelet til højre, og når du er i blokken overskrift, vises, under fanen blok, Overskrift-indstillinger.
Her kan du også se, at du kan få lov til at bruge H1 andre steder i teksten, end i titlen, hvis du absolut vil det.
Der er også mulighed for at bruge tekst-justering, så du kan bestemme om din overskrift skal være til venstre, som normalt, i midten eller til højre på siden.
Fed skrift (Bold): den markerede tekst bliver med fed skrift, eller får fjernet fed skrift. Fuldstændig lige som i et tekstbehandlingsprogram som f.eks. Word.
Lige som i Word, kan du bruge en genvejstast, men husk det er på engelsk her, så det er Ctrl+B for Bold, ikke F for Fed!
Kursiv (Italic): den markerede tekst bliver kursiv, eller får fjernet kursiv. Det hedder italic på engelsk, og derfor er genvejstasten Ctrl+I.
Link: Du kan oprette et link på den markerede tekst. Genvejstast: Ctrl+K.
Gennemstreg: den markerede tekst bliver gennemstreget. Genvejstast: Shift+Alt+D
Flere muligheder: til hver blok er der ikonet Flere muligheder, der åbner for fælles funktioner for alle blokke. Enkelte blokke er lidt specielle, men for det meste er det de samme funktioner.
Skjul blokindstillinger: her skjules panelet til højre. Når det er skjult, hedder punktet Vis blokindstillinger. Genvejstast er Ctrl+Shift+,
Dupliker: opretter en ny blok med en kopi af det indhold som den du er i. Genvejstast er Ctrl+Shift+D
Indsæt før: du kan indsætte en blok før den blok du er i. Genvejstast er Ctrl+Alt+T
Indsæt efter: du kan indsætte en ny blok efter den blok du er i. Genvejstast er Ctrl+Alt+Y
Rediger som HTML: skifter blokken fra at vise resultatet, til at vise den HTML kode der evt er bag.
I Blok editor er der en validering af koden, så det er i øjeblikket stort set umuligt at lave noget HTML kode, uden blokken bliver “ugyldig”, men ideen er smart.
Når du ser blokkens indhold som kode, hedder punktet nu Rediger visuelt i Flere muligheder menuen.
Tilføj til genbrugelige blokke: en af grupperne i oversigten over blokke, hedder Genbrugelige blokke.
Her kan du gemme blokke, som du gerne vil bruge andre steder i samme artikel, eller i andre artikler. Det fornemme er, at hvis du retter i en genbrugelig blok et sted, gælder rettelserne alle de steder hvor blokken er brugt.
Fjern blok: fjerne / sletter blokken. Genvejstast: Shift+Alt+Z
Ikonerne skifter, fra blok til blok
Som nævnt, er der nogle punkter, der ikke passer til bestemte blokke, men derudover er der variationer fra den ene WordPress installation til den anden.
F.eks. har jeg her på alt-om-webdesign.dk ikke gennemstreg, jeg har fjern formatering! Det kan jeg godt undre mig lidt over.
Jeg har endnu ikke fundet ud af hvorfor, så hvis du ved det, så skriv det lige i kommentaren, tak 🙂
De forskellige plug-in du installerer, kan også finde på at lægge ikoner i de forskellige værktøjslinjer, men det er da til at forklare, hvorfor det sker.
Hvorfor overskrifter?
Når du har arbejdet med tekster i et stykke tid, finder du hurtigt ud af, at det er en god ide, at dele teksten op i overskrifter, fordi den dermed bliver mere overskueligt at læse, og brugeren kan hoppe hen til det kapitel af teksten, som de finder mest interessant.
Når du laver hjemmesider i WordPress, er der 6 standardoverskrifter, fra Overskrift 1 (H1) til Overskrift 6 (H6).
H1 er allerede brugt til sidens titel, så den bør du ikke bruge igen. Der er dog ikke nogen “straf” forbundet med at du bruger H1 flere gange, eller ikke kan finde ud af at bruge dine overskrifter hierakisk, men der er en gevinst i at bruge overskrifter, i forhold til bedre placeringer i Google.
Når du bruger overskrifter på “den rigtige” måde, kan Google nemmere tematisere din tekst, og dele af teksten. På den måde vil Google nemmere kunne placere din side i forhold til de søgninger der er på emnet.
Men lad nu være med at gå i selvsving, og bruge alt for lang tid på at spekulere på hvordan det skal opbygges, for det er altså en af de mindre parametre, af de flere hundrede der har betydning for din sides placering i Google søgninger!
Blokken Afsnit
En af de blokke du kommer til at arbejde allermest med, er blokken Afsnit.
Den er nemlig til al den tekst du skriver på alle dine sider, som skal formateres helt almindeligt.
Umiddelbart skriver du bare i blokken, og laver tegnsætning samt linjeskift som normalt.
For hvert linjeskift, oprettes der en ny blok med Afsnit, så du vil sikkert ikke lægge mærke til det, når du bare skriver i WordPress som normalt.
Jeg vil selvfølgelig godt opfordre til, at du skriver din tekst i en tekstbehandler, notesblokken, Notepad++, Word eller et andet foretrukket dokumenthåndteringsprogram.
Hvis der ikke er forbindelse til serveren, kan teksten ikke gemmes, og selvom der er mulighed for at gemme en lokalt cachet kopi, skal det lige passe, at det går galt den dag du har skrevet den mest geniale tekst nogen sinde.
Det er lidt i stil med, altid at have en backup af alt det du laver.
Når teksten er skrevet i en tekstbehandler, kan du markere, og indsætte i en afsnitsblok i WordPress. Herefter indsættes teksten, og på mirakuløs vis, opretter WordPress selv de blokke der er nødvendige, for hvert afsnit, hvilket faktisk fungerer rigtig godt.
Du kan godt skrive teksten i WordPress, og kopiere den til et tekstbehandlingsprogram, men jeg har oplevet en gang imellem, når jeg kopierer flere afsnit fra WordPress Blok Editor, at de blok-koder der tilsættes, kommer med over, og så er det pludselig ikke så kønt eller nemt mere.
Formatering af tekst i blokken Afsnit
Når du skriver i blokken Afsnit, er værktøjslinjer skjult. Men hvis du peger på teksten, eller markerer noget af teksten, dukker værktøjslinjen op.
Værktøjslinjen Afsnit indeholder nogle lidt andre ikoner end Overskrift, der passer bedre til at arbejde med afsnit.
Skift bloktype: Her kan du vælge at omdanne blokken Afsnit til en anden bloktype. Den dukker først op når du har skrevet noget tekst, så der er begrænsede valgmuligheder. Vi kommer tilbage til, hvad de forskellige bloktyper er senere:
Venstrestil: som standard er teksten venstrestillet (venstrejusteret), men hvis du har et tema hvor noget tekst er defineret anderledes, kan du her venstrejustere dette afsnit.
Centrerer tekst: Skriver teksten centreret (justeret omkring midten) på siden. Der er ikke lige margener, dvs. at begge sidekanter er “takkede”, og det bliver ikke så kønt, hvis der er mere end en linje, som her!
Højrestil tekst: skriver teksten med en lige højremargen, altså det “modsatte” af venstrejusteret. Det er meget sjældent man har brug for at højrejustere tekst, det er mest billeder det bruges til, hvis de skal stå til højre for teksten.
De resterende ikoner er forklaret under blokken Overskrift.
Nu har du lært at bruge Gutenberg Blok editor i WordPress, men husk at læse mit indlæg om Gutenberg, og find ud af, at der er meget mere i det, end blot en ny editor.
Husk også at få Klassisk editor installeret, til når Gutenberg Blok editor driller.
Har du spørgsmål eller kommentarer, vil jeg gerne høre fra dig, det kan være jeg kan lære noget nyt igen i dag 🙂
Du må også meget gerne give artiklen en High Five …
[mr_rating_form]Artikler om temaer
ASTRA WordPress Tema
Avada temaet fra Theme Fusion
Sådan laver du et Child Theme til WordPress
WordPress temaer med Elegant Themes og Divi Builder
Divi Builder fra Elegant Themes
Divi temaet fra Elegant Themes
Temaer med Genesis Framework
Wordpress Themes fra Themeforest.net
Hej Michael. Spændende læsning – indlægget er en del år gammelt, har du lavet noget tilsvarende opdateret? Jeg kunne ikke finde noget lignende på sitet.
Mvh
Super brugbart. Jeg er selv gået over til kadence og med spectra plugin for flere blokmuligheder.
Men jeg er ved at få lavet flere sider med temaet spectra one. Det spiller bare og er super hurtigt. Og så er jeg blevet ret vild med at arbejde med FSE temaer.
Hejsa
Jeg er vild med hurtigheden v Gutenberg og Kadence tema – men kunne godt tænke mig et divi design –
Hertil vil det være fantastisk med en “how to do” step by step – incl seo – back up osv
Gerne en købe video – eller kursus på dansk over zoom – da alt er på engelsk.
Jeg er nået sådan sådan langt men mangler meget hjælp
Kh
Susanne
Jeg mangler, at kunne indsætte lige margener i min tekst. Har brugt koderne men der ikke ikke ur til, at lykkedes. I mine tidligere udgivelser kan jeg benytte lige margen ctrl+J – Susanne
Hej Susanne,
Blok editor er blevet meget nemmere, for dem der ikke laver noget der er særligt kompliceret. Nu synes jeg godt nok ikke, at lige margener er kompliceret, men der er tilsyneladende ikke nogen løsning inden for blok-systemet, der er rigtig nemt.
Når du er i en tekst-blok, kan du finde panelet til højre, hvor der nederst er en klods der hedder Avanceret.
Herinde er det et felt, der hedder Ekstra CSS klasse.
I feltet skriver du noget du kan huske, og som du regner med, ikke konflikter med noget andet (er brugt i forvejen). F.eks. lige
Det du skriver, kan bruges i tilpasseren, under Ekstra CSS
Nu kan du skifte til tilpasseren, og hvis du skrev lige, kan du nu fortælle, hvad der skal have lige margener:
p.lige {
text-align: justify;
}
p fordi det er et afsnit
.lige fordi du lige har tilføjet class’en lige til det ene afsnit
justify er formatering til lige margener.
Jeg håber det er til at finde ud af 🙂
Mvh.
Michael
… jeg ved godt, at det bliver lidt besværligt, at skulle huske koden i hvert eneste afsnit du laver, hvor der skal være lige margener.
Men alternativet er, at skifte til Klassisk editor, fikse det, og så gå tilbage til Blok editor.
Det er dog ikke en holdbar, eller anbefalelsesværdig løsning, for Blok editor vil sætte blokken til at fejle, og så skal du skifte den til HTML blok, for at få den til at blive.
Blok editor ER bare ikke færdigbygget.
Mvh.
Michael
Hej Michael 1000 tak for dit uddybende svar. Nu er det mere overskueligt. Jeg fik den opfattelse, at jeg selv kunne indsætte “Blokken lige margener” ind i Blok editor – Jeg har nemlig ved en fejl, fået den slettet, for jeg har haft den;O) Hilsen Susanne
Jeg oplever at Yoast ligger sig uden på Gutenberg editoren, så teksten i editoren ikke kan ses. Har du en løsning på det?
Jeg har ikke lige oplevet det problem, men jeg har oplevet, at Yoast kun viser de tre ikoner, og der ikke kan tilføjes/rettes titler eller noget andet.
Løsningen har for mig været at skifte til klassisk editor, når der har været fejl, og så tilbage igen, når jeg har lavet det der ikke kunne laves i Blok editor.
Læs evt. https://alt-om-webdesign.dk/wordpress/gutenberg/problemer-med-gutenberg/ 🙂
Mvh.
Michael