Vaiheittainen opas WordPressin Gutenberg Builderiin

Vaiheittainen opas WordPressin Gutenberg Builderiin

Luulen, että olet samaa mieltä, kun sanon: Tämä koko Gutenberg-liiketoiminta on hämmentävää.


Ensinnäkin, onko uutta lohkoeditoria vaikea käyttää tai mitä? Tarkoitan, et tiedä minne kaikki suosikkityökalut menivät. Nyt olet todennäköisesti ottanut kauemmin viestin luomiseen, eikö totta?

Ehkä linkin lisääminen (tytäryhtiöksi tai muuten) heitti sinulle yhden helven käyrän, ja sinusta tuntui pettynyt. Ehkä sinulla oli ongelmia kuvan lisäämisessä tekstin viereen.

Ehkä yritit lisätä useita sarakkeita, ja asiat eivät onnistuneet odotetusti. Jos näin ei ole, et ehkä voi lisätä PDF-tiedostoja helposti, tai näet pelätyn päivityksen epäonnistuneen viestin useita kertoja.

Älä huoli enää; Olin tarkalla asemallasi kauan sitten, mutta nyt mielestäni Gutenbergillä on jännitys käyttää. Kyllä, siinä on oppimiskäyrä, mutta päivän viestin loppuun mennessä ajattelet Gutenbergia eri tavalla.

Mikä on Gutenbergin toimittaja?

Wordpress gutenberg -toimittaja

Tarkastelet Gutenbergia, WordPressin oletuslohkoeditoria

Jos käytät WordPress 5.0: aa ja uudempaa, sinun on täytynyt löytää uusi ja kiiltävä WordPress-editori, joka tunnetaan nimellä Gutenberg.

Ja kuten monet muutkin käyttäjät, haluat käyttää vallankumouksellista toimittajaa, mutta olet epäröivä, koska Gutenberg on monimutkaista.

Tai ehkä, kun tapasit ensimmäisen kerran Gutenbergin, useat asiat eivät toimineet. Loppujen lopuksi kehittäjät tekivät ja tekevät edelleen teemoja ja laajennuksia yhteensopiviksi lohkoeditorin kanssa.

Joten, palasi nopeasti Klassinen toimittaja, mikä, BTW, on okei kanssamme. Pidä vain mielessä, että WordPress ei tue Classic Editoria vuoden 2022 jälkeen. Plussasi on, että menetät kaikki Gutenbergin tarjoamat ylimääräiset herkut..

Toiminnallisuudessa Classic Editor ja Gutenberg tekevät saman asian; tiedät, että molemmat työkalut auttavat sinua luomaan sisältöä ilman koodausta.

Olemme kuitenkin niin tottuneet vanhaan WYSIWYG-editoriin, että löydämme sopeutumista uuteen Gutenbergin käyttöliittymään hiukan vieraana, ellei täysin hämmentävänä. Ainakin niin luulen.

Mutta mikä tarkalleen on Gutenberg?

Gutenberg on uusi WordPress-oletuseditori. Se on erilainen kuin perinteinen visuaalinen / tekstieditori; Gutenberg käyttää sisältölohkoja aivan kuten monet nykyajan sivujen rakentajat.

Se toimitetaan intuitiivisemmilla ominaisuuksilla kuin Classic Editor, mikä tarkoittaa, että voit luoda multimediasisältöä lennossa. Nyt voit pilata poikkeukselliset asettelut nopeasti, työskenteletkö WordPress-viestien tai -sivujen kanssa.

Ja muutamalla lisäosalla Gutenberg voi suotuisasti kilpailla vakiintuneiden WordPress-sivujen rakentajien, kuten Brizy, Elementor ja Divi, kanssa..

Ainoa haittapuoli on, että sivunrakentajat tarjoavat usein enemmän ominaisuuksia, koska ne ovat pääasiassa sivunrakentajia! Samaan aikaan Gutenberg on vielä melko nuori, ja voit odottaa vain lohkoeditorin kasvavan harppauksin..

