[Hvad er] WordPress Gutenberg Blocks & Sådan bruges dem godt

Sådan får du det bedste ud af WordPress Gutenberg blocks

WordPress Gutenberg-redaktøren ankom med WordPress 5.0 tilbage i december 2018. Kendt mere som 'blokredigeringsprogrammet' skifter den nye funktion side- og postoprettelse fra almindelig boksdesign i tidligere versioner til en mere sidebygningslignende oplevelse.

Gutenberg blocks nu levere en modulær tilgang til indholdsskabelse. I stedet for at bruge kode til at tilføje et andet element på en side, kan du i stedet skifte en blok ud. For eksempel kan du skifte en tekstblok ud for en videoblok eller -tabel, ligesom du ville gøre, når du bygger en side ind Beaver Builder eller Elementor. Det er en udvikling, der var længe undervejs, men nu er det her, du vil hurtigt undre dig over, hvordan du nogensinde har oprettet sider uden det!

 

Gutenberg blocks

Gutenberg blocks

Hvis du opdaterer til WordPress 5.0 og nyere, og det burde du nu, har du bemærket, at brugergrænsefladen er gået lidt videre. Du vil stadig se den traditionelle sidemenu til venstre og indholdsmenuen til højre, men i midten har det hele ændret sig.

Før opdateringen så du en tom titel og et indholdsfelt, hvor du byggede din side eller dit indlæg. Nu vil du se et tomt afsnit i midten med en titelblok og tekstblok allerede befolket. Den højre menu ændres dynamisk afhængigt af hvad du laver. Først viser den de traditionelle indstillinger for kategori, tag og funktionsbillede som før, men nu introduceres en Block-fane.

Fanen Blokering giver dig mulighed for at redigere den enkelte blok ligesom de sidebygere, der tilbyder meget frihed med hensyn til design. Hvad du ser i fanen Blokering afhænger af den pågældende blok, men alle har mulighed for at tilføje tilpasset CSS.

Gutenberg blocks introducere en virkelig modulær tilgang til sidesign. Du har mulighed for at blive ved med at gøre tingene på samme måde eller dykke dybere. Du kan justere hver blok for at se subtilt eller markant anderledes ud eller få dem alle til at fungere som en sømless hel. Det er et meget kraftfuldt og tilgivende system.

Brugsvejledning Gutenberg blocks

Brugsvejledning Gutenberg blocks

Det fantastiske ved WordPress-redesignet er, at det ligner nok på, hvordan ting fungerede før, at brugergrænsefladen stadig er kendt. Selvom du ikke gjorde dig bekendt med de nye blokke, kunne du stadig tilføje din sidetitel, tilføje dit indhold, tilføje eventuelle koder og widgets og udgive som før. Det ser måske lidt anderledes ud, men det fungerer meget det samme.

Dette er ideelt til lejlighedsvise bloggere eller dem der er nye til WordPress. Da et nøgleelement i CMS er dets brugervenlighed, har udviklerne på en eller anden måde formået at tilføje mere avancerede funktioner uden at gøre det overordnede system sværere at bruge.

Du kan stadig oprette en side på få minutter ved hjælp af standardindstillinger, men nu kan du gå meget dybere uden at skulle lære en linje kode eller endda vide, hvordan en kortkode ser ud.

Det er disse ting, der gør Gutenberg blocks så nyttig.

Du kan enten bruge Gutenberg blocks eller ej.

Standardindstillingen for side og post betyder, at du stadig kan formatere dit sideindhold andetsteds og blot kopiere og indsætte det på siden. Indsæt titlen i titelblokken og sideindholdet i tekstblokken. Hvis det er alt hvad du behøver, er oprettelsesprocessen så enkel som før. Hvis du vil tage det videre, kan du.

Hvis du ønsker at dykke ned i, hvordan blokeditoren fungerer, vil du se et par flere muligheder:

  • Vælg det lille '+' ikon ved siden af ​​centerblokken for at tilføje en ny blok.
  • Vælg 'H' for at tilføje en overskrift.
  • Vælg listeikonet for at tilføje en liste til din blok.
  • Vælg billedikonet for at tilføje et billede.

Alle fire af disse muligheder er tilgængelige fra indholdsmenuen, men at have dem tilgængelige for hver blok betyder, at du kan oprette dit indhold i ethvert design, du kan lide. De individuelle standout-blokke kan redigeres og indrammes individuelt, og hver afspejles i den færdige side.

