Black Week -kampanja käynnissä!

-50% valikoiduista kursseista 25.11.-6.12. 👉tästä kampanjasivulle!

Spectra lohkolisäosalla apua sivuston tuotantoon

WordPress sisältöeditori vaihtui jo kauan sitten lohkopohjaiseksi Gutenberg-editoriksi auttamatta vanhanaikaisen classic-editorin sijaan. Gutenberg vaikutti alkuun raakileelta, mutta on kehittynyt parempaan suuntaan. Ja kuten odottaa saattoi – lisäosina ladattavat, muiden valmistamat Gutenberg-lohkot, muuttivat tilannetta merkittävästi paremmaksi.

Lohkoeditorin (Gutenberg) ideana on, että jokainen sisältöelementti sivulla on oma lohko, jonka ulkoasu ja asetukset ovat muokattavissa erikseen muusta sisällöstä.

Lohkoeditori muistuttaa jo pitkään käytössä olleitta sivunrakennuslisäosia kuten esimerkiksi Elementor, joka perustuu samalla ajatukselle. Sivunrakennuslisäosien ja tietenkin Gutenbergin tarkoituksena on, että sisällöntuottaja kykenee rakentamaan käytössä olevalla edtorilla haluamansa näköisen sivun. Perinteisellä editorilla tämä ei onnistunut sillä siinä kaikki sisältö sijoittui yhteen lohkoon.

Spectra pagebuilder

Spectra mainostaa itseään sivunrakennuslisäosana (pagebuilder), joka toimii yhdessä WordPressin oman editorin kanssa. Spectra on hyvä, tästä lisää jatkossa, mutta en pitäisi vielä varsinaisena sivunrakennuslisäosana vaan ennemminkin WordPressin oman Gutenberg editorin hyvänä jatkeena. Spectra sisältää useita WordPress-sisältöeditorista puuttuvia lohkoja mutta sen voima on erityisesti sen huomattavasti monipuolisemmassa ja paremmassa muokattavuudessa. Spectra onkin lähempänä Elementoria kuin Gutenbergiä.

Spectra on kuitenkin ilmainen ja ehdottomasti tutustumisen arvoinen mikäli rakennat sivustoja visuaalisin työkaluin.

Mitä tarvitset sivun rakentamiseen ja sisällöntuotantoon?

Hyvä teema on tärkeä! En ole maksullisten jokaiselle-jotain-teemojen kannattaja vaan suosin mieluummin teemaa, jossa on tarvittavat muokkausominaisuudet mutta ei mitään ylimääräisiä lisäosia tai teeman käyttöä ei ole pakotettu minkään lisäosan käyttöön. Hyvässä teemassa on vähintäänkin

  • Muokattavissa olevat header ja footer alueet
  • Väripaletit globaalisti määritettävien värien käyttöön
  • Mahdollisuus typografian säätämiseen

Yksi tällainen teema on Kadence, jota käytän mielelläni. Kadencesta on olemassa myös maksullinen, ”Pro”-versio, mutta ilmaisversiollakin tulee hyvin toimeen. Jos teeman asetuksissa saa helposti muokattua sivuston ylä- ja alatunnisteet haluamansa kaltaiseksi on yksittäisten sivujen ulkoasu helppo toteuttaa.

Eli kaavamaisesti teeman avulla yleiset muotoilut ja yksittäisten sivujen tai artikkeleiden sisältö joko Gutenberg-lohkoilla tai lisäosina käyttöönotetuilla sisältölohkoilla (jollaiseksi voin lukea myös sivunrakennuslisäosat).

Spectra otetaan käyttöön kuin mikä tahansa lisäosa; mene ylläpitonäkymässä Lisäosat valintaan ja valitse ”Lisää uusi”. Laita hakuun ”Spectra” ja todennäköiseti ensimmäinen osuma on oikea.

Asenna spectra lisäosa wordpressiin.

Asennuksen jälkeen Spectra alkaa heti esittelemään ominaisuuksiaan. Myöhemmin löydät Ohjausnäkymän Asetukset valinnasta uuden valikkokohdan – Spectra. Siellä voit ottaa käyttöön, tai oikeammin poistaa käytöstä lohkoja, joita et katso tarvitsevasi.

Spectran lohkot

Spectra lisää käytettäväksi uusia sisältölohkoja, joista osa on samoja kuin Gutenbergissä tai muussa jo käyttöönottamassasi lisäosassa. Tällaisia ovat mm. ”Heading” otsikot, ”Buttons” painikkeet, ”Image” kuva, jne. Spectran etu on kuitenkin näidenkin lohkojen osalta tapa, jolla lohkon ja sivun sisällön asetuksia muokataan. Mutta tuo Spectra myös lisääkin lohkoja. Sellaisia, joita ei WordPressissä valmiina ole.

Spectrassa tulee mukana 29 sisältölohkoa ja 2 erikseen käyttöönotettavissa olevaa ehdollista ominaisuutta; ”Responsive Conditions” ja ”Display Conditions”.

Listanäkymä spectra lisäosan sisältölohkoista.

Mikä Spectrassa on Gutenbergiin verrattuna parempaa?

Gutenberg itsessään on hyvä mutta vajavainen ominaisuuksissa ja esimerkiksi ulkoasun muokkausmahdollisuuksien osalta. Spectra tarjoaa tähän paremmat ominaisuudet.

Jokaisella Spectran lohkolla on valittavissa

  • Yleiset
  • Tyyli ja
  • Edistyneet ominaisuudet

Spectra lohkon asetuksia.

Näissä valinnoissa voit muokata kunkin lohkon ominaisuuksia, ulkoasua ja sisältöäkin. Asettaa taustakuvan, valita värit, typografian ja tilan käyttöä (marginaalit ja padding).

Lomake ilman muita lisäosia

Spectra tarjoaa myös lisänä mielenkiintoisesti mm. valmiin lomakkeen, josta on valittavissa valmis lomake kolmesta eri vaihtoehdosta. Lomakkeiden kenttiä, tekstejä sekä kaikkia asetuksia voi toki muokata itselleen sopivaksi.

Spectra lomakevaihtoehdot.

Spectran sivurakentaja-asetukset

Spectran asetukset mahdollistavat mm. sivuston fonttien asettamisen latautumaan paikallisesti sekä muita yleisiä asetuksia. Nämä kannattaa käydä läpi huomioiden oman teeman asetukset ettei tule tarpeettomasti säädettyä samoja asioita useassa eri kohdassa mikä ei olisi eduksi.

Spectra lisäosan asetukset-sivu.

Yleisvaikutelma Spectrasta

Lyhyellä testauksella ja lisäosaan tutustumisella suosittelen tätä muillekin. Varsinkin, jos olet päätynyt tekemään sivustoa (sivustoja) WordPressin omalla Gutenberg sisältöeditorilla. Muista, että voit aina käyttää Spectraa yhdessä muiden lohkolisäosien kanssa mutta muissa lisäosissa et välttämättä saa kaikkia samoja etuja kuin Spectrassa.

Mikäli olet päätynyt käyttämään vaikkapa Elementoria sivujesi rakentamiseen ei Spectra ehkä ole sinua varten vaan sinun on parempi pysytellä Elementorissa. Tai muussa vastaavassa sivunrakennustyökalussa.

Spectra on kuitenkin sen verran kiinnostava lisäosa WordPress maailmassa, että aion jatkaa siihen tutustumista myös jatkossakin (vaikka olen myös Elementorin maksullisen version käyttäjä). Tuon Spectran mukaan myös kurssiohjelmaan, sillä se alkaa vetää vertoja Elementorin ilmaisversiolle ja sillä voi jo toteuttaa varsin näyttäviä sisältöjä.

Spectraa otan käyttöön ainakin kursseillani WordPress sisällöntuottajalle sekä Yrityssivusto WordPressillä. Jos aihe kiinnostaa, olet tervetullut oppimaan lisää.

Aika vikkelään toteutin Spectralla (Kadence teeman päällä) demokahvillallemme sivun.

Cafe Kupponen esimerkkikahvinan verkkosivun kuva.