Verujem da ste se do sada naučili kako se koriste osnovne funkcije Elementor-a i da možemo da pređemo na sledeći korak – kreiranje novog Web sajta. Već sam pomenuo da se među fajlovima za vežbu nalazi PDF dokument u kome je prikazan njegov budući izgled a pošto sam u međuvremenu podesio sve neophodne parametre, sada sam spreman da realizujem ove planove. U tom cilju ću koristiti različite vidžete jer se njihovim prilagođavanjem može kreirati skoro svaka Web stranica.

Za početak ću kreirati nekoliko tipskih odeljaka a zatim ih iskoristiti kao šablon za formiranje konačnog sadržaja i na taj način znatno ubrzati čitav postupak. U tom cilju je potrebno da kreiram novu stranicu, pa ću zato kliknuti na ikonicu na kojoj su prikazane tri horizontalne linije (Hamburger Menu) a zatim izborom opcije Exit To Dashboard prekinuti rad u Elementor-u. Za povratak na listu koja sadrži sve postojeće stranice je dovoljno kliknuti na ikonicu sa slovom W koja se nalazi u gornjem levom uglu a pošto ja imam nameru da rad nastavim na stranici koja nosi naziv Design & Services, dovoljno je da kliknem na ovu stavku i zatim pokrenem funkciju Edit with Elementor. Čim se na ekranu pojavi kompletno radno okruženje, neće mi biti teško da selektujem tekst koji predstavlja naziv stranice i zatim u donjem levom uglu potražim ikonicu pod nazivom Settings. To će za rezultat imati prikazivanje osnovnih parametara pa sada treba još samo da aktiviram opciju Hide Title i na taj način uklonim ovaj podatak. Osim toga, ne bi bilo loše da širinu stranice uskladim sa ostalim sadržajima a to se može postići ako za parametar Page Layout izaberem opciju Elementor ful Width. To će se automatski odraziti na prikaz sa desne strane, što znači da sam sada spreman za sledeći korak tj. unos novih elemenata.

Pre toga je potrebno da rezervišem odgovarajući prostor, pa ću u tom cilju kliknuti na ikonu sa znakom plus (+) i izabrati polje koje predstavlja jednu kolonu. Nakon toga je potrebno da proverim da li je izabran čitav odeljak tj. da li je na njegovom vrhu prikazano svetlo plavo polje i da njegovu širinu svedem na 1200 piksela. Sledeći parametar koji treba promeniti se odnosi na njegovu visinu (Height), pa ću zato izabrati opciju Min Height i zatim njenu vrednost ograničiti na 40% trenutno dostupnog prostora.

Ako nakon toga pređem na odeljak u kome se nalaze opcije za oblikovanje (Style), biću u prilici da ovom segmentu dodelim pozadinsku sliku. To se može postići izborom ikone u formi četkice (Classic) da bi se nešto niže pojavila opcija koja mi omogućava da izaberem odgovarajuću pozadinu i izborom dugmeta Insert Media dovršim ovu operaciju. Sada se postavlja pitanje da li je moguće preciznije odrediti njen položaj a ja ću u tom cilju prvo izabrati opciju Center Right i sa No repeat sprečiti ponavljanje istog motiva. Na kraju je potrebno još samo da širinu slike uskladim sa veličinom segmenta a to se može postići izborom opcije Cover.

Sledeći parametar koji treba definisati se odnosi na tzv. pozadinsko preklapanje (Background Overlay). Zato ću jednim klikom prikazati odgovarajući odeljak i umesto ikonice u formi četkice (Classic) izabrati onu koja sliži za dodavanje gradijenta. Nakon toga mi neće biti teško da otvorim listu sa izabranim bojama i izaberem ovu žutu nijansu. Kao što vidite, čitava pozadina će promeniti svoj izgled što znači da će na njenom vrhu dominirati boja koju sam upravo izabrao, dok će na dnu to biti ona koja je trenutno postavljena kako sekundarna (Second Color). Ukoliko vam to ne odgovara, postoji mogućnost da promenite pravac pod kojim se pruža čitav gradijent a to se može postići izborom novog ugla. Ja ću u tom cilju parametar Angle postaviti na 90 i na taj način obezbediti da pretapanje iz žute u crvenu teče sa leve na desnu stranu.

