How to Create a One-Page Website on WordPress

Monet menestyvät verkkosivustot ovat suuria, monimutkaisia asioita, joissa on paljon sivuja ja sisältöä. Joskus enemmän on kuitenkin todella vähemmän verkkosuunnittelun maailmassa. Siksi perinteisen lähestymistavan sijaan voi olla kannattavaa luoda WordPressillä yksisivuinen verkkosivusto.

Tässä artikkelissa perehdymme tarkemmin tämäntyyppisten sivustojen hyötyihin ja sovelluksiin. Sitten näytämme, miten voit luoda WordPressiin yksisivuisen verkkosivuston vain kolmessa vaiheessa. Aloitetaan!

📚 Sisällysluettelo:

Miksi kannattaa luoda yksisivuinen verkkosivusto

Useimmilla verkkosivustoilla on useita sivuja. Vähintäänkin siellä on yleensä etusivu, yhteystietosivu, Tietoja-sivu ja sivut mille tahansa sisällölle tai palveluille, joita tarjoat.

Yksisivuinen verkkosivusto sen sijaan tiivistää kaiken tärkeän tiedon yhdelle etusivulle, usein sisällyttämällä siihen useita omia osioita. Yksisivuinen verkkosivusuunnittelu tarjoaa useita etuja, kuten:

• Yksinkertaisuus, jonka ansiosta kävijöiden on helpompi navigoida sivustollasi ja löytää tarvitsemansa.
• Ylläpidon helppous, koska ylläpidettävää sisältöä on hyvin vähän.

Yksisivuinen verkkosivusuunnittelu ei tietenkään ole oikea valinta kaikille verkkosivustoille. Suurilla, monimutkaisilla sivustoilla on paikkansa. Jos sinulla on kuitenkin pieni yrityssivusto, portfolio tai yksinkertainen kauppapaikka, saatat haluta harkita tätä muotoa.

Yksisivuisen verkkosivuston olennaiset elementit

Kun verkkosivustosi kattaa vain yhden sivun, sinun on oltava hyvin harkitseva sen suhteen, mitä sisällytät siihen. On tärkeää tarjota kaikki tiedot, joita yleisösi tarvitsee, sotkematta sivua tai hukuttamatta heitä. Kaiken, mitä lisäät sivullesi, tulisi olla siellä syystä.

Tässä on joitakin olennaisia elementtejä, jos haluat luoda yksisivuisen verkkosivuston:

• Korostunut toimintakutsu (Call to Action, CTA), kuten rekisteröitymis-, yhteydenotto- tai ostopainike.
• Tieto-osio, jossa kerrotaan, kuka sinä, yrityksesi tai organisaatiosi olet.
• Branding-elementit, kuten logosi ja slogan.
• Luettelo tuotteista tai palveluista, jos ne ovat merkityksellisiä.
• Linkit muihin paikkoihin ja sisältöön eri puolilla verkkoa, mukaan lukien sosiaalisen median profiilit.
• Yhteystiedot, mukaan lukien eri kanavat, jos mahdollista.

On myös tärkeää kiinnittää huomiota näiden elementtien järjestykseen. Yleensä tärkeimmät tiedot ja CTA-kohdat kannattaa sijoittaa sivun alkuun, ja yhteystiedot ja linkit lähempänä sivun alareunaa. Mieti, mitä yleisösi tarvitsee nähdä ja missä järjestyksessä, ja se auttaa sinua määrittelemään, mitä elementtejä sisällytetään ja miten ne järjestetään.

Loppujen lopuksi – vaikka käytätkin yksisivuista verkkosivumuotoilua, se ei välttämättä tarkoita, ettei sinulla voisi olla blogia. Jos haluat silti sisällyttää blogin, WordPress antaa sinun silti linkittää blogiisi yksisivuiselta etusivultasi.

Miten luodaan yksisivuinen verkkosivusto (TÄYDELLISET ASKELEET)

Puhutaanpa nyt siitä, miten sivustosi suunnittelu oikeastaan aloitetaan. Ensimmäiseksi sinun kannattaa tutustua joihinkin olemassa oleviin esimerkkeihin yksisivuisista verkkosivustoista saadaksesi inspiraatiota. Siirry sitten ensimmäiseen vaiheeseen.

Vaihe 1: Määritä sivustosi painopiste

Kuten olemme jo keskustelleet, yksisivuisen sivuston valitseminen tarkoittaa sitä, että sinun on oltava hyvin harkitseva sen suunnittelussa. Siihen kuuluu myös sen tavoitteiden selvittäminen. Kun käytössäsi on vain yksi sivu, sinun kannattaa valita yksi tai kaksi keskeistä asiaa, joihin haluat keskittyä.

Harkitse tätä varten ensisijaista CTA:ta, jonka ympärille sivustosi suunnitellaan. Mitä haluat kävijöiden tekevän – rekisteröityä jäseneksi, ostaa tuotteen, osallistua tapahtumaan tai palkata sinut töihin? Kaiken sivulla olevan pitäisi kannustaa ihmisiä tekemään tämä toimenpide. Tämä tarkoittaa heidän tarvitsemiensa tietojen antamista, hyötyjen selittämistä ja seuraavien vaiheiden selventämistä.

Vaihe 2: Valitse laadukas yksisivuinen teema

Jos olet päättänyt luoda yksisivuisen verkkosivuston WordPressillä, voit käyttää mitä tahansa teemaa. Fiksu strategia on kuitenkin usein valita yksisivuinen teema, joka on rakennettu nimenomaan tämäntyyppisten sivustojen suunnittelua varten. Näiden teemojen avulla on helppo sisällyttää kaikki tarvittavat tiedot ja säilyttää samalla houkutteleva ulkoasu.

Kun valitset yksisivuisen teeman, kannattaa etsiä seuraavaa:

• Sivunrakentaja, jossa on valmiiksi rakennettuja elementtejä, joita tarvitset, kuten yhteydenotto-osio.
• Menetelmä, jolla voit jakaa sivusi useisiin osioihin, jotka voidaan erottaa toisistaan visuaalisesti.
• Navigointi, jonka avulla kävijät voivat hypätä eri osioihin sivusi sisällä.
• Helppo tapa lisätä CTA-painikkeita ja personoida niitä.

Esimerkkiteemoja on saatavilla runsaasti. Esimerkiksi Neve on monikäyttöinen teema, joka sopii täydellisesti ytimekkäisiin mutta kattaviin yksisivuisiin sivustoihin. Se on yhteensopiva monien suosittujen sivunrakentajien kanssa, sisältää live-muokkaajan ja auttaa sinua perustamaan yksisivuisen sivustosi nopeasti. Se sisältää myös valmiita osioita yhteystietoja, biotietojasi, kauppapaikkaa ja paljon muuta varten.

Vaihe 3: Suunnittele sivustosi

Kun tiedät, mitä haluat sisällyttää sivullesi, olet selvillä sen painopisteestä ja olet valinnut vahvan teeman, voit ryhtyä varsinaisesti suunnittelemaan sivua. Haluat, että se sopii yleisöllesi, heijastaa tyyliäsi ja on optimoitu täyttämään tavoitteesi – mikä tarkoittaa, että sinun ei kannata vain noudattaa kaavaa.

Tässä on kuitenkin muutamia ehdotuksia, jotka kannattaa pitää mielessä, kun kokoat sivustoa:

• Pitäkää sivut yksinkertaisina, älkääkä sisällyttäkö niihin mitään sellaista, mikä ei palvele selkeää tarkoitusta
• Erottakaa eri osiot selvästi toisistaan erilaisilla otsikoilla, taustoilla ja niin edelleen.
• Luo navigaatio, joka hyppää kävijät nopeasti heidän tarvitsemiinsa osioihin.
• Tee ensisijaisista CTA-kohteistasi näkyvät ja vakuuttavat.

Tämän neuvon avulla voit luoda mahtavan yksisivuisen sivuston hetkessä.

Puhutaan nyt työkaluista. Miten voit siis rakentaa loistavan yksisivuisen verkkosivuston tehokkaimmalla ja nopeimmalla mahdollisella tavalla?

Rakenna yksisivuinen verkkosivusto Elementorilla

Elementor on helppokäyttöinen ja ominaisuuksiltaan monipuolinen sivujenrakentaja, jonka avulla WordPress-sivuston sisällä on helppo luoda mikä tahansa määrä sivuja. Tämä tekee siitä täydellisen työkalun, jolla voit luoda upean yksisivuisen verkkosivuston.

Seuraavissa osioissa näytämme, miten se tehdään. Käyttämämme esimerkki on hedelmä- ja vihanneskaupan sivusto. Sivustossa on:

• yksi sivu, jossa on monta osiota, joissa on sisältöä
• valikko, jota klikkaamalla kävijät voivat siirtyä suoraan kyseisiin osioihin
• otsikko, jossa on logo ja valikko
• alasivu

Tässä on esikatselukuva siitä, miltä sivusto näyttää lopussa:

