[Mitä ovat] WordPress Gutenberg Blocks & Kuinka käyttää niitä hyvin

WordPress Gutenberg -editori saapui WordPress 5.0: n kanssa joulukuussa 2018. Uusi ominaisuus, joka tunnetaan yleisemmin nimellä `` lohkoeditori '', vaihtaa sivun ja postin luomisen aiempien versioiden tavallisesta laatikosta enemmän sivunrakentajan kaltaiseksi kokemukseksi.

Gutenberg blocks nyt modulaarinen lähestymistapa sisällön luomiseen. Sen sijaan, että käytät koodia eri elementin lisäämiseen sivulle, voit vaihtaa lohkon sen sijaan. Voit esimerkiksi vaihtaa tekstilohkon videolohkoon tai taulukkoon samoin kuin sivua rakennettaessa Beaver Builder tai Elementor. Se on pitkäaikainen kehitys, mutta nyt se on täällä ja ihmettelet nopeasti, miten olet koskaan luonut sivuja ilman sitä!

Gutenberg blocks

Jos päivität WordPress 5.0: een tai uudempaan ja sinun pitäisi jo nyt, olet huomannut, että käyttöliittymä on siirtynyt hieman eteenpäin. Näet edelleen perinteisen sivuvalikon vasemmalla ja sisältövalikon oikealla, mutta keskellä, kaikki on muuttunut.

Ennen päivitystä näet tyhjän otsikko- ja sisältöruudun, johon rakennit sivusi tai viestisi. Nyt näet keskellä tyhjän osan, jossa otsikkolohko ja tekstilohko on jo asuttu. Oikea valikko muuttuu dynaamisesti sen mukaan, mitä teet. Aluksi se näyttää perinteiset luokka-, tunniste- ja ominaisuuskuvavaihtoehdot kuten aiemmin, mutta tuo nyt käyttöön Estä-välilehden.

Lohko-välilehden avulla voit muokata yksittäistä lohkoa, kuten sivunrakentajat, jotka tarjoavat paljon vapautta suunnittelussa. Lohko-välilehdessä näkyvä riippuu kyseessä olevasta lohkosta, mutta kaikilla on mahdollisuus lisätä mukautettu CSS.

Gutenberg blocks esitellä todella modulaarinen lähestymistapa sivujen suunnitteluun. Sinulla on mahdollisuus tehdä asioita samalla tavalla tai sukeltaa syvemmälle. Voit säätää jokaista lohkoa näyttämään hienovaraisesti tai selvästi erilaiselta tai saada ne kaikki toimimaan saumanaless koko. Se on erittäin voimakas ja anteeksiantava järjestelmä.

Kuinka käyttää Gutenberg blocks

WordPress-uudelleensuunnittelussa on hienoa, että se on tarpeeksi samanlainen kuin aikaisemmin, joten käyttöliittymä on edelleen tuttu. Vaikka et olisi tutustunut uusiin lohkoihin, voit silti lisätä sivusi otsikon, lisätä sisällön, lisätä koodeja ja widgettejä ja julkaista kuten aiemmin. Se saattaa näyttää hieman erilaiselta, mutta se toimii paljon samalla tavalla.

Tämä on ihanteellinen satunnaisille bloggaajille tai niille, jotka ovat uusia WordPressissä. Koska CMS: n yksi avaintekijä on sen helppokäyttöisyys, kehittäjät ovat jotenkin onnistuneet lisäämään edistyneempiä ominaisuuksia tekemättä koko järjestelmän käytöstä vaikeampi.

Voit silti luoda sivun muutamassa minuutissa oletusasetuksilla, mutta nyt voit mennä paljon syvemmälle tarvitsematta oppia koodiriviä tai edes tietää, miltä lyhytkoodi näyttää.

Nämä asiat tekevät Gutenberg blocks niin hyödyllinen.

Voit joko käyttää Gutenberg blocks vai ei.

Oletussivu- ja viesti-asetus tarkoittaa, että voit silti muotoilla sivusi sisällön muualle ja yksinkertaisesti kopioida ja liittää sen sivulle. Liitä otsikko otsikkolohkoon ja sivun sisältö tekstilohkoon. Jos se on kaikki mitä tarvitset, luomisprosessi on yhtä yksinkertainen kuin ennen. Jos haluat viedä sen pidemmälle, voit.

