Sekcije i elementi

Svaka stranica tvog sajta je niz sekcija: hero na vrhu, zatim usluge, cene, kontakt forma i tako dalje. Posebna sekcija, Kontejner, sadrži manje elemente (naslove, tekstove, dugmad, slike…) koje slobodno raspoređuješ u kolone.

Vrste sekcija

Zaglavlje (meni) i Podnožje su uvek prisutni na svakoj stranici i ne mogu da se pomeraju. Klikni ih u listi Struktura da urediš logo, linkove u meniju, dugme u meniju, tekstove u podnožju, linkove i društvene mreže.

Podešavanja zajednička za sve sekcije

Izaberi sekciju i otvori Izgled:

• Pozadina sekcije: bez pozadine, kartica (malo svetlija), sjaj ili akcentna boja.
• Razmak gore/dole: zbijeno, normalno ili prostrano.
• Poravnanje naslova: podrazumevano, levo ili centrirano.
• Pozadinska slika sekcije i Zatamnjenje pozadinske slike.
• Veličina i razmaci: širina, visina, spoljni i unutrašnji razmak sekcije (vidi Veličina i razmaci niže).
• ID sekcije: ime koje se koristi u linkovima, na primer #contact. Link u meniju na #contact skroluje do ove sekcije. Ako promeniš ID, linkovi koji su vodili na njega se sami ažuriraju.

Mnoge sekcije u istom tabu imaju i svoje opcije stila (kolone, stil kartica, oblik slike i slično).

Dodavanje sekcije

1. U tabu Struktura klikni sekciju posle koje treba da se pojavi nova (ili ništa, da je dodaš na kraj).
2. Klikni Dodaj sekciju ispod liste ili otvori tab Dodaj desno.
3. Pod Gotove sekcije klikni vrstu koju želiš.

Nova sekcija dolazi sa primer-sadržajem, pa nikad ne izgleda prazno, i odmah je izabrana da možeš da počneš sa uređivanjem.

Upravljanje sekcijama

U listi Struktura svaki red sekcije ima:

• ručicu za prevlačenje levo: prevuci je gore ili dole da promeniš redosled;
• ikonicu oka: Sakrij sa sajta / Prikaži na sajtu. Sakrivene sekcije ostaju u editoru (zatamnjene), ali ih posetioci ne vide;
• meni ⋯: Dupliraj, Pomeri gore, Pomeri dole i Obriši sekciju.

Brisanje traži potvrdu, a sekciju uvek možeš da vratiš sa Ctrl+Z.

Elementi: pravi svoj raspored

Sekcija Kontejner (slobodan sadržaj) ti omogućava bilo kakav raspored. Izaberi Raspored kolona (1, 2, 3 ili 4 kolone, ili 2/3 + 1/3 i 1/3 + 2/3), pa popuni kolone elementima.

Vrste elemenata

Dodavanje elemenata

Otvori tab Dodaj. Pod Elementi možeš da:

• Prevuci element u pregled. Linija pokazuje gde će pasti: u kolonu, u kutiju ili između sekcija (spuštanje između sekcija pravi novu sekciju Kontejner za taj element).
• Klikni element da ga dodaš odmah posle izabranog elementa (ili u prvu kolonu izabranog Kontejnera). Ako nijedan Kontejner nije izabran, dodaje se nova sekcija Kontejner.

Uređivanje, pomeranje, dupliranje i sakrivanje elemenata

Klikni element u pregledu da ga izabereš. Tab Uredi prikazuje njegova polja i traku sa alatkama:

• Pomeri gore / Pomeri dole (strelice);
• Premesti u prethodnu kolonu / Premesti u sledeću kolonu (vidi se kad Kontejner ima više od jedne kolone): element ide na kraj te kolone i ostaje izabran;
• Prikaži / Sakrij (oko), da ga sakriješ od posetilaca bez brisanja;
• Dupliraj;
• Obriši;
• ✦ AI (elementi sa tekstom): otvara AI polje za tekst elementa. Vidi Editor.
• strelica nazad vraća na celu sekciju.

Možeš da promeniš i Vrsta elementa (na primer da Tekst pretvoriš u Karticu) i Kolona u kojoj stoji. Polje Poravnanje poravnava element levo, u sredinu ili desno.

Veličina i razmaci

Svaki element, svaka sekcija i svaka kolona Kontejnera ima panel Veličina i razmaci: nalazi se u podešavanjima elementa i u kartici Izgled sekcije. Prazna polja zadržavaju izgled teme, pa se ništa ne menja dok ne upišeš vrednost.

