[Hva er] WordPress Gutenberg Blocks Og hvordan du bruker dem godt

WordPress Gutenberg-redaktøren kom med WordPress 5.0 tilbake i desember 2018. Den nye funksjonen er kjent som "blokkredigerer", og den nye funksjonen bytter side- og innleggsoppretting fra vanlig boksdesign fra tidligere versjoner til en mer sidebyggerlignende opplevelse.

Gutenberg blocks nå levere en modulær tilnærming til innholdsskaping. I stedet for å bruke kode for å legge til et annet element på en side, kan du bytte ut en blokk i stedet. For eksempel kan du slå ut en tekstblokk for en videoblokk eller tabell omtrent som du ville gjort når du skulle bygge en side inn Beaver Builder eller Elementor. Det er en evolusjon som kom lenge, men nå er det her du vil raskt lure på hvordan du noen gang har opprettet sider uten det!

Gutenberg blocks

Hvis du oppdaterer til WordPress 5.0 og nyere, og du burde gjøre det nå, vil du ha lagt merke til at brukergrensesnittet har gått litt videre. Du vil fremdeles se den tradisjonelle sidemenyen til venstre og innholdsmenyen til høyre, men i midten har alt endret seg.

Før oppdateringen så du en tom tittel og innholdsboks der du bygde siden eller innlegget ditt. Nå vil du se en tom seksjon i midten med en tittelblokk og tekstblokk allerede befolket. Høyre meny vil endres dynamisk avhengig av hva du gjør. Først viser den tradisjonelle kategori-, tagg- og funksjonsbildealternativer som før, men introduserer nå en Block-fane.

I kategorien Blokkering kan du redigere den enkelte blokken, som de sidebyggerne som tilbyr mye frihet når det gjelder design. Hva du ser i blokkeringsfanen, avhenger av blokken i spørsmålet, men alle har muligheten til å legge til tilpasset CSS.

Gutenberg blocks introdusere en virkelig modulær tilnærming til sidedesign. Du har muligheten til å fortsette å gjøre ting på samme måte eller dykke dypere. Du kan justere hver blokk for å se subtilt eller markant annerledes ut eller få dem til å fungere som en sømless hel. Det er et veldig kraftig og tilgivende system.

Hvordan bruke Gutenberg blocks

Det som er bra med WordPress-redesignet er at det ligner nok på hvordan ting fungerte før at brukergrensesnittet fremdeles er kjent. Selv om du ikke gjorde deg kjent med de nye blokkene, kan du fortsatt legge til sidetittelen, legge til innholdet, legge til eventuelle koder og widgets og publisere som før. Det kan se litt annerledes ut, men det fungerer omtrent likt.

Dette er ideelt for sporadiske bloggere eller de som er nye på WordPress. Som et sentralt element i CMS er brukervennligheten, har utviklerne på en eller annen måte klart å legge til mer avanserte funksjoner uten å gjøre det samlede systemet vanskeligere å bruke.

Du kan fortsatt lage en side på få minutter ved hjelp av standardalternativer, men nå kan du gå mye dypere uten å måtte lære en kodelinje eller til og med vite hvordan en kortkode ser ut.

Det er disse tingene som lager Gutenberg blocks så nyttig.

Du kan enten bruke Gutenberg blocks eller ikke.

Standard innstilling for side og innlegg betyr at du fremdeles kan formatere sideinnholdet ditt andre steder og bare kopiere og lime det inn på siden. Lim inn tittelen i tittelblokken og sideinnholdet i tekstblokken. Hvis det er alt du trenger, er opprettelsesprosessen like enkel som før. Hvis du vil ta det videre, kan du.

Hvis du vil dykke inn i hvordan blokkeredigereren fungerer, vil du se noen flere alternativer:

• Velg det lille '+' ikonet ved siden av midtblokken for å legge til en ny blokk.
• Velg 'H' for å legge til en overskrift.
• Velg listeikonet for å legge til en liste i blokken din.
• Velg bildeikonet for å legge til et bilde.

Alle disse fire alternativene er tilgjengelige fra innholdsmenyen, men å ha dem tilgjengelige for hver blokk betyr at du kan lage innholdet ditt i hvilket som helst design du vil. De individuelle utestengningsblokkene kan redigeres og rammes individuelt, og hver gjenspeiles i den ferdige siden.

