✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Kuinka käyttää Elementor Page Builder -laajennusta

76

Mitä jos voisit hallita jokaista sivustosi suunnittelun pikseliä kirjoittamatta koodia?

Se on se tehtävä, jonka Elementor aloitti, ja tiedätkö mitä?

He tekivät sen!

Elementor on erittäin vankka sivunrakennustyökalu, jonka avulla voit luoda mukautettuja sivuja ja jopa kokonaisia ​​verkkosivustoja. Ja sinun ei tarvitse edes katsoa koodiriviä saati kirjoittaa mitään omaa.

Tässä Elementor-opetusohjelmassa opit käyttämään sivunrakennustyökalua täysin mukautettujen sivusuunnitelmien luomiseen.

Kuinka käyttää Elementoria

Jos haluat mieluummin katsoa videota, tämä vaiheittainen opetusohjelma kattaa kaiken:

Tilaa kilpailuteemat Youtubessa

Ensimmäinen askel on aloittaa asentamalla Elementor-laajennus.

Asenna Elementor

Elementor on ilmainen laajennus, ja se voidaan asentaa kuten mikä tahansa muu sivustollesi lisäämäsi laajennus.

Siirry Plugins > Add New -valikkoon ja käytä oikeassa yläkulmassa olevaa hakupalkkia etsiäksesi "elementor".

Kuinka käyttää Elementor Page Builder -laajennusta

Napsauta Asenna nyt -painiketta ja napsauta sitten Aktivoi, kun asennus on valmis.

Kun Elementor on asennettu, näet kaksi uutta valikkoa lisättynä verkkosivustollesi.

Kuinka käyttää Elementor Page Builder -laajennusta

Elementor-päävalikossa on joitain yleisiä asetuksia, mutta et rehellisesti sanottuna käytä niitä paljon. Muutoin se on pääasiassa linkkejä tukiresursseihin ja Elementor Pro -ominaisuuksiin.

Mallit-valikko on erittäin hyödyllinen, ja tarkastelemme sitä myöhemmin opetusohjelmassa.

Sivun muokkaaminen Elementorilla

Suurin osa Elementorilla tekemästäsi työstä tehdään Elementor-editorissa.

Pääset editoriin vierailemalla Viestit- tai Sivut-valikossa ja napsauttamalla sitten sivua, jota haluat muokata. Editorin sisällä näet uuden "Muokkaa Elementorilla" -painikkeen, joka vie sinut Elementor-editoriin.

Kuinka käyttää Elementor Page Builder -laajennusta

Vaikka voit käyttää sekä Elementor-editoria että normaalia sivun sisältöä yhdessä, siitä tulee yleensä sotkuinen ja hämmentävä. Tästä syystä suosittelen, että laitat kaiken sisältösi Elementoriin millä tahansa sivulla, jolla käytät sitä.

Kun napsautat sinistä muokkauspainiketta, sinut ohjataan editoriin.

Kuinka käyttää Elementor Page Builder -laajennusta

Kuten näet, se on määritetty kuten Live Customizer. Oikealla on esikatselu, ja vasemmalla näet widgetit.

Widgetit ovat Elementor-sivujen perusrakennuspalikoita, joten niiden käytön oppiminen on välttämätöntä.

Widget-valikon sisällä on muutamia eri osioita.

Yläosan Perusosio sisältää käytännöllisiä elementtejä, kuten tekstieditori-, otsikko- ja kuvake-widgetit.

Jos jatkat vierittämistä, näet vielä muutaman osion:

  • Pro: edistyneemmät widgetit, kuten viestiruudukot (vain Elementor Pro)
  • Yleistä: yleisemmin käytetyt widgetit (ilmainen)
  • Sivusto: kokonaisten sivustojen rakentamiseen Elementorilla (vain Elementor Pro)
  • WooCommerce: WC-kaupan luomiseen Elementorilla (vain Elementor Pro)
  • WordPress: kaikki normaalit WP-widgetisi

WordPress-osio on siisti, koska sen avulla voit käyttää kaikkia 17 WordPressin oletuswidgetiä sekä lisäosien lisäämiä widgetejä.

Kuinka käyttää Elementor Page Builder -laajennusta

Voit lisätä widgetin sivulle vetämällä ja pudottamalla sen esikatselussa olevaan kehystettyyn ruutuun.

Kuinka käyttää Elementor Page Builder -laajennusta

Kun olet lisännyt widgetin, löydät sivupalkista kaikenlaisia ​​mukautusvaihtoehtoja.

Kuinka käyttää Elementor Page Builder -laajennusta

Jokaisessa widgetissä on Sisältö-, Tyyli- ja Lisäasetukset-osio. Tässä on lyhyt katsaus joihinkin otsikon tyylivaihtoehtoihin:

Kuinka käyttää Elementor Page Builder -laajennusta

Voit muokata minkä tahansa widgetin sisältöä sivupalkin Sisältö-välilehdellä, mutta voit myös muokata sitä suoraan esikatselussa.

Kuinka käyttää Elementor Page Builder -laajennusta