• Širina, Najveća širina i Visina: upiši broj i izaberi jedinicu pored njega: px, rem, em, %, vw, vh ili auto. Za tekst, dugmad i kontejnere visina je najmanja visina (duži sadržaj i dalje staje); slike i video dobijaju tačno tu visinu i slika je popunjava.
• Spoljni razmak (spoljni prsten) je prostor oko elementa; Unutrašnji razmak (unutrašnji prsten) je prostor u njemu, između ivice i sadržaja. Svaki prsten ima četiri polja: gore, dole i dve strane. Upiši 24 (pikseli), 2rem, 5% ili auto (samo spoljni razmak: auto sa obe strane centrira element koji ima širinu).
• Dugme sa lancem na prstenu upisuje istu vrednost na sve četiri strane odjednom.
• U svakom polju ↑ i ↓ menjaju vrednost za 1 (Shift + strelica: za 10; za rem i em za 0,1 i 1).
• Dok držiš miš iznad panela, pregled prikazuje spoljni (narandžasto) i unutrašnji razmak (zeleno) izabranog dela.
• Poništi briše vrednosti uređaja koji uređuješ.

Uređaji. Tri ikonice na vrhu panela (Računar, Tablet, Telefon) rade kao dugmad pregleda: izaberi jednu i pregled prelazi na tu veličinu. Vrednosti koje tada upišeš važe samo za taj uređaj. Tablet koristi vrednosti računara dok mu ne zadaš svoje, a telefon vrednosti tableta (ili računara); nasleđene vrednosti se vide sivo u praznim poljima, a tačka na ikonici pokazuje koji uređaji imaju svoje vrednosti. Tablet su ekrani do 1023 px širine, telefon do 640 px.

Kolone. U kartici Izgled Kontejnera, Veličina i razmaci kolona ima dugme za svaku kolonu (K1, K2…): izaberi jednu i podesi njenu veličinu i razmake.

Dobro je znati:

• Element nikad nije širi od prostora u kom se nalazi, pa velika širina u pikselima ne pravi bočni skrol na telefonu.
• Strane su „početak” i „kraj”, ne levo i desno: na arapskom i drugim jezicima koji se pišu zdesna razmaci se sami okreću.
• Širina, visina i unutrašnji razmak dugmeta menjaju samo dugme; spoljni razmak ga pomera.

Element Kutija / mreža

Kutija / mreža koristiš da grupišeš elemente, na primer tri kartice jednu pored druge u jednoj koloni.

1. Dodaj element Kutija / mreža.
2. U njegovim podešavanjima izaberi Raspored: Jedno ispod drugog, U redu ili mrežu sa 2, 3 ili 4 kolone.
3. Izaberi Izgled kutije: bez okvira, kartica, staklo ili akcentna boja. Podesi Unutrašnji razmak i Razmak između elemenata.
4. Dodaj elemente u kutiju: prevuci ih na kutiju u pregledu ili ih dodaj pod Elementi u kutiji.

Kutija ne može da sadrži drugu kutiju (samo jedan nivo).

Slike i besplatne fotografije

Svako polje za sliku (glavna slika, pozadina sekcije, galerija, slika kartice…) otvara birač slika kad klikneš Izaberi. Ima dva taba:

• Moje slike: slike koje si otpremio (prevuci ih u prozor ili klikni Otpremi; JPG, PNG, WebP, AVIF ili GIF do 10 MB) i besplatne fotografije koje si već koristio.
• Besplatne fotografije: milioni besplatnih, licenciranih fotografija sa Unsplash-a ili Pexels-a. Možeš da ih koristiš na sajtu bez ikakve naknade.

Da iskoristiš besplatnu fotografiju:

1. Klikni Izaberi na polju za sliku i otvori tab Besplatne fotografije.
2. Opiši fotografiju sa nekoliko reči na engleskom, na primer bakery counter, yoga studio ili mountain lake. Izaberi oblik (položeno, uspravno ili kvadrat) ako mesto to traži.
3. Klikni na fotografiju. Dodaje se u tvoje slike i odmah se ubacuje u polje.

Ista pretraga je i u kontrolnoj tabli pod Slike → Besplatne fotografije.

Dobro je da znaš:

• Ime fotografa se prikazuje ispod svakog rezultata, a podnožje sajta navodi fotografe čije fotografije prikazuje (na primer Fotografije: Jane Doe na Unsplash). To traže servisi za fotografije, zato ga zadrži.
• Unsplash fotografije ostaju na brzim Unsplash serverima i prikazuju se odatle; Pexels fotografije se kopiraju u tvoje slike.
• Sajtovi napravljeni od šablona ili pomoću AI kreatora sajta možda već počinju sa besplatnim fotografijama izabranim za tvoj posao. Zameni ih svojim kad god želiš.
• Tvoje fotografije (tvoj tim, tvoji proizvodi, tvoj prostor) obično bolje prodaju od stok fotografija. Besplatne fotografije koristi za atmosferu, pozadine i mesta.

Tab Besplatne fotografije se pojavljuje samo kad platforma ima uključen servis za fotografije.

Saveti

• Svaka sekcija neka ima jedan jasan cilj: jedan naslov, jednu poruku, jedno dugme.
• Koristi Dupliraj da brzo napraviš ujednačene sekcije, pa samo promeni tekstove.
• Radije sakrij sekciju nego da je obrišeš ako bi ti mogla ponovo zatrebati (na primer sezonska ponuda).