MODUULIT 3-4: Elementor-editorin yleiskatsaus

MODUULIT 3-4: Johdanto Elementorin Editorin Käyttöön

Tässä moduulissa opit Elementor-editorin perusteet, sivujen rakenteen ja asettelun hallinnan sekä kuinka lisätä ja työstää vimpaimia (widgettejä). Tutustumme myös vimpaimien perusasetuksiin ja tarjoamme yleiskuvan muista tärkeistä toiminnoista. Seuraavat vaiheet vievät sinut läpi Elementor-editorin käyttöön ja sen tarjoamiin mahdollisuuksiin.

Vaihe 1: Sivun Rakentaminen ja Asettelu

Ennen verkkosivuston sisällön luomista ja muokkaamista on perustettava tarvittavat sivut sivustolle. Tässä vaiheessa opit luomaan uusia sivuja ja navigointivalikon sivustoasi varten.

  1. Uusien Sivujen Luominen:

    • Mene WordPress-hallintapaneeliin ja valitse "Sivut" > "Lisää uusi".
    • Anna sivulle nimeksi "Etusivu" ja tallenna se.
    • Luo vielä kolme uutta sivua nimeltä "Portfolio ja "Ota Yhteyttä" ja "Tietoa.

  2. Navigointi Valikon Lisääminen:

    • Mene WordPress-hallintapaneeliin ja valitse "Ulkoasu" > "Valikot".
    • Anna valikolle nimeksi "Valikko 1".
    • Poista turhat valmiiksi olevat linkit valikosta
    • Lisää valikkoon ensimmäisessä kohdassa luodut sivut.
    • Järjestä sivut valikossa oikeaan järjestykseen (ylimmästä alimpaan: "Etusivu" > "Portfolio" > "Ota Yhteyttä > "Tietoa")
    • Lopuksi valitse "Tallenna valikko".

Vaihe 2: Sivun Rakentaminen ja Asettelu

Verkkosivun rakenne ja asettelu ovat keskeisiä elementtejä hyvän käyttäjäkokemuksen luomisessa. Tässä vaiheessa opit Elementorin perusteet ja sen avulla työskentelyn.

Elementorin Editoriin Sisäänpääsy:

  • Mene WordPress-hallintapaneeliin ja valitse "Sivut" ja klikkaa "Etusivu" -sivustoa minkä loimme viime vaiheessa.
  • Valitse "Muokkaa Elementorilla" -painiketta. Näin pääset Elementorin editoriin.


Elementor Editorin Yleiskatsaus:

  • Keskellä sivustoa näet sivustoaluuen.
  • Vasemmalla näet Elementorin paneelin.
  • Elementorin paneelista pääset paneelin asetuksiin ja navigointiehtoihin.

Elementor Editorin paneeli:

  • Vimpaimet (otsikot, kuvat, teksti jne.)
  • Paneelin asetukset ja navigointivaihtoehdot
  • Alareunan työkalupaneeli
  • Navigointi-asetukset.
  • Historia-asetukset.
  • Esikatselu-asetuket.
  • Päivityspainike.

Elementor Paneeli

Vasemmalla puolella sivua on Elementor-paneeli. Paneelissa on luovia työkaluja, joita kutsutaan nimellä vimpaimet. Vimpaimilla voit lisätä sivullesi erilaisia elementtejä, kuten otsikoita, kuvia, tekstiä jne. Pääset aina tähän paneeliin klikkaamalla paneelin oikeassa yläkulmassa olevaa nappia.
muokattu_1tcob3ou.jpeg 11.8 kt

Paneelin asetukset ja navigointivaihtoehdot (kopio)

Paneelin yläreunassa vasemmalla on hampurilaisvalikko, josta löydät useita asetuksia ja navigointivaihtoehtoja. "Site Settings" -valikosta voit määrittää sivustosi asetukset globaalisti. "Teemanrakentaja" (Pro-versiossa) ,"Käyttäjän asetukset" -osiossa voit mukauttaa Elementorin asetuksia omien mieltymystesi mukaan. Tämän alla on "Etsijä" (pikanäppäin Ctrl/Cmd + E), joka mahdollistaa sivustolta etsimisen ja nopean navigoinnin. "Näytä sivu" -vaihtoehdolla voit tarkastella sivustoasi sen live-versiossa. "Poistu kojelautaan" -vaihtoehdolla poistut Elementorista WordPressin kojelautaan.
muokattu_4qtu6kt5.jpeg 10.5 kt

Paneelin alareunan työkalupaneeli.

Alareunassa on työkalupaneeli, jossa on muutama tärkeä työkalu lisää. Sivuasetuksissa voit muokata sivun nimeä sekä sivun asettelua. Navigator-asetuksissa (ctrl + i/cmd + i) voit nähdä sivuelementtien järjestetyn näkymän. Historia-asetuksissa voit tarkastella muokkaushistoriaasi nähdäksesi viimeisimmät muutokset tai palataksesi aikaisempiin versioihin. Responsiivisessa tilassa voit vaihtaa eri näytön kokojen välillä ja luoda responsiivisia sivustoja eri laitteille. Esikatselun avulla voit esikatsella muutoksiasi. Päivityspainike julkaisee muutoksesi. Näistä puhumme lisää myöhemmissä oppitunneissa.
muokattu_4coxgj21.jpeg 10.6 kt

Vaihe 3: Kokeile Elementorin muita ominaisuuksia!

Elementor tarjoaa laajan valikoiman lisäominaisuuksia ja widgettejä, joita voit käyttää verkkosivustosi parantamiseen. Perehdymme myöhemmin kurssilla muihin ominaisuuksiin, mutta voit perehtyä niihin itsenäisesti jo tässä vaiheessa mikäli haluat.

Elementor Tarjoaa Erilaisia Vimpaimia ja Ominaisuuksia:

  • Katso, mitä muita vimpaimia (Widget) ja toimintoja Elementor tarjoaa, kuten lomakkeita ja sosiaalisen median painikkeita.