Tämänpäiväisessä viestissä meillä on jännittävä aika luoda WordPress-viesti Gutenbergin toimittajan kanssa. Pyrin kattamaan kaikki pienet yksityiskohdat ja ominaisuudet, jotta voit luoda Gutenbergin avulla sisältöä kuten ammattilaisia.

Oletko valmis? Jos näin on, luodaan kyseinen WordPress-viesti.

Kuinka luoda WordPress-viesti Gutenbergin avulla

Jos sinulla on WordPress-verkkosivusto, luot todennäköisesti enemmän viestejä kuin sivuja. Seuraavassa osassa luomme WordPress-viestin Gutenbergiin tyhjästä. Toivon, että pidät yhtä hauskaa kuin minä, kun testasin Gutenbergia.

Se pois tieltä, navigoi kohtaan Viestit> Lisää uusi kuten korostamme alla olevassa kuvakaappauksessa.

uuden viestin luominen gutenbergiin

Näin pääset suoraan alla olevaan Gutenbergin toimittajaan.

Wordpress gutenberg -toimittaja

Aika siisti, vai mitä? Nostakaamme nyt nämä hihat ja siirrymme liikkeelle.

Otsikon lisääminen

lisäämällä uusi otsikko gutenbergiin

Et voi kirjoittaa viestiä ilman vankkaa otsikkoa. Hyvä asia on Gutenberg, jonka avulla otsikon lisääminen on uskomattoman helppoa.

Ensimmäinen näkemäsi lohko on otsikko asiakirjan yläosassa, kuten yksityiskohtaisesti yllä olevassa kuvassa. Luo viestille otsikko kirjoittamalla lohkon sisälle. Yksinkertainen kuin A, B, C.

Pitäisikö muokata pysyvää linkkiä? Voit tehdä sen helposti otsikko estää napsauttamalla Muokata -painike alla olevan kuvan mukaisesti.

muokkaa viesti permalink in gutenberg

Kun olet lisännyt otsikon, paina TULLA SISÄÄN -näppäin uuden rivin aloittamiseksi. Voi kyllä, Gutenberg säilyttää rakastamasi alkuperäisen navigoinnin klassisessa WordPress-editorissa.

Uuden kappaleen lisääminen

uusi kappalelohko gutenbergissa

Lyömällä TULLA SISÄÄN avain luo uuden Kohta estää, kuten yllä on esitetty. Ennen tekstin kirjoittamista lohko tarjoaa sinulle pari vaihtoehtoa. Katso alla oleva numeroitu kuva saadaksesi lisätietoja.

uudet kappalelohkovaihtoehdot gutenberg

Huomautukset. Sinä pystyt:

  1. Muunna uusi kappalelohko mihin tahansa muuhun lohkoon, esim. Kuva, otsikko, kansi, galleria, WooCommerce, muoto jne.
  2. Muuta kappalelohko kuvakkeeksi pikakuvakkeen avulla
  3. Muuta kappalelohko otsikkolohkoksi, ts. H2, H3 ja H4
  4. Muunna kappalelohko kansikuvalohkoksi

Esitän vain esimerkin ensimmäisen kappaleen johdannon jälkeistä tarkoitusta varten. Kun olet lisännyt tekstiä, muotoilutyökalurivi tulee näkyviin kuten alla.

gutenbergin kappaleiden muotoilutyökalurivi