Dette er noget Elementor (og sidebygere kan lide det som Divi) har gjort i årevis med stor effekt. Du kan nu gøre meget det samme inden for WordPress.

Du kan finde vores mere om Divi i vores Elegant Themes anmeldelser.

Oprettelse af en side ved hjælp af blokeditoren er enkel:

  1. Vælg Ny side eller Ny post fra WordPress-sidemenuen.
  2. Skriv eller indsæt din sidetitel i titelblokken.
  3. Skriv eller indsæt dit indhold i tekstblokken.
  4. Vælg ikonet '+' til højre for blokken for at tilføje en ny blok.
  5. Vælg den mest passende blok i pop op-boksen.
  6. Fuldfør hovedblokelementerne i midterruden.
  7. Vælg ikonet med tre prikker øverst på blokken, du tilføjede for at ændre designet eller tilpasse det.
  8. For at tilføje tilpasset CSS skal du vælge Avanceret i højre menu.
  9. Vælg Publicer to gange for at gå live.

Mens det er meget ligetil at bruge blokeditoren, kan du dykke meget dybere, hvis du har brug for det. At ikonet med tre prikker ved hver blok åbner en overflod af tilpasningsmuligheder afhængigt af blokken. Du kan duplikere blokken, indsætte andre blokke før eller efter, ændre HTML-attributter, gruppere blokke sammen og mere afhængigt af tilgængelige indstillinger.

Hvad mere er, ved siden af ​​de standardblokke, der følger med WordPress, kan udviklere også oprette deres egne blok-plugins. I betragtning af WordPress's enorme brugerbase og udviklertalent er der allerede mange blok-plugins tilgængelige efter blot et års brug.

Brugsvejledning Gutenberg blocks2

Almindeligt anvendte blokke

WordPress har inkluderet en række blokke, der dækker oprettelse af kernesider. Hver gør det let at tilføje forskellige sideelementer, samtidig med at de tillader brugerdefinerede designfunktioner til den blok alene. Det er en kraftfuld redigeringsmulighed, der kan bruges med stor effekt.

Standarden Gutenberg blocks i WordPress inkluderer:

  • Tekstblok - Den traditionelle indholdsblok, hvor du kan arbejde nøjagtigt som før og ændre ved hjælp af HTML eller kortkoder.
  • Overskrift - Overskriftsblokke med standard H1, H2, H3, H4 indstillinger.
  • Liste - En separat blok, du kan bruge til at oprette standoutlister, enten bestilt eller ikke ordnet.
  • Galleri - En galleriblok, der aktiverede den brugerdefinerede formatering af billeder, der passer til dit sideindhold.
  • Billede - En bestemt billedblok, der fungerer på samme måde som galleriet, men til enkeltbilleder.
  • Citere - En standout-blok, der giver dig mulighed for at fremhæve tilbud eller anmeldelser på en side.
  • Lyd - En bestemt blok til funktion, klik for at afspille lydklip inden for sideindhold.
  • Dække over - En ny blok, der giver dig mulighed for at placere et forsidebillede til din side eller dit indlæg, der kan supplere det fremhævede billede.
  • Video - En videoblok, der fungerer som lyd og gør det nemt at vise video på en side eller et indlæg.

Alt hvad du kan gøre med Gutenberg blocks du plejede at kunne gøre med den originale editor, men det var ikke altid brugervenligt eller tilgængeligt for nye brugere. Dette blokdesign gør det let for alle at bygge deres sider på en logisk og lineær måde.

De bedste Gutenberg-blokplugins

Standard WordPress Gutenberg blocks dække det meste af det, du sandsynligvis får brug for fra dit CMS. Vi nævnte imidlertid tidligere, at udviklere også er begyndt at producere deres egne Gutenberg -blokplugins for at tilføje endnu flere funktioner. Der er snesevis af blokplugins af forskellige kvaliteter derude, og vi har samlet nogle af vores favoritter her.

Lad os se på nogle af dem nu.

Vi vil se på:

  1. Værktøjssætblokke
  2. Ultimate blokke
  3. Ultimate Addons til Gutenberg
  4. Avanceret Gutenberg Blocks
  5. Kan stables Gutenberg Blocks
  6. Atomblokke
  7. Otterblokke
  8. Blokke fra Templatic
  9. Kadence-blokke

Mange af disse Gutenberg-blok-plugins er helt gratis, mens andre tilbyder gratis blokke med mulighed for at opgradere til mere avancerede premium-blokke. Vi nævnte i hver beskrivelse dem, der er gratis, og hvor der er premium-muligheder.

