Elementor Pro od nule

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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).

Kreiramo single post templejt za custom post tip, sa fokusom na integraciju Advanced Custom Fields (ACF). Pokazujem ti kako da dinamički mapiraš custom polja u dizajn, pravilno uvežeš eksterne linkove iz ACF-a i rešiš bag sa učitavanjem prikaza pre nego što usloviš templejt za specifičan post.

U ovoj lekciji pravimo polje za pretragu bloga (search box) i dizajniramo stranu sa rezultatima pretrage. Pokazujem ti kako da omogućiš korisnicima da brzo pronađu sadržaj koji ih zanima, uz jasan i funkcionalan prikaz rezultata.

U ovoj lekciji izrađujemo 404 stranu – onu koja se prikazuje kada posetilac pokuša da pristupi stranici koja ne postoji. Pokazujem ti kako da ovu stranu osmisliš tako da bude korisna, jasno komunicira grešku i pomogne korisniku da se vrati na pravu putanju na sajtu.

U ovoj lekciji pravimo template za samostalnu sekciju – tzv. container – koji možeš da koristiš na više mesta na sajtu. Pokazujem ti kako da ga kreiraš tako da bude univerzalan, lako prilagodljiv i održiv, uz praktične primere sa realnih sajtova.

Popup prozori su moćan alat kada znaš kako da ih koristiš. U ovoj lekciji uvodim te u sve ključne mogućnosti koje Elementor Pro nudi za kreiranje popup-ova – od najjednostavnijih do kompleksnijih. Pokazujem ti kada ih koristiti, kako da ne iritiraju korisnika i kako da ih uklopiš u dizajn sajta.

U ovoj lekciji pravimo efektan banner popup sa pozivom na akciju (CTA) – idealan za prijavu na newsletter, najavu ponude ili usmeravanje pažnje posetioca. Pokazujem ti kako da postaviš različite pozadinske slike za desktop i mobilne uređaje, kako bi sve izgledalo savršeno bez obzira na veličinu ekrana.

U ovoj lekciji izrađujemo jednostavan, ali funkcionalan popup sa obaveštenjem o korišćenju kolačića (cookies). Pokazujem ti kako da dodaš jasan tekst i link ka politici privatnosti, tako da ispoštuješ zakonske regulative i izgradiš poverenje posetilaca.

U ovoj lekciji izrađujemo popup kojim možeš privremeno da onemogućiš pristup određenoj strani sajta. Pokazujem ti kako da postaviš personalizovanu poruku i uslove pristupa, što je korisno kada radiš na sadržaju „iza kulisa” ili kada želiš da ograničiš pristup određenim korisnicima.