Alustustyökalurivin ansiosta voit:

  • Peitä kappale osaksi jae, lainaus, otsikko, luettelo, koodi ja esimuotoiltu teksti
  • Lihavoitu, Kursivoida, yliviivattu, ja korostaa sisältö
  • Kohdista teksti vasemmalle, oikealle, keskitä ja perustele
  • Lisää linkki, joka voi myös avata uudessa välilehdessä
  • Lisää upotettu kuva (kyllä, se on olemassa!)
  • Piilota lohkoasetukset
  • Kopioi lohko
  • Lisää lohko ennen nykyistä lohkoa tai sen jälkeen (tapauksessamme se on ensimmäinen kappale, joten emme ole lisänneet mitään ennen, vasta sen jälkeen.) Voit lisätä kansilehtilohkon ennen ensimmäistä kappaletta, jos haluat, koska se näyttää niin hyvä
  • Muokkaa lohkoa HTML-muodossa
  • Lisää nykyinen lohko uudelleenkäytettäviin lohkoihin, jotta voit käyttää sitä muissa viesteissä
  • Poista lohko kokonaan

Voit räätälöidä kappalelohkon edelleen Lohko -välilehti, joka löytyy sivupalkki-valikosta alla esitetyllä tavalla.

gutenbergin sivupalkin vaihtoehdot kappalelohkoon

Muutamia huomautuksia yllä olevasta kuvasta:

  1. Valitse Lohko -välilehti nähdäksesi kaikki estoasetukset ja asetukset
  2. Valitse fonttikoko ja aktivoi Drop Cap tähän
  3. Lisää taustaväri kappaleeseesi. Asetin sen siniseksi kuvaa varten. Voit myös mukauttaa tekstin väriä. Molemmissa tapauksissa voit lisätä rajattomasti mukautettuja värejä
  4. Voit lisätä mukautetun CSS-luokan tähän, mikä tarkoittaa, että voit lisätä muita CSS-tyylejä estoosi
  5. Sininen tausta ja pudotuskorkki olivat jo käytössä Gutenbergin toimittajassa

Sivupalkin Asiakirja-välilehti

Sivupalkki-valikossa on toinen välilehti; Asiakirja välilehti alla esitetyllä tavalla.

kappalelohkon sivupalkin asiakirjavälilehti

Tässä yllä olevan kuvan huomautukset:

  1. Napsauta tätä vaihtaaksesi Asiakirja kieleke
  2. Täällä voit ajoittaa viestin, asettaa näkyvyyden jommallakummalle yksityinen tai Julkinen, asettaa viestin Odottaa tarkistusta tila, valitse viestin muoto ja luo tarttuva viesti
  3. Tässä osiossa voit muokata pysyvää linkkisi
  4. Voit valita tai luoda uusia luokkia täältä
  5. Lisää tunnisteita viestiin
  6. Aseta esitelty kuva
  7. Luo manuaalinen ote
  8. Salli kommentit, pingbacks ja trackback

Kuten huomaat, sinulla on runsaasti vaihtoehtoja suunnitella kappalelohko (ja koko viesti) haluamallasi tavalla. Muuten, eri lohkoissa on erilaiset asetukset, kun opimme minuutin sisällä.

Ensimmäisen kappaleen jälkeen paina TULLA SISÄÄN näppäin uudelleen luodaksesi uuden rivin (tai kappalelohkon). Nyt lisätään kuva ensimmäisen kappaleen alle.

Kuvien lisääminen Gutenbergiin

uuden kuvan lisääminen gutenbergiin

He sanovat, että kuva puhuu tuhat sanaa, ja blogi, joka ei sisällä kuvia, on hyvin huono. Voit lisätä kuvan WordPress-viestiin Gutenbergin avulla, sinulla on muutama vaihtoehto.

Kun osut TULLA SISÄÄN Kun avain hetki sitten, käynnistit uuden kappaleen. Koska Gutenberg on intuitiivinen, voit lisätä kuvan napsauttamalla plus (+) -, kuva- tai kansi-kuvakkeita, kuten korostamme alla olevassa kuvassa.

uuden kuvan lisääminen gutenberg editoriin

Pari muistiinpanoa:

  1. Voit lisätä kuvan plus (+) -kuvakkeilla
  2. Täällä voit lisätä kuvan helposti
  3. Tämän vaihtoehdon avulla voit lisätä peite kuva (Nämä ovat yleensä suurempia kuin muut valokuvat. Lisäksi voit lisätä tekstiä kansilehtiin, BTW)

