Website builder

Website builder je editor, ve kterém skládáš stránku z hotových bloků, jako by to byly kostky. Bloku říkáme sekce: třeba horní menu, velký úvodní nadpis, ceník nebo patička. Sekce přidáš, poskládáš pod sebe, přepíšeš texty a nastavíš barvy.

Hotovou stránku stáhneš jako jeden soubor, který otevře každý prohlížeč a který můžeš nahrát na jakýkoli web. Nemusíš nic instalovat ani umět programovat.

Builder najdeš v menu Nástroje → Website builder. Je součástí tarifu Ultimate.

• Používej počítač nebo tablet na šířku. Na užší obrazovce builder neuvidíš, protože se tam jeho tři panely nevejdou.
• Rozpracovaná stránka se ukládá sama do tvého prohlížeče. Když se vrátíš na stejném počítači a ve stejném prohlížeči, najdeš ji tam.
• Do jiného počítače si ji přeneseš přes Uložit projekt a Otevřít projekt, viz Ukládání a projekty.

Obrazovka má čtyři části. Čísla na obrázku odpovídají popisu pod ním.

1. 1

   Horní lišta

   Zpět a Znovu, přepínání zobrazení Počítač / Tablet / Mobil, přiblížení, informace Uloženo, tlačítko Náhled a tlačítko Exportovat.

2. 2

   Levý panel

   Záložka Přidat obsahuje všechny sekce a komponenty, které můžeš na stránku dát. Záložka Vrstvy ukazuje, co na stránce už je a v jakém pořadí.

3. 3

   Plátno

   Tvoje stránka přesně tak, jak bude vypadat. Kliknutím na sekci ji vybereš, kliknutím na text do něj rovnou píšeš.

4. 4

   Pravý panel

   Nastavení. Když máš vybranou sekci, upravuješ ji. Když nemáš vybrané nic, nastavuješ celou stránku: barvy, písmo, tlačítka a další.

1. 1

   Vyber šablonu

   Na prázdném plátně klikni na Landing page. Za vteřinu máš celou stránku s menu, úvodem, funkcemi, ceníkem a patičkou.

2. 2

   Přepiš texty

   Klikni na nadpis na plátně a začni psát. Enter psaní ukončí, Esc vrátí původní text. Stejně přepíšeš tlačítka, ceny i odkazy v menu.

3. 3

   Nastav barvy

   Klikni do prázdného místa vedle stránky, tím zrušíš výběr. Vpravo se objeví nastavení stránky. V části Barvy vyber akcent, třeba modrou, a režim Tmavý nebo Světlý.

4. 4

   Zkontroluj mobil

   Nahoře přepni na Mobil a projeď stránku. Sekce se samy přeskládají pod sebe.

5. 5

   Stáhni stránku

   Klikni na Exportovat a pak na Stáhnout HTML. Dostaneš soubor index.html, který otevřeš dvojklikem.

Přidání

• Kliknutím na sekci v levém panelu ji přidáš pod tu, kterou máš vybranou. Když nemáš vybrané nic, přidá se na konec.
• Sekci můžeš i přetáhnout myší na plátno. Červená čára s nápisem Pusť sem ukazuje, kam dopadne.
• Nahoře v levém panelu je hledání, stačí napsat třeba ceník nebo patička.

Přesouvání, kopírování a mazání

Když najedeš myší na sekci, objeví se nad ní lišta s tlačítky:

• Šest teček: chyť a táhni nahoru nebo dolů.
• Šipky: posunou sekci o jedno místo.
• Dva čtverečky: vytvoří kopii hned pod ní.
• Oko: sekci skryje. Zůstane v editoru zašedlá, ale v náhledu a v exportu nebude.
• Koš: sekci smaže.

Texty měníš dvěma způsoby a oba vedou ke stejnému výsledku:

• Přímo na plátně: klikni na text a piš. Při najetí myší se text, který jde upravit, orámuje čárkovaně.
• V pravém panelu na záložce Obsah: tady jsou všechny texty sekce pod sebou, včetně těch, které na plátně nejsou vidět, například odkazy tlačítek.