Dette er noe Elementor (og sidebyggere som det, for eksempel Divi) har gjort i mange år med stor effekt. Du kan nå gjøre omtrent det samme innen WordPress.

Du kan finne mer om Divi i vår Elegant Themes anmeldelser.

Å lage en side ved hjelp av blokkeredigereren er enkel:

1. Velg Ny side eller Nytt innlegg fra WordPress-sidemenyen.
2. Skriv eller lim inn sidetittelen i tittelblokken.
3. Skriv eller lim inn innholdet i tekstblokken.
4. Velg '+' ikonet til høyre for blokken for å legge til en ny blokk.
5. Velg den mest hensiktsmessige blokken fra popup-boksen.
6. Fullfør hovedblokkelementene i midtruten.
7. Velg ikonet med tre prikker øverst i blokken du la til for å endre design eller tilpasse.
8. For å legge til tilpasset CSS, velg Avansert fra høyre meny.
9. Velg Publiser to ganger for å gå live.

Selv om det er veldig enkelt å bruke blokkredigeringsprogrammet, kan du dykke mye dypere hvis du trenger det. Menyikonet med tre prikker ved hver blokk åpner for en mengde tilpasningsalternativer avhengig av blokken. Du kan duplisere blokken, sett inn andre blokker før eller etter, endre HTML-attributtene, grupper blokker sammen og mer avhengig av tilgjengelige alternativer.

I tillegg til at standardblokkene som følger med WordPress, kan utviklere også lage sine egne blokkeringsprogramtillegg. Gitt den enorme brukerbasen og utviklertalentet til WordPress, er det allerede mange blokkeringsprogramtillegg tilgjengelig etter bare ett års bruk.

Vanlige blokker

WordPress har tatt med en rekke blokker som dekker oppretting av kjernesider. Hver enkelt gjør det enkelt å legge til forskjellige sideelementer samtidig som de tillater tilpassede designfunksjoner for blokken alene. Det er et kraftig redigeringsalternativ som kan brukes med stor effekt.

Standard Gutenberg blocks i WordPress inkluderer:

• Tekstblokk - Den tradisjonelle innholdsblokken der du kan jobbe akkurat som før og endre ved hjelp av HTML eller kortkoder.
• Overskrift - Kursblokker med standard H1, H2, H3, H4 innstillinger.
• Liste - En egen blokk du kan bruke til å lage utmerkede lister, enten bestilt eller ikke ordnet.
• Galleri - En galleriblokk som aktiverte den tilpassede formateringen av bilder som passer til sideinnholdet ditt.
• Bilde - En bestemt bildeblokk som fungerer på samme måte som galleriet, men for enkeltbilder.
• Sitat - En standout-blokk som lar deg markere sitater eller anmeldelser på en side.
• Lyd - En spesifikk blokk for funksjoner, klikk for å spille av lydklipp i sideinnholdet.
• Dekke - En ny blokk som lar deg plassere et forsidebilde for siden eller innlegget ditt som kan utfylle det valgte bildet.
• Video - En videoblokk som fungerer som lyd og gjør det enkelt å vise video på en side eller et innlegg.

Alt du kan gjøre med Gutenberg blocks du pleide å gjøre med den originale redaktøren, men det var ikke alltid brukervennlig eller tilgjengelig for nye brukere. Denne blokkdesignen gjør det enkelt for alle å bygge sidene sine på en logisk og lineær måte.

De beste Gutenberg-blokktilleggene

Standard WordPress Gutenberg blocks dekke det meste du sannsynligvis vil trenge fra CMS. Imidlertid nevnte vi tidligere at utviklere også har begynt å produsere sine egne Gutenberg -blokk -plugins for å legge til enda flere funksjoner. Det er dusinvis av blokkplugger av forskjellige kvaliteter der ute, og vi har samlet noen av våre favoritter her.

La oss ta en titt på noen av disse nå.

Vi vil se på:

1. Verktøysettblokker
2. Ultimate blokker
3. Ultimate tillegg for Gutenberg
4. Avansert Gutenberg Blocks
5. Stables Gutenberg Blocks
6. Atomblokker
7. Otterblokker
8. Blokker av Templatic
9. Kadence-blokker

