Elementor Pro od nule

Online kurs za početnike koji žele da postanu profesionalni web dizajneri

Uvod i priprema za rad

U ovoj lekciji dajem ti detaljna uputstva za preuzimanje i instalaciju Elementor Pro plugin-a – da od starta radiš na pravi način.

Struktura – temelj i najvažniji aspekt sajta

U ovoj lekciji ti pokazujem zašto je dobra struktura ključna za svaki sajt - bez obzira na njegov dizajn ili svrhu. Prolazimo kroz najčešće tipove struktura koje koristiš u praksi, a sve ilustrujem kroz primere iz mog portfolija.

Uvod u templejte

Objašnjavam šta su templejti u Elementoru, kako funkcionišu i koje sve vrste imamo na raspolaganju. Kroz primere ti pokazujem kada i kako koristiš koji – da bi izrada sajta bila logična, stabilna i skalabilna.

Page – Coming soon & Maintenance mode

U ovoj lekciji pokazujem kako da kreiraš stranu za coming soon ili maintenance mode, koju možeš da koristiš kada je sajt još u izradi ili kada radiš na već postojećem sajtu. Naučićeš kako da ovakva strana izgleda profesionalno, komunicira pravu poruku i ostavlja dobar utisak čak i kada sajt još nije spreman za javnost.

Globalna podešavanja

Elementor ima naviku da nameće svoja pravila, poput podrazumevane margine ispod paragrafa u tekst editoru koja ti momentalno ruši vertikalnu simetriju. Ova lekcija je tvoja tehnička priprema za rad. Pokazujem ti kako da preuzmeš kontrolu, trajno rešiš taj detalj i zaštitiš dizajn tako što ćeš klijentu onemogućiti da slučajno razbije templejt.

Header sa klasičnom navigacijom

Kada gradiš klasičan heder, kvalitet se krije u arhitekturi ispod haube. U ovoj lekciji pokazujem ti kako da postaviš stabilnu strukturu sa minimalnim brojem kontejnera radi brzine sajta. Uz to, trajno poništavaš podrazumevane Elementor razmake u navigaciji koji ti kvare desno poravnanje i optimizuješ mobilni meni kako ne bi rušio visinu hedera.

Header sa slide-in navigacijom

U ovoj lekciji praviš slide in (skriveni) meni. Pravilo je jasno: ovakvu navigaciju gradiš isključivo kada obim sadržaja i profil publike to dozvoljavaju, a ne zato što želiš da sajt izgleda "dinamično". Tehnički deo je direktan. Umesto zastarelih pop-upova, prelazimo na Off-Canvas vidžet. Pokazujem ti kako da postaviš stabilnu strukturu u samo jednom kontejneru, povežeš ikonicu sa menijem preko dinamičkih tagova i zašto uvek moraš da napraviš eksplicitno "Zatvori" dugme.

Header sa mega menijem

Megameni je moćan alat, ali nosi jednu veliku zamku: kompleksnost. U ovoj lekciji razbijamo mit da sajt mora da ima složen padajući meni samo zato što to "lepo izgleda" i učiš kako da donosiš arhitektonske odluke umesto estetskih kompromisa.

Footer sa tri kolone i dva reda

U ovoj lekciji gradiš jedan od najelegantnijih preloma futera: tri kolone i dva reda. Pokazujem ti kompletnu arhitekturu, od rasporeda glavnih kontejnera do prilagođavanja širina i poravnanja za tablete i mobilne uređaje.

Footer sa jednom kolonom i pozadinskom slikom

U ovoj lekciji gradiš futer iz jedne kolone sa pozadinskom slikom, namenski krojen za klijente kojima je newsletter glavni kanal prodaje. Tehnički deo obuhvata ograničavanje širine kontejnera na 800 piksela, postavljanje slike sa overlay efektom i automatizaciju promene godine za autorska prava pomoću dinamičkih tagova. Tu je i oštar podsetnik na apsolutno pravilo: eksterni linkovi u futeru se uvek otvaraju u novom tabu.

Single page template

U ovoj lekciji učiš kako se kreira i primenjuje Single Page Template – rešenje koje drastično ubrzava rad i olakšava kasnije promene na sajtu. Pokazujem ti zašto se ovaj templejt najčešće koristi za "sporedne" statičke strane poput Uslova korišćenja, Politike privatnosti ili Kontakt strane, gde nam je potrebno unificirano zaglavlje (naslov strane), i zašto ga strogo zaobilazimo kada pravimo Početnu stranu.

Single post template (blog)

U ovoj lekciji gradiš Single Post Template – univerzalni arhitektonski nacrt za sve buduće tekstove na blogu i prilagođene (custom) postove. Na samom početku lekcije jasno razdvajamo sadržaj: objašnjavam zašto se standardni WordPress postovi koriste isključivo za blog tekstove, dok se za sve ostale serijske objave (poput testimonijala, usluga ili portfolija) strogo kreiraju novi Custom Post tipovi.

Loop item template

U ovoj lekciji gradiš Loop Item templejt – pojedinačnu karticu koja predstavlja jedan blog post unutar arhive.

Archive template

U ovoj lekciji gradiš Archive Template za blog – stranicu koja dinamički izlistava sve pojedinačne tekstove (Loop Items) koje smo ranije kreirali.

Kreiranje custom post-a (CPT UI)

Sadržaj na sajtu uvek diktira njegovu kompletnu arhitekturu. Kada naiđeš na specifične elemente poput testimonijala ili usluga kojima nije mesto na blogu ili običnim stranicama, rešenje su Custom Post tipovi koje postavljaš kroz CPT UI plagin. Ova lekcija je tvoja tehnička priprema za stabilnu strukturu ispod haube.

Kreiranje custom post-a (CPT UI & ACF)

U ovoj lekciji nivo izrade podižemo na viši stepen dodavanjem naprednih prilagođenih polja pomoću plagina Advanced Custom Fields (ACF). Pravimo kompleksniji Custom Post Type, gde osnovna WordPress polja jednostavno nisu dovoljna.

Loop item (custom post – CPT UI)

U ovoj lekciji baviš se dizajnom Loop Item templejta za jednostavnije Custom Post tipove – konkretno, za iskustva klijenata. Demonstriraš kako se unutar Elementora vizuelno oblikuje ono što smo u pozadini kreirali kroz CPT UI.

Loop item (CPT UI & ACF)

Ovde izrađujemo loop templejt za prikaz pojedinačnih stavki unutar arhive custom post tipa. Pokazujem ti kako da dizajniraš svaki prikaz tako da bude konzistentan, jasan i prilagođen sadržaju koji predstavlja.

Postavljanje custom postova na statičku stranu

Ovde postavljamo loop grid na statičku stranu kako bismo prikazali custom post tip za iskustva. Pokazujem ti kako da podesiš Query, uključiš Masonry raspored za elemente nejednake dužine i integrišeš taksonomi filter za filtriranje sadržaja.

Archive template za custom post-ove

Gradimo templejt za arhivu custom postova primenom istog procesa kao za standardne blog arhive. Pokazujem ti prelazak na moderniju arhitekturu korišćenjem Loop Grid vidžeta umesto starog Archive Posts elementa, kao i kako da podesiš Query za specifičan custom post i precizno definišeš uslove prikaza (Display Conditions).