Корисник:Nemanjais121/песак

Elementor

Tip	Privatno vlasništvo
Osnovana	2016
Osnivač	Yoni Luksenberg, Yakir Sitbon, Ariel Klikstein
Sedište	Izrael
Područja	Globalno
Usluge	WordPress plugin
Vebsajt	https://elementor.com/

Elementor je page builder za izradu web stranica koji omogućava korisnicima da stvaraju kvalitetne i custom web sajtove bez potrebe za poznavanjem kodiranja i programiranja. To je WordPress dodatak ili plugin koji koristi tehnologiju drag and drop, što znači da korisnici mogu jednostavno prevući i ispustiti elemente ili widgets na stranicu kako bi je dizajnirali i uredili. Elementor pripada grupi page buildera WYSIWYG (What You See Is What You Get), što znači da možeš da vidiš kako će izgledati stranica na klijentskoj strani dok je uživo praviš.

Ono što je velika prednost Elementora jeste u tome što je live, mi uživo kako prevlačimo elemente ili widgets možemo da vidimo kako izgleda naš sajt, ne moramo kao kad programiramo ili kodiramo da iskucamo kod da sačuvamo pa da vidimo kako to izgleda. Elementor dolazi s mnogim naprednim funkcijama i alatima koji Vam omogućavaju da stvorite bilo koju vrstu web sajta koju želite, uključujući blogove, web prodavnice, portfolije i još mnogo toga. Elementor takođe dolazi s velikim brojem gotovih dizajnova ili templates. Elementor je ubedljivo najpopularniji wordPress page builder sa preko 8.7 miliona aktivnih instalacija u 2023 ima četiri ipo zvezdice od strane 6000 hiljada korisnika..

Kako radi elementor

Elementorov drag and drop sistem je vizualni alat koji omogućava korisnicima da stvaraju, uređuju, kreiraju, menjaju web stranice jednostavnim povlačenjem i ispuštanjem elemenata na stranicu. Evo kako to izgleda:

1. Kada se korisnik prijavi u Elementor, on će biti dočekan sa praznom radnom površinom na koju će moći postavljati elemente. Na slici 1 možete videti kako to izgleda.
2. S leve strane radne površine nalaze se elementi koje korisnik može koristiti za oblikovanje stranice. To uključuje sve od naslova, tekstova i slika, do složenijih elemenata poput obrazaca za prijavu, cena, videa, dugmeta, ikonice, mape itd...
3. Kada korisnik pronađe željeni element, samo ga povuče mišem i ispusti na željenu poziciju na stranici.
4. Nakon što je element dodan, korisnik može lako mijenjati njegov izgled i postavke, uključujući fontove, boje, veličine, pozadine i još mnogo toga.
5. Elementor također omogućava korisnicima da kreiraju složen raspored i izgled stranica, tako što će koristiti kolone i sekcije. Korisnik samo povlači i ispušta elemente u odgovarajuće kolone i sekcije na stranici.
6. Elementor omogućava i izradu dinamičkih stranica, poput blogova ili arhiva, korištenjem dinamičkih widgeta i postavki. To znači da korisnik može stvoriti arhivu bloga ili stranicu kategorije samo jednim klikom i jednostavno ih prilagoditi.

Kako napraviti sajt u Elementoru

Ono što je veoma bitno pri pravljenju sajta u elementoru jeste da se razume šta su sekcije i kolone i elementi.

Sekcije nije ništa drugo nego jedan kontejner ili ti div(html element) koji se sastoji od kolona koje su takođe div-ovi u kome oblikujemo glavne blokove na stranici. Sekcije dodajemo na plus znak i kada kliknemo na plus pojaviće nam se pravougaonik gde možemo da izaberemo koliko kolona želimo. Ovo je sve slikovito prikazano na slici 2. Kolona je isto kontejner, element koji se koriste za organizovanje sadržaja unutar sekcija. Kolona je manja od sekcije i nalazi se unutar sekcije. Nakon što dodamo seckiju bitno je da odlučimo šta želimo u toj sekciji ukoliko želimo tekst prevući ćemo element teksta u kolonu i imaćemo tekst unutar kolone dok sa leve strane možemo da editujemo tekst odnosno da mu menjamo ili dodajemo css ili da mu menjamo kontent. Kod sekcija bitno je napomenuti da one dolaze sa nekih već podešenim osobinama kao što su širina margina ili razmak od sledećeg elementa.

