Dodajanje in premikanje razdelkov ter vlečenje velikosti

Modul 3: Besedila, fotografije in razdelki · Čas branja: 10 minut

Učni cilj: Po tej lekciji boste znali stran sestaviti iz razdelkov: razdelek dodati prek izbirnika ali klepeta, ga premakniti, kopirati in odstraniti, z vlečenjem nastaviti razmike in velikosti ter za vsak razdelek izbrati stolpce, vogale, ozadje in vidnost na mobilnem telefonu.

Ključni pojmi: razdelek, Razdelki, Dodaj razdelek, oblika, Razdelek spodaj, tri zasnove, Ustvari z UI, Uredi razdelek, Razmik, Razmik med elementi, Stolpci, Vogali, Skrij na mobilnem, ročica, Lasten HTML

Stran je sklad razdelkov

Vsaka stran Vaše spletne strani je sestavljena iz razdelkov: vodoravnih pasov, ki si sledijo eden pod drugim. Na vrhu je običajno Uvodni del (velik začetek z naslovom, besedilom in gumbom), pod njim na primer Kartice z Vašimi storitvami, Ocene, Delovni čas in na dnu Kontakt. Graditelj ima 35 vrst razdelkov, vsako v eni ali več oblikah: enaka vsebina, drugače oblikovana.

Kdor razmišlja tako, sestavi boljšo stran. Najpomembnejše informacije postavite na vrh, v vsak razdelek eno temo, na koncu pa to, kar naj obiskovalec stori (pokliče, pošlje e-pošto, zahteva ponudbo). Pri Schildersbedrijf Example je domača stran videti takole: Uvodni del z gumbom "Zahtevajte ponudbo", Kartice s tremi storitvami, Fotografija in besedilo o načinu dela, Ocene, Vprašanja in Kontakt.

Dodajanje razdelka: tri poti

1. Sami izberete v izbirniku (brezplačno)

V stranski vrstici odprite ploščo Razdelki ali v predogledu kliknite Razdelek spodaj: ta gumb je v orodni vrstici izbranega razdelka in na črti s +, ki se pojavi, ko se z miško premikate med dvema razdelkoma. Pod predogledom je tudi gumb Dodaj razdelek.

Izbirnik prikazuje vrste po skupinah: Priljubljeno, Uvod in glava, Besedilo in zgodba, Storitve in izdelki, Cene in ponudbe, Zaupanje in ekipa, Fotografije in video, Praktične informacije, Stik in poziv k dejanju in Po meri in gradniki. Na voljo je iskalno polje ("Iščite, na primer ocene, cene ali ekipa"). Vsako vrsto vidite kot predogled v Vaši celostni podobi. Kliknite vrsto, da vidite oblike, in eno izberite z gumbom Dodaj. Če v izbirnik niste prišli prek določenega razdelka, Vas graditelj vpraša "Kam naj pride ...?": na strani kliknite zeleno črto ali izberite Na vrh oziroma Na dno. Element lahko s plošče tudi neposredno povlečete na svojo stran.

To ne stane nič. Novi razdelek pride s primeri besedil, ki jih nato sami prilagodite (lekcija 3.2) ali jih dopolni UI (lekcija 3.1). Pomembno: dokler je na Vaši strani še tako primer besedila, graditelj strani ne objavi. Takrat se prikaže "Na Vaši strani je še primer besedila. Najprej ga izpolnite ali odstranite razdelek."

2. Vprašate v klepetu: tri zasnove

Če v klepet vpišete "Želim razdelek z našim načinom dela v štirih korakih", Vam UI najprej pokaže tri ustrezne zasnove iz knjižnice razdelkov, v Vaši celostni podobi. Izberete z gumbom Ta zasnova ali kliknete Naj izbere UI. Nato UI razdelek napolni z vsebino, kot predlog. Ker se doda razdelek, to stane 2 urejanji.

Če rečete, da naj nekaj pride v obstoječi razdelek ("delovni čas dodajte v kontaktni blok"), ali omenite storitev, kot je Spotify ali Calendly, s povezavo, graditelj tri zasnove preskoči: takrat je jasno, kaj želite.