Käymme jokaisen vaiheen yksityiskohtaisesti läpi, mutta tässä on perusprosessi:

1. Asenna ilmainen Neve-teema.
2. Asenna Elementor-lisäosa, jos et ole sitä jo tehnyt.
3. Asenna verkkosivustosi ”kangas” eli otsikko, alatunniste ja valikko.
4. Lisää sisältösi Elementorilla.
5. Linkitä valikko eri osioihin ulkoasussasi luodaksesi yhden sivun navigointiefektin.
6. Aseta ulkoasusi sivustosi etusivuksi.

Asenna ilmainen Neve-teema

• Mene WordPressin kojelaudassa kohtaan Ulkoasu → Teemat → Lisää uusi.
• Hae ”Neve”
• Klikkaa Asenna-painiketta
• Kun WordPress on asentanut teeman, napsauta Aktivoi, jotta se saadaan käyttöön

Asenna ilmainen Elementor-liitännäinen

• Mene kohtaan Liitännäiset → Lisää uusi
• Hae hakusanalla ”Elementor”
• Asenna ja aktivoi ilmainen Elementor Page Builder -lisäosa.

Nyt, kun sinulla on puhdas WordPress-asennus, aktiivinen Neve-teema ja Elementor-sivunrakentaja, olet valmis rakentamaan yksisivuisen verkkosivustosi.

Pääotsikon, alatunnisteen ja valikon määrittäminen

Käytät Neve-teemaa yhden sivun verkkosivustosi otsikon, alatunnisteen ja valikon määrittämiseen.

Pääotsikko

Seuraa WordPressin kojelautaa ja valitse Appearance → Themes → Customize (Ulkoasu → Teemat → Mukauta) muokataksesi Neve-teemaa:

Valitse ensin sivuston värit ja tausta

Seuraavaksi napsauta Mukauttaminen-paneelissa Otsikko → Vaihda logo ja lisää sivustosi logo. Säädä logon leveyttä, lisää sivuston otsikko, sivuston kuvake ja iskulause. Valitse, näytetäänkö vai piilotetaanko sivuston nimi ja tagline otsikossa.

Valitse Asettelu-välilehdellä ulkoasu otsikolle sekä väri ja määritä pehmusteet ja marginaalit. Vaihtoehtoisesti voit valita jonkin otsikon esiasetuksista.

Valikko

Seuraavaksi sinun on luotava navigointivalikko, joka näkyy otsikossa. Voit tehdä tämän napsauttamalla Valikot → Luo uusi valikko. Anna sille nimi ja aseta sen Valikon sijainnin arvoksi Ensisijainen valikko.

Klikkaa Seuraava ja Lisää kohteita. Lisää tässä luomiesi osioiden nimet. Esimerkiksi Main, About Us, Products ja Contact. Napsauta tätä varten Custom Links (Mukautetut linkit) -painiketta.

Kirjoita URL-kenttään hashtag, jota seuraa kyseisen osion nimi. Myöhemmin, kun otat Elementorin käyttöön, määrität sen niin, että nämä linkit menevät tiettyihin osioihin suunnittelussasi. Esimerkiksi:

• #about-us
• #products
• #contact

Jalkakappale

Siirry Jalkakappaleeseen ja lisää teksti ja taustaväri. Voit lisätä tähän minkä tahansa haluamasi sisällön:

Hit Publish tallentaaksesi kaikki muutokset

Tässä vaiheessa sivustollasi on otsikko, alatunniste ja valikko. Sen pitäisi näyttää jotakuinkin seuraavanlaiselta. Nyt olet valmis lisäämään Elementorin avulla sisällön, joka tulee otsikon ja alatunnisteen väliin:

Luo uusi sivu ja lisää sisältöä Elementorilla

Aloittaaksesi, siirry kohtaan Sivut → Lisää uusi luodaksesi uuden sivun. Anna sivulle nimi. Jos teema tarjoaa sivupalkit, nekin tulevat näkyviin. Voit kuitenkin leikata sivupalkit pois säätämällä Sivun attribuutit täyteen leveyteen.

Klikkaa avautuvalla uudella sivulla Edit with Elementor. Se avaa vasemmalla olevan paneelin. Oikealla puolella on muokkausalue, jossa näet verkkosivuston muotoutuvan.

Pikaesittely Elementorin käyttöliittymään

Ennen kuin siirrymme eteenpäin, tutustutaan Elementorin paneeliin. Siinä on monia luovia elementtejä tai widgettejä, kuten otsikoita, kappaleita, kuvia tai videoita. Voit lisätä näitä sisältöösi vetämällä ne päälle.