Mene eteenpäin ja napsauta mitä tahansa plus (+) -kuvakkeista. Napsauta seuraavaksi Kuva välilehti, kuten alla.

lisäämällä kuvia gutenbergissa

Napsauttamalla Kuva välilehti lataa Kuva alla oleva kuvakaappaus.

gutenbergin kuvalohko

 Kuva lohko antaa sinun ladata kuvan tai lisätä kuvan URL-osoitteesta tai mediakirjastoista. Prosessiin voit lisätä alttekstin (tärkeä SEO), kuvatekstin ja kuvauksen medianäytön asetusten tai Lohko sivupalkki seuraavissa kuvissa esitetyllä tavalla.

Tavalliset media-asetukset…

wordpress media-asetukset

…ja Kuva estä asetukset.

gutenbergin kuvalohkoasetukset

Opitko jotain täällä tänään? Toivon niin. Siirrytään eteenpäin.

Kuvasi lisäämisen jälkeen Gutenberg lisää uuden kappaleen juuri sen alapuolelle. Voit lisätä mitä haluat, mutta kuvaa varten lisäin tekstiä ja sen jälkeen painikkeen.

Kuinka lisätä ladattavia tiedostoja, esim. PDF, kuvat, videot jne

Gutenbergin avulla on erittäin helppoa lisätä ladattavia tiedostoja WordPress-viestiin tai sivulle.

Uudessa Kohta estä, napsauta plus (+) -kuvaketta, siirry kohtaan Yleiset lohkot ja osui tiedosto välilehti, kuten korostamme alla.

ladattavien tiedostojen lisääminen gutenbergiin

Näin käynnistetään seuraava lohko:

gutenberg-tiedostolohko

Alkaen tiedosto estääksesi, voit lähettää uuden tiedoston tai lisätä sen mediakirjastostasi. Lisättyäsi tiedoston, Gutenberg lisää söpö ladata -painike automaattisesti alla olevan kuvan mukaisesti.

tiedoston lisääminen gutenbergiin

Voit pelata vaihtoehtoilla. Voit esimerkiksi muokata / poistaa “Ilmainen Gutenbergin PDF-tarkistuslista”Otsikko sekä ladata painiketta. Voit lisätä CSS-luokan lohkoon ja tyyliä sen haluamallasi tavalla.

Tarjouksen lisääminen Gutenbergiin

Lisää seuraavaksi tarjous, koska ne ovat viehättäviä, tarttuvia ja auttavat sinua ajamaan pisteen kotiin. Napsauta uudessa rivissä plus- (+) -merkkiä, siirry kohtaan Yleiset lohkot ja osui Lainata välilehti alla esitetyllä tavalla.

lainausten lisääminen gutenbergiin

Näin lisäämällä Lainata estää viestissäsi, kuten korostamme alla olevassa kuvakaappauksessa.

gutenberg-tarjouslohkoasetukset

Huomaa tarjouslohkon asetukset yllä olevassa oikeassa sivupalkissa?

Lisää tarjous kirjoittamalla kappaleen sisälle. Tässä on minun tulokseni.

gutenberg-tarjous

Näyttää uskomattomalta, eikö niin?

Lisää media-upotuksia Gutenbergiin

Gutenberg sisältää useita lohkoja videoiden ja muun median upottamiseksi yli 30 sivustolta, kuten YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare ja niin edelleen..

Upottaaksesi sisältöä napsauta plus (+) -kuvaketta, siirry kohtaan upotuksen, ja valitse sivusto. Halusin esimerkiksi YouTubeen, kuten alla on esitetty.

gutenberg youtube upota

Seuraavaksi kopioi ja liitä YouTube-videon URL-osoite ja napsauta Upottaa -painike alla olevan kuvan osoittamalla tavalla.