Mange av disse Gutenberg-blokktilleggene er helt gratis, mens andre tilbyr gratis blokker med muligheten til å oppgradere til mer avanserte premiumblokker. Vi nevnte i hver beskrivelse de som er gratis og hvor det er premiumalternativer.

Hver installeres på samme måte som du installerer et annet WordPress-plugin. Velg det fra WordPress.org og installer og aktiver eller last ned filene til datamaskinen din og last dem opp til WordPress-installasjonen. Når du er installert, bør du se at de nye blokkeringsalternativene vises med standardblokkert når du velger '+' på en side.

1. Verktøysettblokker

Verktøysettblokker er en av våre favorittblokkredigeringsprogrammer for WordPress. Det er et premium plugin som beviser at mens du kan få gode ting gratis, er det noen ganger verdt å betale litt ekstra for kraft og bekvemmelighet. Plugin installeres på samme måte som andre plugins og vil legge til de nye blokkene i den eksisterende menyen.

Blokkene inkluderer tilpassede innleggstyper, tilpasset taksonomi, egendefinerte felt, maler, visninger, paginering, uendelig rulling, Ajax-blokker, WooCommerce, Google Maps, skjemaer, betalinger og til og med tilgangskontroll. Noen av disse blokkene finner du ikke i noe gratis plugin, og det er derfor vi har markert Toolset Blocks.

En av de beste funksjonene i Toolset er muligheten til å lage dynamisk generert innhold UTEN å måtte gjøre noen tilpasset PHP-kode. Toolset integreres direkte med WordPress Block Editor og lar deg hente dynamisk innhold hvor som helst.

Som noen få eksempler på hva du kan gjøre: 

• Lag overskrifter basert på titler
• Angi knappetekster og CTAer fra egendefinerte felt
• Angi bildekilder for felt eller egendefinerte felt
• og så videre

Følgende video er en flott forklaring på funksjonene til Toolset Blocks:

De fleste av oss vet hvor kraftige egendefinerte felt og innleggstyper kan være, og det er fantastisk å kunne implementere det på en side. I tillegg til skjemaer, oppsett, visninger, tilgangskontroller og de andre kraftige funksjonene, er det utrolig enkelt å anbefale dette pluginet selv om det er et premiumprodukt.

Noen ganger er gratis ikke den beste prisen, og dette er en av de gangene.

2. Ultimate Blocks

Ultimate blokker er satt på bloggere, men vil fungere like bra på alle WordPress-nettsteder. Plugin er gratis og inneholder et utvalg av salgsfremmende og svært nyttige redigeringsblokker som er ideelle for bloggere, men som også kan vise seg å være nyttige for markedsførere, e-handelsnettsteder, små bedrifter og alle som vil at innholdet deres skal skille seg ut.

Blokker inkluderer anmeldelser, innholdsfortegnelse, oppfordringer til handling, innholdsveksler, bildeskyve, innholdsfiler, attester, sosial deling, nedtellingstimere, fremdriftslinjer, innleggsruter og stjernevurderinger. Utvikleren sier at de har mer på vei også.

Ultimate Blocks har enda et triks i ermet i sin blokkeringsleder. Et enkelt grensesnitt som hjelper deg med å aktivere eller deaktivere blokker for å opprette sider enkelt. Det betyr at du kan laste ned samlingen og bare aktivere blokkene du sannsynligvis vil bruke, og holde siden fri for rot mens du oppretter.

3. Gutenberg Blocks - Ultimate Addons for Gutenberg

Gutenberg Blocks - Ultimate Addons for Gutenberg er fra de samme utviklerne som superb Astra WordPress -tema. Den gratis pluginen legger til en rekke blokker for daglig bruk som er enkle å bruke og tilbyr et bredt spekter av tilpasningsmuligheter. De vil alle fungere med Astra også, noe som er flott hvis du bruker det temaet.

Blokker inkluderer infobokser, knapper, avanserte overskrifter, teamblokker, priser, sosiale aksjer, attester, ikonlister, tyngdekraftsblokker, markedsføringsblokker, tilbud, oppfordringer til handling, kontaktskjema 7-blokker, Google Maps og mer.