Paneelin vasemmassa yläkulmassa on hampurilaisvalikko, joka avaa monia vaihtoehtoja. Täällä voit säätää värejä, fontteja ja teeman tyyliä globaalilla tasolla. Sanomattakin on selvää, että tämä säästää paljon aikaa, kun lisäät uusia sivuja.

Tältä välilehdeltä voit myös poistua WordPressin kojelaudalle milloin tahansa.

Paneelin alareunassa on vaihtoehtoja, joilla voit säätää sivun asetuksia, nimetä sivun, tarkastella muokkaushistoriaa ja vaihtaa responsiivisten tilojen välillä. Lisäksi siellä on navigaattori, joka näyttää järjestetyn näkymän sivusta.

Klikkaamalla silmäkuvaketta voit esikatsella sivua, ja kun se on valmis, paina Julkaise-painiketta.

Nyt on aika aloittaa sisällön lisääminen.

Kaksi tapaa luoda yksisivuinen verkkosivusto Elementorilla

Tässä vaiheessa voit halutessasi lähteä rakentamaan yksisivuista verkkosivustoa Elementorilla kahdella tavalla:

1. Aseta jokin Elementorin valmiista malleista ja muokkaa sitä sitten haluamallasi tavalla. Napsauta tätä varten suunnittelusi live-esikatselussa kansiokuvaketta, jolloin avautuu useita malleja, joista osa on ilmaisia ja monet pro-malleja. Pages-välilehdeltä löydät täysin valmiita malleja kokonaisille sivuille. Blocks-välilehdeltä löydät valmiita malleja suurempien sivujen tietyille osioille (tämä on hyödyllisin yhden sivun verkkosivustolle).

Voit lisätä minkä tahansa mallin klikkaamalla sitä. Sen jälkeen voit mukauttaa jokaisen elementin täysin.

2. Vaihtoehtoisesti voit aloittaa tyhjästä klikkaamalla plus-painiketta lisätäksesi osion ja rakentaaksesi suunnittelun tyhjältä kankaalta.

Tässä opetusohjelmassa otamme käyttöön molempien menetelmien yhdistelmän – rakennamme sivustomme ensimmäisen osion tyhjästä ja valitsemme sitten mallilohkoista loput osiot täytettäväksi.

Miten Elementorilla luodaan yhden sivun verkkosivuston osioita

Elementor käyttää osioita, sarakkeita ja widgettejä minkä tahansa sivun ulkoasun luomiseen. Osiot ovat suurimmat rakennuspalikat, ja niiden sisälle voi lisätä sarakkeita. Näiden osioiden tai sarakkeiden sisälle voit lisätä haluamasi widgetit.

Lisää osio napsauttamalla ”+”-merkkiä ja valitse sarakkeen rakenne.

Kun viet hiiren kursorin osion päälle, näkyviin tulee sininen kehys, jonka yläreunassa on kahva. Tämän kahvan avulla voit lisätä uuden tyhjän osion olemassa olevan osion yläpuolelle tai muokata/poistaa osion. Napsauttamalla keskellä olevia pisteitä pääset osioiden ohjaimiin – ulkoasu, tyyli ja lisäasetukset. Lisäksi voit siirtää osioita ylös- tai alaspäin vetämällä pisteitä, ja hiiren oikealla napsauttamalla saat esiin lisävaihtoehtoja, kuten kopioi tai poista.

Vastaavasti voit napsauttaa yläkulmassa olevaa sarakekuvakahvaa valitaksesi sarakkeen asettelun osiossa. Voit myös säätää sarakkeiden leveyttä ja niiden välistä tilaa. Klikkaamalla laatikoita hiiren oikealla painikkeella voit lisätä lisää sarakkeita, kopioida olemassa olevia, poistaa niitä ja paljon muuta.

Elementor-paneelista voit vetää minkä tahansa elementin (jota kutsutaan widgetiksi) sarakkeeseen. Kun olet lisännyt elementin sarakkeeseen tai osioon, oikeaan yläkulmaan ilmestyy kynäkuvake. Napsauttamalla tätä kuvaketta saat Elementor-paneelin sisältö-, muotoilu- ja edistyneen muokkauksen vaihtoehdot esiin.

Ensimmäisen osion luominen

Käytämme ensimmäistä osiota kertoaksemme kävijöille yrityksen luonteen ja hieman siitä. Tätä tarkoitusta varten voit käyttää osion koko leveyttä taustakuvan sijoittamiseen. Kun muokkaat jakson asettelua, voit säätää sisällön leveyttä ja venyttää jakson sivun koko leveydelle yksinkertaisesti painiketta vaihtamalla.