Da bih još bolje definisao ovo preklapanje ja ću iskoristiti parametar Location i njegovu vrednost povećati na 40. Na taj način će žuti segment postati znatno izraženiji a to sam upravo i želeo da postignem. Na sličan način je moguće odrediti i stepen providnosti pa ću iskoristiti priliku da parametar Opacity postavim na 0.75 i time dodatno naglasim sam gradijent.

Ukoliko se ispostavi da boje koje ste izabrali ne odgovaraju vašim potrebama, možete ih vrlo lako promeniti. Ja ću umesto žute boje izabrati belu a zatim istu nijansu primeniti i za sekundarnu boju ali ću pri tome njenu providnost postaviti na maksimum. To se može postići smanjenjem parametra Opacity na nulu (0) da bi na kraju sa leve strane dobio potpuno belu površinu koja će mi dobro poslužiti za postavljanje teksta.

Pre nego što nastavim sa dodavanjem novih elemenata ja ću se vratiti na vidžete i zatim jednim potezom miša kreirati novi unutrašnji odeljak (Inner Section). Ako ga postavim na sredinu ovog segmenta i otpustim levo dugme miša, na ekranu će se pojaviti dve kolone a ako vam to nije dovoljno, njihov broj možete povećati izborom ikonice sa znakom plus (+) ili preko opcije Edit Columns. Ja ću se zadovoljiti postojećim stanjem i u prvu kolonu postaviti novi naslov (Header). Čim se na ekranu pojavi podrazumevani sadržaj, neće mi biti teško da ga promenim a to se može postići direktnim unosom u polje pod nazivom Title koje se inače nalazi sa leve strane. Pošto bih želeo da ovaj naslov bude uočljiviji, dodeliću mu veličinu koja je definisana kao HTML Tag H1 i odmah preći na njegovo oblikovanje (Style).

Prvi parametar koji treba promeniti se odnosi na boju teksta pa ću zato odmah kliknuti na odgovarajuću ikonicu i sa liste izabrati tzv. primarnu boju (Primary). Nakon toga mogu da za vrstu slova (Typography) izaberem stavku Hero H1 i dodam malo bačene senke (Text Shadow). U tom cilju je potrebno da kliknem na ikonicu koja se nalazi sa desne strane i zamućenje (Blur) postavim na 4, a horizontalno i vertikalno odstojanje na 1. Na kraju treba još samo da za boju senke izaberem potpuno belu i još malo korigujem njenu providnost. Na ovaj način ću obezbediti da naslov ostane čitljiv čak i ako se ispod njega pojavi deo pozadine.

Za dodavanje novog elementa je potrebno ponovo prikazati sve vidžete a ja ću ovoga puta iskoristiti onaj koji služi za kreiranje običnost teksta (Text Editor). Ako levo dugme miša otpustim u trenutku kada se kursor nalazi ispod naslova, na tom mestu će se pojaviti podrazumevani tekst pa mi neće biti teško da umesto njega unesem ono što mi je potrebno. Ovaj sadržaj možete direktno preuzeti sa priloženog PDF dokumenta a čim dovršite ovaj postupak, možete preći na njegovo stilizovanje. Ja ću u tom cilju otvoriti Style odeljak i prvo iskoristiti primarnu boju a zatim tip slova promeniti u Hero & Footer copy. Već na prvi pogled se može primetiti da razmak između redova neće biti dovoljan pa ću se vratiti na parametre koji se odnose na izgled teksta (Typography) i Line Height povećati na 1.5. Osim toga, mogao bih i da ponovo primenim efekat bačene senke, pa ću zato kliknuti na Text Shadow i primeniti parametre koje sam koristio za naslov.

Poslednja stvar koju bih želeo da promenim je rastojanje između naslova i samog teksta. Ja bih želeo da ono bude nešto manje, pa ću zato kliknuti na ikonicu koja se nalazi u gornjem levom uglu ove kolone i parametar Widget Space smanjiti na nulu (0). To će biti dovoljno da se tekst pomeri za nekoliko piksela na gore pa mogu da još jednom proverim da li ove dve kolone imaju istu širinu. U tom cilju je potrebno da kliknem na odgovarajuću ikonicu (Edit Column) i parametar Column With postavim na 50% a isto važi i za kolonu koja se nalazi sa desne strane.

Moje zaglavlje je konačno gotovo a pošto ću ovakav sadržaj koristiti i na drugim stanicama, neophodno je da svi njegovi elementi budu precizno definisani. Meni se dopada kako je sve ovo ispalo, pa ću zato kliknuti na dugme Update i sačuvati sve izmene.