prijatelji kulture

Uvod: kako čitati ovaj vodič Ova stranica "Naslovna" sastoji se od devet glavnih sekcija koje se izmjenjuju odozgo prema dolje: Hero, Podaci, Nova objava, Partneri, Kurs, Vijesti, Timeline, Pisci izjave i Galerija. Svaka sekcija u Elementoru je poseban Container (kontejner) s vlastitom CSS klasom po obrascu kurs-sec kurs-sec--ime, što znači da svaka sekcija ima svoj vizualni "potpis" u kodu i može se stilski zasebno podešavati. Za svaku sekciju u nastavku prolazimo kroz isti obrazac od pet koraka: (1) što se u njoj nalazi i zašto, (2) točne postavke kontejnera u Elementoru, (3) koji se widgeti koriste i kako se konfiguriraju, (4) savjeti za dizajn i vizualni sklad, te (5) na što paziti za mobitele i tablete.

Elementor osnove koje se stalno ponavljaju Prije nego krenemo sekciju po sekciju, evo par pojmova koji se koriste kroz cijeli vodič: • Container (kontejner) — moderni Elementor gradbeni blok koji zamjenjuje staru kombinaciju Section + Column. Kontejner može biti "Row" (elementi jedan pored drugog, vodoravno) ili "Column" (elementi jedan ispod drugog, okomito) — to se bira u postavci Direction (Layout tab). • Flex Gap — razmak između elemenata unutar kontejnera (kao razmak između redaka i stupaca). U vodiču ga spominjemo kao "Gap". • Content Width — širina sadržaja unutar kontejnera: "Boxed" (sadržaj ograničen na određenu širinu, centriran) ili "Full Width" (sadržaj ide preko cijele širine ekrana). • Padding / Margin — Padding je unutarnji razmak (prostor između ruba kontejnera i sadržaja unutar njega), Margin je vanjski razmak (prostor između kontejnera i onoga što je izvan njega, npr. susjedne sekcije). • _title (naziv sloja) — svaki kontejner i widget u ovoj stranici ima svoj interni naziv u Elementor Navigatoru (npr. "01 Hero", "02.1 Rezidenti") — brojevi označavaju redoslijed, a slova/podbrojevi hijerarhiju. Ova imena vidite kad otvorite Navigator (ikona strukture u donjem lijevom kutu Elementor uređivača). • CSS klasa (_css_classes) — svakoj glavnoj sekciji ručno je dodana klasa poput kurs-sec--hero. To omogućuje da dodatni CSS i JavaScript (npr. animacije) prepoznaju točno tu sekciju.

1. Struktura i logika Hero je prva stvar koju posjetitelj vidi — ima zadatak da u tri sekunde jasno komunicira "tko smo" i pozove na akciju (CTA gumb). Struktura je: slika lijevo, tekstualni blok u sredini (podnaslov, naslov, uvodni tekst, gumb), slika desno — klasičan simetrični raspored koji stavlja tekst u fokus, a fotografije služe kao vizualni okvir. U stvarnoj izradi, Hero je jedan veliki kontejner (naziv sloja "01 Hero", klasa kurs-sec kurs-sec--hero) koji sadrži tri djeteta: widget slike lijevo ("02.1 Slika lijevo"), unutarnji kontejner s tekstom ("02.2 Tekst") i widget slike desno ("02.4 Slika desno"). • Slika lijevo i desno — dvije različite fotografije (npr. rezidencija/portret) koje uokviruju tekst i daju "ljudski" dojam odmah na početku. • Podnaslov (Subtitle) — kratka nadnaslovna oznaka (npr. kategorija ili slogan) iznad glavnog naslova. • Naslov (Naslov) — glavni H1 naslov stranice, najvažniji tekstualni element cijele Hero sekcije. • Lead tekst — kratak uvodni odlomak koji dodatno objašnjava ponudu. • CTA gumb — jasan poziv na akciju (npr. "Prijavi se" ili "Saznaj više").