Sen pitäisi antaa sinulle hyvä käsitys widgetien perusteista. Kuten olet nähnyt, widgetejä on valtava valikoima. Lisäksi saatavilla on jopa lisäosia, jotka sisältävät widgetejä, joita ei normaalisti ole saatavilla Elementorissa.

Tähän mennessä olet todennäköisesti innostunut siitä, mitä voit tehdä Elementorilla, mutta luota minuun, siellä on paljon muutakin.

Luo mukautettuja sivuasetteluja

Toistaiseksi olet nähnyt vain, kuinka widgetejä voidaan vetää ja pudottaa sivulle, mikä johtaa yksinkertaiseen, yhden sarakkeen suunnitteluun.

Voit myös napsauttaa pluspainiketta esikatselussa luodaksesi uuden sivurakenteen.

Kuinka käyttää Elementor Page Builder -laajennusta

Kun napsautat sitä, näet 12 erilaista rakennetta, joista voit valita.

Kuinka käyttää Elementor Page Builder -laajennusta

Kun valitset yhden, sivuosio luodaan ja voit vetää ja pudottaa widgetejä mihin tahansa sarakkeeseen. Tämän avulla voit ryhmitellä widgetit loogisiin osiin, ja voit jopa muokata osion tyyliä.

Jos napsautat sivun yläosassa olevaa kahvaa, näet sivupalkkiin päivityksiä uusilla vaihtoehdoilla.

Kuinka käyttää Elementor Page Builder -laajennusta

Tyyli-välilehden sisällä on paljon hienoja vaihtoehtoja, kuten taustavaihtoehto, joka on erityisen käytännöllinen.

Kuinka käyttää Elementor Page Builder -laajennusta

Voit käyttää väriä, liukuväriä, kuvaa, videota tai diaesitystä minkä tahansa sivuosion taustana.

Ja ikään kuin tämä ei olisi tarpeeksi, voit jopa muuttaa sivuosion yksittäisten sarakkeiden taustoja ja tyyliä.

Kuinka käyttää Elementor Page Builder -laajennusta

Mahdollisuus tyylittää widgetejä, sarakkeita ja osioita erikseen tarjoaa valtavan määrän hallintaa.

On vain yksi ongelma.

Huomaat nopeasti (jos et vielä ole), että sivun osioiden taustat näyttävät oudolta, koska ne rajoittuvat sivun keskelle. Näin voit korjata sen.

Asettelutilan korjaaminen

Käytän esimerkissäni Valittua teemaa, ja kuten näet, tekemäni sivuosion tausta pysähtyy äkillisesti sivun keskelle.

Kuinka käyttää Elementor Page Builder -laajennusta

Tämä johtuu siitä, että Elementor-sisältö vie saman tilan teemassa kuin viestin sisältö. Valitun teeman normaali sivu näyttää tältä:

Kuinka käyttää Elementor Page Builder -laajennusta

Tavallisille viesteille ja sivuille se näyttää hyvältä, mutta Elementorilla se voi tehdä suunnittelusta hankalan. Ratkaisu on käyttää sivumallia.

Voit muuttaa sivumallia siirtymällä editoriin, avaamalla Sivun attribuutit -osion ja käyttämällä tätä avattavaa Malli-valikkoa:

Kuinka käyttää Elementor Page Builder -laajennusta

Vaikka monet teemat, kuten Chosen, sisältävät omat sivumallinsa, Elementor lisää aina kaksi mallia sivustollesi:

  • Elementor Canvas: täysi leveys ilman ylä- tai alatunnistetta
  • Elementor Full Width: täysi leveys ylä- ja alatunnisteineen

Voit myös vaihtaa sivumallia Elementor-editorista napsauttamalla sivun asetukset -kuvaketta alareunassa ja käyttämällä sitten tätä Sivun asettelu -vaihtoehtoa:

Kuinka käyttää Elementor Page Builder -laajennusta

Kun se on poissa tieltä, sukeltakaamme takaisin upeiden sivujen tekemiseen Elementorilla.

Lisää valmiita lohkoja

Se, mitä olet tähän mennessä nähnyt Elementorista, on vaikuttavaa. Voit luoda mitä tahansa, mitä voit kuvitella käyttämällä työkaluja, joita olet nähnyt.

Haaste on kuitenkin pelottava. Haluatko todella luoda kokonaisen verkkosivun tyhjästä? Jos sinulla ei ole kokemusta web-suunnittelusta, luot todennäköisesti amatöörimäiseltä näyttävän sivun.

Kauniiden sivujen luominen on kovaa työtä!

Onneksi Elementor on varautunut tähänkin tilanteeseen.

Aiemmin opit, että voit lisätä sivurakenteen napsauttamalla pluspainiketta, mutta jos napsautat kansiokuvaketta, voit lisätä uuden lohkon.

Kuinka käyttää Elementor Page Builder -laajennusta

Näet tämän ponnahdusikkunan, jossa on satoja valmiiksi suunniteltuja sivuosia:

Kuinka käyttää Elementor Page Builder -laajennusta