gutenberg youtube upotuslohko

Heti kun osut Upottaa -painiketta, Gutenberg peittää linkin videoksi automaattisesti, kuten alla korostamme.

upotettu youtube-video gutenbergissa

Sileä purjehdus koko matkan. Nyt lisätään itsenäinen painike, joka sopii mainiosti toimintakehotuksen (CTA) luomiseen.

Kuinka lisätä painike Gutenbergiin

Sinulla ei pitäisi olla vaikeaa lisätä lohkoja tässä vaiheessa. Napsauta vain plus (+) ja valitse esto. Se ei voi olla helppoa.

Joten kuinka lisäämme painikkeen?

Napsauta uudessa rivissä (tai lohkossa) plus (+) -kuvaketta, siirry kohtaan Asetteluelementit ja napsauta nappi välilehti alla esitetyllä tavalla.

painikkeiden lisääminen gutenberg-editorissa

Näin tekeminen johtaa nappi estä kuten me yksityiskohtaisesti alla.

painikkeiden lisääminen gutenberg-editorissa

Kuten yllä olevasta kuvasta voi nähdä, voit muokata painikkeen tekstiä ja lisätä linkin. Lisäksi voit mukauttaa painiketta näytön oikealla puolella olevan sivupalkki-valikon kautta.

Muutaman napsautuksen jälkeen sain tämän.

gutenberg-painike-esimerkki

Muuten, jos käytät painikkeissasi vaikeasti luettavia väriyhdistelmiä, Gutenberg ilmoittaa sinulle heti. Kuinka mukavaa?

Kuinka lisätä sarakkeita Gutenbergiin

Lisää kaunis sarana paikallaan, lisäämme sarakkeita. Lisään kaksi saraketta, joten seuraa huolellisesti.

Tässä on mitä tehdä. Napsauta plus (+) -kuvaketta, siirry kohtaan Asetteluelementit ja napsauta pylväät välilehti alla olevan kuvan mukaisesti.

sarakkeet välilehti gutenberg editor

Gutenberg lisää oletuksena kaksi saraketta. Katso alla oleva kuva ja muista, että olen jo lisännyt sisältöä sarakkeisiin.

gutenberg-sarakkeet wordpress-editorissa

Mikä saa minut:

gutenberg-pylväät edestä

Ei paha muutaman sekunnin työstä. Mutta ehkä et halua luoda sarakkeita. Ehkä haluat näyttää kuvan jonkin tekstin vieressä.

Onko siellä este? Kyllä on!

Kuinka lisätä kuva tekstin viereen Gutenbergissä

Haluatko lisätä kuvan jonkin tekstin viereen? Jos niin, rakastat seuraavaa osaa.

Napsauta tavalliseen tapaan plus (+) -kuvaketta, siirry kohtaan Asetteluelementit ja napsauta Media ja teksti kuten alla.

media ja teksti gutenberg-lohko

Sinun pitäisi nähdä Media ja teksti estää, kuten alla on esitetty.

media ja tekstilohko gutenbergissä

Lataa seuraavaksi kuva / video / media tai lisää se mediakirjastosta. Lisää sen jälkeen teksti median viereen, kuten alla olevassa kuvassa näkyy.

Pelasin ympäri Media ja teksti estää, ja keksin seuraavan. Huomioi sinut; Onnistuin puristamaan painikkeen myös sinne ��

media ja tekstilohko täydessä toiminnassa

Voi, se on tausta! Annan näyttää sinulle käyttöliittymän. Tässä:

mediateksti gutenbergissä

Näyttää erittäin ammattimaiselta, eikö niin? Voit varmasti kuvitella, kuinka paljon voit saavuttaa Gutenbergin toimittajan avulla.

Kolmannen osapuolen Gutenberg-lohkot

WordPress-kehittäjät haluavat tehdä teemoista ja laajennuksista yhteensopivia Gutenberg-editorin kanssa. Muutamia esimerkkejä ovat WooCommerce, Jetpack ja Yoast SEO.