Jos haluat sukeltaa lohkomuokkaimen toimintaan, näet muutama vaihtoehto:

• Lisää uusi lohko valitsemalla keskilohkon vieressä oleva pieni + -kuvake.
• Valitse 'H' lisätäksesi otsikon.
• Lisää luettelo estoon valitsemalla luettelokuvake.
• Lisää kuva valitsemalla kuvakuvake.

Kaikki nämä neljä vaihtoehtoa ovat käytettävissä sisältövalikossa, mutta niiden saatavuus jokaiselle lohkolle tarkoittaa, että voit luoda sisältöä haluamallasi tavalla. Yksittäisiä standout-lohkoja voidaan muokata ja kehystää erikseen, ja kukin heijastuu valmiille sivulle.

Tämä on jotain Elementor (ja sivunrakentajat pitävät siitä, kuten Divi) ovat tehneet jo vuosia suurella vaikutuksella. Voit nyt tehdä paljoa saman asian WordPressissä.

Löydät lisää aiheesta Divi meidän joukossamme Elegant Themes arvostelua.

Sivun luominen lohkoeditorilla on helppoa:

1. Valitse Uusi sivu tai Uusi viesti WordPress-sivuvalikosta.
2. Kirjoita tai liitä sivusi otsikko otsikkolohkoon.
3. Kirjoita tai liitä sisältösi tekstilohkoon.
4. Lisää uusi lohko valitsemalla lohkon oikealla puolella oleva + -kuvake.
5. Valitse sopivin lohko ponnahdusikkunasta.
6. Viimeistele keskilohkon pääelementit.
7. Valitse kolmipistekuvake lisäämäsi lohkon yläosasta, jos haluat muuttaa muotoilua tai mukauttaa sitä.
8. Jos haluat lisätä mukautetun CSS: n, valitse oikeasta valikosta Lisäasetukset.
9. Valitse Julkaise kahdesti, jotta pääset julkisuuteen.

Vaikka lohkoeditorin käyttö on hyvin yksinkertaista, voit sukeltaa paljon syvemmälle tarvittaessa. Jokaisen lohkon vieressä oleva kolmen pisteen valikkokuvake avaa joukon mukautusvaihtoehtoja lohkosta riippuen. Sinä pystyt monistaa lohko, lisää muita lohkoja ennen tai jälkeen, muuta HTML-attribuutteja, ryhmittele lohkoja yhteen ja paljon muuta käytettävissä olevien vaihtoehtojen mukaan.

Lisäksi kehittäjät voivat WordPressin mukana tulevien vakiolohkojen lisäksi luoda omia lohkolaajennuksiaan. Kun otetaan huomioon WordPressin valtava käyttäjäkanta ja kehittäjätaidot, jo vuoden käytön jälkeen käytettävissä on jo paljon lohkolaajennuksia.

Yleisesti käytetyt lohkot

WordPress on sisältänyt joukon lohkoja, jotka kattavat ydinsivun luomisen. Kukin tekee helpoksi lisätä eri sivuelementtejä ja sallia mukautetut suunnitteluominaisuudet pelkästään kyseiselle lohkolle. Se on tehokas muokkausvaihtoehto, jota voidaan käyttää erinomaisesti.

Standardi Gutenberg blocks WordPressin sisällä ovat:

• Tekstilohko - Perinteinen sisältölohko, jossa voit työskennellä täsmälleen kuten ennen ja muokata HTML-koodilla tai pikakoodeilla.
• Otsikko - Otsalohkot vakioasetuksilla H1, H2, H3, H4.
• Luettelo - Erillinen lohko, jonka avulla voit tehdä standout-luetteloita joko järjestetyiksi tai järjestämättömiksi.
• Galleria - Gallerialohko, joka mahdollisti kuvien mukautetun muotoilun vastaamaan sivusi sisältöä.
• Kuva - Erityinen kuvalohko, joka toimii samalla tavalla kuin galleria, mutta yksittäisille kuville.
• Lainaus - Erottuva lohko, jonka avulla voit korostaa lainauksia tai arvosteluja sivulla.
• Ääni - Erityinen napsautettava lohko, jolla toistetaan äänileikkeitä sivun sisällössä.
• Peite - Uusi lohko, jonka avulla voit sijoittaa kansikuvan sivullesi tai postauksellesi, joka voi täydentää esillä olevaa kuvaa.
• Video - Videolohko, joka toimii kuten ääni ja tekee videoiden näyttämisestä sivulla tai viestissä yksinkertaisen.