Voit yksinkertaisesti napsauttaa mitä tahansa näistä lohkoista lisätäksesi ne sivullesi. Tässä Elementor alkaa todella loistaa.

Sen sijaan, että rakentaisit koko sivun tyhjästä, voit yksinkertaisesti lisätä valmiita lohkoja, kunnes sinulla on oikea suunnittelu ja asettelu. Tämä on tehty entistä helpommaksi lajitteluvaihtoehdoilla.

Luokka-pudotusvalikon avulla voit suodattaa lohkoja niiden käyttötarkoituksen mukaan.

Kuinka käyttää Elementor Page Builder -laajennusta

Tältä yksi lohkoista näyttää, kun se on lisätty sivulleni:

Kuinka käyttää Elementor Page Builder -laajennusta

Kuten näet, se koostuu widgeteistä, joten voit muokata lohkon jokaista osaa sarakerakenteesta tekstiin.

Lohkot ovat uskomattomia ja tekevät verkkosivujen luomisesta paljon helpompaa, mutta seuraava ominaisuus räjäyttää ne.

Lisää valmiita sivuja

Ponnahdusikkunassa on myös Sivut-välilehti. Napsauta sitä, niin näet tämän näytön:

Kuinka käyttää Elementor Page Builder -laajennusta

Tarkastelet satoja valmiiksi suunniteltuja sivuja, jotka on rakennettu Elementorilla. Voit lisätä ne heti sivullesi napsauttamalla mitä tahansa niistä.

Kuinka ihmeellistä se on?

Toki voit luoda omia mallejasi tyhjästä, mutta rehellisesti, miksi tekisit? Nopein ja helpoin tapa on löytää olemassa oleva malli, josta pidät, ja lisätä se sitten sivullesi.

Tämä prosessi tekee verkkosivujen rakentamisesta Elementorilla uskomattoman nopeaa, helppoa ja nautinnollista.

Vaikka Elementorin ilmainen versio sisältää vain kourallisen malleja, voit avata kaikki yli 200 Elementor Prolla.

Themeforest julkaisi äskettäin Elementor Template Kits -sivustonsa, ja sieltä löytyy paljon enemmän valmiita malleja ja lohkoja.

Olen myös koonnut kokoelman parhaista Elementor Template Kit -sarjoista, joista saatat pitää.

Käytä lohkojasi ja sivujasi uudelleen

Nyt olet nähnyt suurimman osan siitä, mitä Elementor voi tehdä, mutta vielä yksi ominaisuus on katettava.

Voit luoda mukautettuja sivuja käyttämällä tähän mennessä oppimaasi. Jos kuitenkin haluat rakentaa koko sivuston Elementorilla tai käyttää sitä asiakassivustoissa, tarvitset paremman työnkulun. Siellä Mallit-valikko tulee sisään.

Editorin alareunassa näkyy vihreä Päivitä-painike, jolla voit tallentaa muutokset.

Jos napsautat sen vieressä olevaa nuolta, näet vaihtoehdon tallentaa sivu uutena mallina.

Kuinka käyttää Elementor Page Builder -laajennusta

Sinun tarvitsee vain antaa sille nimi ja painaa "Tallenna".

Kuinka käyttää Elementor Page Builder -laajennusta

Sitten takaisin WordPress-hallintapaneeliin löydät mallisi tässä Mallit-valikossa:

Kuinka käyttää Elementor Page Builder -laajennusta

Voit luoda ja muokata malleja täällä muokkaamatta sivuja, joille ne on lisätty. Voit jopa käydä Osiot-välilehdessä ja luoda omia sivuosioita.

Kuinka käyttää Elementor Page Builder -laajennusta

Kun työskentelet sivulla, voit lisätä minkä tahansa valmiiksi suunnitelluista sivuistasi tai lohkoistasi ponnahdusikkunan Omat mallit -välilehdeltä.

Vaikka et tarvitse tätä toimintoa, jos teet vain yhden tai kaksi aloitussivua, siitä tulee välttämätön, kun rakennat sivustoja asiakkaille.

Aloita Elementorin käyttö

Huh huh!

Se oli pitkä opetusohjelma ja sisälsi paljon uutta tietoa, mutta toivottavasti pidit siitä.

Elementorilla voit:

  • Tee myyntisivuja
  • Luo kauniita malleja tavallisille sivuille
  • Rakenna täysin mukautettuja verkkosivustoja

Vaikka se on monimutkainen työkalu, kehittäjät ovat tehneet siitä intuitiivisen ja mielestäni he ovat saavuttaneet tämän "verkkosuunnittelun ilman koodia" tavoitteen tehokkaammin kuin mikään muu aiemmin valmistettu tuote.

Jos haluat viedä asioita pidemmälle, tutustu Elementor Prohon ja joihinkin sen sisältämiin lisäominaisuuksiin:

Katso Elementor Pro →

Siellä on ponnahdusikkunoita, lisää widgetejä ja jopa "teeman rakentaja" -ominaisuus, jota en ole edes käsitellyt tässä.

Jos opit paljon, jaa tämä artikkeli jonkun muun kanssa ennen kuin lähdet, ja kiitos paljon kun luit!

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja