Dizajn web stranice profesionalnog izgleda nije bio za svakoga, pogotovo jer smo se svi osjećali kao da apsolutno moramo biti profesionalci za kodiranje i web dizajn. U današnje vrijeme vidimo nove alate koji se pojavljuju za WordPress ekosustav, kako bi se pružilo sve lakše rješenje za dizajniranje web stranice i to nadohvat ruke većini početnika.
Što se tiče dizajna WordPress izgleda, dodatak smo već morali predati Visual Kompozitor, što je definitivno jedan od najboljih alata kada je u pitanju dizajn izgleda. Međutim, treba napomenuti da ovo rješenje nije prikladno za sve. To je razlog zašto ćemo vas u ovom tutorijalu više upoznati sa WordPress dodatak Elementor, što je a WordPress dodatak freemium (besplatan, ali proširiv pod pretplatom).
Gdje nabaviti Elementor za WordPress
Ozbiljno razmišljamo o tome da vam otkrijete potencijal dodatka, a besplatno rješenje će vam pomoći da započnete bez plaćanja novca. Ovo besplatno rješenje dostupno je na WordPress.org. Biti a WordPress dodatak, potonji je instaliran kao i svaki drugi dodatak s nadzorne ploče.
Ako dodatak uspije u potpunosti vas zadovoljiti, moći ćete dobiti kompletnu licencu sa svim funkcionalnostima na web mjestu službeni element ili.
Glavne karakteristike Elementara
Prije nego započnemo s vodičem s pregledom dodatka, prvo ćemo vas upoznati s glavnim značajkama dodatka (besplatna verzija i puna verzija).
| Besplatna verzija | Puna verzija |
|---|---|
| Više stupaca | Navigacijski meni, članak |
| Moduli Tekstovi, Titlovi | modul WooCommerce (proizvodi, kategorije) |
| Video moduli, slika, karusel, galerije, zvučni blok | Facebook integracija (stranica, gumb, komentari) |
| Modul za deljenje | Tabela cijene |
| HTML modul | Portfolio, obrazac |
| Modul za WordPress widget | Istraživački modul |
Imajte na umu da je ovo pomalo iscrpan popis različitih karakteristika koje nudi dodatak. Više detalja pronaći ćete u istražujući njihovu web stranicu.
Počnite sa Elementorom
Ovdje nećemo pokrivati cijeli postupak instalacije. Budući da je ovo WordPress dodatak, postupak instalacije je već objašnjen u prethodni tutorial. Međutim, nakon instalacije bit ćete preusmjereni na početnu stranicu dodatka.
Ako imate ovu stranicu na ekranu, 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 tražiti da registrirate svoju licencu.
Samo trebate kliknuti na njega da biste otišli na stranicu za registraciju i kliknuti na aktivirati.
Uobičajeno vam je potrebna vaša stranica potvrde ako je vaša licenca važeća.
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 koristite Elementor graditelj.
U praksi nećete uvijek trebati uređivati svoje postove pomoću Elementara. Stoga vas pozivam da dodatak koristite samo na stranicama. Klikom na dugme pristupit ćete Elementor dizajnerskom sučelju koje odaje dej vu vu (za one koji koriste WordPress Customizer).
Dakle, s lijeve strane imate razne kontrole koje nudi dodatak, a s desne strane imate pregled svojih izmjena u živo. U ovom uputstvu koristimo dvadeset šesnaest WordPress tema.
Elementarne sekcije
Sekcije u Elementoru su grupe blokova funkcionalnosti koje Elementor nudi. Broj sekcija zavisi od toga da li koristite punu verziju i da li koristite WooCommerce, Yoast SEO ili drugi kompatibilni dodaci. U zavisnosti od ovih uslova, imaćete više ili manje sekcija na svom interfejsu. Pošto koristimo punu verziju sa dodatkom WooCommerce aktiviran, ovako izgleda naš interfejs.
Kako postaviti blok elementa
Jednom kada proširite odjeljak, pronaći ćete Elementor Blocks. Razne blokove Elementor postavlja "Povuci i ispusti" na područje označeno isprekidanim linijama.
Kako odabrati izgled na Elementoru
Prije dodavanja bloka na Elementor, morate upamtiti da odaberete izgled klikom na dugme “+” 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 odjeljak će prikazati isti broj stupaca koji odgovaraju vašem izboru. U mom slučaju sam izabrao stupac sa 3 stupca.
Različiti blokovi sa znakom "+" unutar područja su područja koja mogu prihvatiti Elementor blokove. 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, i to naslovni blok i blok teksta.
Kako koristiti druge alate za dizajn
Nakon što završite s dizajnom, jedna od stvari koju ćete htjeti je spasiti svoj rad. Ovu ćete opciju pronaći na samom dnu odjeljka koji prikazuje različite odjeljke Elementara.
Imate izbor između direktnog spremanja (Objavi) i spremanja kao skice ili kao predložak. Kasnije ćemo istražiti ove različite tačke.
Tijekom dizajna, možda ćete htjeti i pregledati promjene bez dodatnog sučelja Elementara. Sve što trebate je kliknuti na ikonu oka.
Događa se da se tijekom dizajna dogodi greška (nehotična radnja). U ovom slučaju, Elementor nudi istoriju, koja vam omogućava navigaciju kroz sve vaše akcije.
Ovo će vam omogućiti lako vraćanje unatrag.
Opcija „Preglednik“, koja dolazi neposredno prije dugmeta povijesti, omogućava vam daljnje modificiranje različitih odjeljaka u odnosu na pregledač koji koriste posjetitelji. Ova vam opcija daje pristup naprednoj modifikaciji struktura odjeljaka (širina stupca). Ovdje morate vrlo pažljivo izvršiti promjene.
Dugme "Postavke" omogućava vam da između ostalih izmijenite određene opcije specifične za stranicu, poput naslova, istaknute slike ili statusa.
To je sve za ovaj vodič, Elementor ćemo istražiti više u sljedećem vodiču. Ne ustručavajte se pogledati Službena web stranica koji nudi mnogo uspešnije primere.