Hver installeres på samme måde, som du installerer ethvert andet WordPress-plugin. Vælg det fra WordPress.org, installer og aktiver eller download filerne til din computer, og upload dem til din WordPress-installation. Når du er installeret, skal du se, at dine nye blokindstillinger vises med standarden blokeret, når du vælger '+' på en side.

Værktøjssætblokke

1. Værktøjssætblokke

Værktøjssætblokke er et af vores foretrukne blokredigerings plugins til WordPress. Det er et premium plugin, der beviser, at mens du kan få gode ting gratis, er det nogle gange værd at betale lidt ekstra for strøm og bekvemmelighed. Pluginet installeres på samme måde som andre plugins og tilføjer de nye blokke til den eksisterende menu.

Blokkene inkluderer brugerdefinerede posttyper, brugerdefineret taksonomi, brugerdefinerede felter, skabeloner, visninger, sideinddeling, uendelig rulning, Ajax-blokke, WooCommerce, Google Maps, formularer, betalinger og endda adgangskontrol. Nogle af disse blokke finder du ikke i noget gratis plugin, hvorfor vi har fremhævet Toolset Blocks.

En af de bedste funktioner i Toolset er evnen til at oprette dynamisk genereret indhold UDEN at skulle foretage en brugerdefineret PHP-kode. Toolset integreres direkte med WordPress Block Editor og giver dig mulighed for at trække dynamisk indhold fra hvor som helst.

Som et par eksempler på, hvad du kan gøre: 

  • Opret overskrifter baseret på titler
  • Indstil knaptekster og CTA'er fra brugerdefinerede felter
  • Indstil billedkilder til felter eller brugerdefinerede felter
  • etc.

Følgende video er en god forklaring på funktionerne i Toolset Blocks:

yPExGHvf_mI

De fleste af os ved, hvor kraftfulde brugerdefinerede felter og posttyper kan være, og det er fremragende at kunne implementere det på en side. Ved siden af ​​formularer, layout, visninger, adgangskontrol og de andre kraftfulde funktioner er det utroligt nemt at anbefale dette plugin, selvom det er et premiumprodukt.

Lejlighedsvis er gratis ikke den bedste pris, og det er en af ​​disse tidspunkter.

Ultimate blokke

2. Ultimative blokke

Ultimate blokke er placeret hos bloggere, men fungerer lige så godt på ethvert WordPress-websted. Pluginet er gratis og indeholder et udvalg af salgsfremmende og meget nyttige redigeringsblokke, der er ideelle til bloggere, men som også kan vise sig nyttige for marketingfolk, e-handelswebsteder, små virksomheder og alle, der ønsker, at deres indhold skiller sig ud.

Blokke inkluderer anmeldelser, indholdsfortegnelse, opfordringer til handling, skifter indhold, billedskyder, indholdsfilers, udtalelser, social deling, nedtællingstimere, statuslinjer, postgitter og stjernebedømmelser. Udvikleren siger, at de også har mere på vej.

Ultimate Blocks har endnu et trick i ærmet i sin block manager. En simpel grænseflade, der hjælper dig med at aktivere eller deaktivere blokke for at gøre oprettelsen af ​​sider enkel. Det betyder, at du kan downloade samlingen og kun aktivere de blokke, du sandsynligvis vil bruge, og holde siden fri for rod, mens du opretter.

 Gutenberg Blocks Ultimate Addons til Gutenberg

3. Gutenberg Blocks - Ultimate Addons til Gutenberg

Gutenberg Blocks - Ultimate Addons til Gutenberg er fra de samme udviklere som de suveræne Astra WordPress tema. Det gratis plugin tilføjer en række blokke til daglig brug, som er enkle at bruge og tilbyder en lang række tilpasningsmuligheder. De vil også alle arbejde med Astra, hvilket er fantastisk, hvis du bruger det tema.

Blokke inkluderer infobokser, knapper, avancerede overskrifter, holdblokke, prissætning, sociale aktier, udtalelser, ikonlister, tyngdekraftsblokke, marketingblokke, tilbud, opfordringer til handling, kontaktformular 7-blokke, Google Maps og mere.

Udviklerne siger, at disse blokke er blevet optimeret til sidehastighed, mens de tilbyder sømless integration med Astra -temaet og inden for ethvert andet tema. Du har lignende tilpasningsmuligheder som disse andre plugins til at skubbe blokke ind på eksisterende sider. Dette alene gør dette plugin værd at tjekke.