Utviklerne sier at disse blokkene er optimalisert for sidehastighet mens de tilbyr sømless integrasjon med Astra -temaet og innenfor ethvert annet tema. Du har lignende tilpasningsmuligheter som disse andre pluginene for å skyve blokker inn på eksisterende sider. Dette alene gjør denne pluginen verdt å sjekke ut.

4. Avansert Gutenberg

Avansert Gutenberg fra Joom United legger til over tjue redaktørblokker som et gratis WordPress-plugin. Det er et anstendig utvalg av alternativer her fra den vanlige kolonnen og overskriften til mer avanserte blokker. De er godt designet med et minimalt grensesnitt som fremdeles på en eller annen måte tilbyr alle tilpasningsalternativene du sannsynligvis trenger.

Blokker inkluderer forfatterprofiler, tilpassede CCS-blokker, WooCommerce, avanserte knapper, kontaktskjemaer, avanserte lister, kart, attester, tellere, påloggings- og registreringsblokker, video- og bildeblokker, sosial deling og lenking, innleggssammendrag, lysboksblokk og mye mer .

Hver integrerer sømlesspå en side og leveres komplett med det avanserte tilpasningsalternativet ved hjelp av trepunktsmenyen. De eksakte alternativene varierer avhengig av blokken det gjelder, men dekker de vanligste situasjonene, farge, størrelse, innrykk, justering og så videre.

5. Stables Gutenberg Blocks

Stables Gutenberg Blocks var en annen tidlig ankomst til oppdateringen og ga ut noen veldig nyttige tilpassede blokker for WordPress-redaktøren. De fleste stabelbare blokker er gratis, men utvikleren tilbyr også noen premiumblokker som adresserer spesifikke bruksområder hvis du trenger dem.

Gratis blokker inkluderer postblokker, funksjonsrutenett, trekkspill, handlingsfremmende handlinger, kort, topptekst, video-popup, prisblokk, varslingsblokk, mellomrom, skillelinje, funksjonsliste og andre. Det er 23 gratis blokker i alt.

Som en ekstra fordel er Stackable et modulært system, slik at du kan legge til blokkene du sannsynligvis trenger mens du lar de andre være ute. Dette kan ha liten fordel med lagringsplass og sidehastighet, avhengig av hvordan nettstedet ditt er konfigurert. Uansett er det en fin tilleggsfunksjon som kan holde ting magert i bakenden.

6. Atomblokker

Atomblokker var en av de første pluginene på scenen og tilbyr nå 15 gratis blokker og noen WordPress-temaer for å utfylle denne nye designfriheten. Blokker inkluderer attester, priser, nyhetsbrev, postnett, avanserte kolonner, delingsikoner, handlingsfremmende opphavsprofil og andre nyttige blokker.

Plugin er gratis, som de fleste temaene. Når du er installert, vil du se en ny serie blokker innenfor blokkeringsdelen av en ny side eller et nytt innlegg. Se etter AB Post Grid etc. for å identifisere Atomic Block-funksjonene.

Som disse andre redigeringsblokkepluginene, kan du tilpasse utseendet og følelsen til dem i den avanserte menyen. Du har lignende alternativer når det gjelder opasitet, farge, posisjonering og så videre, med den ekstra fordelen av ekstra valg hvis du bruker et Atomic Block-tema. Det er en mindre ekstra funksjon, men den er der!

7. Gutenberg Blocks og malbibliotek av Otter

Gutenberg Blocks og malbibliotek av Otter er en munnfull av et navn som er mye mer fordøyelig når det gjelder funksjoner. Det er et gratis, lett plugin som inneholder noen veldesignede blokker som bygger på de som tilbys av WordPress, bare med flere designalternativer.

Blokker inkluderer seksjoner, avanserte overskrifter, knapper, priser, attester, Google Maps, forfatterens bioblokker, postnett, Font Awesome, deling og en kortblokk. Alle er optimalisert for sidehastighet og funksjoner, og mens de lyser på disse funksjonene, er de et utmerket supplement til standardblokkene.