3. Element, ki ga ustvari UI

Tega, kar iščete, ni med ponujenimi? Na vrhu izbirnika je Ustvarite svoj razdelek z UI. Opišite, kaj naj obiskovalci lahko počnejo, na primer cenovni kalkulator ali kratek kviz, in kliknite Ustvari z UI. To stane 2 urejanji, ker se doda nov element.

Premikanje, kopiranje in odstranjevanje

Z miško se pomaknite nad razdelek. Pojavi se orodna vrstica z gumbi Prilagodi z UI, Premakni gor, Premakni dol, Podvoji, Razdelek spodaj in Izbriši ter ročica za vlečenje razdelka ("Povlecite ta razdelek na drugo mesto"). Pri gumbu Izbriši graditelj najprej vpraša "Ste prepričani?". Tudi posamezne elemente v vrstici, na primer eno kartico ali eno oceno, lahko povlečete, podvojite in odstranite.

Vsi ti gumbi so brezplačni. Vsako dejanje ustvari novo različico ("Razdelek je premaknjen (različica ...)"), zato pomotoma odstranjen razdelek vrnete prek Različice (lekcija 3.5). Odstranjevanje z nalogo v klepetu pa stane eno urejanje: zato uporabite gumb.

Vlečenje velikosti

V predogledu se z miško pomaknite nad razdelek, fotografijo ali besedilo in pojavijo se ročice. Vlečenje je brezplačno in brez UI:

• Spodnji rob razdelka: več ali manj prostora nad in pod razdelkom.
• Uvodni del: višji ali nižji.
• Fotografija: širša ali ožja, višja ali nižja (oblika), bolj zaobljeni ali bolj ravni vogali in žarišče (lekcija 3.3).
• Blok besedila: širši ali ožji (desni rob).
• Naslov: večji ali manjši ter prostor pod njim.
• Vrstica kartic ali stolpcev: širina celotne vrstice.

Dvakrat kliknite ročico in vrne se privzeta velikost; pri uvodnem delu graditelj nato sam znova izbere višino.

Zakaj je vlečenje boljše od prošnje "povečaj to": takoj vidite, kaj se zgodi, ne stane nič, UI pa mimogrede ne spremeni besedila.

Uredi razdelek: nastavitve enega razdelka

Kliknite razdelek in izberite Uredi razdelek. Odpre se okno z naslednjimi nastavitvami:

Pod tem so isti gumbi kot v orodni vrstici (Premakni gor, Premakni dol, Podvoji, Razdelek spodaj, Izbriši), pod "Ali pa vprašajte UI kaj drugega:" pa je polje za nalogo UI, ki velja samo za ta razdelek.

Nekaj nasvetov. Ozadja izmenjujte (svetla ploskev, brez, odtenek), da obiskovalci vidijo, kje se ena tema konča. V vrstici kartic uporabite največ tri ali štiri stolpce; na telefonu se tako ali tako postavijo eden pod drugega. Z možnostjo Skrij na mobilnem bodite varčni: nikoli ne skrijte svojih kontaktnih podatkov ali česar koli, kar mobilni obiskovalec potrebuje. Če želite preveriti, kako je stran videti, v zgornji vrstici izberite Mobilni telefon.

Lasten HTML

V skupini Po meri in gradniki je tudi Lasten HTML: razdelek, v katerega sami prilepite HTML in po želji CSS. Ko ga vstavite, ga prilagajate z gumbom Uredi HTML na razdelku. Barve in pisave sledijo Vaši celostni podobi prek spremenljivk, kot so var(--acc), var(--tekst) in var(--kop-font). CSS velja samo za ta razdelek.

Omejitve so namerne: skripte, okvirji iframe in obrazci tukaj ne delujejo. Za predvajalnik, koledar, zemljevid ali obrazec druge storitve uporabite Gradnik (lekcija 4.3). Lasten HTML je za tiste, ki HTML poznajo; za vse druge so običajni razdelki in UI hitrejša pot.