Kako raditi sa sekcijama?

Kada dodate sekciju na radnu površinu sekcija će biti uokvirena plavom bojom i na vrhu sekcije imaćete ikonicu plusa, iksa i 6 malih tačkica u obliku pravougaonika. Klikom na plus izlazi vam ponovo opcija gde birate kakvu sekciju želite, da li želite dve kolone isti širine tri kolone itd... KLikom na minus briše Vam se trenutna sekcija klikom na šest malih kružića postaje Vam aktivna sekcija pre koje ste prešli kursorom. Kada označite sekciju dobićete sa leve strane tri kartice layout, style i advanced.

Kartica Layout

U kartici layout imamo opciju da namestimo da sekcija bude full width pošto je sekcija ima podrazumevanu šrinu iz razloga da na većim ekranima sadržaj sekcije ne bude raširen, već da ima fiksnu širinu. Onda imamo koliki razmak želimo da bude između kolona, pa koliku visinu želimo da ima sekcija, vertikalno poravnanje i da li želimo da promenimo opciju overflow. Nakon ovoga imamo da biramo kog tipa želimo da nam bude sekcija da li će to biti div, footer, header, aside ili span. Na kraju nam je ostala struktura da li želimo vratimo strukturu na podrazumevano kao kad smo je ubacili ili želimo da promenimo da li želimo nam odnos kolona bude 60:40 ili 70:30.

Kartica Style

Kartica style se sastoji od nekoliko delova. Prvi deo se odnosi na pozadinu sekcije i možemo da podesimo da imamo na prelazak kursora drugu boju. Ipod pozadine imamo background overlay. Ova opcija iako na neke trenutke može biti ista kao i pozadina ili background ima svoje različitosti. Razlika je tome što opcija "Background" odnosi se na postavljanje pozadinske slike, boje ili gradienta na određeni element ili sekciju. S druge strane, opcija "Background Overlay" (prekrivanje pozadine) omogućuje vam dodavanje transparentnog sloja boje ili gradienta iznad pozadinske slike ili boje kako biste postigli efekt zamagljivanja ili prigušivanja. Posle ovoga imamo border gde možemo podešavamo okvir naše sekcije kao i senku koja će naša sekcija imati. Shape divider je opcija posle border-a ovo je funckcija u Elementoru koja vam omogućuje dodavanje dekorativnih oblika na krajeve sekcija. To su vizualni elementi koji se koriste za stvaranje privlačnog i modernog izgleda web stranice. Na kraju imao tipografiju gde korisnik može da odluči koje boje će tipografija koje veličine kog poravnanja itd...

Kartica advanced

Kartica advanced ima podešavanja za spacing ili margin i padding. Takođe možemo dodavati klasu sekciju ili id to su css atributi kojima se može dodavati određena svojstva. Motion effects predstavlja dodavanje animacija na sajt. Onda imamo responsivnost koja se koristi u situacija kada želimo da nešt prikrijemo na mobilni ili tablet ili desktop računarima ili da promenimo redosled. Atributi i custom css spadaju pod elementor pro licencom nisu dostupni pod besplatnom verzijom. Custom css predstavlja funkciju gde možemo da dodajemo svoj css, takođe css se može dodavati unutar teme. Custom atributi su dodatni atributi koje možete dodijeliti HTML elementima kako biste prenijeli dodatne informacije ili prilagodili njihovo ponašanje. Na primer data-target je jedan atribut.

Kako raditi sa kolonama

Kolona ima isto tri kartice da bi je selektovali i mogli pristupiti njenim podešavanjima trebamo da kada pređemo mišem preko kolone da kliknemo u gornjem levom uglu ukonicu. Tako nam postaje dostupne ponovo tri kartice layout, style, advanced. Sve tri kartice imaju skoro ista podešavanja sa nekim malim razlikama. Dobra stvar kod elementora jeste što sve tri ove kartice su za skoro sve elemente imaju slična ili malo drugačija podešavanja.

Kartica Layout

