Přidávání a přesouvání sekcí a přetahování rozměrů

Modul 3: Texty, fotografie a sekce · Doba čtení: 10 minut

Cíl lekce: Po této lekci dokážete sestavit stránku ze sekcí: přidat sekci přes výběr nebo chat, přesunout ji, zkopírovat a odstranit, přetažením nastavit rozestupy a rozměry a u každé sekce zvolit sloupce, rohy, pozadí a viditelnost na mobilu.

Klíčové pojmy: sekce, Bloky, Přidat blok, podoba, Sekce pod touto, tři návrhy, Vytvořit s AI, Upravit sekci, Rozestup, Mezera mezi prvky, Sloupce, Rohy, Skrýt na mobilu, úchyt, Vlastní HTML

Stránka je sloupec sekcí

Každá stránka Vašeho webu se skládá ze sekcí: vodorovných pásů, které jsou pod sebou. Nahoře je obvykle Hero (velký úvod s nadpisem, textem a tlačítkem), pod ním například Karty s Vašimi službami, Recenze, Otevírací doba a dole Kontakt. Editor nabízí 35 druhů sekcí, každý v jedné nebo více podobách: stejný obsah, jinak uspořádaný.

Kdo takto přemýšlí, vytvoří lepší stránku. Nejdůležitější informace dejte nahoru, v každé sekci jedno téma a na konec to, co má návštěvník udělat (zavolat, napsat e-mail, požádat o cenovou nabídku). U firmy Schildersbedrijf Example vypadá domovská stránka takto: Hero s tlačítkem "Požádat o nabídku", Karty se třemi službami, Fotka a text o postupu práce, Recenze, Dotazy a Kontakt.

Přidání sekce: tři cesty

1. Vybrat sami ve výběru (zdarma)

Otevřete panel Bloky v postranní liště, nebo v náhledu klikněte na Sekce pod touto: toto tlačítko je v panelu nástrojů vybrané sekce a na čáře se znakem +, která se objeví, když najedete myší mezi dvě sekce. Pod náhledem je také tlačítko Přidat blok.

Výběr zobrazuje druhy sekcí ve skupinách: Oblíbené, Úvod a záhlaví, Text a příběh, Služby a produkty, Ceny a akce, Důvěra a tým, Foto a video, Praktické informace, Kontakt a výzva k akci a Vlastní a widgety. K dispozici je vyhledávací pole ("Hledat, například recenze, ceny nebo tým"). Každý druh vidíte jako ukázku ve Vašem vlastním firemním stylu. Kliknutím na druh zobrazíte jeho podoby a jednu z nich zvolíte tlačítkem Přidat. Pokud jste se k výběru nedostali přes konkrétní sekci, editor se zeptá "Kde má být ...?": klikněte na stránce na zelenou čáru, nebo zvolte Nahoru či Dolů. Blok můžete také přetáhnout z panelu přímo na stránku.

To nic nestojí. Nová sekce obsahuje ukázkové texty, které pak sami upravíte (lekce 3.2) nebo je necháte vyplnit AI (lekce 3.1). Důležité: dokud je na Vašem webu takový ukázkový text, editor web nezveřejní. Zobrazí se hlášení "Na webu je stále ukázkový text. Nejprve ho vyplňte, nebo sekci odstraňte."

2. Požádat v chatu: tři návrhy

Napíšete-li do chatu "Chci sekci s naším postupem práce ve čtyřech krocích", AI Vám nejprve ukáže tři vhodné návrhy z knihovny sekcí, ve Vašem firemním stylu. Vyberete tlačítkem Tento návrh, nebo kliknete na Nechat vybrat AI. Potom AI sekci naplní obsahem, jako návrh. Protože přibývá sekce, stojí to 2 úpravy.

Pokud řeknete, že něco má být v existující sekci ("dej otevírací dobu do kontaktního bloku"), nebo uvedete službu jako Spotify či Calendly s odkazem, editor tři návrhy přeskočí: pak je jasné, co chcete.

3. Nechat si vytvořit vlastní blok

Není mezi nabídkou to, co hledáte? Nahoře ve výběru je Vytvořte si vlastní blok s AI. Popište, co mají návštěvníci moci udělat, například cenovou kalkulačku nebo krátký kvíz, a klikněte na Vytvořit s AI. Stojí to 2 úpravy, protože přibývá nový blok.

Přesouvání, kopírování a odstraňování

Najeďte myší na sekci. Objeví se panel nástrojů s tlačítky Upravit pomocí AI, Posunout nahoru, Posunout dolů, Duplikovat, Sekce pod touto a Smazat a úchyt pro přetažení sekce ("Přetáhněte tuto sekci na jiné místo"). U tlačítka Smazat se editor nejprve zeptá "Opravdu?". Také jednotlivé prvky v řadě, například jednu kartu nebo jednu recenzi, můžete přetáhnout, duplikovat a odstranit.

Všechna tato tlačítka jsou zdarma. Každá akce vytvoří novou verzi ("Sekce přesunuta (verze ...)"), takže omylem odstraněnou sekci vrátíte přes Verze (lekce 3.5). Odstranění pokynem v chatu ale stojí úpravu: použijte proto tlačítko.

Přetahování rozměrů

Najeďte v náhledu myší na sekci, fotku nebo text a objeví se úchyty. Přetahování je zdarma a bez AI:

• Spodní okraj sekce: větší nebo menší rozestup nad sekcí a pod ní.
• Hero: vyšší nebo nižší.
• Fotka: širší nebo užší, vyšší nebo plošší (tvar), kulatější nebo ostřejší rohy a bod zaostření (lekce 3.3).
• Textový blok: širší nebo užší (pravý okraj).
• Nadpis: větší nebo menší a mezera pod ním.
• Řada karet nebo sloupců: šířka celé řady.

Dvojklikem na úchyt vrátíte výchozí rozměr; u sekce Hero pak editor výšku opět zvolí sám.

Proč je přetahování lepší než žádost "zvětši to": hned vidíte, co se děje, nic to nestojí a AI mezitím nezmění žádný text.

Upravit sekci: nastavení jedné sekce

Klikněte na sekci a zvolte Upravit sekci. Otevře se okno s těmito možnostmi:

Pod tím jsou stejná tlačítka jako v panelu nástrojů (Posunout nahoru, Posunout dolů, Duplikovat, Sekce pod touto, Smazat) a pod textem "Nebo se AI zeptejte na něco jiného:" textové pole pro pokyn pro AI, který se týká jen této sekce.

Několik rad. Střídejte pozadí (světlá plocha, žádné, odstín), aby návštěvníci viděli, kde jedno téma končí. U řady karet používejte nejvýše tři nebo čtyři sloupce; na telefonu se stejně zobrazí pod sebou. S volbou Skrýt na mobilu zacházejte šetrně: nikdy neskrývejte kontaktní údaje ani nic, co návštěvník na mobilu potřebuje. Chcete-li zkontrolovat, jak to vypadá, zvolte v horní liště Mobil.

Vlastní HTML

Ve skupině Vlastní a widgety je také Vlastní HTML: sekce, do které sami vložíte HTML a případně CSS. Po vložení ji upravíte tlačítkem Upravit HTML na sekci. Barvy a písma se řídí Vaším firemním stylem pomocí proměnných jako var(--acc), var(--tekst) a var(--kop-font). CSS platí jen pro tuto sekci.

Omezení jsou záměrná: skripty, iframy a formuláře zde nefungují. Pro přehrávač, kalendář, mapu nebo formulář jiné služby použijte Widget (lekce 4.3). Vlastní HTML je pro ty, kdo HTML znají; pro všechny ostatní jsou běžné sekce a AI rychlejší cestou.

Na co si dát pozor

• Ponechaný ukázkový text v sekci z výběru: pak web nemůžete zveřejnit.
• Příliš mnoho sekcí. Dlouhou stránku s deseti sekcemi nikdo nečte. Odstraňte, co nic nepřidává. Stránka může mít nejvýše 40 sekcí, ale tolik jich nikdy potřebovat nebudete.
• Nastavování rozestupů přes chat. Stojí to úpravy a je to méně přesné než přetahování.
• Kontrola jen na počítači. Sloupce, rozestupy a skrývání fungují na telefonu jinak.
• Odstraňování v chatu, přestože tlačítko Smazat je zdarma.

V editoru: jak na to

1. Klikněte v náhledu na Sekce pod touto, nebo otevřete Bloky.
2. Zvolte skupinu, druh a podobu a klikněte na Přidat.
3. Nahraďte ukázkové texty sami nebo pomocí AI.
4. Přesouvejte tlačítky Posunout nahoru, Posunout dolů nebo úchytem; duplikujte nebo mažte přes panel nástrojů.
5. Rozestup nastavte tažením za spodní okraj; dvojklikem se vrátíte k výchozí hodnotě.
6. Otevřete Upravit sekci pro pozadí, sloupce, rohy, výšku sekce Hero a Skrýt na mobilu.
7. Zkontrolujte zobrazení v režimu Mobil.

Shrnutí

• Stránka je sloupec sekcí; 35 druhů, každý v jedné nebo více podobách.
• Přidání přes výběr je zdarma a přináší ukázkový text, který musíte před zveřejněním nahradit; přes chat dostanete tři návrhy a stojí to 2 úpravy.
• Přesouvání, duplikování, odstraňování a přetahování rozměrů jsou zdarma; dvojklik na úchyt vrátí výchozí hodnotu.
• Upravit sekci nastavuje pozadí, rozestup, mezeru mezi prvky, sloupce, rohy, výšku sekce Hero a Skrýt na mobilu.
• Vlastní HTML je možné, ale bez skriptů, iframů a formulářů; na ty slouží widget.

Kvíz

Úkol

Úkol D3.4: Jednu sekci přidat, jednu odebrat. Vylepšete uspořádání své domovské stránky pomocí tlačítek a úchytů, bez zbytečných pokynů pro AI.

Kontrolní seznam:

• [ ] sepsané sekce domovské stránky shora dolů;
• [ ] jedna sekce přidaná přes výběr a veškerý ukázkový text nahrazený;
• [ ] jedna sekce, která nic nepřidávala, odstraněná nebo sloučená tlačítkem Smazat;
• [ ] jedna sekce přesunutá tlačítkem Posunout nahoru, Posunout dolů nebo úchytem;
• [ ] rozestup alespoň jedné sekce nastavený přetažením a jednou vrácený dvojklikem;
• [ ] v Upravit sekci upravené pozadí nebo sloupce;
• [ ] stránka zkontrolovaná v režimu Mobil.

Otázky:

1. Jak vypadalo pořadí Vašich sekcí před úpravou a po ní a proč jste zvolili toto pořadí?
2. Kterou sekci jste odstranili a proč ji návštěvníkovi nebude chybět?
3. Kolik úprav Vás tento úkol stál a který krok by přes chat úpravy stál?

Po označení "hotovo" uvidíte vzorovou odpověď: z pořadí Hero, Čísla, Karty, Recenze, Kontakt na Hero, Karty, Fotka a text (postup práce), Recenze, Dotazy, Kontakt, aby byly služby hned pod úvodem; sekce Čísla zmizela, protože čísla byla vymyšlená; úkol stál 0 úprav, zatímco odstranění nebo nová sekce přes chat by stály 1 nebo 2.

Další čtení

• Bezplatný kurz Viditelnost na internetu 3.2: Nadpisy a struktura stránky
• Bezplatný kurz Viditelnost na internetu 4.2: Mobil na prvním místě a viewport
• Sitebuilder a AI Builder: který si vybrat a jak ho otevřete?