Voit esimerkiksi lisätä WooCommerce-lohkoja WordPress-viestiin. Ensinnäkin sinun on asennettava ja aktivoitava WooCommerce.

Napsauta seuraavaksi uudessa rivissä plus (+) -kuvaketta, siirry kohtaan WooCommerce ja valitse haluamasi lohko alla olevan kuvan mukaisesti.

woocommerce gutenberg-lohkot

Tiedätkö mitä tämä tarkoittaa? Se tarkoittaa, että voit luoda multimedian ja upeita viestejä ja sivuja muutamassa minuutissa.

Muut merkittävät lohkot

Meillä on jo yli 2000 sanaa, ja jos jatkamme tätä, kirjoitamme lopulta kokonaisen e-kirjan. Rukoukseni on, että voit nyt käyttää Gutenbergia ilman hikkaita.

Että tieltä, tässä on luettelo muista käytettävissä olevista lohkoista.

  • widgetit – Voit lisätä sisältöä widgetistäsi blogiteksteihin
  • lyhytkoodit – Voit silti käyttää alkuperäisiä WordPress-lyhytkoodeja
  • Klassinen – Upea lohko, joka pitää vanhaa sisältöäsi
  • Lisää – Lohko tunnettiin aiemmin nimellä Lue lisää tag
  • Sivunvaihto, erottimet, välikappaleet
  • Mukautettu HTML, Pullquote, taulukko
  • galleria ja HTML5 audio / video
  • Ja paljon muuta käyttämästäsi teemasta ja laajennuksesta riippuen

syrjään: WordPress-sivun luominen muistuttaa viestin tallennusta muutaman minuutin eroavaisuuksille, joten emme puhu siihen tänään..

Gutenbergin nopeat hakkerit ja pikanäppäimet

Gutenbergin mukana tulee pari hakkerointia ja pikanäppäimiä, jotka tekevät siitä vieläkin helpomman. Jos esimerkiksi kirjoitat “/” kappalelohkoon, se tuo esiin luettelon lohkoista.

Voit jopa valita tietyn lohkon kirjoittamalla lohkon otsikon kaltevuusviivan jälkeen (/), esimerkiksi kirjoittamalla “/ image” tuo esiin kuvalohkon muiden kuvaan liittyvien lohkojen joukossa. Katso lisätietoja alla olevasta kuvasta.

gutenberg-pikapikakuvaus

Pikanäppäimet: Voit tarkastella kaikkia käytettävissä olevia pikavalintoja painamalla -näppäintä VAIHTO + ALT + H Windowsissa ja OPT + CTRL + H Macissa.

Asiakirjan yläosassa voit nähdä asiakirjan rakenteen napsauttamalla (i) -kuvaketta, kuten alla on osoitettu.

gutenbergin asiakirjarakenne

Kiva. Poikkeuksellisen sileä.

Voi, ja muuten ”Päivitys epäonnistui” -virhe tapahtuu yleensä heikko Internet-yhteys ��


Sinun ja minun välilläsi Gutenberg on upea sisältöeditori. Edellyttäen, että olet valmis oppimaan köydet; voit hyötyä paljon tulevaisuuden WordPress-editorista.

Gutenberg on edelleen suhteellisen nuori, ja voit odottaa sen kasvavan käytettävyyden ja toimivuuden suhteen. Se on vakava voima, jonka kanssa on otettava huomioon tulevina päivinä. Sivun rakentajilla on parempi olla varovainen, muuten heidän liiketoiminta loppuu ��

Toivomme, että askel askeleelta opas Gutenbergin toimittajalle auttoi sinua asettamaan asiat näkökulmaan. Uskomme, että voit nyt käyttää lohkoeditoria sisällön luomiseen kuten ammattilainen.

Jaa huolet, ajatuksesi ja kysymyksesi alla olevassa kommenttiosassa.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map