Det er ekstra tilpasninger og noen biblioteksalternativer for hver blokk. Du kan tilpasse hver blokk etter dine spesifikke behov eller bruke et biblioteksalternativ for å ta et ferdig laget design og bruke det i blokken. Det er raskt og veldig greit.

8. Blokker av Templatic

Blocks av utvikler Templatic er en annen solid oppføring i vår liste over flotte Gutenberg -blokk -plugins. Vi har stor respekt for tematiske temaer, og disse blokkene vil fungere med eller uten et av temaene deres. Hvis du bruker et tematisk tema, glir disse blokkene rett inn og er gode å gå. Hvis du ikke bruker et tematisk tema, vil disse blokkene fortsatt integrere sømlessinn i designet ditt.

Blokkene er gratis og inkluderer forfatterbio, varsler, deling av sosiale medier, skilletegn, omslagsbilde, overskriftsalternativer, kart, priser, knapper og en Tweet-blokk. Hver har de grunnleggende funksjonene foran og i sentrum med tilpasninger tilgjengelig via menyen. De er veldig enkle å bruke og vises sammen med alle standardblokkene på den nye siden eller innleggsskjermen.

Det er noen gode blokker her, men programtillegget har ikke blitt oppdatert på nesten et år. De jobber med den nåværende versjonen av WordPress da vi testet dem i tide for denne artikkelen, men vi vet ikke når nye blokker kommer.

9. Kadence-blokker

Kadence-blokker har både gratis og premium-alternativer som styrker standardblokkene i WordPress. Den gratis versjonen har tolv blokker og en innebygd editor, mens premiumversjonen på $ 59 per år legger til syv premiumblokker, unike animasjonsalternativer og støtte. Det er også et tredje alternativ, for $ 99 i året har du tilgang til alle premium redigeringsblokker pluss alle Kadence-temaer og -produkter.

Blokker inkluderer blokkering av sideoppsett, infobokser, avanserte gallerier, attester, videoblokker, trekkspill, knapper, faner, ikoner, avanserte overskrifter og bilder. Premium-versjonen legger til rutenett- og karusellblokker, produktkaruseller, modellblokker, bildeoverlegg, delt innhold og videopopups.

Hver blokk har en tilpasset redigeringsdel der du kan endre posisjon, disposisjon, farge, bildestørrelse, opasitet og en rekke andre faktorer. Hvis du jobber innenfor et bestemt design eller rammeverk, kan du enkelt implementere blokker i det designet ved hjelp av redigeringsprogrammet.

Oppsummering av Gutenberg blocks og pluginene deres

Gutenberg blocks er en utmerket utvikling av WordPress. De tar alt vi vet og elsker om rask opprettelse av sider eller innlegg, og skyver den fremover. WordPress tilbyr fremdeles sin enkle brukervennlighet og lave adgangsbarriere for nybegynnere, samtidig som de tilbyr mer erfarne eller designorienterte brukere muligheten til å skille seg ut. Denne balansen mellom form og funksjon er verdt å feire.

På samme måte som Gutenberg-blokktilleggene vi har i denne listen. De gratis plugins tilbyr omtrent alt du trenger fra siden du oppretter. Muligheten til å dele en side eller legge ut i individuelle komponenter og style hver enkelt til den bare er perfekt.

Selv disse premium plugins er verdt prisen. De har en tendens til å tilby høyere standarder når det gjelder design og brukervennlighet, og også noen blokker som ikke er tilgjengelige andre steder. Mens premium er, skiller Toolset Blocks seg ut for å tilby en rekke blokker som du ikke finner i noe gratis plugin som søk, tilgangskontroll, WooCommerce og tilpassede innlegg og tilpassede felt.

Har du en favoritt Gutenberg-blokktillegg? Elsker du en vi ikke har nevnt her? Fortell oss om dem nedenfor hvis du gjør det!

om forfatteren

Forfatter: Jamie Kavanaghnettside: https://www.coastalcontent.co.uk/E-post: jamie@collectiveray. Med

Jamie, ingeniør med utdannelse, er vår primære tekniske forfatter og forsker. Jamie driver også Coastal Content, et innholdsmarkedsførings-, tekstforfatter- og webdesignfirma med base i Cornwall i Storbritannia.