Kuidas teha kodulehte?

“Step-by-step” õpetus algajatele

  • Ei mingit programmeerimist
  • Koduleht avalikuks 1 tunniga
  • 3 kuud tasuta veebimajutust

TUTVU PLATVORMIDEGA

Selle õpetusega valmib ca. 5 veebilehte päevas!


PARTNERID:


Saateks

Purustame müüdid

1. Kodulehe tegemine nõuab „patsiga tüüpi“ (loe: programmeerimisoskust“)

VASTUS: Nii oli möödunud sajandil! Kui sulle meeldib Lego, meeldib sulle ka tänapäeva mõistes kodulehe loomine! Luban, et selleks on suuteline iga algaja, kaasaarvatud Sina! 🙂

Loe põhjalikumalt

Aastal 2018 kasutatakse võimekaid alagajasõbralike platvorme, kus tegevus meenutab pigem Lego klotsidega mängimist.

Rätsepmeistri stiilis veebilehe loomine pole küll kuskile kadunud, kuid see on väga kallis lõbu ja jäänud pigem suurfirmade mängumaaks.


Kodulehe isetegemise hind


Tõime välja hinnangulised eelarved eri tüüpi veebilehtede lansseerimisel. Arvestage, et hinnad varieeruvad sõltuvalt teenusepakkujatest ning antud summad kajastavad pigem keskmist taset!

Lihtne blogi

~50 €

  • Veebimajutus 1 aastaks
  • Domeeninimi 1 aastaks

Mitmekeelne ärileht

~150 €

  • Premium kujundusmall

  • Veebimajutus 1 aastaks
  • Domeennimi 1 aastaks

Võimas e-pood

~200 €

  • Premium kujundusmall
  • Liitumine pangalinkidega
  • Veebimajutus 1 aastaks
  • Domeennimi 1 aastaks
kuidas teha kodulehte

1. SAMM

Platvormi valimine

WIX vs. WordPress – võtame luubi alla kaks populaarset sisuhaldustarkvara. Loe kumb on sulle sobilikum!


Kodulehe tegemine WordPressiga

WordPress on platvormide kunn! See on populaarseim vabavarana kättesaadav content management system ehk maakeeli platvorm millega on loodud 30% kogu internetist. WordPress on kahtlemata võimekas ja algajasõbralik, kuid erisoovide korral on siiski vajalikud baasteadmised HTML ja CSS progremiskeeltest.

WordPressi kasutamine on alati tasuta, kuid veebilehe loomiseks vajad esmalt registreeritud domeeni ning veebimajutust. Kodulehe tegemine WordPressiga on kindlasti väga õige otsus, kui soovite oma veebilehel iga detaili suhtes omada kontrolli ning teid ei hirmuta kokkupuude serverite või programmeerimiskeeltega.

Ava põhjalikum arvustus

Plussid

  • Tonnideviisi pluginaid ja kujundusi (nii tasuta kui tasulisi).
  • Eesti keelne kasutajaliides (kokku 68 erinevas keeles).
  • Paindlik loomaks kõiki tüüpi veebilehti (e-pood, blogi, ärileht jne).
  • Veebihaldus läbi WordPressi mobiiliäpi.

Miinused

  • Profesionaalse tulemuse saavutamiseks pole pääsu tasulisest kujundusest (maksumus: 50-100€).
  • Vajalik osata HTML ja CSS koodi baastasemel (kõik oleneb erisoovidest ning kujunduse võimekusest).
  • Kehvasti valmistatud või aegunud pluginate kasutamine võib tekitada konflikte mistõttu on sinu veebileht ühel hetkel nö “maas”. Jälgige pluginate reitinguid, kommentaare ning ühilduvust sinu WP versiooniga!

WordPressi installimine

WordPressi paigaldamine on lihtne. Seda saab teha kõigest paari klikiga iga tuntuma teenusepakkuja iseteeninduses.  Kogu protsess võtab maksimaalselt 5 minutit. (WordPressi paigaldamist käsitleme  detailsemalt Wixter õpetuse 5. sammus!)

