Hero sekcija je ključni dio web stranice jer je obično prvo što posjetitelji vide. Dizajn hero sekcije u Frameru uključuje dodavanje pozadinskih slika, tekstova, gumba i drugih vizualnih elemenata s ciljem stvaranja snažnog prvog dojma.

Koraci za uređivanje hero sekcije

1. Dodavanje okvira za hero sekciju

1. Klikni na + i odaberi Frame.

2. Povuci okvir (Frame) na vrh stranice, ispod navigacije.

3. Postavi dimenzije u bočnom izborniku:

   • Visina: Obično 500–700 px (ovisno o sadržaju).

   • Širina: Postavi na 100% da zauzme cijelu širinu ekrana.

4. Dodaj Fill za pozadinu:

   • Odaberi boju, gradijent ili sliku kao pozadinu.

   • Ako koristiš sliku, prilagodi njen prikaz (npr. Cover da pokrije cijeli okvir).

2. Dodavanje glavnog naslova (Heading)

1. Klikni na + i dodaj Text element.

2. Postavi tekst u hero sekciju (npr. "Dobrodošli" ili "Najbolje usluge za vas").

3. Stiliziraj naslov u bočnom izborniku:

   • Font: Koristi veliki i čitljiv font.

   • Veličina: Obično 48–72 px.

   • Poravnanje: Centriraj tekst horizontalno i vertikalno.

3. Dodavanje opisa (Subtitle)

1. Klikni na + i dodaj još jedan Text element ispod glavnog naslova.

2. Unesi kratak opis (npr. "Pružamo kvalitetne usluge s dugogodišnjim iskustvom").

3. Stiliziraj opis:

   • Font: Koristi manji font od naslova (18–24 px).

   • Boja: Svjetlija boja od naslova za kontrast.

   • Razmak: Dodaj razmak između naslova i opisa u odjeljku Spacing.

4. Dodavanje gumba

1. Dodaj Frame unutar hero sekcije za gumb.

2. Unutar okvira dodaj Text element (npr. "Saznaj više" ili "Kontaktiraj nas").

3. Stiliziraj gumb:

   • Fill: Postavi boju pozadine (npr. plava ili crvena).

   • Border Radius: Za zaobljene rubove (npr. 8 px).

   • Hover Efekti: Dodaj interakcije u bočnom izborniku (npr. promjena boje pri prelasku mišem).

4. Dodaj poveznicu za gumb u svojstvima pod Link.

5. Dodavanje slike ili ilustracije

1. Klikni na + > Image i dodaj sliku na desnu ili lijevu stranu hero sekcije.

2. Učitaj sliku ili koristi Framerovu biblioteku slika.

3. Postavi veličinu i položaj slike:

   • Dimenzije: Prilagodi visinu i širinu u bočnom izborniku.

   • Poravnanje: Koristi Constraints kako bi slika ostala pravilno pozicionirana na različitim uređajima.

6. Dodavanje pozadinske animacije (opcionalno)

1. Odaberi hero sekciju (Frame).

2. Klikni na Effects i dodaj animaciju, npr.:

   • Parallax Effect: Pokretanje pozadine pri skrolanju.

   • Blur Effect: Zamagljenje pozadine za isticanje sadržaja.

3. Podesi brzinu i intenzitet efekta.

7. Responzivni dizajn hero sekcije

1. Auto Layout:

   • Organiziraj sadržaj hero sekcije pomoću Auto Layout.

   • Postavi razmak između elemenata (npr. 20–40 px).

2. Breakpoints:

   • Na mobilnim uređajima:

     • Smanji veličinu fonta naslova i opisa.

     • Postavi gumb ispod teksta.

     • Prilagodi slike kako bi zauzimale manje prostora ili ih potpuno sakrij.

8. Testiranje i objava

1. Klikni na Preview da vidiš kako hero sekcija izgleda na različitim uređajima.

2. Provjeri funkcionalnost gumba i pregledaj animacije.

3. Kad si zadovoljan, klikni na Publish i objavi stranicu.