Strukturování obsahu pomocí sekcí
Sekce sdružují tématicky stejné bloky obsahu do většího celku. Práce se sekcemi je zásadním krokem při práci se solidpixels, jelikož vám umožňují vytvářet vizuálně pestrý a různorodý obsah. Každá sekce tak může mít na pozadí jiné barvy, obrázky či videa. Funkce maskování a odsazení obsahu vám pak dovolují vytvářet přechody mezi sekcemi na vašem webu. Sekce navíc můžete snadno přesouvat, kopírovat či sdílet napříč vaším webem.
Jak sekce vznikají
Sekce v solidpixels můžete tvořit dvěma způsoby.
První možností je přetažení bloku do prostoru stránky pomocí drag & drop editoru. Pomocí bloků můžete v sekcích dále strukturovat na sloupce a řádky. Více o tom, jak pracovat s bloky, se dočtete v našem článku o tvorbě obsahu pomocí bloků.
Druhý způsob přidání sekce je pomocí knihovny sekcí. Na prázdné stránce stačí kliknout na tlačítko "Vybrat z knihovny" a zvolit, kterou sekci chcete přidat. V případě, že do již existující struktury stránky chcete přidat další sekci, lze vkládat sekce z knihovny také pomocí vodorovné vodící čáry "Přidat sekci", která se objeví po najetí do prostoru mezi sekcemi.
Přesouvání, kopírování a mazání sekcí
Pořadí sekcí můžete snadno měnit stisknutím a podržením levého tlačítka myši na sekci a následným přesunutím sekce na požadované místo. Při přesouvání sekcí vám poradí modré vodící linky, které se při přetažení sekce objeví mezi ostatními sekcemi. Sekce jsou řazené v jednom sloupci, sekce tak lze skládat pouze pod sebe.
Při tvorbě obsahu vám značně usnadní práci kopírování sekcí. Při přesouvání sekce stačí držet klávesu Alt (Windows a Linux) nebo Option ⌥ (Mac). Místo přesunu se sekce na své původní pozici zachová a na novou pozici se pouze zkopíruje. Pokud tak na webu používáte opakující se sekce se stejným designem, tato funkce vám značně usnadní práci s nimi.
Sekce lze mazat pomocí červené ikonky popelnice v pravém horním rohu sekce, která se objeví po jednom kliknutí na sekci. Sekce se také automaticky smaže, pokud smažete všechny bloky v ní. Pokud sekci smažete omylem, snadno jí vrátite pomocí klávesové zkratky
Ctrl + Z (Windows a Linux) nebo Command ⌘ + Z (Mac), více si můžete přečíst ve článku o klávesových zkratkách.
Vzhled a nastavení sekcí
Každá sekce má vlastní nastavení vzhledu, které lze otevřit pomocí ozubeného kolečka, které se objeví v právem horním rohu sekce při kliknutí na sekci. Nastavení sekce můžete otevřít také dvojitým kliknutím na sekci.
Pozadí sekcí
Pozadí sekcí v solidpixels vám umožňuje vytvářet atraktivní sekce s různými barvami, obrázky nebo videi. Když tyto prvky zkombinujete a vytvoříte tak jednotnou vizuální identitu, výrazně si usnadníte práci při budování přehledného a profesionálního webu.
Barevné pozadí
Barevné pozadí je ideální, pokud chcete vizuálně odlišit jednotlivé sekce, například při střídání různorodého obsahu, který je potřeba jemně oddělit. Barvy na pozadí sekcí můžete snadno upravovat a vybírat si mezi jednolitou barvou, lineárním, radiálním nebo kónickým barevným přechodem.
Obrázek na pozadí
Obrázek na pozadí je skvělou volbou, pokud máte vlastní profesionální fotografie a chcete zdůraznit svůj obor nebo vizuální styl. Můžete však také využít fotky z fotobanky, které odpovídají vašemu odvětví nebo brandu. Fotkám lze navíc nastavit filtr, o kterém se více dočtete v sekci Další nastavení.
Video na pozadí
Video na pozadí je vhodnou volbou, pokud chcete představit své prostory potenciálním klientům. Pomocí videa můžete zdůraznit vzhled svého prostředí a navodit specifickou atmosféru. Videa na pozadí lze snadno vkládat pomocí URL odkazů z YouTube či Vimeo. Lze také vypnout přehrávání videí na mobilních zařízeních a tabletech.
Vlastnosti obsahu sekce
Nastavení obsahu sekce vám umožňuje upravit výšku a šířku obsahu a také zvolit barvu textu v sekci. Díky tomu lze obsah vizuálně odlišit nejen barvami, ale také šířkou textu a dalšími parametry. Výchozí nastavení těchto parametrů najdete v záložce Design v sekcích Stránka a Typografie.
Výška sekce
Můžete zvolit z předdefinovaných možností výšky:
S (malá),
M (střední),
L (velká),
automatická výška (přizpůsobí se obsahu)
plná výška (zabírá celou výšku obrazovky). Plná výška se aplikuje pouze pro desktop, nikoliv pro mobilní zařízení a tablety.
Šířka obsahu
Umožňuje nastavit šířku obsahu na stránce. Možnosti jsou:
úzká,
na mřížku (vycentrovaný obsah podle mřížky),
široká
plná (zabírá celou šířku stránky). Úzká a široká varianta obsahu jsou určený poměrem, o který se šířka mění, a který je jednotný pro celý web.
Barva textu: Lze zvolit automatickou barvu textu (podle určeného barevného profilu obrázku na pozadí se automaticky vybere výchozí nebo inverzní barva, aby byl text vždy čitelný), výchozí barvu nebo inverzní barvu (výchozí a inverzní barvu textu nastavíte v záložce Design)
Tip: Využití vlastností sekcí ke strukutrování obsahu
Využitím nastavení výšky a šířky obsahu můžete snadno strukturovat obsah webu tak, aby byl přehledný a vizuálně atraktivní. Zúžený obsah se hodí na delší text, aby se lépe četl díky dřívějšímu zalomení řádků. Plná šířka zase naopak na vizuální obsah jako jsou fotografie, galerie nebo obsah ze sociálních sítí.
Další nastavení
Pod položkou Další nastavení sekce najdete další možnosti úprav, které se mění v závislosti na nastavení pozadí.
Všeobecná nastavení
Nastavení masky umožňuje zvolit různé tvary maskování a jejich zarovnání k hornímu nebo dolnímu okraji sekce. Lze také upravit výšku masky, která určuje, jak velkou část sekce maska zakryje.
Odsazení sekce umožňuje přizpůsobit výšku sekce, pokud vám globální nastavení nevyhovuje. Odsazení posouvá celou sekci, včetně pozadí i obsahu. Díky možnosti zadat negativní hodnoty můžete sekci zkrátit a docílit tak překrytí sekcí, čímž vytvoříte jedinečný design.
Odsazení obsahu posouvá pouze obsah v rámci sekce. Pokud je obsah příliš blízko předchozí sekce, můžete jej více odsadit. Negativní hodnoty umožňují plynulý přechod mezi sekcemi, kde obsah jedné sekce pokračuje v další.
Struktura překrývajících se sekcí je založena na jednoduché hierarchii vrstev. Pomocí tlačítek Přenést do popředí a Odsunout do pozadí určíte, která sekce bude viditelná a která ji bude překrývat. Tím lze dosáhnout vizuálně konzistentního efektu, kde každá následující sekce překrývá tu předchozí.
Tato nastavení jsou rozdílná pro desktop, tablet a mobil, abyste mohli design přizpůsobit pro různá zařízení.
Obrázek na pozadí
Pokud používáte obrázek na pozadí, můžete zde nastavit barevný filtr, který obrázek překryje, a vybrat typ překrytí, jenž ovlivní, jakým způsobem filtr obrázek ovlivní.
K dispozici je také možnost přidat efekt prolnutí, který může obrázkům dodat efekty jako oddálení, rozostření nebo fixní pozici. Tyto efekty mohou být použity napříč webem pro vytvoření unikátního designu a vizuální konzistence.
Dále zde můžete zapnout zobrazení obrázku jako vzorku, což znamená, že se obrázek bude opakovat jako mozaika, aby vyplnil celou plochu sekce. Poslední možnost, Zobrazit zdrojový obrázek, zajistí, že se obrázek zobrazí v plné kvalitě a původní velikosti, bez jakékoliv optimalizace.
Tip: Využití vzorů na pozadí sekcí
Pokud nastavíte obrázek jako vzorek, bude se opakovat a vyplní celou plochu sekce, podobně jako tapeta. Tento efekt se hodí pro vzory, textury nebo malé obrázky, které se opakováním spojí do souvislého vizuálního celku. Využijte ho pro vytvoření jednotného vzhledu bez viditelných přechodů.
Video na pozadí
Při využití videa na pozadí sekce lze zvolit zástupný obrázek, který se zobrazí místo videa na mobilech a tabletech v případě, že je na těchto zařízeních přehrávání videí vypnuté.
Podobně jako v případě obrázku na pozadí pak také můžete volit mezi různými efekty, jako je fixní pozice či rozostření.
