Pridávanie a presúvanie sekcií, ťahanie rozmerov

Modul 3: Texty, fotografie a sekcie · Čas čítania: 10 minút

Cieľ lekcie: Po tejto lekcii dokážete poskladať stránku zo sekcií: pridať sekciu cez výber alebo chat, presunúť ju, skopírovať a odstrániť, ťahať rozostupy a rozmery a pre každú sekciu zvoliť stĺpce, rohy, pozadie a viditeľnosť na mobile.

Kľúčové pojmy: sekcia, Prvky, Pridať prvok, variant, Sekcia pod touto, tri návrhy, Vytvoriť s AI, Upraviť sekciu, Rozostup, Medzera medzi prvkami, Stĺpce, Rohy, Skryť na mobile, úchyt, Vlastné HTML

Stránka je kôpka sekcií

Každá stránka vášho webu sa skladá zo sekcií: vodorovných pásov uložených pod sebou. Na začiatku je zvyčajne Úvod (hero) (veľký úvod s nadpisom, textom a tlačidlom), pod ním napríklad Karty s vašimi službami, Recenzie, Otváracie hodiny a na konci Kontakt. Nástroj ponúka 35 druhov sekcií, každý v jednom alebo viacerých variantoch: rovnaký obsah, inak usporiadaný.

Kto takto uvažuje, vytvorí lepšiu stránku. Najdôležitejšie informácie dajte navrch, jednu tému na sekciu a skončite tým, čo má návštevník urobiť (zavolať, napísať e-mail, požiadať o cenovú ponuku). Domovská stránka firmy Schildersbedrijf Example vyzerá takto: Úvod (hero) s tlačidlom "Požiadať o cenovú ponuku", Karty s tromi službami, Fotka a text o postupe práce, Recenzie, Otázky a Kontakt.

Pridanie sekcie: tri cesty

1. Vybrať si sami vo výbere sekcií (zadarmo)

Otvorte panel Prvky v bočnej lište alebo v náhľade kliknite na Sekcia pod touto: toto tlačidlo nájdete na paneli nástrojov vybranej sekcie a na čiare so znamienkom +, ktorá sa zobrazí, keď prejdete myšou medzi dvoma sekciami. Pod náhľadom je aj tlačidlo Pridať prvok.

Výber zobrazuje druhy sekcií v skupinách: Obľúbené, Úvod a hlavička, Text a príbeh, Služby a produkty, Ceny a akcie, Dôvera a tím, Fotky a video, Praktické informácie, Kontakt a výzva k akcii a Vlastné a widgety. K dispozícii je vyhľadávacie pole ("Hľadať, napríklad recenzie, ceny alebo tím"). Každý druh vidíte ako ukážku vo vašej vizuálnej identite. Kliknutím na druh zobrazíte jeho varianty a jeden z nich vyberiete tlačidlom Pridať. Ak ste výber neotvorili cez konkrétnu sekciu, nástroj sa opýta "Kam má prísť ...?": kliknite na stránke na zelenú čiaru alebo zvoľte Na začiatok či Na koniec. Prvok môžete na stránku aj priamo pretiahnuť z panela.

Toto nič nestojí. Nová sekcia obsahuje ukážkové texty, ktoré potom upravíte sami (lekcia 3.2) alebo ich necháte vyplniť AI (lekcia 3.1). Dôležité: kým je na vašom webe takýto ukážkový text, nástroj web nezverejní. Zobrazí sa hlásenie "Na webe je stále ukážkový text. Najprv ho vyplňte alebo sekciu odstráňte."

2. Požiadať v chate: tri návrhy

Keď do chatu napíšete "Chcem sekciu s naším postupom práce v štyroch krokoch", AI vám najprv ukáže tri vhodné návrhy z knižnice sekcií, vo vašej vizuálnej identite. Vyberiete tlačidlom Tento návrh alebo kliknete na Nechať vybrať AI. Potom AI sekciu naplní obsahom ako návrh. Keďže pribudne sekcia, stojí to 2 úpravy.

Ak poviete, že niečo má byť v existujúcej sekcii ("daj otváracie hodiny do kontaktného bloku"), alebo spomeniete službu ako Spotify či Calendly s odkazom, nástroj tri návrhy preskočí: vtedy je jasné, čo chcete.

3. Nechať si vytvoriť vlastný prvok

Nie je medzi nimi to, čo hľadáte? Na začiatku výberu je Vytvorte si vlastný prvok s AI. Opíšte, čo majú návštevníci môcť robiť, napríklad cenovú kalkulačku alebo krátky kvíz, a kliknite na Vytvoriť s AI. Stojí to 2 úpravy, pretože pribudne nový prvok.

Presúvanie, kopírovanie a odstraňovanie

Prejdite myšou nad sekciu. Zobrazí sa panel nástrojov s tlačidlami Zmeniť pomocou AI, Posunúť vyššie, Posunúť nižšie, Duplikovať, Sekcia pod touto a Odstrániť a úchyt na presunutie sekcie ("Presuňte túto sekciu na iné miesto"). Pri Odstrániť sa nástroj najprv opýta "Naozaj?". Aj jednotlivé prvky v rámci riadku, napríklad jednu kartu alebo jednu recenziu, môžete presúvať, duplikovať a odstrániť.

Všetky tieto tlačidlá sú zadarmo. Každá akcia vytvorí novú verziu ("Sekcia presunutá (verzia ...)"), takže omylom odstránenú sekciu vrátite späť cez Verzie (lekcia 3.5). Odstránenie pokynom v chate však stojí úpravu: použite preto tlačidlo.

Ťahanie rozmerov

Prejdite v náhľade myšou nad sekciu, fotku alebo text a zobrazia sa úchyty. Ťahanie je zadarmo a bez AI:

• Spodný okraj sekcie: viac alebo menej priestoru nad sekciou a pod ňou.
• Úvod (hero): zvýšiť alebo znížiť.
• Fotka: širšia alebo užšia, vyššia alebo plochejšia (tvar), oblejšie alebo ostrejšie rohy a bod zaostrenia (lekcia 3.3).
• Textový blok: širší alebo užší (pravý okraj).
• Nadpis: väčší alebo menší a priestor pod ním.
• Riadok kariet alebo stĺpcov: šírka celého riadku.

Dvojklikom na úchyt sa vráti štandardný rozmer; pri úvode (hero) potom výšku znova zvolí nástroj sám.

Prečo je ťahanie lepšie ako žiadať "zväčši to": hneď vidíte, čo sa deje, nič to nestojí a AI pritom nezmení žiadny text.

Upraviť sekciu: nastavenia jednej sekcie

Kliknite na sekciu a zvoľte Upraviť sekciu. Otvorí sa okno s týmito možnosťami:

Pod tým sú rovnaké tlačidlá ako na paneli nástrojov (Posunúť vyššie, Posunúť nižšie, Duplikovať, Sekcia pod touto, Odstrániť) a pod textom "Alebo sa AI opýtajte na niečo iné:" textové pole na pokyn pre AI, ktorý sa týka len tejto sekcie.

Niekoľko rád. Striedajte pozadia (svetlý panel, žiadne, odtieň), aby návštevníci videli, kde jedna téma končí. Pri riadku kariet používajte najviac tri alebo štyri stĺpce; na telefóne sa aj tak zobrazia pod sebou. S funkciou Skryť na mobile buďte opatrní: nikdy neskrývajte kontaktné údaje ani nič, čo návštevník na mobile potrebuje. Ak chcete skontrolovať, ako to vyzerá, zvoľte v hornej lište Mobil.

Vlastné HTML

V skupine Vlastné a widgety je aj Vlastné HTML: sekcia, do ktorej sami vložíte HTML a ak chcete, aj CSS. Po vložení ju upravíte tlačidlom Upraviť HTML na sekcii. Farby a písma sa riadia vašou vizuálnou identitou pomocou premenných ako var(--acc), var(--tekst) a var(--kop-font). CSS platí len pre túto sekciu.

Obmedzenia sú zámerné: skripty, iframy a formuláre tu nefungujú. Na prehrávač, kalendár, mapu alebo formulár inej služby použite Widget (lekcia 4.3). Vlastné HTML je pre tých, ktorí ovládajú HTML; pre všetkých ostatných sú bežné sekcie a AI rýchlejšou cestou.

Na čo si dať pozor

• Ponechaný ukážkový text v sekcii z výberu: web potom nemôžete zverejniť.
• Priveľa sekcií. Dlhú stránku s desiatimi sekciami nikto nečíta. Odstráňte, čo nič nepridáva. Stránka môže mať najviac 40 sekcií, ale toľko nikdy nebudete potrebovať.
• Riešenie rozostupov cez chat. Stojí to úpravy a je to menej presné ako ťahanie.
• Kontrola len na počítači. Stĺpce, rozostupy a skrývanie fungujú na telefóne inak.
• Odstraňovanie cez chat, hoci tlačidlo Odstrániť je zadarmo.

V nástroji: postup

1. V náhľade kliknite na Sekcia pod touto alebo otvorte Prvky.
2. Zvoľte skupinu, druh a variant a kliknite na Pridať.
3. Ukážkové texty nahraďte sami alebo pomocou AI.
4. Presúvajte tlačidlami Posunúť vyššie, Posunúť nižšie alebo úchytom; duplikujte alebo odstráňte cez panel nástrojov.
5. Ťahaním spodného okraja nastavte rozostup; dvojklikom sa vrátite na štandard.
6. Otvorte Upraviť sekciu a nastavte pozadie, stĺpce, rohy, výšku úvodu (hero) a Skryť na mobile.
7. Skontrolujte zobrazenie v režime Mobil.

Zhrnutie

• Stránka je kôpka sekcií; 35 druhov, každý v jednom alebo viacerých variantoch.
• Pridanie cez výber je zadarmo a prináša ukážkový text, ktorý musíte pred zverejnením nahradiť; cez chat dostanete tri návrhy a stojí to 2 úpravy.
• Presúvanie, duplikovanie, odstraňovanie a ťahanie rozmerov sú zadarmo; dvojklik na úchyt vráti štandard.
• Upraviť sekciu nastavuje pozadie, rozostup, medzeru medzi prvkami, stĺpce, rohy, výšku úvodu (hero) a Skryť na mobile.
• Vlastné HTML je možné, ale bez skriptov, iframov a formulárov; na tie slúži widget.

Kvíz

Úloha

Úloha D3.4: Jedna sekcia pridať, jedna odobrať. Vylepšite štruktúru svojej domovskej stránky pomocou tlačidiel a úchytov, bez zbytočných pokynov pre AI.

Kontrolný zoznam:

• [ ] sekcie domovskej stránky zapísané zhora nadol;
• [ ] jedna sekcia pridaná cez výber a všetok ukážkový text nahradený;
• [ ] jedna sekcia, ktorá nič nepridávala, odstránená tlačidlom Odstrániť alebo zlúčená s inou;
• [ ] jedna sekcia presunutá tlačidlom Posunúť vyššie, Posunúť nižšie alebo úchytom;
• [ ] rozostup aspoň jednej sekcie upravený ťahaním a raz vrátený dvojklikom;
• [ ] v okne Upraviť sekciu zmenené pozadie alebo stĺpce;
• [ ] stránka skontrolovaná v režime Mobil.

Otázky:

1. Aké bolo poradie vašich sekcií pred úpravou a po nej a prečo ste zvolili toto poradie?
2. Ktorú sekciu ste odstránili a prečo návštevníkovi teraz nebude chýbať?
3. Koľko úprav vás táto úloha stála a ktorý krok by cez chat úpravy stál?

Po kliknutí na "hotovo" uvidíte vzorovú odpoveď: z poradia Úvod (hero), Čísla, Karty, Recenzie, Kontakt na Úvod (hero), Karty, Fotka a text (postup práce), Recenzie, Otázky, Kontakt, aby boli služby hneď pod úvodom; sekcia Čísla zmizla, pretože čísla boli vymyslené; úloha stála 0 úprav, zatiaľ čo odstránenie alebo nová sekcia cez chat by stáli 1 alebo 2 úpravy.

Čítajte ďalej

• Bezplatný kurz Viditeľnosť na internete 3.2: Nadpisy a štruktúra stránky
• Bezplatný kurz Viditeľnosť na internete 4.2: Najprv mobil a viewport
• Sitebuilder a AI Builder: ktorý si vybrať a ako ho otvoriť?