Kartica layout je veoma slična ima skoro ista podešavanja kao i kod sekcije s tim da imamo širinu kolone imamo vertikalno porvananje, horizontalno poravnanje, spacing ili razmak između kolona u px i da da li želim da promenim html tag

Kartica Style

Kartica style ima background, background overlay border i tipografija sva opcije su iste kao kod style sekcije

Kartica Advanced

Podešavanja su ista kao i kod advanced sekcije.

Kako raditi sa unutašnjih sekcijama

Ovo je jako korišćen element u izradi web stranica razlika u odnosu na običnu sekciju je u tome što obična sekcija služi kao kontejner za elemente i ne može se dalje podešavati ili organizovati na više nivoa, dok kod unutrašnje sekcija je moguće stvaranje unutrašnjih sekcija unutar već postojećih sekcija ili kolona. To znači da možete kreirati složene rasporede elemenata i organizovati ih na više slojeva. Unutar Inner Section elementa, možete primenjivati različite stilove, postavke pozadine, margine, padding, granice itd... na nivou svake unutrašnje sekcije. Kroz Inner Section element možete postaviti različite postavke kao što su pozadina, margine, padding, granice i slično. Možete prilagoditi izgled svake unutrašnje sekcije prema vašim potrebama, čime stvarate bogate i složene veb stranice. Unutar Inner Section elementa, možete dodavati druge Elementor module kao što su tekst, slike, video zapisi, forme, dugmad i mnoge druge. Ovo vam pruža mogućnost da unutar unutrašnje sekcije kreirate kompleksne rasporede elemenata i postignete željeni dizajn.

Takođe, Inner Section element je veoma koristan za prilagođavanje responsivnosti vaše veb stranice. Možete postaviti različite podešavanja za svaku unutrašnju sekciju u zavisnosti od veličine ekrana, što omogućava da se vaša stranica pravilno prikazuje na različitim uređajima i rezolucijama. Na slici 2 možete videti kako to izgleda.

Kako raditi sa containers

Kontejneri predstavlju nov način pravljenja web sajtova komplikovaniji u odnosu na korišćenje sekcija i kolona, ali prednost je u tome što ima mnogo manje koda. Ono što je potrebno za pravljenje sajtova u kontejnerima jeste poznavanje css flex-a.

Flexbox kontejneri koriste moć CSS fleksboksa kako bi ubrzali izgradnju veb sajtova, pružajući vam veću slobodu da tačno kreirate željeni dizajn. Kontejneri takođe omogućavaju poboljšano učitavanje stranica i veću kontrolu responsivnosti, to se postiže omogućavanjem mogućnosti menjanja širine, visine i redosleda svakog elementa kako bi se najbolje ispunio dostupan prostor kontejnera. Kontejneri imaju isto tri kartice kao i sekcije i kolone, s tim da se neka podešavanja razlikuju. Vrlo je bitno znati da kontejner jeste samo omotač ili div koji ima svojstvo flex.

Kartica Layout

U kartici layout imamo opciju da izaberemo da li želimo da nam content bude određene širine ili ti boxed ili želimo da nam bude full width da zauzima celu širinu. Ispod širine imamo funkciju koliko želimo da nam bude visina kontejnera u nekim merama kao što su px ili vh(viewport height). Nakon ovoga imamo funkciju items, ovo je ujedno i najvažnija opcija. Prva opcija koju imamo jeste direction. Direction znači da li želimo da nam items budu u redu u koloni ili obrnutom redu ili obrnutoj koloni. Nakon toga imamo justify-content. Justify-content je CSS svojstvo koje se koristi u flexbox-u za kontrolisanje pozicije fleksibilnih elemenata duž glavne ose njihovog kontejnera. Određuje raspodelu prostora između i oko fleksibilnih elemenata. Ukratko ovo svojstvo nam daje mogućnost da kontrolišemo raspodelu ili poziciju elemenata koji su deca kontajnera. Justify-content određuje horizontalnu ili vertikalnu poziciju elmenata. U zavisnosti da li je css svojstvo flex-direction podešeno na row ili column. Ukoliko je flex-direction podešeno na row onda pomoću justify-content kontrolišemo horizontalno pozicioniranje elemenata ukoliko je podešeno na column onda kontrolišemo vertikalno pozicioniranje elemenata. Postoje nekoliko vrednosti koje se mogu koristiti sa justify-content koje direktno određuju poziciju elemenata:

