Introduksjon
I WordPress 5.0 ble den opprinnelige formaterings-verktøylinjen erstattet med en brukervennlig blokkredigerer (også kjent som Gutenberg, oppkalt etter oppfinneren av trykkpressen). Alt innhold du legger til, enten det er et avsnitt, et bilde, en overskrift eller en knapp, utgjør en egen blokk. Hver blokk er en egen enhet og kan konfigureres uavhengig av de andre.
I denne veiledningen går vi gjennom hvordan du lager en virkelig nettside med blokker. Vi oppretter en side, legger til innhold på ulike måter, organiserer seksjoner med layoutblokker og arbeider med mønstre (maler) som gjør prosessen betydelig raskere. I del 9 ser vi nærmere på Elementor for prosjekter som krever mer visuell kontroll, men vi anbefaler å starte her. Mange nettsteder vil aldri trenge mer avanserte verktøy enn det Gutenberg tilbyr.
Åpne blokkredigereren
Blokkredigereren åpnes automatisk hver gang du oppretter eller redigerer en side eller et innlegg. For å starte helt fra bunnen av, gå til Sider → Legg til ny side i WordPress-kontrollpanelet. Du vil se et tomt lerret med et tittelfelt øverst og et tomt område under som venter på innhold.
Verktøylinjen helt øverst på skjermen inneholder de funksjonene du vil bruke oftest. På venstre side åpner +-knappen funksjonen for å sette inn nye blokker. Pilene for angre/gjenta ligger ved siden av. Ved siden av disse åpner listeikonet Listevisning, som viser strukturen på siden din (mer om dette senere). På høyre side håndterer knappene Lagre kladd og Publiser lagring av arbeidet ditt.
Lag en overskrift for siden, for eksempel “Meny” eller “Om kafeen”, og klikk så under overskriften for å begynne å legge til blokker.
Tre måter å legge til blokker på
Det finnes tre metoder for å legge til blokker, og sannsynligvis kommer du til å bruke alle avhengig av hva du ønsker å gjøre.
Slash-kommandoen
Klikk på et tomt område på lerretet og skriv inn en skråstrek /. Du vil få opp en nedtrekksmeny med relevante typer blokker. Skriv inn navnet på det du vil opprette, for eksempel /overskrift, /bilde eller /knapp, og trykk Enter for å sette inn blokken.
Dette er den raskeste metoden når du er blitt kjent med navnene på de ulike blokkene. Når du skal legge til en overskrift, et avsnitt eller et bilde mens du skriver, sørger slash-kommandoen for at du kan holde flyten uten å måtte ta i bruk musen.
Blokkinnsetteren
Klikk på den blå +-knappen øverst til venstre i redigeringsvinduet for å åpne hele panelet med blokker du kan legge til.
Panelet viser alle tilgjengelige blokker, sortert etter kategori og med et søkefelt. Du kan også finne dette panelet mellom blokkene på arbeidsflaten. En liten +-knapp blir synlig når du holder musepekeren mellom to eksisterende blokker, slik at du får et innsettingspunkt akkurat der du vil ha det.
Dra og slipp
Når panelet med blokker er åpent, kan du dra en blokk direkte fra panelet og slippe den på arbeidsflaten. Dette er nyttig når du vil plassere en bestemt blokk på et bestemt sted i eksisterende innhold.
Prøve gjerne alle tre metodene før du leser videre. Opprett en testside, legg til en overskriftsblokk med /overskrift, skriv et avsnitt under den, og bruk +-knappen til å sette inn en bildeblokk mellom dem. Dette dekker de grunnleggende funksjonene du kommer til å trenge på alle sidene dine.
Opprett en side med blokker
Når du har plassert noen få blokker, begynner siden på lerretet allerede å føles som en ekte nettside i stedet for et blankt ark. Det samme grunnleggende oppsettet som du så i eksemplet med blokkinnsetteren kan utvikles til en startside, en menyside eller en enkel “Om oss”-side uten at du trenger å bytte verktøy.
Hver blokk har sin egen verktøylinje som blir synlig når du velger blokken. Verktøylinjen gir deg formateringsalternativer som er spesifikke for den aktuelle blokktypen. En avsnittsblokk viser knapper for fet skrift, kursiv og lenker. En bildeblokk viser innstillinger for justering og beskjæring. En overskriftsblokk lar deg endre overskriftsnivået fra H2 til H3 eller H4.
De mest brukte blokkene kan deles inn i noen få kategorier.
- Tekstblokker håndterer det skriftlige innholdet. Blokkene “Avsnitt”, “Overskrift”, “Liste” og “Sitat” dekker det du trenger på de aller fleste sider. Hver gang du trykker Enter i redigeringsverktøyet, oppretter WordPress automatisk en ny “Avsnitt”-blokk.
- Medieblokker håndterer visuelt innhold. “Bilde”, “Galleri”, “Video” og “Cover” (et bilde med tekst lagt over) er de du sannsynligvis vil bruke oftest. Cover brukes ofte til å lage hero-seksjoner på blokkbaserte nettsteder. Skriv /cover, last opp eller velg et bilde, og legg til overskrift og undertittel oppå bildet.
- Layoutblokker styrer hvordan innholdet plasseres på siden. Kolonner deler innholdet opp i seksjoner som vises side om side. Gruppe samler flere blokker i én enhet som du kan formatere samlet. Rad og Stabel styrer den horisontale og vertikale plasseringen innenfor gruppene.
Eksempel: Kolonner
Skriv /kolonner, så ber WordPress deg om å velge et oppsett.
Velg to spalter og plasser et bilde i den ene spalten og tekst i den andre. Dette er den grunnleggende strukturen bak de fleste sider som beskriver tjenester, sammenligner produkter og omtaler “om oss” på nettet. Oppsett med tre spalter fungerer godt for en prissammenligning eller en oversikt over ansatte, for eksempel.
Innebygde elementer
For å inkludere innhold fra YouTube, Spotify, sosiale medier og lignende limer du inn nettadressen i et tomt felt. WordPress gjenkjenner lenken automatisk og konverterer den til riktig innebygd spiller. Du trenger verken kortkoder eller plugins.
Mønstre: Forhåndsdefinerte blokkoppsett
Du kan fint bygge hver enkelt side på nettstedet blokk for blokk, men enkelte oppsett vil som regel gjenta seg. En hero-seksjon består nesten alltid av en Cover-blokk i kombinasjon med overskrift og knapper. Kundehistorier inkluderer alltid et sitat med navn og bilde. Å lage disse fra bunnen av hver gang tar unødvendig tid.
Mønstre er forhåndsdefinerte blokk-kombinasjoner som du kan legge inn som én enhet. WordPress har et innebygd bibliotek, og de fleste temaer, inkludert Astra som vi omtalte i del 7, legger til sine egne.
For å sette inn et mønster, klikk +-knappen for å åpne blokkinnsetteren og gå deretter til fanen Mønstre.
Bla gjennom kategoriene eller søk etter det du trenger. Prøv å søke på “hero”, “galleri” eller “knapp” for å se hva som finnes. Klikk på et mønster for å sette det inn, og erstatt eksempelteksten og bildene med ditt eget innhold.
En hjemmeside som er satt sammen av fire eller fem mønstre, skreddersydd med din egen tekst og dine egne bilder, kan være klar på få minutter. Å bygge opp det samme oppsettet blokk for blokk ville sannsynligvis tatt minst en time.
Synkroniserte mønstre for gjentatte seksjoner
Noen seksjoner vises på flere sider, som for eksempel et banner med en handlingsoppfordring, et kontaktskjema eller en kampanjeseksjon som bør se lik ut overalt. Til slike formål har WordPress synkroniserte mønstre.
For å opprette et mønster velger du blokkene som utgjør de delene som alltid skal inkluderes. Klikk på trepunktsmenyen i blokkverktøylinjen og velg Opprett mønster. Gi mønsteret et navn og aktiver Synkronisert. Nå kan du sette inn dette mønsteret på hvilken som helst side, og hvis du endrer det på ett sted oppdateres alle forekomster automatisk.
Slik håndterer du for eksempel kontaktinformasjon eller et banner som skal vises på ti forskjellige sider, uten at du må redigere hver enkelt side. Hvis du trenger en engangsvariant, kan du fjerne synkroniseringen fra mønsteret etter at du har satt det inn, noe som gjør det om til vanlige, uavhengige blokker.
Listevisning: En oversikt over sidestrukturen
Etter hvert som sidene blir mer komplekse, med kolonner og grupper på flere nivåer, kan det bli slitsomt å velge riktig blokk. Å klikke på arbeidsområdet fører ikke alltid til at du får tak i den blokken du ønsket.
Listevisning (listeikonet i verktøylinjen øverst) løser dette. Klikk på ikonet for å åpne en sidepanel som viser alle blokkene på siden din i en hierarkisk trestruktur.
Herfra kan du klikke på en hvilken som helst blokk for å velge den, dra og slippe blokker for å endre rekkefølgen på dem, og se hierarkiet i flernivå-innholdet med et øyekast. Når en “Kolonner”-blokk inneholder grupper med avsnitt, overskrifter og bilder, gjør Listevisning strukturen synlig på en måte som selve arbeidsområdet ikke klarer.
Dette kommer du til å få mye bruk for når sidene dine har vokst ut over noen få enkle blokker. Gjør det til en vane å åpne Listevisning hver gang du trenger å omorganisere eller feilsøke et oppsett.
Når Gutenberg er nok
Blokkredigereren kan håndterer et bredt spekter av nettsteder uten behov for ekstra sidebyggerverktøy. Hvis prosjektet ditt faller inn under en av kategoriene nedenfor trenger du kanskje ikke Elementor eller noen annen sidebygger.
- Blogger og andre innholdsbaserte nettsteder. Gutenberg ble opprinnelig utviklet nettopp for dette formålet, og det løser fortsatt oppgaven godt.
- Brosjyresider med standardisert oppsett. Hjem, Om oss, Tjenester, Kontakt: Mønstre og Cover-blokken dekker det visuelle, navigasjonsblokken tar seg av menyene.
- Nettsteder som jevnlig skal oppdateres av ikke-utviklere. Mønstrene låser oppsettet, mens teksten og bildene fortsatt er enkle å endre.
- Nettsteder som må være raske. Gutenberg-blokker laster ikke inn et eget design-lag, og dette reduserer størrelsen på siden. Med identiske hosting-abonnementer vil en side som er basert på blokker vanligvis lastes inn raskere enn en som er laget med en sidebygger.
- Alle prosjekter som benytter et tema med gode startmaler. Astras Starter Templates importerer et komplett eksempelnettsted.
En nettside for en liten bedrift som beskriver grunnleggende tjenester og åpningstider vil fungere utmerket med bare Gutenberg. Det samme gjelder en matblogg eller en portefølje med kategoriarkiver. Hvis nettstedet ditt først og fremst handler om å presentere informasjon på en oversiktlig og rask måte, er blokkredigereren sannsynligvis det du trenger.
Når kan det være lurt å bruke Elementor?
Noen prosjekter krever mer kontroll over den visuelle layouten enn det blokker kan tilby. Vurder Elementor hvis selve designet er avgjørende for virksomheten, eller hvis du trenger plassering på pikselnivå eller elementer inndelt i mange lag som blokkmønstre ikke kan håndtere. Prisoversikter, animerte tellere, interaktive slider og tilpassede skjemaoppsett kan også være grunner til å velge en sidebygger.
Kom i gang med Elementor-veiledningen vår omhandler grunnleggende forutsetninger og oppsett. Del 10 omhandler grensesnittet og de viktigste widgetene.
Konklusjon
Blokkredigereren er verktøyet som brukes til å lage det meste av innholdet i WordPress. Blokker, mønstre, synkroniserte mønstre og listevisningen gir deg verktøyene du trenger for å lage oversiktlige sider som lastes raskt, uten behov for ekstra utvidelser. Alt vi har sett på i denne artikkelen legger et godt grunnlag for arbeidet med ytelse senere i veiledningsserien.
Den neste artikkelen handler om Elementor for prosjekter som krever større kontroll over det visuelle designet.
Neste trinn: