Parhaat alkuperäiset WordPress-lohkot [Nopea yleiskatsaus]

Tuomme sinulle oppaan Gutenbergin WordPress-editorin ja lohkojen käytöstä. Lue uutisia lohkojen muutoksista, jotka ovat tulossa aivan seuraavassa 5.4 -versiossa. Olemme valinneet kaikki useimmin käytetyt lohkot, joita on käytettävä kaikilla verkkosivustoilla. Julkaisun jälkeen julkaisemme lisätietoja kaikista ominaisuuksista.

Kun WordPress oli ilmoittanut uudesta Gutenberg-editorista vuonna 2018, olimme innostuneita siitä. Nyt pari vuotta myöhemmin näemme valtavan parannuksen. Gutenberg WordPress-editori on loistava työkalu verkkosivuston luomiseen.

Kaikki tämä standardi WordPress lohkojen Gutenberg editori ovat täysin toimivia meidän uusin projekti Vapaa Citadela WordPress-teema. Voit käyttää sitä millä tahansa verkkosivustolla, kiitos luo tili ja lataa se ilmaiseksi.

Osoitteessa AitThemes Citadela-liitännäiset, voit luoda erityistä sisältöä yrityksen, yrityksen, blogin tai voittoa tavoittelemattoman verkkosivuston esittelyä varten. Tai jopa aloittaa uusi verkkoliiketoiminta. Verkkosivuston nopeus ja verkkosivuston muokkaamisen helppous ovat tärkeimpiä tekijöitä.

Mikä on lohko?

Gutenbergin WordPress-lohkot ovat verkkosivuston rakennusyksiköitä. Jokaisella niistä on oma erityinen paikkansa ja tarkoituksensa. On erittäin tärkeää käyttää oikeaa WordPress-lohkoa tietyntyyppiselle sisällölle.

Mutta miten löydät sopivimman palikan, joka sopii tarkoitukseesi?

Jotta ymmärtäisit paremmin WordPressin lohkoja, olemme laatineet tämän yleiskatsauksen suosituimmista lohkoista.

Tekstisisältölohkot

On olemassa useita lohkoja, joita voit käyttää tekstisisällön lisäämiseen verkkosivustollesi. Voit käyttää useita lohkoja. WordPress 5.4:stä alkaen on uusi asetus, voit muuttaa tekstin väriä.

• Kohta
• Otsikko
• Lainaus
• Luettelo
• Pullquote
• Taulukko
• Jae
• Esimuotoiltu

Tätä lukuun ottamatta käytät Classic-lohkoa, joka voi olla kätevämpi pitkille kappaleille.

Nappulan lohko

Vakuuttavan CTA-painikkeen luominen WordPressissä on tullut erittäin helpoksi Button blockin avulla. Sinun ei tarvitse syöttää mukautettua CSS:ää tai ymmärtää HTML:ää. Voit - mutta sinun ei tarvitse - syöttää suosikkivärisi heksadesimaalikoodin, jotta painike näyttää kauniilta ja huomiota herättävältä.

Missä käyttää Button blockia?

Kun kävijä saapuu verkkosivustollesi, haluat kannustaa häntä ryhtymään toimiin. Sitä varten on CTA-painikkeet.

Yleisesti ottaen on 3 paikkaa, joissa sinun tulisi käyttää WordPress-painiketta:

• Kotisivu - suorittamaan toimet, jotka johtavat tavoitteesi saavuttamiseen, kuten uutiskirjeen tilaaminen, erikoistarjouksen löytäminen tai rekisteröityminen ilmaiseen kokeiluun.
• Tuotesivu - riippuen siitä, miten tuotesivusi on johdettu, siellä voi olla 1 CTA-painike (OSTA) tai useampia painikkeita, esim. tuotetiedot, osta, lisää toivelistalle jne.
• Blogi - CTA-painikkeet voivat viitata toiseen hyödylliseen artikkeliin tai tuotteen/palvelun ostamiseen.

Painikkeen lohkon asetukset

Oikealla puolella olevassa Tarkkailijassa voit helposti hallita painikkeen asetuksia:

• Tyyli
• Taustan väri
• Fontin väri
• Raja

CTA-painikkeeseen kirjoitetun tekstin tulisi olla lyhyttä ja suoraviivaista, ja sen tulisi kannustaa kävijöitäsi toimimaan.

Uutisia tulossa seuraava WordPress 5.4 versio (julkaisu 31. maaliskuuta 2020)

Button-lohko korvataan uudella Button-lohkolla.s lohko.
Uudesta nimestä voi päätellä, että voit luoda useampia painikkeita yksi kerrallaan yhteen lohkosäiliöön. Usein on tarve luoda esimerkiksi kaksi CTA-painiketta kerrallaan: Osta nyt ja Lue lisää. Myös joitakin uusia tyyli- ja väriasetuksia on tulossa. Valitse Fill- tai Outline-tyyli ja sitten taustan väri. Voit valita kiinteän tai kaltevuuden taustan. Joitakin esiasetuksia lähtökohdaksi tulee saataville vaivattomampaa hienosäätöä varten. Hyvä uutinen on, että kaikki olemassa olevat painikepalikat toimivat, eikä niitä tarvitse siirtää.

Sarakkeet lohko

Columns-lohko on hämmästyttävä WordPress-lohko, joka avaa ovet uusille ulkoasuille. Se antaa sinulle enemmän vaihtoehtoja sivun elementtien järjestelyihin, mikä johtaa useampiin suunnitteluvaihtoehtoihin.

Columns-lohkon kanssa työskentely on helppoa:

• Ei ylimääräistä lisäosan asennusta.
• Koodausta ei tarvita.
• Tarvitset vain hieman järkeä siistiin suunnitteluun.

Verrattuna aiempaan hässäkkään, jonka jouduit käymään läpi ennen WordPress-lohkoeditorin julkaisua, Columns WordPress -lohkon käyttäminen on erittäin yksinkertaista.

Kuinka käyttää Columns-lohkoa?

Kuten edellä mainittiin, Columns-lohkoa voidaan käyttää kahdella tavalla:

• Järjestääksesi tekstien kulun (blogikirjoituksessa tai tavallisella sivulla).
• Muiden lohkojen järjestäminen sarakkeisiin.

Kun järjestät tekstiä sarakkeisiin esimerkiksi blogikirjoituksessa, parannat luettavuutta ja teet verkkosivustostasi avoimemman ja käyttäjäystävällisemmän.

Kun kuitenkin käytät Columns-lohkoa muiden lohkojen, kuten kuvien, tekstien ja painikkeiden, sijoittamiseen, muutat koko valitsemasi sivun ulkoasua ja luot uusia malleja.

Sarakelohkon asetukset

Kun olet lisännyt sarakelohkon sivulle, valitse, kuinka monta saraketta haluat. Se voi olla mikä tahansa määrä 2-6 saraketta. Sitten voit alkaa kirjoittaa tekstiä tai lisätä lohkoja kuhunkin sarakkeeseen.

Pylväslohkon sisällön kohdistuksen voi määrittää erikseen koko lohkolle sekä yksittäisille sarakkeille. Voit jopa valita sarakkeen leveyden osuuden. Näin yksi sarake voi olla leveämpi kuin toinen.

Kansilohko

Puhutaanpa sivuston otsikosta. Se on osio, joka määrittelee ensivaikutelman, kun joku tulee kotisivuillesi. Eikö olekin aika tärkeää? Ja tiesitkö, että Cover blockia voidaan käyttää minkä tahansa sivusi otsikkona?

Kansi on keskeinen WordPress-lohkot, joka auttaa sinua vaikuttamaan web-kävijöihin. Varsinkin kun sitä käytetään oikein, tai paremmin sanottuna, kun se on siististi integroitu verkkosuunnitteluun.

Missä Cover blockia käytetään?

Kuten edellä mainittiin, Cover-lohkoa voidaan käyttää millä tahansa sivulla. Lisäksi se voidaan lisätä mihin tahansa sivulle, toisin kuin verkkosivustosi otsikko, joka on kiinteästi sijoitettu verkkosivustosi yläosaan.

Peitelohkoa voidaan käyttää:

• Minkä tahansa sivun, myös kotisivun, otsikko.
• Tuotesivulla käytetty teksti korvaa kuvan tai videon.
• Sisällönerotin blogikirjoituksessa.

Kansilohkon asetukset

Cover-lohkon määrittäminen on hyvin suoraviivaista. Valitse ensin kuva tai video taustaksi. Voit myös käyttää sen sijaan yhtä väriä. Kun olet asettanut taustan, lisää otsikko ja alaotsikko. 

Voit valita lohkon linjauksen ja tietenkin myös lohkon sisällä olevan tekstin linjauksen.

Kansilohkon kohdistus tarjoaa seuraavat vaihtoehdot:

• Kohdista vasemmalle
• Kohdista keskus
• Kohdista oikealle
• Leveä leveys
• Koko leveys

Henkilökohtainen suosikkini on tarkastajassa käytettävissä oleva väripäällyste - Cover-lohkon taustakuvan voi sävyttää haluamallasi värillä. Yhdessä mukautetun fonttikoon ja -värin kanssa voit luoda kauniita kontrasteja, ja kansilohkosi lopullinen ulkoasu on hämmästyttävä.

WordPress 5.4:stä alkaen voit valita kaltevuusluokan taustan kiinteän taustan sijaan.

Gallerian lohko

Esittele kuvia verkkosivustollasi Gallery-lohkon avulla. Tämä tavallinen WordPress-lohko on suunniteltu pitämään kuvia ja näyttämään ne kauniisti millä tahansa verkkosivustosi sivulla. Muiden WordPress-lohkojen tapaan Gallery-lohko voidaan sijoittaa mihin tahansa sivustolla tai blogikirjoituksen sisällä.

Kuvien lataaminen voidaan tehdä valitsemalla tiedostoja mediakirjastosta, tietokoneelta tai käyttämällä raahaa ja pudota -toimintoa.

Missä Gallery blockia käytetään?

Verkkosivustosi tyypistä riippuen haluat ehkä luoda monimutkaisen kuvagallerian tai yksinkertaisen kuvaesityksen. Voit käyttää Galleria-lohkoa:

• Kotisivusi
• Yksittäiset alasivut, jotka on luotu valokuvagallerian albumeiksi.
• Tuotesivut
• Blogipostaus

Gallerian lohkon asetukset

Itse Galleria-lohkon eri kohdistusvaihtoehtojen lisäksi lohkossa on pari mielenkiintoista vaihtoehtoa, kuten:

• Sarakkeiden lukumäärä, joihin kuvat rivitetään.
• Kuvan rajaaminen vastaamaan samaa kokoa (pienimmän kuvan).
• Hyperlinkki antaa sinulle mahdollisuuden linkittää toiseen sivuun tai mediatiedostoon.

Kuvalohko

Kuvalohko ei ole mitään muuta kuin lohko, joka näyttää kuvan verkkosivustollasi.

Aivan oikein. Jos haluat vain lisätä kuvan mille tahansa sivullesi, käytä Image WordPress -lohkoa. Se voi olla samanlainen kuin muut esitellyt lohkot, mutta siinä on merkittäviä eroja, jotka tekevät siitä täydellisen yksittäisille kuville.

Milloin kannattaa käyttää Image blockia?

Kuvalohkoa tulisi käyttää erityisesti silloin, kun kuvassa näkyvä kohde on erityisen tärkeä verkkokävijälle, jonka haluat:

• Kiinnitä verkkovierailijan huomio erityisellä kuvalla.
• Näytä kuva ja kuvateksti.
• Näytä infografiikkaa, joka auttaa kävijöitä ymmärtämään käsiteltyä asiaa paremmin.

Kuvalohkon asetukset

Yksi Image WordPress -lohkon suurimmista eduista on sen kuvakokovaihtoehdot. Voit helposti muuttaa kuvan kokoa vetämällä sitä kulmasta, valita kiinteän koon pikseleinä tai määrittää koon prosentteina.

Toinen merkittävä vaihtoehto on vaihtoehtoisen tekstin, kuvatekstin ja linkin syöttökentät. Suosittelen vahvasti näiden kenttien käyttöä, koska niillä on tärkeä rooli sivun SEO:ssa.