Kaikki mitä voit tehdä Gutenberg blocks voit käyttää alkuperäistä editoria, mutta se ei aina ollut käyttäjäystävällinen tai uusien käyttäjien käytettävissä. Tämän lohkorakenteen ansiosta kuka tahansa voi helposti rakentaa sivunsa loogisella ja lineaarisella tavalla.

Parhaat Gutenberg-lohkolaajennukset

Tavallinen WordPress Gutenberg blocks kattaa suurimman osan siitä, mitä todennäköisesti tarvitset CMS: stä. Mainitsimme kuitenkin aiemmin, että kehittäjät ovat myös alkaneet tuottaa omia Gutenbergin lohkon laajennuksia lisätäkseen vielä enemmän ominaisuuksia. Siellä on kymmeniä lohkolaajennuksia, joiden laatu vaihtelee, ja olemme keränneet joitain suosikkejamme täältä.

Katsotaanpa nyt joitain niistä.

Katsomme:

1. Työkalusarjan lohkot
2. Lopulliset lohkot
3. Gutenbergin lopulliset lisäosat
4. Kehittynyt Gutenberg Blocks
5. Pinottava Gutenberg Blocks
6. Atomilohkot
7. Saukko estää
8. Templaticin lohkot
9. Kadence Blocks

Monet näistä Gutenberg-lohkolaajennuksista ovat täysin ilmaisia, kun taas toiset tarjoavat ilmaisia ​​lohkoja, joilla on mahdollisuus päivittää edistyneemmiksi premium-lohkoiksi. Mainitsimme jokaisessa kuvauksessa ne, jotka ovat ilmaisia ​​ja joissa on premium-vaihtoehtoja.

Jokainen asentaa samalla tavalla kuin muut WordPress-laajennukset. Valitse se WordPress.org-sivustosta ja asenna, aktivoi tai lataa tiedostot tietokoneellesi ja lataa ne WordPress-asennukseesi. Kun olet asentanut, sinun pitäisi nähdä uudet estovaihtoehdot, joissa vakio on estetty, kun valitset '+' sivulla.

1. Työkalusarjan lohkot

Työkalusarjan lohkot on yksi suosikkilohkoeditorin laajennuksistamme WordPressille. Se on premium-laajennus, joka osoittaa, että vaikka saat hyviä juttuja ilmaiseksi, kannattaa joskus maksaa hieman ylimääräistä virrasta ja mukavuudesta. Laajennus asennetaan samalla tavalla kuin muut laajennukset ja se lisää uudet lohkot olemassa olevaan valikkoon.

Lohkot sisältävät mukautettuja postityyppejä, mukautettua taksonomiaa, mukautettuja kenttiä, malleja, näkymiä, sivutusta, ääretöntä vieritystä, Ajax-lohkoja, WooCommercea, Google Mapsia, lomakkeita, maksuja ja jopa pääsynhallintaa. Joitakin näistä lohkoista ei löydy mistään ilmaisesta laajennuksesta, minkä vuoksi olemme korostaneet Toolset Blocks.

Yksi Toolsetin parhaista ominaisuuksista on kyky luoda dynaamisesti luotua sisältöä ilman, että sinun tarvitsee tehdä mukautettua PHP-koodia. Toolset integroituu suoraan WordPress Block Editoriin ja antaa sinun hakea dynaamista sisältöä mistä tahansa.

Muutama esimerkki siitä, mitä voit tehdä: 

• Luo otsikot otsikoiden perusteella
• Aseta painikkeiden tekstit ja CTA: t mukautetuista kentistä
• Aseta kuvalähteet kentille tai mukautetuille kentille
• ja niin edelleen

Seuraava video on hieno kuvaus Toolset Blocks -ominaisuuksista:

Suurin osa meistä tietää, kuinka tehokkaita mukautetut kentät ja postityypit voivat olla, ja pystyä toteuttamaan se sivulla on loistava. Lomakkeiden, asettelujen, näkymien, käyttöoikeuksien ja muiden tehokkaiden ominaisuuksien lisäksi on erittäin helppoa suositella tätä laajennusta, vaikka se onkin ensiluokkainen tuote.

Toisinaan ilmainen ei ole paras hinta, ja tämä on yksi niistä aikoista.

2. Lopulliset lohkot

Lopulliset lohkot on arvostettu bloggaajille, mutta se toimisi yhtä hyvin kaikilla WordPress-verkkosivustoilla. Laajennus on ilmainen ja sisältää valikoiman mainos- ja erittäin hyödyllisiä muokkauslohkoja, jotka ovat ihanteellisia bloggaajille, mutta voivat osoittautua hyödyllisiksi myös markkinoijille, verkkokauppasivustoille, pienyrityksille ja kaikille, jotka haluavat niiden sisällön erottuvan.

Lohkoja ovat arvostelut, sisällysluettelo, toimintakehotukset, sisällön vaihtaminen, kuvan liukusäädin, sisällönsuodattimet, suosittelut, sosiaalinen jakaminen, lähtölaskenta, edistymispalkit, postiruudukot ja tähtiarvostelut. Kehittäjän mukaan heillä on myös enemmän matkalla.

Ultimate Blocksilla on toinen temppu hihassaan lohkonhallinnassa. Yksinkertainen käyttöliittymä, jonka avulla voit ottaa lohkot käyttöön tai poistaa ne käytöstä sivun luonnin yksinkertaistamiseksi. Se tarkoittaa, että voit ladata kokoelman ja ottaa käyttöön vain todennäköisesti käyttämäsi lohkot pitämällä sivun siistinä luomisen aikana.

3. Gutenberg Blocks - Lopulliset lisäykset Gutenbergille

Gutenberg Blocks - Lopulliset lisäykset Gutenbergille on samoilta kehittäjiltä kuin loistava Astra WordPress -teema. Ilmainen laajennus lisää joukon lohkoja jokapäiväiseen käyttöön, joita on helppo käyttää ja jotka tarjoavat laajan valikoiman mukautusvaihtoehtoja. Ne kaikki toimivat myös Astran kanssa, mikä on hienoa, jos käytät kyseistä teemaa.

Lohkoja ovat tietoruudut, painikkeet, edistyneet otsikot, tiimilohkot, hinnoittelu, sosiaaliset osakkeet, suosittelut, kuvakelistat, Gravity Form -lohkot, markkinointilohkot, lainaukset, toimintakehotukset, Yhteydenottolomake 7 -lohkot, Google Maps ja paljon muuta.

Kehittäjät sanovat, että nämä lohkot on optimoitu sivunopeuden kannalta saumattomastiless integrointi Astra -aiheeseen ja mihin tahansa muuhun aiheeseen. Sinulla on samanlaisia ​​mukautusvaihtoehtoja kuin näillä muilla laajennuksilla lohkojen liu'uttamiseksi olemassa oleville sivuille. Pelkästään tämän vuoksi tämä laajennus kannattaa tarkistaa.

4. Edistynyt Gutenberg

Edistynyt Gutenberg Joom Unitedilta lisää yli kaksikymmentä editorilohkoa ilmaisena WordPress-laajennuksena. Täällä on kunnollinen valikoima vaihtoehtoja tavallisesta sarakkeesta ja otsikosta edistyneempiin lohkoihin. Ne on suunniteltu hyvin ja niissä on minimaalinen käyttöliittymä, joka silti tarjoaa jotenkin kaikki tarvitsemasi mukautusvaihtoehdot.

Lohkot sisältävät kirjoittajaprofiilit, mukautetut CCS-lohkot, WooCommerce, edistyneet painikkeet, yhteydenottolomakkeet, edistyneet luettelot, kartat, suosittelut, laskurit, kirjautumis- ja rekisteröintilohkot, video- ja kuvalohkot, sosiaalisen jakamisen ja linkittämisen, yhteenvedon lähettämisen, Lightbox-eston ja paljon muuta .

Jokainen integroi saumanlesssivulle, ja siinä on edistynyt mukautusvaihtoehto kolmen pisteen valikon avulla. Tarkat vaihtoehdot vaihtelevat kyseessä olevan lohkon mukaan, mutta ne kattavat yleisimmät tilanteet, väri, koko, sisennys, kohdistus ja niin edelleen.

5. pinottava Gutenberg Blocks

Pinottava Gutenberg Blocks oli toinen varhainen saapuminen päivitykseen ja julkaisi erittäin hyödyllisiä mukautettuja lohkoja WordPress-editorille. Useimmat pinottavat lohkot ovat ilmaisia, mutta kehittäjä tarjoaa myös joitain premium-lohkoja, jotka vastaavat tiettyihin käyttötarkoituksiin, jos tarvitset niitä.

Ilmaisiin lohkoihin kuuluvat postilohkot, ominaisuusruutu, harmonikka, toimintakehotus, kortti, otsikko, videon ponnahdusikkuna, hinnoittelulohko, ilmoituslohko, välilevy, jakaja, ominaisuusluettelo ja muut. Kaikissa on 23 ilmaista lohkoa.

Lisäetuna Stackable on modulaarinen järjestelmä, joten voit lisätä tarvitsemasi lohkot jättämällä muut pois. Tällä voi olla pieni tallennus- ja sivunopeusetu verkkosivustosi perustamisesta riippuen. Kummassakin tapauksessa se on mukava lisäominaisuus, joka voi pitää asiat takana.

6. Atomilohkot

Atomilohkot oli toinen näyttämön ensimmäisistä laajennuksista ja tarjoaa nyt 15 ilmaista lohkoa ja joitain WordPress-teemoja täydentämään tätä uutta suunnitteluvapautta. Lohkot sisältävät suosittelut, hinnoittelun, uutiskirjeen, postiruudukon, edistyneet sarakkeet, jakokuvakkeet, toimintakehotuksen, kirjoittajaprofiilin ja muita hyödyllisiä lohkoja.

Laajennus on ilmainen, samoin kuin useimmat teemat. Asennuksen jälkeen näet uuden sarjan lohkoja uuden sivun tai viestin lohko-osassa. Etsi AB Post Grid jne. Tunnistaaksesi Atomic Block -ominaisuudet.

Kuten nämä muut editorilohkolaajennukset, voit mukauttaa niiden ulkoasua lisävalikossa. Sinulla on samanlaisia ​​vaihtoehtoja opasiteetin, värin, sijainnin ja niin edelleen suhteen. Lisävaihtoehtojen lisäetuna, jos käytät Atomic Block -teemaa. Se on pieni lisäominaisuus, mutta se on siellä!

7. Gutenberg Blocks ja Otterin mallikirjasto

Gutenberg Blocks ja Otterin mallikirjasto on suupala nimestä, joka on ominaisuuksien suhteen paljon sulavampi. Se on ilmainen, kevyt laajennus, joka sisältää joitain hyvin suunniteltuja lohkoja, jotka perustuvat WordPressin tarjoamiin vain enemmän suunnitteluvaihtoehtoja.

Lohkot sisältävät osiot, edistyneet otsikot, painikkeet, hinnoittelun, suosittelut, Google Maps, tekijän biolohkot, postiruudukon, Font Awesome, jakamisen ja korttilohkon. Kaikki on optimoitu sivunopeudelle ja ominaisuuksille, ja vaikka ne ovatkin kevyitä, ne ovat erinomainen lisä oletuslohkoihin.

Jokaiselle lohkolle on lisämukautuksia ja joitain kirjastovaihtoehtoja. Voit muokata kutakin lohkoa omiin tarpeisiisi tai käyttää kirjastovaihtoehtoa ottaaksesi valmiin suunnittelun ja käyttämään sitä lohkossa. Se on nopeaa ja suoraviivaista.

8. Templatic-lohkot

Blocks Kehittäjä Templatic on toinen vankka merkintä loistavien Gutenbergin esto -laajennusten luetteloon. Kunnioitamme paljon Templatic -teemoja, ja nämä lohkot toimivat teemojen kanssa tai ilman niitä. Jos käytät Templatic -teemaa, nämä lohkot liukuvat sisään ja ovat hyvä mennä. Jos et käytä Templatic -teemaa, nämä lohkot yhdistävät silti saumanlessosaksi suunnittelua.

