Etusivun vaikuttavin osa on usein hero-alue – se iso, näyttävä alue heti sivun yläosassa, joka ottaa kävijän vastaan ensimmäisenä. Koko näytön hero-alue voi sisältää kuvan, tekstin, toimintakehotteen (CTA) ja joskus myös videon tai lomakkeen. Tässä artikkelissa käymme läpi, miten voit helposti luoda näyttävän ja responsiivisen hero-alueen WordPress-sivustosi etusivulle.
Mikä on hero-alue?
Hero-alue on sivun yläosan suuri visuaalinen alue, jonka tarkoitus on vangita käyttäjän huomio heti saapuessa sivustolle. Se toimii johdantona brändiisi tai palveluusi, ja oikein toteutettuna se voi ohjata käyttäjää tehokkaasti eteenpäin – esimerkiksi ottamaan yhteyttä, selaamaan alas tai ostamaan tuotteen.
Mitä tarvitaan hero-alueen luomiseen?
-
WordPress-teema, joka tukee koko näytön osioita (esim. Astra, OceanWP, GeneratePress)
-
Sivunrakennustyökalu, kuten Elementor, Beaver Builder tai Gutenbergin omat lohkot
-
Laadukas taustakuva tai video
-
Hyvä otsikko ja toimintakehote (CTA)
-
Responsiivinen suunnittelu
Hero-alueen luominen Gutenberg-editorilla
WordPressin oletuseditori Gutenberg tukee monia lohkoja, joiden avulla voidaan rakentaa hero-alue ilman lisäosia.
-
Avaa Sivut → Etusivu → Muokkaa.
-
Lisää uusi Lohko → Kansio (Cover).
-
Lataa taustakuva tai valitse mediakirjastosta.
-
Kirjoita otsikko suoraan kansion päälle.
-
Lisää painike-lohko toimintakehotteeksi.
-
Aseta korkeudeksi koko näyttö (täyspitkä osio) valitsemalla Koko korkeus -asetus.
-
Julkaise tai päivitä sivu.
Voit myös käyttää Section-lohkoa, jos teemasi tai lisäosa sitä tukee.
Elementorilla koko näytön hero helposti
Elementor on yksi suosituimmista sivunrakennustyökaluista, ja sen avulla voit rakentaa näyttäviä hero-alueita helposti.
-
Luo uusi sivu tai muokkaa etusivua Elementorilla.
-
Lisää uusi Section ja valitse Full Height.
-
Aseta taustakuva tai taustavideo osiolle.
-
Lisää otsikko, teksti ja painike-widgetit.
-
Säädä tekstien sijoittelua pystysuunnassa (Vertical Align: Middle).
-
Tee hero-osiosta responsiivinen mobiilinäkymässä.
CSS:llä tehty hero-alue
Jos haluat tehdä kevyen ratkaisun ilman lisäosia, voit rakentaa hero-alueen myös HTML:llä ja CSS:llä. Lisää seuraava koodi teeman Customizerin Lisätty CSS -kohtaan:
<code> .hero-area { height: 100vh; background: url(’TAUSTAKUVASI-URL’) center center / cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; color: white; } </code>
Lisää HTML:
<code>
<div class=”hero-area”>
<h1>Tervetuloa sivustollemme</h1>
<p>Tutustu palveluihimme</p>
<a href=”#palvelut” class=”cta-button”>Lue lisää</a>
</div>
</code>
Responsiivisuus ja käytettävyys
Hero-alueen pitää näyttää hyvältä kaikilla laitteilla. Tarkista aina, että tekstit ovat luettavissa ja CTA-painikkeet näkyvät hyvin myös mobiilissa. Käytä tarvittaessa läpinäkyvää mustaa tai valkoista taustakerrosta tekstin luettavuuden parantamiseksi.
Parhaat käytännöt hero-alueeseen
-
Käytä korkearesoluutioista kuvaa tai optimoitua videota.
-
Rajoita teksti 1–2 lauseeseen.
-
Lisää vain yksi selkeä CTA.
-
Varmista kontrasti ja luettavuus.
-
Optimoi latausnopeus (kuvan koko, lazy load, CDN).
Hyödyllisiä lisäosia hero-alueelle
Yhteenveto
Koko näytön hero-alue tekee sivustostasi vaikuttavamman ja toimii tehokkaana johdantona sisältöön. Sen avulla voit ohjata käyttäjän haluamaasi toimintaan ja vahvistaa brändisi ilmettä. Valitsetpa sitten Gutenbergin, Elementorin tai CSS-ratkaisun, tärkeintä on huolellinen suunnittelu, hyvä visuaalinen laatu ja selkeä viesti.