Poznejte Showit zevnitř a zjistěte, co jsou to canvasy

První krok založení účtu na Showit máte za sebou.  Bojíte se, že se v Showit nezorientujete a nebudete vědět, kde co najít? Připravila jsem pro vás nejenom článek o orientaci v Showit a vysvětlení, co jsou to canvasy, ale také dva videonávody. Věřím, že vám pomohou s prvními kroky v Showit. S každým dalším přihlášením se budete v Showit pohybovat rychleji a rychleji. Je to dáno jeho intuitivním ovládáním. Nejdřív se naučíte základy a ty pak při každé další návštěvě rozvíjíte o nové zkušenosti a poznatky. Ze své zkušenosti vím, že jsem se s Showit naučila opravdu velmi brzy. 

 

Orientace v Showit

Pro jednodušší orientaci jsem Showit rozdělila na 4 části – tři panely a hlavní tvořící část.

Levý panel – Tento panel určuje, s čím pracujete. Vidíte zde jednotlivé stránky. Na každé stránce vidíte jednotlivé části stránky (tzv. canvasy – více o nich níže). A v canvasech zase vidíte jednotlivé prvky. Vždy tedy vidíte, s jakým prvkem pracujete. Úplně nahoře v panelu najdete další tři důležité záložky – SITE SETTINGS – technické nastavení, jako je propojení domény či přidání třetích stran. DESIGN SETTINGS – výběr barev a výběr fontů pro jednotlivé textové prvky (titulek, nadpis, podnadpis, text). Mimo jiné si zde i přidáte vlastní fonty. MEDIA LIBRARY – třetí záložkou je vaše knihovna medií. Do té si nahrajete své fotografie, videa i soubory.

 

Pravý panel – Tato část je takzvaný panel nastavení. V levé části si vyberete, s čím chcete pracovat (stránka, canvas, prvek) a na pravé straně najdete veškeré nastavení. Na stránce si nastavíte SEO, či přidáte embeed kód. V canvasu si nastavíte pozadí, typ canvasu tranzici nebo akci. U jednotlivých prvků lze nastavit barvy, písmo, velikost, hoover, pozici či efekt.

 

Prostřední část – Uprostřed dvou panelů vidíte desktopovou (počítačovou) a mobilní verzi vedle sebe. To je jedna z velkých výhod Showit. Máte nejen desktopovou, ale i mobilní verzi vždy plně pod kontrolou. Pokud se chcete zaměřit jen na jednu verzi, vypněte si tu druhou. K tomu vám pomůže spodní panel.

 

Spodní panel – Zde si vybíráte verzi, na které chcete pracovat, přibližujete a oddalujete si pracovní plochu nebo vracíte změny a úpravy. Velmi důležitou částí je samotný střed spodního panelu, kde najdete nástroje na přidání textového pole, fotek, videí, ikon i embeed kódu. V pravé části najdete technickou podporu Showit, na které vám přátelsky poradí s každým vaším problémem.

 

Pokud máte radši videonávody, shlédněte video zde pod článkem. Pokud vám nevadí angličtina, tak na Showit.co můžete shlédnou nespočet videí, přečíst si mnoho návodů a článků a mimo jiné i absolvovat kurz o Showit zdarma (lze až po založení účtu).

 

Co jsou to Canvasy?

V krátkosti vám přiblížím, co jsou to canvasy. Jak už bylo řečené, jsou to jednotlivé části stránky. Na jedné stránce můžete mít libovolný počet canvasů. Rozdělení stránky na tyto jednotlivé části vám zjednodušuje orientaci i samotnou tvorbu designu.

