Det jeg mener med utdrag av blogginnlegg kan du se et eksempel på på forsiden vår. Der vil du til enhver tid se tittel, fremhevet bilde og utdrag av tekst fra de 3 siste blogginnleggene våre.
Dette kalles som regel for et «post grid» og er en funksjon som finnes i ganske mange utvidelser. Hvis du allerede har installert utvidelser som gir deg tilgang til flere blokker, så sjekk om du allerede har en «post grid» funksjon før du installerer enda en utvidelse.
Og sånn for ordens skyld, dette fungerer ikke bare med blogginnlegg. Veldig mange av utvidelsene under fungerer også med «custom post types»(som f.eks om du har en medlemsportal og vil vise nyeste innlegg i «post types» som kun er tilgjengelige for medlemmer).
Utvidelser med «Post Grid» funksjon
Her er en liste over noen utvidelser som har denne funksjonen, og den første på lista er den vi bruker på vår side:
- Ultimate Addons for Gutenberg
- Genesis Blocks (tidligere Atomic Blocks)
- Kioken Blocks (her heter funksjonen Kinetic Posts)
- Qubely (karusell og grid)
- Getwid (karusell, slider og post grid)
- Ultimate Blocks (ikke det samme som nr 1)
- PostX(denne har kun post grids/lists)
- Kadence Blocks(posts)
Lista over er utvidelser som innholder en rekke andre blokker i tillegg. Og denne lista er ikke fullkommen, det finnes garantert flere som har en post grid funksjon. IKKE gå bananas og installer samtlige. Da kommer du til å gå deg bort i alle alternativer.
Alle utvidelsene over er blokkbaserte, dvs at de fungerer i WordPress sin standard editor. I tillegg finnes lignende funksjoner i sidebyggerplugins som f.eks Elementor og Thrive Architect.
Hvordan bruker vi «Post grids»?
Den vi viser her er som sagt «Ultimate Addons for Gutenberg» sin variant. De fleste lignende utvidelser fungerer omtrent på samme måte.
Vi starter med å klikke på + tegnet og søker opp «post grid» og velger denne:
Nå vil det settes inn et post grid med de 6 siste innleggene, fordelt på 3 kolonner = 2 rader med innlegg.
Under «Innleggstype» kan du også velge sider og ulike «custom post types» du måtte ha på siden din.
I tillegg kan du velge om du vil vise bare en kategori, eller ett stikkord.
Under «Posts Per Page» velger du hvor mange innlegg du vil vise, og om de skal sorteres i kronologisk rekkefølge, alfabetisk, eller kanskje i tilfeldig rekkfølge?
Det er helt opp til deg!
Et post grid kan brukes på mange måter. La oss si at du bruker post grid til å sette opp hele bloggsiden din med. Da kan du først sette inn ett post grid og velge å vise 1 innlegg og 1 kolonne. Da går det første innlegget i full bredde. Setter du så inn ett post grid til og velger: «Exclude Current Post». Da vil post grid nr 2 hoppe over det første innlegget og vise f.o.m. innlegg nr 2.
Videre nedover kan du velge antall kolonner. Her ser du også at det dukker opp tre små ikoner, for desktop, nettbrett og mobil. Du kan m.a.o. velge ulikt antall kolonner i forhold til skjermstørrelse.
Hvis du aktiverer «Post Pagination» så vil du også få mulighet til å bla gjennom flere innlegg.
Aktiver gjerne valget for «Inherit Styling from Theme», så er du sikker på at stylingen passer themet ditt.
Bilde: Her velger du størrelse på fremhevet bilde som skal vises på innleggene. Eller du kan også velge å deaktivere det.
NB! Det er en forutsetning å velge fremhevet bilde på hvert innlegg for at bilder skal vises i det hele tatt.
Bildet kan vises på toppen av innleggene, eller som bakgrunn. (På topp fungerer som regel best!)
Neste innstilling gjelder selve innholdet. Her kan du velge hva du ønsker å vise. Tittel og «ShowExcerpt» bør i de aller fleste tilfeller aktiveres.
Er det flere enn deg som skriver på bloggen din, så velg gjerne å aktivere «Show Author», så man lett kan se hvem som har skrevet innleggene. I tillegg kan du aktivere dato, kommentarer og «taxonomy»(dvs. kategori/stikkord).
Du kan velge om du vil vise «Utdrag» eller «Hele innlegget». Velger du det siste, så vises hele blogginnlegg. Det er sjelden å foretrekke i et post grid, unntaket er kanskje om du velger å vise et post grid på toppen med hele det siste innlegget, og så ett nytt postgrid med utdrag fra resten.
Og som du ser: Du kan selv velge antall ord i utdraget.
En «Les mer» link er kjekt å ha, så det valget anbefaler jeg at du aktiverer, bare husk å oversette tekstfeltet og legg inn «Les mer».
Typografivalget her gjelder tekst på «Les mer» knappen. Her kan du overstyre font/fontstørrelse ved å klikke på skiftenøkkel ikonet.
Så kommer resten av innstillingene for knappen. De har vært rause med valgmuligheter her 🙂
Du kan velge om du vil ha bord rundt knappen og hvilken bredde den skal ha. Den kan være heltrukken, dashed, dotted eller dobbel.
Du kan også velge om du vil ha runde hjørner eller ikke. 0 = firkanta hjørner. Jo høyere tall, jo rundere hjørner.
Så kommer padding rundt knappen. I praksis er det mengde padding som bestemmer størrelsen på knappen. Jo høyere tall du velger her, jo mere padding blir det rundt teksten på knappen.
I tillegg kan du velge farger på både tekst, borden, og selve knappen. Og som du ser er det to alternativer her. Normal er standardfargene, mens «Hover» er de fargene som vises når man drar musa over knappen.
Nå kommer vi til resten av «Typografi» valgene. Den første vi var innom var kun for knappen. Nå kommer først tittel. Her kan du velge om hva slags tittel tag overskriftene skal merkes med. Standard er H3, men her kan du overstyre til f.eks H2 eller H4. Det avhenger av strukturen på resten av siden din hva du bør velge her(Les mer om overskrifter her).
Klikker du på skiftenøkkel ikonene så kan du overstyre font og fontstørrelser for både tittel, meta(dvs visning av forfatter, dato osv) og selve utdraget med tekst.
Og så kommer fargevalgene. Du kan velge farge på bakgrunnen av teksten. Her er standard en gråfarge, men det kan selvfølgelig også overstyres.
I tillegg kan du velge farge på tittel, på meta og på tekst.
Og helt til slutt kommer innstillinger for avstand. Her velger du avstand mellom rader(row gap) og kolonner(column gap).
Content padding er avstanden mellom ytterkant på hver «rute» og selve teksten som ligger inni. Her kan du ha ulik mengde padding på mobil. Det er ofte en fordel å redusere den noe på mobil.
Og helt til slutt kommer avstand mellom tittel, meta og utdrag av tekst.
Du har som sagt veldig mange valgmuligheter her. Og nettopp derfor kan det være greit å lagre denne blokka for gjenbruk når du først har funnet de innstillingene du ønsker å bruke.
Lagre for gjenbruk
Når du har brukt tid på å lagre alle de innstillingene du vil vise i et post grid, så kan det være lurt å lagre det som en mal. Vi har nå to valgmuligheter for å lagre blokker for gjenbruk i WordPress. Du starter med å klikke på de tre prikkene på post grid blokka du vil lagre:
Og deretter klikker du på «Legg til som gjenbrukbar blokk». Da vil du finne igjen blokka under «Gjenbrukbar» fanen når du klikker på plusstegnet. En gjenbrukbar blokk vil være «global». Det vil si at den vil være eksakt lik alle steder du legger den inn. I praksis betyr det: Hvis du gjør endringer i selve malen, så endres også innholdet i den på alle sider du har satt den inn som «gjenbrukbar blokk».
Det andre alternativet er å lagre blokka som et «Block pattern» eller «mønster» som det heter på norsk. Det krever at du har utvidelsen «Block Pattern Builder» installert.
Hva som er forskjellen? Under «Mønstre» vil du se en forhåndsvisning av blokka du har lagret, mens under «Gjenbrukbar» ser du kun ikon og navn. Med andre ord kan det være enklere å finne igjen et «Block Pattern». Men den største forskjellen ligger i at et mønster/block pattern ikke er «global». Du kan sette den inn hvor som helst, og endrer du noe, så endres det kun på den siden du jobber med i øyeblikket. Ikke på alle andre steder du har brukt samme mønster.
Her ser du et eksempel på bruk av post grid
Denne kan fungere fint på en forside, eller hvis du vil vise relatert innhold i samme kategori nederst i et blogginnlegg f.eks.
Hva er en landingsside? Og hva er hensikten?
Det er litt ulike meninger når det gjelder hvordan man skal definere en landingsside. Man…
Hva er WordPress?
Om du har en nettside eller skal opp med ny nettside, så har du kanskje…
IKKE sett deg selv i den situasjonen her!
Jeg vil tro de fleste som eier en nettside har fått med seg at Domeneshop…
Eller kanskje bare fremhevet bilde + tittel
Dette er WordPress sin standardblokk for «Siste innlegg». Den kan også fungere som et post grid. Her er det valgt 2 kolonner og 4 nyeste innlegg i kategorien «Gutenberg». Og her er det kun fremhevet bilde + tittel jeg har valgt å bruke. Godt eksempel på at det er lurt å bruke samme størrelse på fremhevede bilder 😉