WordPress.org ja wordpress.com

Tähelepanu! Tegemist on kahe erineva organisatsiooniga!

  • WordPress.org on vabavarana kättesaadav sisuhaldustarkvara.
  • WordPress.com näol on tegemist säästu veebimajutajaga,  kes pakub lisana lihtsustatud ja kärbitud varianti WordPressi sisuhaldustarkvarast.

Huvitavad faktid

  • WordPress (edaspidi: “WP”) hoiab enda käest 55% sisuhaldustarkvara turust.Täpsemad andmed on kättesaadavad W3techs.com lehel.
  • WP ei kuulu ühelegi ettevõttele. Tegemist on sisuliselt mittetulundusühinguga mida arendavad põhiliselt vabatahtlikud veebiarendajad üle terve maailma (arendajate motiiv peitub järgmises punktis).
  • WP sees eksisteerib vabaturumajandusel põhinev turg, kus igaüks saab luua pluginaid ning hakata neid äritegevuse eesmärgil kodulehetegijatele pakkuma.
  • WordPress.org loodi 2003. aastal ja on vanem kaubamärk kui Facebook või Twitter.

Kokkuvõtteks

Kodulehe tegemine WordPressiga on kindlasti õige otsus, kui sul aega ja tahtmist oma lehega iganädalaselt tegelema hakata. Kvaliteetne veebileht on nagu Tallinna linn, mis ei saa kunagi valmis. Alati leidub midagi mida saab veebilehel testida või parendada ja seda WordPress ka võimaldab – kontroll iga pisema detaili üle!

Väärt nõuanne!

Säästa aega ja raha! Kasuta veebilehe loomiseks modernseimat viisi ehk algajate poolt armastatud Wix veebiehitustööriista!

  • Tasuta harjutamine
  • Maailma popim builder
  • Üle 500 kujundusmalli
  • Lihtsam kui WordPress
Proovi Wix’i tasuta

2. SAMM

Kodulehe registreerimine

Kodulehe tervis algab heast ja kvaliteetsest veebimajutusest. Vali enda veebilehe jaoks turvaline ja kindel kodu!


Veebimajutus (Elkdata OÜ, päritolumaa: Eesti, loodud: 2000. a.) hinnang: ★★★★

“Tunnustatud kodumaine teenusepakkuja. Vali kui soovid tegutseda ainult Eesti turul!”

  • Üle 25 000 rahuloleva kliendi
  • Uptime: 99,6 – 99,9% (täpsed andmed puuduvad)
  • Livechat (tööpäeviti)
  • WordPressi käivitamine 1 klikiga
  • Soodsaima paketi hind 12 kuuks: 55,00 euri + KM

Külasta: Veebimajutus.ee


3 kuud tasuta!

Kingime sulle 3 kuud kodulehe majutust! 15€ säästmiseks vali teenusepakkujaks veebimajutus.ee ning sisesta unikaalne promokood!

Promokood: “WIXTER”

Milline on hea domeeninimi?

Hea domeeninimi nii otsingumootorite kui ka sinu sihtgrupi jaoks on…

 
  • Märksõnapõhine!

    Otsusta kas kasutad unikaalset brändi- või märksõnapõhist domeeni. Eelista pigem märksõnapõhist (hea näide: veebimajutus.ee). See meeldib otsingumootoritele!

  • Selge ja meeldejääv!

    Unusta täpitähed, sidekriipsud ja muud veidrused. Tee nn. raadio test. Hea domeeninimi on kuulates ja hääldades arusaadav ning kergesti meeldejääv!

  • Max. 12 tähemärki!

    Proovi valida lühem domeeninimi kui 12 tähemärki (ilma laienduseta). Väldi pikki ja lohisevaid lauseid (näide halvast nimest: kuidaskäibkodulehetegemine.ee)!

  • Legaalne!

    Veendu et su domeeninimi poleks regristreeritud kaubamärk kuskil teises riigis. Sa ei taha ju sellest hiljem ilma jääda! Kontrolli seotust kaubamärgiga.