Media & tekstilohko

Siirrymme edistyneempiin sivuasetteluihin, joita voit luoda Media- ja tekstilohkon avulla. Tämän WordPressin ydinlohkon avulla voit yhdistää mediaa & tekstiä rinnakkain esteettisellä ja kontekstisidonnaisella tavalla.

Missä käyttää Media & tekstilohkoa?

Vaikka Media & teksti -lohko soveltuu parhaiten käytettäväksi blogikirjoituksissa, voit käyttää sitä myös muualla, kun käytät hieman mielikuvitusta. Voit esimerkiksi luoda hienon tuote- tai palvelukatsauksen käyttämällä kuvaa ja tekstiä vierekkäin.

Älä unohda lisätä painiketta Media & teksti -lohkon tekstiosioon, jos sitä käytetään tuotteen/palvelun yleiskatsauksena. Näin voit suunnitella mukavan CTA-osion mille tahansa sivulle.

Media- ja tekstilohkon edut

• Yhdistetään kuva ja teksti, jotka sopivat asiayhteyteen keskenään.
• Kuvan väärän paikan välttäminen blogipostauksen sisällä.
• Sivuston responsiivisuuden parantaminen (käytä "Stack on mobile" -toimintoa).

Media- ja tekstilohkoasetukset

Kun tarkastelet Media & teksti -lohkon asetuksia, huomaat melko monta kohdistusvalintaa, joista osa on ainutlaatuisia verrattuna useimpiin muihin lohkoihin.

Tämän lohkon mielenkiintoinen ja hyödyllinen asetus on taustaväri. Värittämällä yhteen sopivan kuvan ja tekstin ympärillä olevan alueen voit korostaa visuaalisesti niiden yhteyttä.

Lisää linkki WordPress-versiosta 5.4 (31.3.2020). Voit valita linkin, mediatiedoston tai liitetiedostosivun.

Taulukkolohko

Taulukkolohko on yksi esimerkki siitä, miten WordPress on parantunut sen jälkeen, kun WordPress-lohkoeditori otettiin käyttöön versiossa 5.0 ja sen jälkeen. Kun ennen tarvitsit lisäosan lisätäksesi taulukon WordPress-sivustoosi, nyt voit yksinkertaisesti käyttää taulukkolohkoa.

Missä taulukkolohkoa käytetään?

Taulukoilla on suuri merkitys hyödyllisen sisällön tarjoamisessa hyvin järjestettynä ja läpinäkyvällä tavalla. Useimmat verkkosivustot ovat varmasti käyttäneet taulukoita. Tässä on vain muutamia esimerkkejä taulukoiden käytöstä eri verkkosivustoilla:

• Tietojen vertailu
• Hinnoittelutaulukot
• Tuotteen tekniset tiedot
• Reseptit
• Jäsenyyspakettien yleiskatsaus

Taulukkolohkon ottaminen osaksi ilmaista WordPress-ydintä on todella hämmästyttävää.

Taulukkolohkon asetukset

Kun lisäät taulukkolohkon sivulle, sinun on määritettävä taulukon sarakkeiden ja rivien määrä. Älä huoli, tämä määrä ei ole kiinteä. Voit lisätä rivejä ja sarakkeita (tai poistaa niitä) milloin tahansa.

Valitse sitten pöytäsi tyyli: oletus tai raidat. Siirry kohdistukseen ja kirjasintyyliin ja täytä taulukko ennen kuin viimeistelet sen.

Lisää vaihtoehtoja ovat:

• Taustan väri
• Kiinteän leveyden solut
• Otsikko
• Alatunniste
• Linkki (taulukon tekstimerkintä voi linkittää muille sivuille)

Minkä korttelin haluaisit nähdä seuraavaksi?

Toivottavasti nautit lukemisesta valikoimastamme erittäin hyödyllisistä WordPress-ydinlohkoista - jotka ovat kaikkien saatavilla ilmaiseksi. Kerro meille, mistä lohkoista haluaisit lukea seuraavaksi tai mitä toiminnallisuuksia mielestäsi vielä puuttuu WordPress-ytimestä. Kiitos lukemisesta!