Jednotlivé canvasy ještě můžete vrstvit. Do canvasu vložíte canvas view – já tomu říkám další pohled. Využít to můžete například u referencí. První canvas view bude obsahovat první referenci, druhý druhou referenci atd. Překlikávat mezi nimi můžete pomocí šipek či tlačítek, která budou mít správné nastavení. Můžete také nastavit automatické zobrazování. Jako první vždy bude vidět první canvas view. Jednoduchým přetáhnutím v levém panelu můžete měnit jejich pořadí. Pro úpravu dalších “pohledů” je vždy potřeba kliknout na určitý canvas view v levém panelu.

Některé canvasy se opakují na každé stránce, jako například: menu a patička. Tyto části můžete tzv. uzamknout a budou vzájemně propojené – tzv. Site canvasy. V momentě kdy uděláte změnu na úvodní stránce v patičce, změna se projeví i na všech ostatních stránkách. Pro úpravu takového canvasu se musíte nejdříve prokliknout dovnitř (EDIT CANVAS). Tyto canvasy poznáte na první pohled – pokud na něj v Showit najedete myší, zobrazí se šrafování. Stejně tak i v levém panelu uvidíte tyto canvasy šrafovaně.

V pravém panelu najdete nejrůznější nastavení ohledně canvasů – změnu pozadí (to může být pouze barva, fotka či video), animaci nebo akci při scrollování.

V krátkém videu se dozvíte, jak v Showit přidat canvas, jak vložit canvas view i co je to site canvas.

 

 

BONUS:  Vychytávky, které vám zjednoduší práci V Showit

Ať už jste v Showit profík nebo teprve začínáte, je vždy dobré znát pár triků, které vám zjednoduší tvorbu a tím ušetří váš čas. I přesto že v Showit pracuji delší dobu, vždy mě překvapí nějaká skvělá funkce, o které jsem nevěděla. Připravila jsem pro vás tři tipy a nástroje, které vám zrychlí práci a ušetří čas.

 

1.MOŽNOSTI ZAROVNÁNÍ

Je důležité, aby všechny prvky byly do milimetru zarovnané. V Showit pro to najdete skvělou funkci. Když si označíte více objektů zároveň, v pravém postranním panelu se automaticky zobrazí ALIGNMENT (zarovnání).

 

JAK OZNAČÍM VÍCE OBJEKTŮ NARÁZ?

První nejjednodušší možností je stisknout levé tlačítko myši a přejet přes plochu, kde jsou objekty, které chcete označit. Další možností je stisknout a držet klávesové tlačítko Shift + klikat na jednotlivé prvky. Další použitelná klávesová zkratka je Ctrl/Command + klikat na každý prvek.

 

MOŽNOSTI ZAROVNÁNÍ

Ze zkušenosti vím, že je nejlepší si vyzkoušet, co která funkce dělá. Vypsané funkce níže jsou sice užitečné, ale není nad vlastní zkušenost.

•  ALIGN TO CANVAS (zarovnat v canvasu)

1. Zarovná všechny seskupené prvky tak, aby jejich výška byla vycentrována na výšku plátna.
2. Zarovná všechny seskupené prvky tak, aby jejich šířka byla vycentrována na šířku plátna.

 

• ALIGN TO GROUP (zarovnat seskupené prvky)

1. Zarovná všechny seskupené prvky k hornímu okraji nejvýše umístěného prvku.
2. Zarovná všechny seskupené prvky na střední výšku středu všech prvků.
3. Zarovná všechny seskupené prvky ke spodnímu okraji nejnižšího umístěného prvku.
4. Zarovná všechny seskupené prvky k levému okraji prvku umístěného nejvíce vlevo.
5. Zarovná všechny seskupené prvky na umístění střední šířky všech prvků.
6. Zarovná všechny seskupené prvky k pravému okraji prvku umístěného nejvíce vpravo.

 

• MATCH SIZE (zarovnat velikost)

1. Zvětší šířku všech seskupených prvků tak, aby odpovídala vybranému nejširšímu prvku.
2. Zvyšuje výšku všech seskupených prvků tak, aby odpovídaly vybranému nejvyššímu prvku.
3. Zvyšuje výšku a šířku všech prvků tak, aby odpovídaly rozměrům největšího prvku.

 