Taustakuvan lisäämiseksi valitse Muokkaa osiota -vaihtoehto napsauttamalla kahvassa olevia pisteitä. Käy paneeliin avautuvalla Style-välilehdellä ja lataa kuva Mediakirjastosta. Säädä kuvan kokoa sekä päällekkäisyyttä.

Lisäämme osioon yhden sarakkeen ja keskitämme sen osioon. Sarakkeen sisällä käytämme kolmea widgettiä – otsikkoa, joka kertoo kävijöille, että myyt tuoreita hedelmiä ja vihanneksia, tekstieditoria, joka kiinnittää huomiota kotiinkuljetusvaihtoehtoihin, ja painiketta, josta kävijät voivat tehdä tilauksen.

Heading-widgetin lisääminen:

Tekstwidgetin vetäminen:

Painike-widgetin lisääminen:

Nyt voit muokata kumpaakin widgettiä muokkausasetuksia käyttämällä.

Voit halutessasi lisätä widgetit myös kolmeen erilliseen sarakkeeseen lisäämällä sarakkeita napsauttamalla sarakekuvaketta. Tärkeää tässä on huomata, että jokaisen widgetin asettelua, tyyliä ja muuta voidaan säätää pikkuhiljaa.

Luo loput osiot

Nyt kun ensimmäinen osio on valmis, voit siirtyä jäljelle jääviin kolmeen osioon – Tietoja meistä, Tuotteet ja Yhteystiedot.

Kuten jo aiemmin mainittiin, käytämme Elementor-kirjastosta löytyviä valmiita template-blokkeja rakentaessamme nämä kolme osiota. Elementorissa on paljon ilmaisia template-blokkeja jokaisessa näistä luokista, ja kirjasto on haettavissa.

Tietoa meistä -osioon valitsemme yksinkertaisen template-blokin, jossa on otsikko, tekstieditori ja videowidget. Voit korvata kaiken tämän omalla sisällölläsi.

Mallilohko, jossa on korvattu sisältö:

Aivan samalla tavalla voit käyttää mallilohkoja Tuotteet- ja Yhteystiedot-osioon. Yhteystiedot-osiossa käytettävässä mallilohkossa on sosiaalisen median kuvakkeet. Napsauttamalla tyyli-välilehteä voit säätää kuvakkeen väriä, kokoa, pehmusteita ja muuta.

Koska Elementor sallii paljon muokkausmahdollisuuksia, voit saada nämä osiot näyttämään erilaisilta kuin tuodut mallit.

Kun olet tehnyt haluamasi muutokset, napsauta vihreää Julkaise-painiketta, ja muutokset ovat elävässä käytössä sivustolla.

Valikon linkittäminen yhden sivun osioihin

Voidaksesi saada napsautettavan navigointivalikon, sinun on yhdistettävä Elementor-suunnittelusi eri osiot vaiheessa 3 luotuun navigointivalikkoon. Voit tehdä tämän avaamalla osion ID:n ja siirtymällä Lisäasetukset-välilehdelle. Täytä Elementor-paneelin vastaavassa osiossa olevaan CSS ID -kenttään oikea osioiden nimi ilman hashtagia.

Jos esimerkiksi valikkosi linkittää osoitteeseen #about-us, lisäät CSS ID:n muotoon about-us. Toista sitten prosessi kaikkien niiden osioiden kohdalla, joihin haluat linkittää:

Muotoilusi asettaminen etusivuksi

Viimeisenä vaiheena voit asettaa juuri luomasi sivun Elementorilla luodun yksisivuisen verkkosivuston etusivuksi. Voit tehdä tämän menemällä kohtaan Asetukset → Lukeminen. Napsauta Valitse staattinen sivu kohdassa Kotisivunäytöt ja valitse luomasi muotoilu. Napsauta lopuksi Tallenna muutokset.

Jos jokin vaihe hämmentää sinua, meillä on kattava opas staattisen WordPress-etusivun määrittämisestä.

Viimeiseksi yksisivuinen verkkosivustosi on nyt valmis. Tässä on esimerkki siitä, miltä se voisi näyttää:

Loppupäätelmä

Tässä on kolme yksinkertaista vaihetta, joiden avulla voit luoda yksisivuisen verkkosivuston jo tänään:

1. Määritä sivustosi painopiste.
2. Valitse laadukas yksisivuinen teema, kuten Neve.
3. Suunnittele sivustosi tarvittaessa Elementorin avulla.