Jeg tror du vil være enig når jeg sier: Hele Gutenberg-virksomheten er forvirrende.
For det første, er den nye blokkredigereren vanskelig å bruke eller hva? Jeg mener, du vet ikke hvor alle favorittverktøyene dine gikk. Nå tok du sannsynligvis lengre tid å opprette et innlegg, ikke sant?
Kanskje du la en lenke (tilknyttet eller på annen måte) kastet deg en pokker for en kurve, og du følte deg skuffet. Kanskje hadde du problemer med å legge til et bilde ved siden av teksten din.
Kanskje prøvde du å legge til flere kolonner, og ting fungerte ikke som forventet. Hvis det ikke er tilfelle, kan du kanskje ikke legge til PDF-filene dine enkelt, eller du ser den fryktede “Oppdater mislyktes” -meldingen alvorlig.
Vel, ikke bekymre deg lenger; Jeg var i din nøyaktige posisjon for ikke lenge siden, men nå synes jeg Gutenberg er en spennende å bruke. Det er en læringskurve, ja, men mot slutten av dagens innlegg, vil du tenke på Gutenberg annerledes.
Du ser på Gutenberg, standard WordPress-blokkereditor
Hvis du bruker WordPress 5.0 og nyere, må du ha kommet over den nye og skinnende WordPress-redaktøren, kjent som Gutenberg.
Og akkurat som mange andre brukere, vil du bruke den revolusjonerende redaktøren, men du er nølende fordi Gutenberg det er komplisert.
Eller kanskje da du møtte Gutenberg første gang, fungerte ikke forskjellige ting. Tross alt, var og er fremdeles utviklere å gjøre temaer og plugins kompatible med blokkredigereren.
Så du raskt gikk tilbake til Klassisk redaktør, som, BTW, er bra med oss. Bare husk at WordPress ikke støtter Classic Editor etter 2022. Pluss at du går glipp av alle de ekstra godsakene Gutenberg tilbyr.
Når det gjelder funksjonalitet, gjør Classic Editor og Gutenberg det samme; du vet, begge verktøyene hjelper deg å lage innhold uten koding.
Vi er imidlertid så vant til den gamle WYSIWYG-redaktøren at vi synes at tilpasning til den nye Gutenberg UI er litt fremmed, om ikke helt forvirrende. Det er i det minste det jeg tror.
Men hva er egentlig Gutenberg?
Gutenberg er den nye standard WordPress-redaktøren. Det er i motsetning til den tradisjonelle visuelle / teksteditoren; Gutenberg bruker innholdsblokker omtrent som mange moderne sidebyggere.
Det leveres med mer intuitive funksjoner enn Classic Editor, noe som betyr at du kan lage innhold med medier på farten. Nå kan du piske opp ekstraordinære oppsett uansett om du jobber med WordPress-innlegg eller sider.
Og med et par tilleggsprogrammer, kan Gutenberg gunstig konkurrere med etablerte WordPress-sidebyggere som Brizy, Elementor og Divi.
Den eneste ulempen er at sidebygger ofte tilbyr flere funksjoner fordi de først og fremst er sidebygger! Samtidig er Gutenberg fremdeles ganske ung, og du kan bare forvente at blokkredaktøren vil vokse i store sprang.
I dagens innlegg skal vi ha en spennende tid med å lage et WordPress-innlegg med Gutenberg-redaktøren. Jeg tar sikte på å dekke alle ørsmå detaljer og funksjoner slik at du kan bruke Gutenberg til å lage innhold som proffene.
Er du klar? La oss i så fall lage det WordPress-innlegget.
Hvordan lage et WordPress-innlegg med Gutenberg
Hvis du driver et WordPress-nettsted, oppretter du sannsynligvis flere innlegg enn sider. I den følgende delen oppretter vi et WordPress-innlegg i Gutenberg fra bunnen av. Jeg håper du vil ha det like gøy som jeg gjorde da jeg testet ut Gutenberg.
Som ut av veien, naviger til Innlegg> Legg til nytt som vi fremhever i skjermdumpen nedenfor.
Ved å gjøre det fører du rett til Gutenberg-redaktøren som er vist nedenfor.
Ganske pent, ikke sant? La oss nå rulle opp ermene og komme i gang.
Legge til en tittel
Du kan ikke skrive et innlegg uten en solid tittel. Den gode tingen er at Gutenberg gjør det utrolig enkelt å legge til en tittel.
Den første blokken du ser er Tittel øverst i dokumentet slik vi detaljerte på bildet over. Hvis du vil opprette en tittel for innlegget ditt, skriver du inne i blokken. Enkelt som A, B, C.
Trenger du å redigere permalink? Du kan enkelt gjøre det i Tittel blokkerer ved å klikke på Redigere knappen som vist nedenfor.
Etter å ha lagt til tittelen, trykker du på TAST INN for å starte en ny linje. Å ja, Gutenberg bevarer den innfødte navigasjonen du elsket i den klassiske WordPress-redaktøren.
Legge til et nytt avsnitt
Slår den TAST INN nøkkel oppretter en ny Avsnitt som vist over. Før du skriver inn tekst, presenterer blokken et par alternativer. Se nummerert bilde nedenfor for mer informasjon.
Notater. Du kan:
Konverter den nye avsnittsblokken til en hvilken som helst annen blokk, for eksempel bilde, overskrift, omslag, galleri, WooCommerce, form osv..
Bruk snarveien til å endre avsnittsblokken til en bildeblokk
Endre avsnittsblokken til en overskriftsblokk, dvs. H2, H3 og H4
Transformer avsnittblokken til en omslagsbilde
For illustrasjonsformål vil jeg reservere første ledd for innføringen etter innlegg. Når du har lagt til litt tekst, vises en formateringsverktøylinje som vist nedenfor.
Takket være formateringsverktøylinjen kan du:
Gjør avsnittet om til et vers, sitat, overskrift, liste, kode og forhåndsformatert tekst
Modig, kursiv, gjennomstreking, og understreking innhold
Juster tekst til venstre, høyre, midt og rettferdiggjør
Legg til en kobling som også kan åpnes i en ny fane
Sett inn et inline-bilde (ja, det finnes!)
Skjul blokkeringsinnstillinger
Dupliser blokken
Sett inn en blokk før eller etter den gjeldende blokken (i vårt tilfelle, det er første ledd, så var ikke å legge til noe før, bare etter.) Du kan legge til en omslagsbilde før første ledd hvis du ønsker det fordi det ser slik ut flink
Rediger blokken som HTML
Legg til den gjeldende blokken i gjenbrukbare blokker, slik at du kan bruke den i andre innlegg
Fjern blokken helt
Du kan tilpasse avsnittsblokken ytterligere med alternativene som er tilgjengelige i Blokkere fanen du finner i sidefeltmenyen som vist nedenfor.
Noen få merknader om bildet over:
Velg Blokkere kategorien her for å se alle blokkeringsalternativer og innstillinger
Velg skriftstørrelse og aktiver Drop Drop her
Legg til bakgrunnsfarge i avsnittet. Jeg satte den til blå for illustrasjonsformål. Du kan også tilpasse tekstfargen. I begge tilfeller kan du legge til ubegrensede tilpassede farger
Du kan legge til en tilpasset CSS-klasse her, noe som betyr at du kan legge til flere CSS-stiler i blokken
Den blå bakgrunnen og Drop Cap gjaldt allerede i Gutenberg-redaktøren
Dokumentfanen i sidefeltet
Det er en annen fane i sidefeltmenyen; de Dokument som vist nedenfor.
Her notatene for bildet over:
Klikk her for å veksle til Dokument tab
Her kan du planlegge et innlegg, angi synlighet til enten Privat eller Offentlig, sett et innlegg til Avventer vurdering status, velg innleggformat og opprett et klissete innlegg
Avsnittet lar deg redigere permalink
Du kan velge eller opprette nye kategorier her
Legg til koder i innlegget ditt
Angi kjennetegnet bilde
Lag et manuelt utdrag
Tillat kommentarer, pingbacks og trackbacks
Som du kan se, har du mange muligheter til å designe en avsnittsblokk (og hele innlegget) uansett hvilken måte du måtte ønske. Forresten, forskjellige blokker har forskjellige innstillinger slik vi lærer om et minutt.
Etter første ledd, trykk på TAST INN tasten igjen for å opprette en ny linje (eller avsnittsblokk). La oss nå legge til et bilde under første ledd.
Legge til bilder i Gutenberg
De sier at et bilde snakker tusen ord, og et blogginnlegg uten bilder er, vel, trist. For å legge til et bilde i WordPress-innlegget ditt ved hjelp av Gutenberg, har du et par alternativer.
Når du treffer TAST INN for noen øyeblikk siden, utløste du en ny avsnittsblokk. Ser du som Gutenberg er intuitivt, kan du legge til et bilde ved å klikke på pluss- (+), bilde- eller omslagsikonene slik vi fremhever i bildet nedenfor.
Et par notater:
Du kan legge til et bilde via pluss-ikonene
Her kan du legge til et bilde enkelt
Dette alternativet lar deg legge til en dekke image (Disse er vanligvis større enn andre bilder. I tillegg kan du legge til tekst på omslagsbilder, BTW)
Gå videre og klikk på et av plussikonene (+). Deretter klikker du på Bilde , som vist nedenfor.
Klikk på Bilde fanen laster inn Bilde blokken vist på skjermdumpen nedenfor.
De Bilde blokkering lar deg laste opp et bilde eller legge til et fra en URL eller mediebiblioteket. I prosessen kan du legge til alt-tekst (viktig for SEO), bildetekst og beskrivelse via innstillingene for medieskjermen, eller Blokkere sidefelt som vist på følgende bilder.
De vanlige medieinnstillingene …
…og Bilde blokker innstillinger.
Lærer du noe her i dag? Jeg håper det. La oss gå videre.
Etter å ha lagt til bildet ditt, legger Gutenberg til en ny avsnittsblokk rett under det. Du kan legge til hva du vil, men for illustrasjonsformål la jeg til litt tekst og deretter en knapp under det.
Hvordan legge til nedlastbare filer, f.eks. PDF, bilder, videoer osv
Gutenberg gjør det utrolig enkelt å legge ned nedlastbare filer til WordPress-innlegget eller siden din.
I en ny Avsnitt blokkering, klikk på pluss-ikonet, naviger til Vanlige blokker og traff Fil som vi markerer nedenfor.
Hvis du gjør det, lanseres følgende blokkering:
Fra Fil blokkere, kan du laste opp en ny fil eller legge til en fra mediebiblioteket. Etter å ha lagt til filen din, legger Gutenberg til en søt nedlasting knappen automatisk som vist på bildet nedenfor.
Du kan leke med alternativene. For eksempel kan du redigere / slette “Gratis Gutenberg PDF-sjekkliste”Tittel så vel som nedlasting knapp. Du kan legge til en CSS-klasse i blokken og style den uansett hva du ønsker.
Legger til et sitat i Gutenberg
La oss deretter legge til et pristilbud fordi de er sjarmerende, fengende og hjelper deg å kjøre poenget hjem. I en ny linje, klikk på pluss-tegnet (+), naviger til Vanlige blokker og traff Sitat som vist nedenfor.
Hvis du gjør det, legger du til Sitat blokker i innlegget ditt som vi fremhever i screengrab nedenfor.
Legg merke til sitatblokkinnstillingene i høyre sidefelt over?
For å legge til pristilbud, skriv inn blokken. Her er resultatet.
Ser utrolig ut, ikke sant?
Legge til medieinnsatser i Gutenberg
Gutenberg kommer med flere blokker for å legge inn videoer og andre medier fra over 30 nettsteder som YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, og så videre.
Hvis du vil legge til innhold, klikker du på pluss-ikonet, naviger til innbygging, og velg nettstedet. For eksempel ønsket jeg YouTube, som vist nedenfor.
Deretter kopierer du inn YouTube-nettadressen og klikker på embed knappen som vist på bildet nedenfor.
Så snart du treffer embed -knappen dekker Gutenberg lenken til en video automatisk slik vi fremhever nedenfor.
Jevn seiling hele veien. La oss nå legge til en frittstående knapp som er perfekt for å lage en oppfordring til handling (CTA).
Hvordan legge til en knapp i Gutenberg
Du bør ikke ha vanskelig for å legge til blokker på dette tidspunktet. Bare klikk på pluss (+), og velg blokkering. Det kan ikke bli noe enklere enn det.
Så, hvordan legger vi til en knapp?
I en ny linje (eller blokkering), klikk på plussikonet (+), naviger til Oppsettelementer og klikk på Knapp som vist nedenfor.
Å gjøre det fører deg til Knapp blokker som vi detaljer nedenfor.
Som du ser fra bildet over, kan du redigere knappeteksten og legge til en lenke. I tillegg kan du tilpasse knappen via sidefeltmenyen til høyre på skjermen.
Etter et par klikk, her er hva jeg fikk.
Forresten, hvis du bruker vanskelig å lese fargekombinasjoner på knappene dine, Gutenberg vil omgående gi deg beskjed. Så fint?
Hvordan legge til kolonner i Gutenberg
La oss legge til noen kolonner med en vakker knapp på plass. Jeg vil legge til to kolonner, så følg nøye.
Dette er hva du skal gjøre. Klikk på pluss-ikonet, naviger til Oppsettelementer og klikk på kolonner fanen som vist på bildet nedenfor.
Gutenberg legger til to kolonner som standard. Se bildet nedenfor, og husk at jeg allerede har lagt til innhold i kolonnene.
Som får meg:
Ikke verst i noen sekunder arbeid. Men kanskje du ikke ønsker å lage kolonner. Kanskje du vil vise et bilde ved siden av tekst.
Er det en blokk for det? Ja det er!
Hvordan legge til et bilde ved siden av tekst i Gutenberg
Ønsker du å legge til et bilde ved siden av tekst? I så fall vil du elske følgende avsnitt.
Klikk som vanlig på plussikonet (+), naviger til Oppsettelementer og klikk Media og tekst som vist under.
Du bør se Media og tekst blokkering, som vist nedenfor.
Last deretter opp bilde / video / media eller legg til et fra mediebiblioteket. Deretter legger du til teksten ved siden av mediet, som vist på bildet nedenfor.
Jeg lekte med Media og tekst blokkerer, og jeg kom med følgende. Husk deg; Jeg klarte å presse en knapp der også ��
Å, det er back-enden! La meg vise deg grensen. Her:
Ser veldig profesjonell ut, ikke sant? Du kan absolutt forestille deg hvor mye du kan oppnå med Gutenberg-redaktøren.
Tredjeparts Gutenbergblokker
WordPress-utviklere er opptatt av å gjøre temaer og plugins kompatible med Gutenberg-redaktøren. Noen få eksempler inkluderer WooCommerce, Jetpack og Yoast SEO.
For eksempel kan du legge til WooCommerce-blokker i WordPress-innlegget ditt. For det første må du installere og aktivere WooCommerce.
I en ny linje klikker du på pluss-ikonet (+), naviger til WooCommerce og velg hvilken blokkering du ønsker som vist nedenfor.
Vet du hva dette betyr? Det betyr at du kan lage rich media og gode innlegg og sider i løpet av minutter.
Andre bemerkelsesverdige blokker
Vi har over 2000 ord allerede, og hvis vi holder dette oppe, vil vi ende opp med å skrive en hel eBok. Min bønn er at du nå kan bruke Gutenberg uten hikke.
Det er en liste over andre tilgjengelige blokker her.
widgets – Du kan legge til innhold fra widgetene dine i blogginnlegg
kortkoder – Du kan fremdeles bruke opprinnelige WordPress-kortkoder
Classic – En flott blokk som rommer det gamle innholdet ditt
Mer – Blokken ble tidligere kjent som Les mer stikkord
Sideskift, separatorer, mellomrom
Tilpasset HTML, Pullquote, Tabell
Galleri og HTML5 lyd / video
Og så mye mer avhengig av temaer og plugins du bruker
Bortsett: Å lage en WordPress-side ligner på å lage et innlegg som er lagret for noen få minutters forskjeller, så vi kommer ikke inn på det i dag.
Rask Gutenberghacks og tastatursnarveier
Gutenberg kommer med et par hacks og snarveier som gjør det enda enklere å gjøre. Hvis du for eksempel skriver “/” inne i en avsnittsblokk, kommer det opp en liste over blokker.
Du kan til og med velge en spesifikk blokk ved å skrive tittelen på blokken etter tilbakeskrittet (/), for eksempel hvis du skriver “/ image” får opp bildeblokken blant andre bilderelaterte blokker. Se bildet nedenfor for mer informasjon.
Tastatursnarveier: Trykk på for å se alle tilgjengelige snarveier SKIFT + ALT + H i Windows og OPT + CTRL + H i Mac.
Øverst i dokumentet kan du se dokumentstrukturen ved å klikke på (i) ikonet, som vist nedenfor.
Hyggelig. Ekstraordinært glatt.
Åh, og forresten, “Update Failed” -feilen skjer vanligvis på grunn av en skjelven internettforbindelse ��
Mellom deg og meg er Gutenberg en fantabuløs innholdsredaktør. Forutsatt at du er villig til å lære tauene; du kan høste mye av fremtidens WordPress-redaktør.
Gutenberg er fremdeles relativt ung, og du kan forvente at den vil vokse når det gjelder brukervennlighet og funksjonalitet. Det vil være en seriøs styrke å regne med de kommende dagene. Sidebyggere passer bedre på, ellers går de tom for business
Vi håper vår trinnvise guide til Gutenberg-redaktøren hjalp deg med å sette ting i perspektiv. Vi tror du nå kan bruke blokkereditoren til å lage innhold som en proff.
Del dine bekymringer, tanker og spørsmål i kommentarfeltet nedenfor.
07.06.2020
Trinnvis guide til Gutenberg Builder for WordPress
Jeffrey Wilson Guider
Jeg tror du vil være enig når jeg sier: Hele Gutenberg-virksomheten er forvirrende.
For det første, er den nye blokkredigereren vanskelig å bruke eller hva? Jeg mener, du vet ikke hvor alle favorittverktøyene dine gikk. Nå tok du sannsynligvis lengre tid å opprette et innlegg, ikke sant?
Kanskje du la en lenke (tilknyttet eller på annen måte) kastet deg en pokker for en kurve, og du følte deg skuffet. Kanskje hadde du problemer med å legge til et bilde ved siden av teksten din.
Kanskje prøvde du å legge til flere kolonner, og ting fungerte ikke som forventet. Hvis det ikke er tilfelle, kan du kanskje ikke legge til PDF-filene dine enkelt, eller du ser den fryktede “Oppdater mislyktes” -meldingen alvorlig.
Vel, ikke bekymre deg lenger; Jeg var i din nøyaktige posisjon for ikke lenge siden, men nå synes jeg Gutenberg er en spennende å bruke. Det er en læringskurve, ja, men mot slutten av dagens innlegg, vil du tenke på Gutenberg annerledes.
Contents
Hva er Gutenberg Editor?
Du ser på Gutenberg, standard WordPress-blokkereditor
Hvis du bruker WordPress 5.0 og nyere, må du ha kommet over den nye og skinnende WordPress-redaktøren, kjent som Gutenberg.
Og akkurat som mange andre brukere, vil du bruke den revolusjonerende redaktøren, men du er nølende fordi Gutenberg det er komplisert.
Eller kanskje da du møtte Gutenberg første gang, fungerte ikke forskjellige ting. Tross alt, var og er fremdeles utviklere å gjøre temaer og plugins kompatible med blokkredigereren.
Så du raskt gikk tilbake til Klassisk redaktør, som, BTW, er bra med oss. Bare husk at WordPress ikke støtter Classic Editor etter 2022. Pluss at du går glipp av alle de ekstra godsakene Gutenberg tilbyr.
Når det gjelder funksjonalitet, gjør Classic Editor og Gutenberg det samme; du vet, begge verktøyene hjelper deg å lage innhold uten koding.
Vi er imidlertid så vant til den gamle WYSIWYG-redaktøren at vi synes at tilpasning til den nye Gutenberg UI er litt fremmed, om ikke helt forvirrende. Det er i det minste det jeg tror.
Men hva er egentlig Gutenberg?
Gutenberg er den nye standard WordPress-redaktøren. Det er i motsetning til den tradisjonelle visuelle / teksteditoren; Gutenberg bruker innholdsblokker omtrent som mange moderne sidebyggere.
Det leveres med mer intuitive funksjoner enn Classic Editor, noe som betyr at du kan lage innhold med medier på farten. Nå kan du piske opp ekstraordinære oppsett uansett om du jobber med WordPress-innlegg eller sider.
Og med et par tilleggsprogrammer, kan Gutenberg gunstig konkurrere med etablerte WordPress-sidebyggere som Brizy, Elementor og Divi.
Den eneste ulempen er at sidebygger ofte tilbyr flere funksjoner fordi de først og fremst er sidebygger! Samtidig er Gutenberg fremdeles ganske ung, og du kan bare forvente at blokkredaktøren vil vokse i store sprang.
I dagens innlegg skal vi ha en spennende tid med å lage et WordPress-innlegg med Gutenberg-redaktøren. Jeg tar sikte på å dekke alle ørsmå detaljer og funksjoner slik at du kan bruke Gutenberg til å lage innhold som proffene.
Er du klar? La oss i så fall lage det WordPress-innlegget.
Hvordan lage et WordPress-innlegg med Gutenberg
Hvis du driver et WordPress-nettsted, oppretter du sannsynligvis flere innlegg enn sider. I den følgende delen oppretter vi et WordPress-innlegg i Gutenberg fra bunnen av. Jeg håper du vil ha det like gøy som jeg gjorde da jeg testet ut Gutenberg.
Som ut av veien, naviger til Innlegg> Legg til nytt som vi fremhever i skjermdumpen nedenfor.
Ved å gjøre det fører du rett til Gutenberg-redaktøren som er vist nedenfor.
Ganske pent, ikke sant? La oss nå rulle opp ermene og komme i gang.
Legge til en tittel
Du kan ikke skrive et innlegg uten en solid tittel. Den gode tingen er at Gutenberg gjør det utrolig enkelt å legge til en tittel.
Den første blokken du ser er Tittel øverst i dokumentet slik vi detaljerte på bildet over. Hvis du vil opprette en tittel for innlegget ditt, skriver du inne i blokken. Enkelt som A, B, C.
Trenger du å redigere permalink? Du kan enkelt gjøre det i Tittel blokkerer ved å klikke på Redigere knappen som vist nedenfor.
Etter å ha lagt til tittelen, trykker du på TAST INN for å starte en ny linje. Å ja, Gutenberg bevarer den innfødte navigasjonen du elsket i den klassiske WordPress-redaktøren.
Legge til et nytt avsnitt
Slår den TAST INN nøkkel oppretter en ny Avsnitt som vist over. Før du skriver inn tekst, presenterer blokken et par alternativer. Se nummerert bilde nedenfor for mer informasjon.
Notater. Du kan:
For illustrasjonsformål vil jeg reservere første ledd for innføringen etter innlegg. Når du har lagt til litt tekst, vises en formateringsverktøylinje som vist nedenfor.
Takket være formateringsverktøylinjen kan du:
gjennomstreking, og understreking innholdDu kan tilpasse avsnittsblokken ytterligere med alternativene som er tilgjengelige i Blokkere fanen du finner i sidefeltmenyen som vist nedenfor.
Noen få merknader om bildet over:
Dokumentfanen i sidefeltet
Det er en annen fane i sidefeltmenyen; de Dokument som vist nedenfor.
Her notatene for bildet over:
Som du kan se, har du mange muligheter til å designe en avsnittsblokk (og hele innlegget) uansett hvilken måte du måtte ønske. Forresten, forskjellige blokker har forskjellige innstillinger slik vi lærer om et minutt.
Etter første ledd, trykk på TAST INN tasten igjen for å opprette en ny linje (eller avsnittsblokk). La oss nå legge til et bilde under første ledd.
Legge til bilder i Gutenberg
De sier at et bilde snakker tusen ord, og et blogginnlegg uten bilder er, vel, trist. For å legge til et bilde i WordPress-innlegget ditt ved hjelp av Gutenberg, har du et par alternativer.
Når du treffer TAST INN for noen øyeblikk siden, utløste du en ny avsnittsblokk. Ser du som Gutenberg er intuitivt, kan du legge til et bilde ved å klikke på pluss- (+), bilde- eller omslagsikonene slik vi fremhever i bildet nedenfor.
Et par notater:
Gå videre og klikk på et av plussikonene (+). Deretter klikker du på Bilde , som vist nedenfor.
Klikk på Bilde fanen laster inn Bilde blokken vist på skjermdumpen nedenfor.
De Bilde blokkering lar deg laste opp et bilde eller legge til et fra en URL eller mediebiblioteket. I prosessen kan du legge til alt-tekst (viktig for SEO), bildetekst og beskrivelse via innstillingene for medieskjermen, eller Blokkere sidefelt som vist på følgende bilder.
De vanlige medieinnstillingene …
…og Bilde blokker innstillinger.
Lærer du noe her i dag? Jeg håper det. La oss gå videre.
Etter å ha lagt til bildet ditt, legger Gutenberg til en ny avsnittsblokk rett under det. Du kan legge til hva du vil, men for illustrasjonsformål la jeg til litt tekst og deretter en knapp under det.
Hvordan legge til nedlastbare filer, f.eks. PDF, bilder, videoer osv
Gutenberg gjør det utrolig enkelt å legge ned nedlastbare filer til WordPress-innlegget eller siden din.
I en ny Avsnitt blokkering, klikk på pluss-ikonet, naviger til Vanlige blokker og traff Fil som vi markerer nedenfor.
Hvis du gjør det, lanseres følgende blokkering:
Fra Fil blokkere, kan du laste opp en ny fil eller legge til en fra mediebiblioteket. Etter å ha lagt til filen din, legger Gutenberg til en søt nedlasting knappen automatisk som vist på bildet nedenfor.
Du kan leke med alternativene. For eksempel kan du redigere / slette “Gratis Gutenberg PDF-sjekkliste”Tittel så vel som nedlasting knapp. Du kan legge til en CSS-klasse i blokken og style den uansett hva du ønsker.
Legger til et sitat i Gutenberg
La oss deretter legge til et pristilbud fordi de er sjarmerende, fengende og hjelper deg å kjøre poenget hjem. I en ny linje, klikk på pluss-tegnet (+), naviger til Vanlige blokker og traff Sitat som vist nedenfor.
Hvis du gjør det, legger du til Sitat blokker i innlegget ditt som vi fremhever i screengrab nedenfor.
Legg merke til sitatblokkinnstillingene i høyre sidefelt over?
For å legge til pristilbud, skriv inn blokken. Her er resultatet.
Ser utrolig ut, ikke sant?
Legge til medieinnsatser i Gutenberg
Gutenberg kommer med flere blokker for å legge inn videoer og andre medier fra over 30 nettsteder som YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, og så videre.
Hvis du vil legge til innhold, klikker du på pluss-ikonet, naviger til innbygging, og velg nettstedet. For eksempel ønsket jeg YouTube, som vist nedenfor.
Deretter kopierer du inn YouTube-nettadressen og klikker på embed knappen som vist på bildet nedenfor.
Så snart du treffer embed -knappen dekker Gutenberg lenken til en video automatisk slik vi fremhever nedenfor.
Jevn seiling hele veien. La oss nå legge til en frittstående knapp som er perfekt for å lage en oppfordring til handling (CTA).
Hvordan legge til en knapp i Gutenberg
Du bør ikke ha vanskelig for å legge til blokker på dette tidspunktet. Bare klikk på pluss (+), og velg blokkering. Det kan ikke bli noe enklere enn det.
Så, hvordan legger vi til en knapp?
I en ny linje (eller blokkering), klikk på plussikonet (+), naviger til Oppsettelementer og klikk på Knapp som vist nedenfor.
Å gjøre det fører deg til Knapp blokker som vi detaljer nedenfor.
Som du ser fra bildet over, kan du redigere knappeteksten og legge til en lenke. I tillegg kan du tilpasse knappen via sidefeltmenyen til høyre på skjermen.
Etter et par klikk, her er hva jeg fikk.
Forresten, hvis du bruker vanskelig å lese fargekombinasjoner på knappene dine, Gutenberg vil omgående gi deg beskjed. Så fint?
Hvordan legge til kolonner i Gutenberg
La oss legge til noen kolonner med en vakker knapp på plass. Jeg vil legge til to kolonner, så følg nøye.
Dette er hva du skal gjøre. Klikk på pluss-ikonet, naviger til Oppsettelementer og klikk på kolonner fanen som vist på bildet nedenfor.
Gutenberg legger til to kolonner som standard. Se bildet nedenfor, og husk at jeg allerede har lagt til innhold i kolonnene.
Som får meg:
Ikke verst i noen sekunder arbeid. Men kanskje du ikke ønsker å lage kolonner. Kanskje du vil vise et bilde ved siden av tekst.
Er det en blokk for det? Ja det er!
Hvordan legge til et bilde ved siden av tekst i Gutenberg
Ønsker du å legge til et bilde ved siden av tekst? I så fall vil du elske følgende avsnitt.
Klikk som vanlig på plussikonet (+), naviger til Oppsettelementer og klikk Media og tekst som vist under.
Du bør se Media og tekst blokkering, som vist nedenfor.
Last deretter opp bilde / video / media eller legg til et fra mediebiblioteket. Deretter legger du til teksten ved siden av mediet, som vist på bildet nedenfor.
Jeg lekte med Media og tekst blokkerer, og jeg kom med følgende. Husk deg; Jeg klarte å presse en knapp der også ��
Å, det er back-enden! La meg vise deg grensen. Her:
Ser veldig profesjonell ut, ikke sant? Du kan absolutt forestille deg hvor mye du kan oppnå med Gutenberg-redaktøren.
Tredjeparts Gutenbergblokker
WordPress-utviklere er opptatt av å gjøre temaer og plugins kompatible med Gutenberg-redaktøren. Noen få eksempler inkluderer WooCommerce, Jetpack og Yoast SEO.
For eksempel kan du legge til WooCommerce-blokker i WordPress-innlegget ditt. For det første må du installere og aktivere WooCommerce.
I en ny linje klikker du på pluss-ikonet (+), naviger til WooCommerce og velg hvilken blokkering du ønsker som vist nedenfor.
Vet du hva dette betyr? Det betyr at du kan lage rich media og gode innlegg og sider i løpet av minutter.
Andre bemerkelsesverdige blokker
Vi har over 2000 ord allerede, og hvis vi holder dette oppe, vil vi ende opp med å skrive en hel eBok. Min bønn er at du nå kan bruke Gutenberg uten hikke.
Det er en liste over andre tilgjengelige blokker her.
Bortsett: Å lage en WordPress-side ligner på å lage et innlegg som er lagret for noen få minutters forskjeller, så vi kommer ikke inn på det i dag.
Rask Gutenberghacks og tastatursnarveier
Gutenberg kommer med et par hacks og snarveier som gjør det enda enklere å gjøre. Hvis du for eksempel skriver “/” inne i en avsnittsblokk, kommer det opp en liste over blokker.
Du kan til og med velge en spesifikk blokk ved å skrive tittelen på blokken etter tilbakeskrittet (/), for eksempel hvis du skriver “/ image” får opp bildeblokken blant andre bilderelaterte blokker. Se bildet nedenfor for mer informasjon.
Tastatursnarveier: Trykk på for å se alle tilgjengelige snarveier SKIFT + ALT + H i Windows og OPT + CTRL + H i Mac.
Øverst i dokumentet kan du se dokumentstrukturen ved å klikke på (i) ikonet, som vist nedenfor.
Hyggelig. Ekstraordinært glatt.
Åh, og forresten, “Update Failed” -feilen skjer vanligvis på grunn av en skjelven internettforbindelse ��
Mellom deg og meg er Gutenberg en fantabuløs innholdsredaktør. Forutsatt at du er villig til å lære tauene; du kan høste mye av fremtidens WordPress-redaktør.
Gutenberg er fremdeles relativt ung, og du kan forvente at den vil vokse når det gjelder brukervennlighet og funksjonalitet. Det vil være en seriøs styrke å regne med de kommende dagene. Sidebyggere passer bedre på, ellers går de tom for business
Vi håper vår trinnvise guide til Gutenberg-redaktøren hjalp deg med å sette ting i perspektiv. Vi tror du nå kan bruke blokkereditoren til å lage innhold som en proff.
Del dine bekymringer, tanker og spørsmål i kommentarfeltet nedenfor.