Dodavanje i premještanje odjeljaka te povlačenje veličina

Modul 3: Tekstovi, fotografije i sekcije · Vrijeme čitanja: 10 minuta

Cilj učenja: Nakon ove lekcije možete složiti stranicu od odjeljaka. Dodat ćete odjeljak putem birača ili chata te ga premjestiti, kopirati i ukloniti. Povlačenjem ćete mijenjati razmake i veličine, a za svaki odjeljak odabrati stupce, kutove, pozadinu i vidljivost na mobitelu.

Ključni pojmovi: odjeljak, Odjeljci, Dodajte odjeljak, oblik, Odjeljak ispod, tri dizajna, Izradite uz AI, Uredite odjeljak, Razmak, Razmak između elemenata, Stupci, Kutovi, Sakrij na mobitelu, hvatište, Vlastiti HTML

Stranica je niz odjeljaka

Svaka stranica Vaše web stranice sastoji se od odjeljaka, vodoravnih traka poredanih jedna ispod druge. Na vrhu je obično Hero, veliki uvodni dio s naslovom, tekstom i gumbom. Ispod njega mogu biti, na primjer, Kartice s Vašim uslugama, Recenzije i Radno vrijeme, a na dnu Kontakt. Graditelj nudi 35 vrsta odjeljaka. Svaka vrsta postoji u jednom ili više oblika: sadržaj je isti, ali drukčije oblikovan.

Tko razmišlja na ovaj način, slaže bolju stranicu. Najvažnije informacije stavite na vrh, u svaki odjeljak samo jednu temu, a na kraju ono što posjetitelj treba učiniti: nazvati, poslati e-poruku ili zatražiti ponudu. Kod Schildersbedrijf Example početna stranica izgleda ovako: Hero s gumbom "Zatražite ponudu", Kartice s tri usluge, Fotografija i tekst o načinu rada, Recenzije, Pitanja i Kontakt.

Dodavanje odjeljka: tri načina

1. Sami birate u biraču (besplatno)

Otvorite ploču Odjeljci u bočnoj traci. Možete i u pregledu kliknuti Odjeljak ispod. Taj gumb nalazi se u alatnoj traci odabranog odjeljka i na crti sa znakom +, koja se pojavi kada mišem prijeđete između dva odjeljka. Ispod pregleda nalazi se i gumb Dodajte odjeljak.

Birač prikazuje vrste odjeljaka po skupinama: Popularno, Uvod i zaglavlje, Tekst i priča, Usluge i proizvodi, Cijene i ponude, Povjerenje i tim, Fotografije i video, Praktične informacije, Kontakt i poziv na akciju i Vlastito i widgeti. Tu je i polje za pretraživanje ("Tražite, na primjer recenzije, cijene ili tim"). Svaku vrstu vidite kao ogledni prikaz u svom vizualnom identitetu. Kliknite vrstu da biste vidjeli njezine oblike, a jedan od njih odaberite gumbom Dodajte. Ako niste krenuli od određenog odjeljka, graditelj pita "Gdje treba doći ...?". Tada kliknite zelenu crtu na stranici ili odaberite Na vrhu ili Na dnu. Element možete i izravno povući s ploče na stranicu.

To ništa ne košta. Novi odjeljak dolazi s oglednim tekstovima. Njih zatim sami prilagodite (lekcija 3.2) ili ih prepustite AI-ju da ih ispuni (lekcija 3.1). Važno: dok na Vašoj stranici ima takvog oglednog teksta, graditelj je neće objaviti. Tada ćete vidjeti poruku "Na Vašoj stranici još ima oglednog teksta. Najprije ga popunite ili uklonite odjeljak."

2. Zatražite u chatu: tri dizajna

Ako u chat upišete "Želim odjeljak s našim načinom rada u četiri koraka", AI Vam najprije prikaže tri prikladna dizajna iz biblioteke odjeljaka, u Vašem vizualnom identitetu. Jedan odaberete gumbom Ovaj dizajn ili kliknete Neka AI odabere. Nakon toga AI ispuni odjeljak sadržajem, kao prijedlog. Budući da se dodaje novi odjeljak, to stoji 2 izmjene.