• DISTRIBUTE (distribuovat)

1. Distribuuje seskupené prvky proporcionálně ve vztahu k jejich šířce po šířce vybraného pole.
2. Distribuuje seskupené prvky proporcionálně ve vztahu k jejich výšce po výšce vybraného pole.

 

 

 

2.KLÁVESOVÉ ZKRATKY

Tuto úžasnou funkci používám neustále, takže byste o ní určitě měli také vědět. Showit má své speciální klávesové zkratky pro vkládání zkopírovaných prvků. Umožňují kopírovat/vkládat nastavení z jednoho objektu na druhý nebo kopírovat/vkládat nastavení ze stolní do mobilní verze.

 

KLÁVESOVÉ PŘÍKAZY

1. První krok je kopírování: stiskněte klávesu Command + C (apple zařízení), Control + C (na PC)
2. Poté vyberte objekt (stolní/mobilní), do kterého chcete vložit nastavení.
3. Speciální vložení se Shift + Command + V (Shift + Control + V na PC )

 

CO MOHU NA JEDNOTLIVÝCH PRVCÍCH KOPÍROVAT?

Text: Styl textu + Hover + Přechody + Efekty
Tvary: Styl tvaru + Hover + Přechody + Efekty
Ikony: Barva ikony + Hover + Přechody + Efekty
Galerie: Nastavení galerie + Hover + Přechody + Efekty 

 

Úžasná funkce, s kterou rychleji docílíte toho, že vaše prvky budou konzistentní napříč vaším webem.

 

3.POMOC S ROZLOŽENÍM MOBILNÍ VERZE

Při tvorbě webu nejčastěji tvoříme stolní verzi a až poté upravujeme mobilní verzi. Většinou se stane to, že při pohledu na mobilní verzi se nám chce brečet – je to spoustu prvků překrytých přes sebe se špatnou barvou či fontem. Nedávno jsem ale přišla na vychytávku, která mi změnila život. Nástroj, který zkopíruje a nastaví stejná nastavení a podobné pozice z desktopové verze do verze mobilní.

 

KDE TENTO NÁSTROJ NAJDETE?

U jednotlivého canvasu kliknete na tři tečky a vyberete možnost LAYOUT MOBILE (mobilní rozložení). Po kliknutí se otevře nové okno, které vám umožní si vybrat několik možností, které vám pomohou zorientovat se v návrhu a uspořádat rozvržení.

 

ROZLOŽENÍ

1. Auto (automaticky): vygeneruje verzi vašeho webu pro mobily podle mobilních rozměrů a rozložení.
2. Scaled (měřítko): vytvoří duplicitní verzi rozvržení pro verzi pro stolní počítače. Velikost písma si musíte optimalizovat pro mobilní verzi, pravděpodobně bude moc velké ze stolní verze.
3. Stacked (skládaný): vycentruje a změní velikost všech prvků na plátně, aby se zobrazily a aby bylo umožněno snadné ruční umístění prvků
4. Do Not Layout (neupravovat rozložení): neupravuje rozložení mobilního formátu (lze použít, když chcete kopírovat pouze nastavení návrhu, ale ne rozložení)
   

 

STYL A NASTAVENÍ

1. Copy Desktop Canvas (kopírovat stolní canvas): zkopíruje všechna nastavení ze stolní verze (canvasu) a použije je na nastavení mobilní verze 
2. Copy desktop elements (kopírovat prvky plochy): zkopíruje pouze nastavení prvků ze stolní do mobilní verze

 

Tato funkce je velmi užitečná a rozhodně vám ušetří spoustu času. Než byste vše (sice skvělou klávesovou zkratkou) zkopírovali a přenesli nastavení každého prvku ze stolní do mobilní verze, uteklo by vám spoustu času. Touto funkcí zrychlíte celý proces tvorby webu na Showit.