Kun rakennat uutta WordPress-sivustoa, et ehkä halua, että keskeneräinen sisältö näkyy yleisölle. Ratkaisuna voi olla “Coming Soon” -sivu, joka kertoo kävijöille, että sivusto on tulossa pian. Tässä oppaassa käydään vaihe vaiheelta läpi, kuinka voit tehdä sen ilman lisäosia, hyödyntäen WordPressin sisäänrakennettuja ominaisuuksia ja pientä HTML/CSS-tyyliä.
Miksi tehdä “Coming Soon” -sivu ilman lisäosaa?
Monet käyttävät tähän tarkoitukseen lisäosia, mutta niiden asentaminen voi hidastaa sivustoa ja lisätä tietoturvariskejä. Ilman lisäosaa toteutettu ratkaisu on kevyt, nopea ja toimii ilman ylimääräisiä riippuvuuksia. Lisäksi saat täyden hallinnan ulkoasusta ja sisällöstä.
Vaihe 1: Luo uusi sivu WordPressissä
-
Kirjaudu WordPressin hallintapaneeliin.
-
Mene kohtaan Sivut > Lisää uusi.
-
Nimeä sivu esimerkiksi “Coming Soon” tai “Tulossa pian”.
-
Lisää haluamasi sisältö – esimerkiksi otsikko, lyhyt kuvaus ja mahdollinen logo.
-
Julkaise sivu, mutta älä vielä tee siitä etusivua.
Vaihe 2: Lisää tyylit hero-alueelle
Voit luoda houkuttelevan ulkoasun lisäämällä yksinkertaista CSS-tyyliä.
Esimerkiksi:
<style> body { margin: 0; font-family: Arial, sans-serif; background: #f8f9fa; color: #333; text-align: center; padding-top: 20vh; } h1 { font-size: 3rem; color: #d6111e; } p { font-size: 1.2rem; margin-bottom: 20px; } </style>
Tämän voit lisätä Ulkoasu > Mukauta > Lisä-CSS -kohtaan.
Vaihe 3: Vaihda etusivu Coming Soon -sivuksi
-
Mene hallintapaneelissa kohtaan Asetukset > Lukeminen.
-
Valitse “Näytä etusivulla” kohdassa Staattinen sivu.
-
Valitse äsken luomasi “Coming Soon” -sivu etusivuksi.
-
Tallenna muutokset.
Vaihe 4: Estä hakukoneita indeksoimasta sivustoa
Koska sivusto on keskeneräinen, voit estää hakukoneita indeksoimasta sitä ennen julkaisua.
-
Siirry kohtaan Asetukset > Lukeminen.
-
Ruksaa “Estä hakukoneita indeksoimasta tätä sivustoa” -kohta.
-
Muista poistaa tämä asetus, kun sivusto on valmis.
Vaihe 5: Viimeistele sivun sisältö
“Coming Soon” -sivulla voi olla esimerkiksi:
-
Selkeä otsikko (“Sivusto avautuu pian”)
-
Lyhyt kuvaus tai lupaus tulevasta sisällöstä
-
Logon tai brändin esittäminen
-
Mahdollisuus liittyä sähköpostilistalle (ilman lisäosaa voit käyttää esim. Google Formia)
-
Linkit sosiaalisen median tileihin
Vaihe 6: Lisää taustakuva tai väritys
Voit tuoda visuaalista ilmettä lisäämällä taustakuvan:
<code> <style> body { background: url(’https://esimerkkikuva.fi/tausta.jpg’) no-repeat center center fixed; background-size: cover; } </style> </code>
Tämän voi lisätä myös Mukauta > Lisä-CSS -kohtaan.
Vaihe 7: Julkaise ja testaa
Kun olet valmis, tarkista sivu eri laitteilla ja varmista, että se näyttää hyvältä sekä mobiilissa että tietokoneella.
Yhteenveto
“Coming Soon” -sivun tekeminen ilman lisäosaa WordPressissä on helppoa ja antaa sinulle täyden hallinnan sivun ulkoasuun ja sisältöön. Hyödyntämällä staattisen etusivun asetuksia ja omaa CSS-tyyliä, voit luoda visuaalisesti houkuttelevan väliaikaisen sivun, joka pitää vierailijat kiinnostuneina ennen virallista julkaisua.
WordPress.org
CSS Tricks
W3Schools CSS
Google Fonts
Unsplash – ilmaiset kuvat
Canva – graafinen suunnittelu