• flex-start: Ova vrednost poravnava fleksibilne elemente na početku kontejnera
• flex-end: Poravnava fleksibilne elemente na kraju kontejnera
• center: Horizontalno centriranje fleksibilnih elemenata unutar kontejnera
• space-between: Ravnomerno raspoređuje fleksibilne elemente duž glavne ose, sa prvim elementom poravnatim na početku, a poslednjim elementom poravnatim na kraju
• space-around: Ravnomerno raspoređuje fleksibilne elemente duž glavne ose, sa jednakim prostorom pre, između i posle elemenata
• space-evenly: Slično kao space-around, ravnomerno raspoređuje fleksibilne elemente duž glavne ose, ali sa jednakim prostorom pre prvog elementa i posle poslednjeg elementa
• stretch: Ova vrednost rasteže fleksibilne elemente da popune ceo kontejner duž glavne ose

Ispod justify-content funkcije imamo funckiju align-items koja radi sličnu stvar kao justify-content s tim da je razlika u tome što align-items radi na vertikalno poravnanju ako je flex-direction svojstvo postavljeno na row, a ako je postavljeno na column onda radi horizontalno poravnavanje. Kod align-items imamo nekoliko vrednosti:

• flex-start - Poravnanje elemenata na početku kontejnera
• flex-end - Poravnanje elemenata na kraju kontejnera
• center - Centralno poravnanje elemenata
• baseline - Poravnanje elemenata na osnovu njihove bazne linije
• stretch - Rastezanje elemenata kako bi popunili visinu kontejnera

Nakon justify-content i align-items imamo gap koji predstavlja razmak između elemenata po podrazumevanoj vrednosti to je 20px. Na kraju imamo wrap opciju. Wrap je CSS svojstvo koje se koristi u flexbox-u kako bi se odredilo da li će fleksibilni elementi prelaziti u novi red ili će ostati u istom redu unutar svog kontejnera. Wrap ima dve osnovne vrednosti:

• nowrap (podrazumevana vrednost): Kada je ovaj vrednost postavljena, fleksibilni elementi će ostati u istom redu i mogu se preklopiti ukoliko je kontejner premalen da ih sve prikaže.
• wrap: Kada je ova vrednost postavljena, fleksibilni elementi će se prelomiti u novi red kada dostignu kraj kontejnera. Takođe, svaki red fleksibilnih elemenata će se automatski prilagoditi širini kontejnera, omogućavajući im da se prikažu ispravno.

Wrap se često koristi kada se radi sa fleksibilnim elementima koji imaju različite širine ili kada je potrebno da se omogući responzivnost i prilagođavanje elemenata na različitim veličinama ekrana. Nakon ovoga imamo još i dodatne opcije, a to su opcije overflow i da izaberemo tip html elementa.

Kartica style

Kartica style ima ista podešavanja kao i sekcija, a to uključuje pozadinu pozadinski overlay, okvir i shape divider.

Kartica advanced

Kartica advanced ima iste opcija kao i sekcija sa nekim dodacima, a ti dodaci su align-self, order i size.

Align-self je CSS svojstvo koje se koristi u flexbox-u da bi se pojedinačno kontrolisalo vertikalno poravnanje pojedinačnog fleksibilnog elementa unutar kontejnera. To omogućava fleksibilnom elementu da se postavi drugačije od ostatka elemenata u kontejneru. Vrednosti koje se mogu koristiti sa align-self su: flex-start, flex-end, center, baseline i stretch. Na primer, postavljanje align-self na flex-start će poravnati pojedinačni element na početak kontejnera, bez obzira na ostatak elemenata.

Order je svojstvo koje se koristi u flexbox-u za promenu redosleda prikaza fleksibilnih elemenata unutar kontejnera. Podrazumevani redosled elemenata je određen njihovim rasporedom u HTML kodu. Korišćenjem order svojstva, možete promeniti taj redosled bez menjaja HTML strukture. Svaki fleksibilni element ima svoju vrednost za order, koja može biti pozitivna, negativna ili nula. Manja vrednost za order će premestiti element prema početku kontejnera, dok će veća vrednost premestiti element prema kraju kontejnera. Ovo svojstvo je korisno kada je potrebno prilagoditi redosled prikaza elemenata na osnovu različitih rasporeda ekrana ili prilagođavanja sadržaja. Može se koristiti za stvaranje responsivnih rasporeda i poboljšanje korisničkog iskustva na različitim uređajima.