Ako navedete da nešto treba doći u postojeći odjeljak ("stavite radno vrijeme u kontaktni blok") ili spomenete uslugu poput Spotify ili Calendly s poveznicom, graditelj preskače tri dizajna. Tada je već jasno što želite.

3. Neka se izradi Vaš vlastiti element

Ne nalazite ono što tražite? Na vrhu birača nalazi se Izradite vlastiti odjeljak uz AI. Opišite što posjetitelji trebaju moći učiniti, na primjer kalkulator cijena ili kratki kviz, i kliknite Izradite uz AI. To stoji 2 izmjene jer se dodaje novi element.

Premještanje, kopiranje i uklanjanje

Prijeđite mišem preko odjeljka. Pojavit će se alatna traka s gumbima Promijenite uz AI, Pomaknite gore, Pomaknite dolje, Duplicirajte, Odjeljak ispod i Izbrišite, kao i hvatište za povlačenje odjeljka ("Povucite ovaj odjeljak na drugo mjesto"). Kod gumba Izbrišite graditelj najprije pita "Jeste li sigurni?". I pojedinačne elemente unutar reda, poput jedne kartice ili jedne recenzije, možete povući, duplicirati i ukloniti.

Svi su ti gumbi besplatni. Svaka radnja stvara novu verziju ("Odjeljak je premješten (verzija ...)"). Odjeljak koji ste greškom uklonili zato možete vratiti putem Verzije (lekcija 3.5). Uklanjanje putem naloga u chatu stoji jednu izmjenu, zato radije upotrijebite gumb.

Povlačenje veličina

U pregledu prijeđite mišem preko odjeljka, fotografije ili teksta i pojavit će se hvatišta. Povlačenje je besplatno i odvija se bez AI-ja:

• Donji rub odjeljka: više ili manje razmaka iznad i ispod odjeljka.
• Hero: viši ili niži.
• Fotografija: šira ili uža, viša ili plića (oblik), zaobljeniji ili ravniji kutovi te točka fokusa (lekcija 3.3).
• Tekstni blok: širi ili uži (desni rub).
• Naslov: veći ili manji te razmak ispod njega.
• Red kartica ili stupaca: širina cijelog reda.

Dvaput kliknite hvatište i vratit će se zadana veličina. Kod Hero odjeljka graditelj tada ponovno sam određuje visinu.

Zašto je povlačenje bolje od naloga "povećajte to": odmah vidite što se događa, ništa ne košta, a AI usput ne mijenja tekst.

Uredite odjeljak: postavke jednog odjeljka

Kliknite odjeljak i odaberite Uredite odjeljak. Otvorit će se prozor sa sljedećim postavkama:

Ispod se nalaze isti gumbi kao u alatnoj traci (Pomaknite gore, Pomaknite dolje, Duplicirajte, Odjeljak ispod, Izbrišite), a ispod natpisa "Ili pitajte AI nešto drugo:" tekstno polje za AI nalog koji se odnosi samo na taj odjeljak.

Nekoliko savjeta. Izmjenjujte pozadine (svijetla ploha, bez pozadine, nijansa) kako bi posjetitelji vidjeli gdje jedna tema završava. Za red kartica koristite najviše tri ili četiri stupca, jer će se na telefonu ionako poredati jedna ispod druge. Budite štedljivi s opcijom Sakrij na mobitelu: nikada ne skrivajte svoje kontaktne podatke ni ono što posjetitelju na mobitelu treba. Ako želite provjeriti kako to izgleda, u gornjoj traci odaberite Mobitel.

Vlastiti HTML

U skupini Vlastito i widgeti nalazi se i Vlastiti HTML: odjeljak u koji sami zalijepite HTML i, ako želite, CSS. Nakon postavljanja prilagođavate ga gumbom Uredite HTML na odjeljku. Boje i fontovi prate Vaš vizualni identitet putem varijabli kao što su var(--acc), var(--tekst) i var(--kop-font). CSS vrijedi samo za taj odjeljak.

Ograničenja su namjerna: skripte, iframeovi i obrasci ovdje ne rade. Za player, kalendar, kartu ili obrazac neke druge usluge koristite Widget (lekcija 4.3). Vlastiti HTML namijenjen je onima koji poznaju HTML. Za sve ostale brži su put obični odjeljci i AI.