Lohkot ovat ilmaisia, ja niihin sisältyy tekijän elämä, hälytykset, sosiaalisen median jakaminen, erottimet, kansikuva, otsikkovaihtoehdot, kartta, hinnoittelu, painikkeet ja Tweet-lohko. Jokaisella on perusominaisuudet edessä ja keskellä, ja mukautukset ovat käytettävissä valikon kautta. Niitä on erittäin helppo käyttää ja ne näkyvät kaikkien oletuslohkojen vieressä uudella sivulla tai postitusnäytössä.

Tässä on joitain hyviä lohkoja, mutta laajennusta ei ole päivitetty melkein vuoden. He työskentelevät nykyisen WordPress-version kanssa, kun testasimme ne ajoissa tätä artikkelia varten, mutta emme tiedä, milloin uusia lohkoja saapuu.

9. Kadence -lohkot

Kadence Blocks on sekä ilmaisia ​​että premium-vaihtoehtoja, jotka tukevat WordPressin oletuslohkoja. Ilmaisversiossa on kaksitoista lohkoa ja sisäänrakennettu editori, kun taas 59 dollarin vuosipalkkio-versio lisää seitsemän premium-lohkoa, ainutlaatuiset animaatiovaihtoehdot ja tuen. On myös kolmas vaihtoehto, 99 dollaria vuodessa voit käyttää kaikkia premium-muokkauslohkoja sekä kaikkia Kadence-teemoja ja tuotteita.

Lohkot sisältävät sivun asettelulohkot, tietoruudut, edistyneet galleriat, suosittelut, videolohkot, harmonikan, painikkeet, välilehdet, kuvakkeet, edistyneet otsikot ja kuvat. Ensiluokkainen versio lisää ruudukko- ja karusellilohkot, tuotekarusellit, mallilohkot, kuvakerrokset, jaetun sisällön ja videoikkunat.

Jokaisella lohkolla on mukautettu muokkausosa, jossa voit muuttaa sijaintia, ääriviivoja, väriä, kuvan kokoa, peittävyyttä ja useita muita tekijöitä. Jos työskentelet tietyllä suunnittelulla tai kehyksellä, voit käyttää lohkoja kyseiseen suunnitteluun helposti editorin avulla.

Yhteenveto Gutenberg blocks ja niiden laajennukset

Gutenberg blocks ovat erinomainen WordPressin kehitys. He ottavat kaiken, mitä tiedämme ja rakastamme nopeasta sivun tai viestin luomisesta, ja työntävät sitä eteenpäin. WordPress tarjoaa edelleen allekirjoituksensa helppokäyttöisyyden ja alhaisen pääsyn esteen aloittelijoille ja tarjoaa kokeneemmille tai suunnittelukeskeisille käyttäjille mahdollisuuden erottua. Tätä muodon ja toiminnon välistä tasapainoa kannattaa juhlia.

Kuten tässä luettelossa esitetyt Gutenberg-lohkolaajennukset. Ilmaiset laajennukset tarjoavat lähes kaiken mitä tarvitset sivun luomisesta. Mahdollisuus jakaa sivu tai postittaa yksittäisiin osiin ja muotoilla kukin erikseen, kunnes se on yksinkertaisesti täydellinen.

Jopa nämä premium-laajennukset ovat kustannusten arvoisia. Niillä on taipumus tarjota korkeampi muotoilu ja käytettävyys, ja myös joitain lohkoja, joita ei ole muualla. Vaikka premium, Toolset Blocks erottuu tarjoamalla erilaisia ​​lohkoja, joita et löydä mistään ilmaisista laajennuksista, kuten haku, kulunvalvonta, WooCommerce ja mukautetut viestit sekä mukautetut kentät.

Onko sinulla suosikki Gutenberg-lohkolaajennus? Rakastatko sitä, jota emme ole maininneet täällä? Kerro meille niistä alla, jos et!

kirjailijasta

Kirjoittaja: Jamie KavanaghVerkkosivu: https://www.coastalcontent.co.uk/Sähköposti: Tämä sähköpostiosoite on suojattu spamboteilta. Javascript nähdäksesi osoitteen.

Jamie, koulutukseltaan insinööri, on ensisijainen tekninen kirjoittaja ja tutkija. Jamie johtaa myös rannikkosisältöä, sisämarkkinointi-, copywriting- ja web-suunnitteluyritystä, joka toimii Cornwallista Yhdistyneessä kuningaskunnassa.