I za kraj imamo size kod size imamo par opcija none da ne stavimo ništa imamo grow, shink, custom.

Grow (rast) u CSS fleksboksu se koristi za definisanje kako će se fleksibilni elementi širiti i popunjavati raspoloživi prostor na glavnoj osi kontejnera. Vrednost grow određuje koliko će svaki element da raste u odnosu na ostale. Podrazumevana vrednost je "0", što znači da element neće rasti i zadržaće svoju početnu širinu. Ako svim elementima postavite vrednost 1, svi će podjednako rasti i zauzeti jednaku širinu. Ako, na primer, jednom elementu postavite 2, a ostalim elementima 1, taj element će rasti brže i zauzeti više prostora na osi u odnosu na ostale.

Shrink (skupljanje) u CSS fleksboksu se koristi za definisanje kako će se fleksibilni elementi smanjivati i prilagođavati raspoloživi prostor na glavnoj osi kontejnera. Vrednost shrink određuje koliko će svaki element da se smanjuje u odnosu na ostale. Podrazumevana vrednost je "1", što znači da će se elementi smanjivati podjednako da bi stali u raspoloživi prostor. Ako svim elementima postavite vrednost "0", oni se neće smanjivati i zadržaće svoju početnu širinu. Ako, na primer, jednom elementu postavite veću vrednost "2", a ostalim elementima "1", taj element će se manje smanjivati u odnosu na ostale kada dođe do ograničenja prostora.

Custom označava da sami pravimo i prilagođavamo našim potrebama.

Prednosti kontejnera

• Veća sloboda u kreiranju dizajna

Dodavanjem podkontejnera unutar roditeljskog kontejnera, imaćete bolju kontrolu nad smerom, poravnanjem, redosledom, dužinom i postavljanjem vidžeta u Elementoru. Dodatna pogodnost je što vam nije potrebno dodavati dodatne sekcije ili kolone.

• Fleksibilan dizajn sajta

Sa kontejnerom imamo mogućnost da promenimo redosled elemenata veb stranice, čime ih činite lakšim za prilagođavanje različitim veličinama ekrana. Koristeći kontejnere, možete osigurati da se elementi vaše stranice prikažu u pravilnom redosledu bez obzira na veličinu ekrana - rezultirajući u mnogo boljem korisničkom iskustvu.

• Bolja brzina učitavanja web stranice

Kontejneri poboljšavaju performanse veb stranica jer sadrže samo jedan omotačni element: kontejner. Ovo se razlikuje od sekcija i kolona koje imaju dva omotačna elementa. Dodavanje kontejnera smanjuje veličinu DOM. Ovako smanjen objektni okvir može, ako se pravilno implementira, poboljšati performanse veb stranice.

Klikom na znak plus dobijamo mogućnost da izaberemo container koji želimo da želimo sa dve kolone ili samo sa jednom kolonom ili sa tri kolone... Ono što je isto kao i kod sekcija i kolona jeste selektovanje prelaskom mišom preko container-a kliknemo na 6 tačkica i selektovali smo container i pristupili smo njegovim podešavanjima.

Prednosti i mane

Prednosti

Elementor ima dosta prednosti neke su gore već pomenute, ali ovde na jednom mestu možete videti skori pa sve:

• Pažnja prema detaljima

U većini slučajeva, teško je pronaći programere koji imaju pedantnu pažnju prema detaljima. Čak i front-end programeri često se fokusiraju na funkcionalnost, a zapostavljaju sitne detalje dizajna, što u mnogim slučajevima dovodi do toga da izgrađena verzija dizajna bude dosta različita od samog dizajna ili ne zadovoljava kriterijume koje je očekivao dizajner. Elementor i drugi slično moćni alati omogućavaju dizajnerima da sami izgrade ono što dizajniraju, a dizajneri obično imaju mnogo veći fokus na ovim sitnijim detaljima, što rezultira mnogo kvalitetnijim finalnim proizvodom (barem u pogledu usklađivanja s dizajnom). Ovo takođe ubrzava bilo kakve iteracije dizajna i olakšava izmene sadržaja na dizajnu tokom celog procesa.