Zamke

• Ostavljanje oglednog teksta u odjeljku iz birača: tada ne možete objaviti stranicu.
• Previše odjeljaka. Dugu stranicu s deset odjeljaka nitko neće pročitati. Uklonite ono što ništa ne dodaje. Stranica može imati najviše 40 odjeljaka, ali toliko Vam nikada neće trebati.
• Uređivanje razmaka putem chata. To stoji izmjene i manje je precizno od povlačenja.
• Provjera samo na računalu. Stupci, razmaci i skrivanje drukčije se ponašaju na telefonu.
• Uklanjanje u chatu, iako je gumb Izbrišite besplatan.

U graditelju: kako to učiniti

1. U pregledu kliknite Odjeljak ispod ili otvorite Odjeljci.
2. Odaberite skupinu, vrstu i oblik te kliknite Dodajte.
3. Zamijenite ogledne tekstove sami ili uz pomoć AI-ja.
4. Premjestite odjeljak gumbima Pomaknite gore, Pomaknite dolje ili hvatištem; duplicirajte ga ili izbrišite putem alatne trake.
5. Povucite donji rub za razmak; dvaput kliknite za povratak na zadanu vrijednost.
6. Otvorite Uredite odjeljak za pozadinu, stupce, kutove, visinu Hero odjeljka i Sakrij na mobitelu.
7. Provjerite prikaz na Mobitel.

Sažetak

• Stranica je niz odjeljaka; postoji 35 vrsta, svaka u jednom ili više oblika.
• Dodavanje putem birača je besplatno i donosi ogledni tekst koji morate zamijeniti prije objave; putem chata dobivate tri dizajna, a to stoji 2 izmjene.
• Premještanje, dupliciranje, uklanjanje i povlačenje veličina su besplatni; dvostruki klik na hvatište vraća zadanu vrijednost.
• Uredite odjeljak određuje pozadinu, razmak, razmak između elemenata, stupce, kutove, visinu Hero odjeljka i Sakrij na mobitelu.
• Vlastiti HTML je moguć, ali bez skripti, iframeova i obrazaca; za to služi widget.

Kviz

Zadatak

Zadatak D3.4: Jedna sekcija više, jedna manje. Poboljšajte strukturu svoje početne stranice pomoću gumba i hvatišta, bez nepotrebnih AI naloga.

Popis za provjeru:

• [ ] zapisali ste odjeljke svoje početne stranice redom odozgo prema dolje;
• [ ] dodali ste jedan odjeljak putem birača i zamijenili sav ogledni tekst;
• [ ] gumbom Izbrišite uklonili ste ili spojili jedan odjeljak koji ništa nije dodavao;
• [ ] premjestili ste jedan odjeljak gumbom Pomaknite gore, Pomaknite dolje ili hvatištem;
• [ ] povukli ste razmak barem jednog odjeljka i jednom ga vratili dvostrukim klikom;
• [ ] u Uredite odjeljak promijenili ste pozadinu ili stupce;
• [ ] pregledali ste stranicu na prikazu Mobitel.

Pitanja:

1. Kakav je bio redoslijed Vaših odjeljaka prije i poslije, i zašto ste odabrali taj redoslijed?
2. Koji ste odjeljak uklonili i zašto ga posjetitelju sada ne nedostaje?
3. Koliko Vas je izmjena stajao ovaj zadatak i koji bi korak putem chata ipak stajao izmjene?

Nakon što označite "gotovo", vidjet ćete ogledni odgovor: od Hero, Brojke, Kartice, Recenzije, Kontakt do Hero, Kartice, Fotografija i tekst (način rada), Recenzije, Pitanja, Kontakt, tako da su usluge odmah ispod uvodnog dijela; odjeljak Brojke je uklonjen jer su brojke bile izmišljene; zadatak je stajao 0 izmjena, dok bi uklanjanje ili novi odjeljak putem chata stajali 1 ili 2 izmjene.

Dodatno štivo

• Besplatan tečaj Vidljivost na internetu 3.2: Naslovi i struktura stranice
• Besplatan tečaj Vidljivost na internetu 4.2: Prvo mobilno i viewport
• Sitebuilder i AI Builder: koji odabrati i kako ga otvoriti?