Pasti

• Pustite primer besedila v razdelku iz izbirnika: potem strani ne morete objaviti.
• Preveč razdelkov. Dolge strani z desetimi razdelki nihče ne prebere. Odstranite, kar nič ne doda. Stran ima lahko največ 40 razdelkov, a toliko jih nikoli ne potrebujete.
• Urejanje razmikov prek klepeta. To stane urejanja in je manj natančno od vlečenja.
• Gledate samo na računalniku. Stolpci, razmiki in skrivanje na telefonu delujejo drugače.
• Odstranjevanje v klepetu, čeprav je gumb Izbriši brezplačen.

V graditelju: tako to storite

1. V predogledu kliknite Razdelek spodaj ali odprite Razdelki.
2. Izberite skupino, vrsto in obliko ter kliknite Dodaj.
3. Primere besedil zamenjajte sami ali z UI.
4. Premikajte z gumboma Premakni gor, Premakni dol ali z ročico; podvajajte ali brišite prek orodne vrstice.
5. Za razmik vlecite spodnji rob; z dvoklikom se vrnete na privzeto.
6. Odprite Uredi razdelek za ozadje, stolpce, vogale, višino uvodnega dela in Skrij na mobilnem.
7. Preverite v pogledu Mobilni telefon.

Povzetek

• Stran je sklad razdelkov; 35 vrst, vsaka v eni ali več oblikah.
• Dodajanje prek izbirnika je brezplačno in prinese primer besedila, ki ga morate pred objavo zamenjati; prek klepeta dobite tri zasnove, kar stane 2 urejanji.
• Premikanje, podvajanje, odstranjevanje in vlečenje velikosti so brezplačni; dvoklik na ročico vrne privzeto vrednost.
• Uredi razdelek ureja ozadje, razmik, razmik med elementi, stolpce, vogale, višino uvodnega dela in Skrij na mobilnem.
• Lasten HTML je mogoč, vendar brez skript, okvirjev iframe in obrazcev; za to je gradnik.

Kviz

Naloga

Naloga D3.4: En razdelek dodajte, enega odstranite. Izboljšajte zgradbo svoje domače strani z gumbi in ročicami, brez nepotrebnih nalog za UI.

Kontrolni seznam:

• [ ] razdelke domače strani ste zapisali od zgoraj navzdol;
• [ ] en razdelek ste dodali prek izbirnika in zamenjali vse primere besedil;
• [ ] en razdelek, ki ni nič dodal, ste odstranili ali združili z drugim, z gumbom Izbriši;
• [ ] en razdelek ste premaknili z gumbom Premakni gor, Premakni dol ali z ročico;
• [ ] razmik vsaj enega razdelka ste povlekli in ga enkrat z dvoklikom vrnili;
• [ ] v oknu Uredi razdelek ste prilagodili ozadje ali stolpce;
• [ ] stran ste pregledali v pogledu Mobilni telefon.

Vprašanja:

1. Kakšen je bil vrstni red Vaših razdelkov prej in potem ter zakaj ste izbrali ta vrstni red?
2. Kateri razdelek ste odstranili in česa obiskovalec zdaj ne pogreša?
3. Koliko urejanj Vas je stala ta naloga in kateri korak bi Vas prek klepeta stal urejanja?

Ko kliknete "opravljeno", vidite primer odgovora: od Uvodni del, Številke, Kartice, Ocene, Kontakt do Uvodni del, Kartice, Fotografija in besedilo (način dela), Ocene, Vprašanja, Kontakt, tako da so storitve takoj pod uvodom; razdelka Številke ni več, ker so bile številke izmišljene; naloga je stala 0 urejanj, medtem ko bi odstranjevanje ali nov razdelek prek klepeta stal 1 ali 2 urejanji.

Za nadaljnje branje

• Brezplačen tečaj Vidnost na spletu 3.2: Naslovi in zgradba strani
• Brezplačen tečaj Vidnost na spletu 4.2: Najprej mobilno in viewport
• Sitebuilder in AI Builder: katerega izberete in kako ga odprete?