Avanceret Gutenberg

4. Avanceret Gutenberg

Avanceret Gutenberg fra Joom United tilføjer over tyve editorblokke som et gratis WordPress-plugin. Der er et anstændigt udvalg af muligheder her fra den sædvanlige kolonne og overskrift til mere avancerede blokke. De er godt designet med en minimal grænseflade, der stadig på en eller anden måde tilbyder alle de tilpasningsmuligheder, du sandsynligvis har brug for.

Blokke inkluderer forfatterprofiler, brugerdefinerede CCS-blokke, WooCommerce, avancerede knapper, kontaktformularer, avancerede lister, kort, vidnesbyrd, tællere, login- og registreringsblokke, video- og billedblokke, social deling og sammenkædning, postoversigter, Lightbox-blok og meget mere .

Hver integrerer sømlesspå en side og leveres komplet med den avancerede tilpasningsmulighed ved hjælp af menuen med tre prikker. De nøjagtige muligheder varierer afhængigt af den pågældende blok, men dækker de mest almindelige situationer, farve, størrelse, indrykning, justering og så videre.

Kan stables Gutenberg Blocks

5. Kan stables Gutenberg Blocks

Kan stables Gutenberg Blocks var en anden tidlig ankomst til opdateringen og frigav nogle meget nyttige brugerdefinerede blokke til WordPress-editoren. De fleste stabelbare blokke er gratis, men udvikleren tilbyder også nogle premiumblokke, der adresserer specifikke anvendelser, hvis du har brug for dem.

Gratis blokke inkluderer postblokke, funktionsgitter, harmonika, opfordring til handling, kort, header, video-popup, prisblok, notifikationsblok, afstandsstykke, skillevæg, funktionsliste og andre. Der er 23 gratis blokke i alt.

Som en ekstra fordel er Stackable et modulært system, så du kan tilføje de blokke, du sandsynligvis har brug for, mens du forlader de andre. Dette kan have en lille lagerplads og sidehastighedsfordel afhængigt af, hvordan dit websted er konfigureret. Uanset hvad er det en god tilføjet funktion, der kan holde tingene magre i bagenden.

Atomblokke

6. Atomblokke

Atomblokke var endnu et af de første plugins på scenen og tilbyder nu 15 gratis blokke og nogle WordPress-temaer, der supplerer denne nye designfrihed. Blokke inkluderer vidnesbyrd, prisfastsættelse, nyhedsbrev, postgitter, avancerede kolonner, delingsikoner, opfordring til handling, forfatterprofil og andre nyttige blokke.

Pluginet er gratis, ligesom de fleste af temaerne. Når du er installeret, vil du se en ny serie af blokke inden for blokafsnittet på en ny side eller et nyt indlæg. Se efter AB Post Grid osv. For at identificere Atomic Block-funktionerne.

Ligesom disse andre editorblok-plugins kan du tilpasse udseendet og følelsen af ​​dem i den avancerede menu. Du har lignende muligheder med hensyn til opacitet, farve, placering osv. Med den ekstra fordel ved yderligere valg, hvis du bruger et Atomic Block-tema. Det er en mindre ekstra funktion, men den er der!

Gutenberg Blocks og Template Library af Otter

7. Gutenberg Blocks og Template Library af Otter

Gutenberg Blocks og Template Library af Otter er en mundfuld af et navn, der er meget mere fordøjeligt med hensyn til funktioner. Det er et gratis letvægts-plugin, der indeholder nogle veldesignede blokke, der bygger på dem, der leveres af WordPress, bare med flere designmuligheder.

Blokke inkluderer sektioner, avancerede overskrifter, knapper, prisfastsættelse, testimonials, Google Maps, forfatterens bioblokke, postgitter, Font Awesome, deling og en kortblok. Alle er optimeret til sidehastighed såvel som funktioner, og mens de lyser på disse funktioner, er de et glimrende supplement til standardblokkene.

Der er ekstra tilpasninger og nogle biblioteksindstillinger for hver blok. Du kan tilpasse hver blok til dine specifikke behov eller bruge en biblioteksindstilling til at tage et færdigt design og bruge det inden for blokken. Det er hurtigt og meget ligetil.

Blokke fra Templatic

8. Blokke af Templatic

Blocks af udvikler Templatic er en anden solid post i vores liste over fantastiske Gutenberg -blok -plugins. Vi har stor respekt for skabelonstemaer, og disse blokke fungerer med eller uden et af deres temaer. Hvis du bruger et skabelontema, glider disse blokke lige ind og er gode at gå til. Hvis du ikke bruger et skematisk tema, vil disse blokke stadig integrere sømlessly til dit design.