• Lako pravljenje responsive sajta

Responsivnost je postala ključna za uspeh svih sajtova. Danas, ako vaš sajt nije responsivan i prilagođen mobilnim uređajima, ne možete očekivati da će dobro pozicionirati na veb pretraživačima ili da će posetioci sajta zadržati na sajtu ukoliko nije responsive-an sajt. Elementor vam omogućava da kreirate responsivan web dizajn i pregledate svoje stranice na različitim ekranima kako biste bili sigurni da savršeno funkcioniše na svim uređajima.

• Jednostavno za upotrebu

Sa Elementorom, svako može kreirati sajt čak i bez znanja o izgradnji sajtova i profesionalnom kodiranju. Možete prilagođavati svoje stranice onako kako želite i kreirati kompleksne dizajne koristeći ovaj alat. Štaviše, Elementor ima mnogo gotovih šablona i dizajnova koji su dostupni, pa ako ne želite da trošite puno vremena na kreiranje sopstvenog dizajna, možete koristiti njihove gotove šablone i malo ih prilagoditi kako bi vaš sajt bio jedinstven.

• Pristupačnost

Elementor postoji u dve verzije free i pro verziju. Pro verzija sadrži na deseti više elemenata i dosta mogućnosti u odnosu na free verziju. Iako je free verzija ima dosta manje elemenata nego pro verziju još uvke se može napraviti dosta dobar sajt koji će zadovoljiti vaše potrebe

• Zajednica

Korisnici su veoma brzo prepoznali kvalitet Elementora i tako je brzo počela da se širi zajednica koja je pravila veliki broj dodataka koji su nadoknađivali neke mane Elementora. Prednost u zajednici je u tome što ukoliko imate problem veoma lako možete oći do osobe koja je imala isti problem ili koja zna rešenje za taj problem.

Mane

Kao što svaki alat ima mane tako i elementor ima mane, a ovo su neke od njih:

• Spora brzina sajta

Prilikom kreiranja sajta elementor generiše dosta nepotrebnog koda u odnosu na konkurenciju, koji može dosta usporiti web sajt. Da bi se mogli praviti lako web sajtovi elementor pravi dosta nepotrebnog html, css, javascript koda koji kasnije web browser-u treba vreme da učita ceo sajt. Sporije učitavanje sajta dovodi do problema lošeg korisničkog iskustva kao i do lošijeg pozicioniranja na web pretraživačima ili seo.

• Kreiranje kompleksnijih sajtova

Još jedna mana jeste kada želimo da napravimo nešto što elementor nam ne nudi onda smo primorani da programiramo ili kodiramo. Međutim tu dolazi do problema neko ne zna da programira pa se odluči da skine neki dodatan plugin, ali to može biti problem jer ukoliko koristimo veliki broj plugin-ova tada usporavamo sajt ili ukoliko želimo da programiramo tada moramo da poznajemo sam page builder kako bi taj kod bio što efikasniji.

Istorija

Elementor je osnovan 2016. godine od strane Yoni Luksenberg-a i Ariel Klikstein-a. Evo nekih prekretnica u njihovom razvoju:

• 1 milion veb sajtova napravljenih sa Elementor-om: 5. jula 2018.
• 2 miliona veb sajtova napravljenih sa Elementor-om: 18. februara 2019.
• 3 miliona veb sajtova napravljenih sa Elementor-om: 14. avgusta 2019.
• 4 miliona veb sajtova napravljenih sa Elementor-om: 29. januara 2020.
• 5 miliona veb sajtova napravljenih sa Elementor-om: 12. maja 2020.
• 8.7 miliona veb sajtova napravljenih sa Elementor-om: 21. januara 2023.

Elementor je objavio besplatnu verziju svog dodatka 3.4.2 i plaćenu verziju Elementor Pro 3.3.7 u avgustu 2021.

U maju 2019. godine, Elementor tim je zvanično objavio svoju temu "Hello" na WordPress.org platformi. Hello tema je minimalistički okvir za teme, specijalno dizajniran za upotrebu sa Elementor-om.