3. SAMM

WordPressi paigaldamine



Tuletame meelde, et WordPress (edaspidi: “WP”) on sisuhaldustarkvara, mis on kodulehe loomiseks vajaminev platvorm. WP on alati kõigile tasuta ja enamik veebimajutajaid on paigalduseprotssi teinud väga lihtsaks.

Põhimõtteliselt tuleb lihtsalt konto registreerida ja kogu paigaldusprotsess ongi paari minutiga tehtud. See on palju kergem kui veebimajutuse ostmine, mille oled loodetavasti praeguseks edukalt lõpuni viinud.


Paigaldus Bluehosti ja Veebimajutus.ee näitel


  • 1. Leia WP paigaldamise nupp

Enamasti on see nupp kõikkidel teenusepakkujatel kontrollpaneelis lihtsasti leitav. Näiteks veebimajutus.ee iseteeninduses tuleb klikkida:

Domeeni haldus ➜ “Vali oma domeen” ➜ Kliki “Koduleht” rubriigist WordPressi nuppu

WordPress 1 click install


  • 2. Loo WP admin konto

1. Sisesta tulevase veebilehe tiitel. 2. Sinu e-mail. 3. WP Admin kasutajanimi. 4. WP Admin salasõna. Veebimajutus.ee küsib samuti täpselt samu andmeid!

Installing wordpress by one click


  • 3. – Väldi igasuguseid lisapakkumisi ja logi WP-sse
  • Paljud välismaised teenusepakkujad üritavad meile selles etapis “mütsi pähe tõmmata” erinevate pluginate ja kujundusmallide pakkumistega. Sa ei pea mitte midagi ostma, väldi neid!

    Igaljuhul õnnitleme Sind! Oled just loonud enda esimese veebilehe. Nüüd algab põhitöö!

  • Log in to wordpress2

www.sinudomeen.ee/wp-admin 

…on URL millega pääsed enda WP kasutajakeskkonda


Esimesed tähtsad settingud


  • 1. Määra sobiv keel ja ajavöönd

Vali meelepärane keel ja pane paika ajavormingud (ajavöönd; kuupäevavorming; aja vorming)

SettingsÜldine

  • 2. Sisesta veebilehe nimi + lühikirjeldus

Sisesta korrektne veebilehe tiitel ja lühikirjeldus. Mida rohkem infot otsingumootoritele annad seda parem!

SettingsÜldine ➜ Pealkiri/ Lühikirjeldus

  • 3. Keela otsingumootorite ligipääs

Veendu et keeld otsimootoritele oleks sisselülitatud! Sa ju ei soovi et keegi näeks pooleliolevat veebi.