Blokkene er gratis og inkluderer en forfatterbio, alarmer, deling af sociale medier, separatorer, omslagsbillede, overskriftsindstillinger, kort, prisfastsættelse, knapper og en Tweet-blok. Hver har de grundlæggende funktioner foran og i centrum med tilpasninger tilgængelige via menuen. De er meget enkle at bruge og vises sammen med alle standardblokkene på den nye side eller postskærm.

Der er nogle gode blokke her, men pluginet er ikke blevet opdateret i næsten et år. De arbejder med den aktuelle version af WordPress, da vi testede dem i tide til denne artikel, men vi ved ikke, hvornår nye blokke ankommer.

Kadence-blokke

9. Kadence-blokke

Kadence-blokke har både gratis og premium muligheder, der styrker standardblokkene i WordPress. Den gratis version har tolv blokke og en indbygget editor, mens premium-versionen på $ 59 om året tilføjer syv premium-blokke, unikke animationsindstillinger og support. Der er også en tredje mulighed, for $ 99 om året har du adgang til alle premium-redigeringsblokke plus alle Kadence-temaer og -produkter.

Blokke inkluderer sidelayoutblokke, infobokse, avancerede gallerier, vidnesbyrd, videoblokke, harmonika, knapper, faner, ikoner, avancerede overskrifter og billeder. Premium-versionen tilføjer gitter- og karruselblokke, produktkaruseller, modelblokke, billedoverlejringer, splitindhold og videopopups.

Hver blok har et tilpasset redigeringsafsnit, hvor du kan ændre position, omrids, farve, billedstørrelse, opacitet og en række andre faktorer. Hvis du arbejder inden for et bestemt design eller en bestemt ramme, kan du nemt implementere blokke i dette design ved hjælp af editoren.

Sammenfatning af Gutenberg blocks og deres plugins

Gutenberg blocks er en fremragende udvikling af WordPress. De tager alt, hvad vi ved og elsker om hurtig side- eller indlægsoprettelse, og skubber det fremad. WordPress tilbyder stadig sin signatur brugervenlighed og lave adgangsbarriere for begyndere, samtidig med at det giver mere erfarne eller designorienterede brugere mulighed for at skille sig ud. Denne balance mellem form og funktion er værd at fejre.

Som det er Gutenberg-blokplugins, har vi denne liste. De gratis plugins tilbyder næsten alt hvad du har brug for fra oprettelse af sider. Muligheden for at opdele en side eller postere i individuelle komponenter og style hver enkelt, indtil den simpelthen er perfekt.

Selv disse premium-plugins er prisen værd. De har tendens til at tilbyde højere standarder med hensyn til design og brugervenlighed og også nogle blokke, der ikke er tilgængelige andre steder. Mens premium er Toolset Blocks, skiller det sig ud for at tilbyde en række blokke, som du ikke finder i noget gratis plugin som søgning, adgangskontrol, WooCommerce og brugerdefinerede indlæg og brugerdefinerede felter.

Har du et yndlings-Gutenberg-blokplugin? Elsker du en, vi ikke har nævnt her? Fortæl os om dem nedenfor, hvis du gør det!

 

Om forfatteren
Jamie Kavanagh
Forfatter: Jamie KavanaghInternet side: https://www.coastalcontent.co.uk/
Jamie, en ingeniør med uddannelse, er vores primære tekniske forfatter og forsker. Jamie driver også Coastal Content, et content marketing, copywriting og webdesign firma med base i Cornwall i Storbritannien.

En ting mere... Vidste du, at folk, der deler nyttige ting som dette indlæg, også ser FANTASTISKE ud? ;-)
Vær venlig forlade a nyttigt kommenter med dine tanker, så del dette på din Facebook-gruppe (r), der ville finde det nyttigt, og lad os høste fordelene sammen. Tak fordi du delte og var god!

Afsløring: Denne side kan indeholde links til eksterne websteder for produkter, som vi elsker og helhjertet anbefaler. Hvis du køber produkter, vi foreslår, tjener vi muligvis et henvisningsgebyr. Sådanne gebyrer påvirker ikke vores anbefalinger, og vi accepterer ikke betalinger for positive anmeldelser.

Forfatter (e) Fremhævet den:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot logo   WPMU DEV-logo   og mange flere ...