Dizajn web stranice profesionalnog izgleda nije bio za svakoga, pogotovo jer smo svi smatrali da apsolutno trebate biti profesionalni kodirač i web dizajner. U današnje vrijeme vidimo nove alate koji se pojavljuju za WordPress ekosustav, kako bi se pružilo sve jednostavnije rješenje za dizajn web stranice i to nadohvat ruke većini početnika.
Što se tiče dizajna WordPress izgleda, dodatak smo već morali predati Visual Skladatelj, koji je definitivno jedan od najboljih alata kada je u pitanju dizajn izgleda. Međutim, treba napomenuti da ovo rješenje nije prikladno za svakoga. To je razlog zašto ćemo vas u ovom vodiču detaljnije upoznati s WordPress plugin Elementor, koji je a WordPress plugin freemium (besplatno, ali proširivo uz pretplatu).
Gdje nabaviti Elementor za WordPress
Ozbiljno razmatramo da vam otkrijemo potencijal dodatka, a besplatno rješenje pomoći će vam da započnete bez plaćanja novčića. Ovo besplatno rješenje dostupno je na WordPress.org. Biti WordPress plugin, potonji se instalira kao i svaki drugi dodatak s nadzorne ploče.
Ako dodatak uspije u potpunosti vas zadovoljiti, moći ćete dobiti potpunu licencu sa svim funkcionalnostima na web mjestu službeni element ili.
Glavne značajke Elementara
Prije nego što započnemo s vodičem s pregledom dodatka, prvo ćemo vas upoznati s glavnim značajkama dodatka (besplatna verzija i puna verzija).
| verzija Besplatno | Puna verzija |
|---|---|
| Više stupaca | Navigacijski izbornik, članak |
| Moduli Tekstovi, Naslovi | Moduli WooCommerce (proizvodi, kategorije) |
| Video moduli, slika, vrtiljak, galerije, zvučni omot | Facebook integracija (stranica, gumb, komentari) |
| Modul dijeljenja | cijene Tablica |
| HTML modul | Portfolio, obrazac |
| Modul za WordPress widget | Istraživački modul |
Imajte na umu da je ovo pomalo iscrpan popis različitih značajki koje nudi dodatak. Više detalja pronaći ćete u istražujući njihovu web stranicu.
Započnite s Elementorom
Ovdje nećemo pokrivati cijeli postupak instalacije. Budući da je ovo WordPress dodatak, postupak instalacije je već objašnjen u prethodni udžbenik. Međutim, nakon instalacije bit ćete preusmjereni na početnu stranicu dodatka.
Ako imate ovu stranicu na zaslonu, onda ste ispravno instalirali Elementor dodatak. Trenutno koristimo punu verziju za ovaj vodič, ali sučelje se ne bi trebalo previše razlikovati od besplatne verzije.
Prije odlaska na sučelje za uređivanje, pozvat ću vas da registrirate svoju licencu. Ovo vrijedi samo za one koji su se odlučili za punu verziju. Ako imate besplatnu verziju, možete prijeći na sljedeći odjeljak. Da biste registrirali svoju licencu, primijetit ćete obavijest na WordPressu koja će zatražiti da registrirate svoju licencu.
Jednostavno morate kliknuti na nju da biste otišli na stranicu za registraciju i kliknite na Aktivirati.
Obično trebate stranicu za potvrdu ako vaša licenca važi.
Ako ne dođete na ovu stranicu, pozivam vas da kontaktirate programere dodatka za više informacija pomoć oko problema.
Kako koristiti Elementor
Elementor radi na stranicama i postovima na WordPressu. Bez obzira koristite li klasično sučelje ili novo Gutenbergovo sučelje, vidjet ćete gumb koji će vas tražiti da upotrijebite graditelj Elementor.
U praksi nećete uvijek trebati uređivati svoje postove pomoću Elementara. Stoga vas pozivam da dodatak koristite samo na stranicama. Klikom na gumb pristupit ćete dizajnerskom sučelju Elementor koje daje osjećaj dejà vu (za one koji koriste WordPress Customizer).
Dakle, s lijeve strane imate razne kontrole koje nudi dodatak, a s desne strane imate pregled svojih promjena uživo. U ovom uputstvu koristimo temu Twenty Sixteen WordPress.
Odjeljci elementa
Sekcije u Elementoru su skupine blokova funkcionalnosti koje Elementor nudi. Broj odjeljaka ovisi o tome koristite li punu verziju i koristite li WooCommerce, Yoast SEO ili drugi kompatibilni dodaci. Ovisno o ovim uvjetima, imat ćete više ili manje odjeljaka na vašem sučelju. Budući da koristimo punu verziju s dodatkom WooCommerce aktivirano, ovako izgleda naše sučelje.
Kako postaviti blok Elementor
Jednom kada proširite odjeljak, pronaći ćete Elementor Blocks. Razne blokove Elementor postavlja "Povuci i ispusti" na područje označeno isprekidanim crtama.
Kako odabrati izgled na Elementoru
Prije dodavanja bloka na Elementor, ne zaboravite odabrati raspored klikom na gumb "+" na istaknutom odjeljku.
Ovisno o vašim potrebama, odabrat ćete izgled koji vam najviše odgovara. Nakon što odaberete izgled, istaknut će vam prikaz tog odjeljka na istom području. Ovaj će odjeljak prikazati isti broj stupaca koji odgovaraju vašem izboru. U mom slučaju odabrao sam stupac s 3 stupca.
Različiti blokovi sa znakom "+" unutar područja su područja koja mogu prihvatiti blokove Elementor. Ako dodate blok Elementor, a da prethodno niste odabrali raspored, izgled jednog stupca bit će odabran prema zadanim postavkama.
Odjeljci elemenata mogu se preuređivati međusobno, slijedeći isti princip "povuci i ispusti". Također možete izbrisati odjeljak ako ga više ne želite koristiti.
Evo primjera odjeljka koji sadrži 2 bloka, naime naslovni blok i blok teksta.
Kako koristiti druge alate za dizajn
Nakon što završite s dizajnom, jedna od stvari koju ćete htjeti je spremiti svoj rad. Ovu ćete opciju pronaći na samom dnu odjeljka koji prikazuje različite odjeljke Elementara.
Možete odabrati spremanje izravno (Objavi) i spremanje kao skicu ili kao predložak. Kasnije ćemo istražiti ove različite točke.
Tijekom dizajna možda ćete htjeti pregledati promjene bez dodatnog sučelja Elementara. Sve što trebate je kliknuti ikonu oka.
Događa se da se tijekom dizajna dogodi pogreška (nehotična radnja). U ovom slučaju Elementor nudi povijest, koja vam omogućuje navigaciju kroz sve svoje akcije.
To će vam omogućiti lako vraćanje unatrag.
Opcija "Preglednik", koja dolazi neposredno prije gumba povijesti, omogućuje vam daljnju izmjenu različitih odjeljaka u odnosu na preglednik koji koriste posjetitelji. Ova vam opcija daje pristup naprednoj modifikaciji struktura odjeljaka (širina stupca). Ovdje morate vrlo pažljivo unijeti promjene.
Gumb "Postavke" omogućuje vam izmjenu određenih opcija specifičnih za stranicu, poput naslova, istaknute slike ili statusa.
To je to za ovaj vodič, Elementor ćemo istražiti više u sljedećem vodiču. Ne ustručavajte se pogledati Službena web stranica što nudi mnogo uspješnije primjere.