SettingsLugemine ➜ Keela otsimootorite ligipääs ➜ ✓


    4. SAMM

    Kujundusmalli valimine



    Kodulehe tegemine muutub iga aastaga järjest lihtsamaks. Üks tänuväärt lisavõimalus on erinevate valmiskujunduste (themes) kasutamise võimalus, mis ulatab abikäe nii algajatele kui ka professionaalidele, kes ei oma nii täpset nägemust milline nende veebileht võiks disaini poolest välja nägema hakata.

    Valmiskujunduste kasuks otsustamise kõige veenvam argument on teadmine, et keerulised veebilahendused on juba valmis ja ootavad lihtsalt sisu vahetamist/lisamist ehk nö. viimased pintslitõmbeid.

    Ja mis veel olulisem – paremate valmiskujunduste loojad on oma ala tõelised professionaalid. Nad teavad väga detailselt kuidas teha kodulehte nii tehniliselt kui ka disainiliselt. Pole mingisugust mõtet oma veebilehe loomist asjatult raskeks teha!


    Themeforest – suurim turg kujunduste hankimiseks


    Kui sa soovid hakata internetis teenima otseselt või kaudsel viisil siis pigem muretse korralik ja võimekas premium valmiskujundus, sest see $50 kaalub kõvasti üle selle aja ja vaeva, mis tõenäoliselt kulub tüütute pisidetailide ja programmi õppimise peale.

    Külasta themeforest.net  ja kliki ikoonil. Seejärel paremalt Sort by: Best Sellers ning sinu ees on parimad kujundusmallid, mida inimesed armastavad kodulehe tegemisel.

    Enamasti kõik premium kujundused pakuvad kümneid variatsoone ehk demosi. See tähendab seda, et ostes ühe kujunduse saad hiljem lõputult valida millise temaatikaga demo on sulle sobivaim. Iga demo on erineva spetsifikatsooniga (restoran, hotell, e-pood jne).


    WordPressi bestsellerid Themeforestis


        • 1. Avada

          Hind: $60 (ühekordne ost); Müüke: 426 000+ Uuri lisaks

        • 2. X-theme

          Hind: $29 (ühekordne ost); Müüke: 185 000+ Uuri lisaks

        • 3. Enfold

          Hind: $59 (ühekordne ost); Müüke: 155 000+ Uuri lisaks


        Kuidas installida tasuta kujundusmalle


        WordPressiga on vaikimisi kaasa tulnud ports valmiskujundusi. Need kõik on tasuta kasutatavad sinu jaoks, kuid kahjuks äärmiselt lihtsakoelised. Järgnevalt demonstreerin kuidas seda paigaldada saab.

        • 1. Leia WordPressis rubriik “Teemad”!

        Liigu WordPressis: Välimus ➜ Teemad ➜ Lisa uus

        How to add new theme in wordpress


        • 2. Vali sobiv teema ja kliki “Paigalda”!

        Vali teema mis sulle kõige rohkem meeldib. Vaata kindlasti eelvaadet ja loe kasutajate arvustusi. Installimiseks kliki: 

        Paigalda ➜ Lülita sisse

        How to select a wordpress theme


        • 3. Aktiveeri soovituslikud pluginad (teate ilmumisel)!

        Mõned kujundusmallid võivad normaalse funtsionaalsuse tagamiseks sinult nõuda pluginate installimist. Paigalda ja lülita need sisse!

        required plugins for sydney theme


        5. SAMM

        Sisulehtede loomine



        • Kui sa soovid enda kodulehele hakata sisu (teksti, pilte või videosi) lisama, siis vajad sa alati kõigepealt sisulehte. Sisuleht on kõige alus! Nii nagu kunstnik või kirjanik vajab töötamiseks paberit, vajad sina samamoodi puhast lehte WordPressis.


        Sisulehtede (avaleht, kontakt jne) loomine


        Koostame kohe 5 sisulehte, et hiljem oleks menüü loomine mugav ja kiire. Kui sul pole ideid mis peaksid olema sisulehtede pealkirjad siis nimeta need harjutamise mõttes järgmiselt:

        Avaleht; Teenused; Portfolio; Blogi ja Kontakt

        Lehed ➜ Lisa uus ➜ Pealkirjaks: “Avaleht”➜ Avalda

        How to create new page in wordpress


        Sisulehe mallide (template) valik


        • Enne sisulehe avaldamist on võimalik valida millise struktuurse ehitusega antud sisuleht peab olema. Kas lehel kuvatakse menüüd? Kas sidebar on paremal/vasakul või puudub üldse? Üldiselt kehtib reegel: mida võimekam on theme seda suurem valik on sisulehe struktuuride valikul!

          Default Templatesidebar on paremal
          Full widthsidebar puudub üldse

        • Selecting page template in wordpress

        3 teekonda sisulehtede ehitamisel


        Kindlasti soovid sa kannatamatult teada kuidas teha kodulehte reaalselt. Näiteks kuidas saab lisada erinevaid sisuelemente ning nö. “mängida” värvidega. Milline on üldse see protsess tervikuna ja kui algajasõbralik on kasutajalides.

        WordPress pakub meile sisulehtede ehitamiseks kolme kanalit…

        How to build pages in wordpress

        • #1 – Visuaalredaktor

        Kõik mida sa näed meenutab Office Word programmi. Visuaalredaktorit kasutataks enamasti ainult blogi postituste ja uudiste kirjutamisel.

        • #2 – Tekst

        Tekstiredaktoris konventeeritakse olemasolev sisu HTML programmeermiskeelde. Antud redaktorit kasutavad pigem veebiarendajad sisu omanäolisemaks tegemisel.

        • #3 – Page Builder (ainult premium kujunduse lisa)

        Siin hakkab käima põhiline ehitusprotesess. Kodulehe loomine on justkui mäng lego klotsidega (valmis sisuelemendid). Live preview, drag and drop. Kõik on loogiline ja lihtne! Ühed võimekamad integreeritud builderid on WP Bakery ja Cornerstone. Siit soovitus: premium kujunduse valikul tutvu mis builderit nad pakuvad!


        Avalehe määramine


        Määra millist sisulehte kuvatakse kõigile külastajatele avalehena! WordPressis on vaikimisi avaleheks määratud blogipostituste sisuleht. Selle muutmiseks käitu järgmiselt:

        Settings ➜ Lugemine ➜ Tee linnuke: “Staatiline leht” ette ➜ Vali soovitud sisuleht ➜ Salvesta muudatused

        How to determine your front page


        Navigatsioonimenüü loomine


        • 1. – Kliki WordPressis “Menüüd” peale

        Välimus ➜ Menüüd ➜ “Sisesta pealkiri” ➜ Loo menüü

        • 2. Selekteeri soovitud sisulehed

        Selekteeri soovitud sisulehed mida kuvatakse menüüs. Ühtlasi tee linnuke Primary Menu ette millega ütleme, et tegemist on peamenüüga!

        How to create a menu in wordpress23

        • 3. Lohista lehed parimasse järjekorda

        Üldiselt on külastajad harjunud kui “avaleht” on menüüs esimene ja “kontakt” viimane sisuleht.

        How to create a menu in wordpress32

        • 4. Muuda menüümärgiseid (kui vajalik) ning salvesta

        Navigatsioonimärgised peavad olema lühiksed ja selged. Antud lahendus sälitab sisulehe pealkirja, kuid võimaldab menüüs kasutada teistsugust nimetust.

        Lõpetuseks kliki Salvesta menüü ning uuri kuidas menüü silmale paistab. Kohe järgmises sammus tutvustame kuidas saab menüüd disainiliselt kohendada.


        6. SAMM

        Kodulehe disainimine



        Kõiki globaalseid välimust puudutavaid muudatusi tehakse WordPressis rakendusest nimega “Kohanda” (Customize). Globaalsed muudatused tähendavad seda, et muudatused läbivad kogu veebilehte.

        Siin saad määrata näiteks läbivat kirjastiili, muuta menüü värve ja lisada logo/faviconi. Kohandamiste arvukus sõltub jällegi theme võimekusest. Jätke meelde: Page Builder võimaldab teha lokaalseid ja Customize globaalseid välimust puudutavaid muudatusi.

        Ava: Välimus ➜ Kohanda  

        How to customize your website2


        Sidebaride ehitamine


        • Esiteks vajad sa sisulehe malli kus sidebar on sisselülitatud. Vastasel juhul sa ei näe live-preview’d. Sidebar rakenduse sisse lülitamiseks liigu: Lehed➜ Vali sisuleht ning kliki “Muuda” ➜ Mall ➜ vali “Vaikimisi Mall”

          Alles seejärel ava: Välimus➜ Customize ➜ Widgets ➜ Sidebar 

          Vasakul pool asub vidinate nimistu mis on sidebaris hetkel aktiivsed. Paremal pool asuvad vidinad mis on üldse saadaval. Vidinate lisamiseks ja eemaldamiseks lohista hiirega neid soovitud suunas!

        • How to edit sidebar

        Kui sidebar on valmis ära unusta oma tööd salvestamast!


        Logo ja faviconi lisamine


        • 1. Nimeta veebilehe peakiri + lühikirjeldus

          Otsimootorid indekseerivad iga sinu sõna. Anna neile infot millest su veebileht räägib!

           2. Lae ülesse oma logo
          Soovitan laadida üles logo PNG formaadis, mis lubab salvestada pilte ilma taustavärvita!

          3. Lae ülesse favicon

          See on see nn. väike ikoon interneti brauseri aknas kuhu saab samuti lisada enda logo või mõne muu disainielemendi. 

        • How to add logo and favicon in wordpress

        Kui sul ei ole kedagi kes oskaks valmistada logo siis kasuta Designmantic logo generaatorit. See on kiire viis saamaks profesionaane logo!


        Pluginad – lisarakendused sinu veebilehele


        • Pluginad on valmiskirjutatud keerulised koodiread, mis teevad veebilehe tegemise tohutult lihtsamaks ja iga algajagi saab eputada oma veebilehel fancyde veebilahendustega. Enamasti on need kõik tasuta, kuid 100%-line funktsionaalsus avaneb peale litsentsi ostmist.

        • WordPress plugins

        WordPressi enda veebisaidil olev statistika väidab, et hetkel on saadaval üle 50000 plugina ja kokku on allalaadimisi toimunud üle 1,4 miljardi korra. Nii et tegemist on täiesti eraldiseisva suure turuga.


        WordPressi pluginate paigaldus


        1. Vali Pluginad ➜ Lisa uus
        2. Sisesta otsingusse nt. “Contact Form 7” (populaarseim kontaktvormide loomise plugin)
        3. Kliki Paigalda koheLülita sisse
        4. WordPressi menüüsse ilmub märgis “Kontakt”


        8 kohustuslikku pluginat kodulehe tegemisel


        Siin on nimekiri väärt pluginatest mida iga WordPressi kodulehe omanik võiks kasutada…

        1. TinyMCE Advanced
        Autor: Andrew Ozz; Paigaldusi: 2+ miljonit
        Palju rohkem tööriistu sisutöötlusredaktoris.

        2. Contact Form 7
        Autor: Takayuki Miyoshi; Paigaldusi: 3+ miljonit 
        Lihnte kuid paindlik kontaktvormide loomise plugin. NB! Kontaktvormide pluginatega töötled juba isikuandmeid ning kohustud lugejatele koostama privaatsuspoliitika sisulehe!

        3. WP GDPR Compliance
        Autor: Van Ons; Paigaldusi: 90 000+ 
        Tekitab kontaktvormidele privaatsuspoliitika tingimustega nõustumise kasti. 25.05.18 jõustunud isikuandmetekaitse üldmäärus (GDPR) kohustab veebilehe omanike privaatsuspoliitika näol täpselt välja tooma kuidas lugeja isikuandmeid (alates e-mailist) töödeldakse.

        4. Yoast SEO
        Autor: Team Yoast; Paigaldusi: 3+ miljonit
        Hea abimees tehnilisel optimeerimisel. Võimaldab muuta otsitulemustes olevaid pealkirju ja metakirjeldust.

         5. Shareaholic share buttons
        Autor: Shareaholic; Paigaldusi: 100 000+
        Tekitab modernsed sotsiaameedia jagamisnupud.

        6. W3 Total Cache
        Autor: Frederick Townes; Paigaldusi: 1+ miljonit
        WordPressi kiirendamise plugin.

        7. Duplicator
        Autor: Snap Creek; Paigaldusi: 900 000+
        Võimaldab teha veebilehest varundusi ning allalaadida neid oma arvutisse.

        8. Google Analytics by MonsterInsights
        Autor: MonsterInsights; Paigaldusi: 1+ miljonit
        Loob ühenduse Google Analytics statistikaprogrammiga, millega omad ülevaadet, kui palju sinu lehte külastatakse.


        Jagage seda tasuta õpetust!

        Me loodame siiralt, et Sa said teada kuidas teha kodulehte ning tegid seda. Kui see õpetus oli sinu jaoks kasulik, siis palun jaga seda! See motiveerib meid tooma ka järgmiste lugejateni kõige värskema materjali.

        Aitäh!

        Ettepanekud ja küsimused