Seznamy, například položky ceníku nebo otázky, upravuješ v pravém panelu. Šipkou položku rozbalíš, tlačítky ji posuneš, zkopíruješ nebo smažeš, a dole přidáš novou přes Přidat položku.

Obrázky

Builder obrázky nenahrává, ale umí je zobrazit z internetu. Do pole Obrázek vlož adresu obrázku, která začíná https:// a končí třeba .jpg nebo .png. Vedle pole hned uvidíš malý náhled.

Dokud obrázek nevložíš, je na jeho místě barevný zástupný obrázek, takže stránka nikdy nevypadá rozbitě.

Odkazy

Odkazy v menu a patičce se píšou ve tvaru text, svislá čára a adresa, každý na nový řádek:

Ceník | #pricing
Kontakt | mailto:ahoj@example.com
Blog | https://example.com/blog

• #pricing odkáže na sekci na stejné stránce, která má kotvu pricing (viz Styl sekce).
• mailto: otevře e-mail, https:// vede na jiný web.
• Tlačítka mají odkaz ve vlastním poli, například Odkaz hlavního tlačítka.

Vyber sekci a v pravém panelu přepni na záložku Styl:

• Pozadí: žádné, plocha, jemný nádech, akcent, přechod, nebo vlastní barva. Text a tlačítka se pozadí samy přizpůsobí, aby byly čitelné.
• Odsazení: kolik místa je nad a pod obsahem sekce.
• Viditelnost: sekci můžeš schovat na mobilu, nebo ji naopak ukázat jen na mobilu.
• Čára nad sekcí: tenké oddělení od předchozí sekce.
• Kotva: krátký název, na který můžeš odkázat, například pricing. Odkaz #pricing pak sjede přímo sem.

Většina sekcí má na záložce Obsah i Rozvržení, například funkce jako mřížku nebo seznam, nebo obrázek vlevo či vpravo.

Kromě hotových sekcí můžeš na stránku dát kteroukoli komponentu z knihovny. V levém panelu najdeš skupinu Komponenty nex-ui se všemi kategoriemi.

1. 1

   Přidej kategorii

   Klikni třeba na Navbary. Na stránku se přidá první navbar z kategorie.

2. 2

   Vyber konkrétní komponentu

   Vpravo se ukážou všechny navbary s živými náhledy. Kliknutím na jiný ho na stránce vyměníš.

3. 3

   Nastav ji

   Pod náhledy jsou varianty a vlastnosti, stejné jako na stránce komponenty.

Komponenty přebírají barvy, zaoblení a písmo stránky, takže ladí se zbytkem.

Klikni do prázdného místa vedle stránky nebo na Nastavení stránky v pravém panelu. Nastavení je rozdělené do skupin:

• Barvy: tmavý nebo světlý režim, barva akcentu a podle potřeby i vlastní barva pozadí, ploch, textu a čar.
• Typografie: písmo nadpisů a písmo textu, tloušťka a prostrkání nadpisů.
• Tlačítka a rozvržení: plná, jemná nebo obrysová tlačítka, zaoblení rohů, šířka obsahu a zjevování sekcí při scrollování.
• SEO: titulek a popis stránky, které uvidí lidé ve vyhledávání a na kartě prohlížeče.
• Projekt: šablony, uložení a otevření projektu a vyčištění stránky.

Přepínač Počítač / Tablet / Mobil v horní liště změní šířku stránky. Sekce se samy přeskládají, například tři karty vedle sebe budou na mobilu pod sebou.

Vedle přepínače je přiblížení. Přizpůsobit zmenší stránku tak, aby se vešla celá. 100 % ji ukáže ve skutečné velikosti.

Tlačítko Náhled schová panely a ukáže stránku tak, jak ji uvidí návštěvník, bez rámečků a skrytých sekcí. Zpět se dostaneš tlačítkem Zpět k úpravám nebo klávesou Esc.

Záložka Vrstvy v levém panelu je přehled všech sekcí od shora dolů. Hodí se u dlouhých stránek:

• Kliknutím sekci vybereš a plátno k ní sjede.
• Za šest teček ji přetáhneš na jiné místo.
• Okem ji skryješ nebo znovu zobrazíš, košem smažeš.

Na Macu místo Ctrl použij Cmd. Zkratky nefungují, dokud píšeš do textu, aby ti nic nesmazaly pod rukama.

Builder ukládá automaticky po každé změně. V horní liště uvidíš Ukládám… a hned potom Uloženo.

V nastavení stránky v části Projekt najdeš:

• Uložit projekt: stáhne soubor končící .nexui.json. To je tvoje rozpracovaná stránka, kterou můžeš kdykoli znovu otevřít.
• Otevřít projekt: načte takový soubor zpátky do builderu, třeba na jiném počítači.
• Šablony: nahradí stránku vybranou šablonou. Ctrl Z vrátí původní.

Tlačítko Exportovat otevře okno s hotovým kódem stránky. Můžeš ho zkopírovat, nebo stáhnout jako soubor index.html.

• Soubor obsahuje všechno, co stránka potřebuje. Styly a písma si dotáhne z internetu, takže ho stačí otevřít v prohlížeči.
• Skryté sekce v exportu nejsou. Sekce skryté na mobilu se na mobilu opravdu schovají.
• Pokud máš zapnuté zjevování sekcí, budou při scrollování plynule najíždět.

Nejjednodušší cesta je bezplatná služba Netlify Drop, kam stačí soubor přetáhnout:

1. 1

   Připrav složku

   Na počítači vytvoř novou složku a dej do ní stažený soubor index.html.

2. 2

   Otevři Netlify Drop

   V prohlížeči otevři app.netlify.com/drop.

3. 3

   Přetáhni složku

   Celou složku přetáhni myší do vyznačeného místa na stránce.

4. 4

   Hotovo

   Za pár vteřin dostaneš adresu, na které je tvoje stránka online. Když si založíš účet, můžeš ji přejmenovat nebo připojit vlastní doménu.

Máš už webhosting? Nahraj index.html přes jeho správce souborů nebo FTP do hlavní složky webu, obvykle se jmenuje www nebo public_html.

Nevidím builder, jen text, že potřebuje širší obrazovku

Builder potřebuje šířku aspoň 1024 pixelů. Zvětši okno prohlížeče, otoč tablet na šířku nebo použij počítač.

Zmizela mi rozpracovaná stránka

Jsi ve stejném prohlížeči jako minule a ne v anonymním okně? Pokud ano a stránka i tak chybí, data prohlížeče se smazala. Otevři poslední uložený projekt přes Otevřít projekt.

Obrázek se nezobrazuje

Zkontroluj, že adresa začíná https:// a vede přímo na obrázek. Když ji otevřeš v novém okně, má se ukázat jen obrázek, ne celá stránka. Některé weby zakazují zobrazování svých obrázků jinde.

Odkaz v menu nikam nevede

V builderu se odkazy schválně neotevírají, aby ses při úpravách nepřekliknul. Vyzkoušej je v exportovaném souboru. U odkazu na sekci zkontroluj, že sekce má nastavenou stejnou kotvu.

Komponenta v exportu nereaguje

Komponenty z knihovny jsou v exportu statický snímek. Pro plnou funkčnost je potřeba je přidat do projektu přes kód, viz stránka Komponenty.

Sekce

Jeden blok stránky pod sebou, třeba menu, úvod nebo ceník.

Komponenta

Hotový díl z knihovny nex-ui, například tlačítko nebo karusel.

Plátno

Prostřední část builderu, kde vidíš a upravuješ stránku.

Akcent

Hlavní barva stránky, kterou mají tlačítka a zvýraznění.

Kotva

Krátký název sekce, na který jde odkázat znakem #, například #pricing.

Export

Převedení hotové stránky na soubor index.html, který jde dát na internet.

Projekt

Soubor .nexui.json s rozpracovanou stránkou pro další úpravy v builderu.

SEO

Titulek a popis stránky pro vyhledávače, jako je Google.

Webhosting

Služba, kde jsou uložené soubory tvého webu, aby ho mohli otevřít ostatní.