Skrýt formulář
MENU Zavřít

1. Popis headeru

Máme dvě možnosti použití HLAVIČKY - přejímáme ze solitea.com nebo používáme vlastní z bloků na microsite/landing page. Vždy dbáme na přehlednost a pokud je to možné, přidáme kontrastní CTA.

2. Popis Hero slider

HERO používáme s kvalitní fotkou, která se vztahuje k danému tématu a s úderným sdělením. Kdykoliv je jeho použití možné, upřednostníme ho před dalšími druhy headerů. Na fotce můžeme využít title, perex a button. Text je dostupný v bílé a Solitea Blue, pozor na dostatečný kontrast s fotkou (viz slide s použitím Solitea Blue - špatně)

3. Popis Intro 1

Tento typ headeru používáme pro menší nadpisy, případně se hodí pro úvod "zanořených stránek".  Lze jej naplnit titlem, perexem a buttonem. Vzhledem k dynamickému parallaxu v něm nepoužíváme fotku. Lze použít s animací / bez animace.

Animation A
Animation A

Děláme to pro vás!

Jen pro vás jsme nachystali tento katalog, aby se vám lépe tvořili landing pages a microsites. Doufáme, že vám to vaši práci ulehčí. 

4. Popis Intro 2

Tento typ headeru používáme pro menší nadpisy, případně se hodí pro úvod "zanořených stránek".  Lze jej naplnit titlem, perexem a buttonem. Nepoužíváme jako header pro úvodní slide vlastní microsite/landing page.

Nestůjte!

Scrollujte dál!

Podívejte se, jak Vám náš katalog
usnadní pracovní život.

5. Popis Intro 3

Tento typ headeru používáme pro menší nadpisy, případně se hodí pro úvod "zanořených stránek". Správně naplněný obsahuje title, perex a fotku. Lze doplinit o button. 

Co by se do tohoto bloku mohlo hodit?

V tomto bloku bude dobře fungovat středně dlouhý text. Musíme myslet na to, že se jedná o úvod - první věc, kterou zákazník vidí z naší landing page. Takže buďme zajímaví, nechceme ho odradit dlouhým textem už teď. Takže shrnout obsah a co ho zde čeká.

6. Popis Modální sekce

Tento prvek po kliknutí na button zaktivuje zprava vyjíždějící fullscreen okno. To zpravidla obsahuje kontaktní formulář.

7. Popis footeru

Footer je pevnou součástí každé microsite / landing page. Bez něho stránku nikdy nepublikujeme.

8. Popis sekce

Jedná se o "obalovací prvek", který určuje barvu pro všechno, co je uvnitř. Barva je dostupná v subbrandových odstínech, dále je možnost vybrat s/bez nadpisu.

Sekce

9. Popis Blogu

Umožňuje zobrazit články, které jsou dostupné na blogu solitea.com. Nejprve je třeba vytvořit článek na centrálním webu, až potom je možné ho propojit s builderem.

Blog

10. Popis Bloky se soubory ke stažení

Blok používáme v případě poskytování souboru volně ke stažení. Pokud chceme za stažení souboru získat data zákazníka, tento blok není vhodný.

Bloky se soubory ke stažení

Bloky se soubory ke stažení

Bloky se soubory ke stažení

11. Popis Bloky do sloupců

Blok slouží pro prezentaci pains/gains/aj. Prvek není klikatelný, takže není možné jej použít jako rozcestník. Lze použít naplněné pouze textově, tedy title a perex. Tento druh bloku nepodporuje ikony.

Bloky do sloupců

Tento blok je fakt super

Tento blok je fakt super, protože mi dává možnost dát vedle sebe tři ideálně stejně dlouhé texty.

Tento blok je fakt super

Tento blok je fakt super, protože mi dává možnost dát vedle sebe tři ideálně stejně dlouhé texty. A můžou být fakt hodně dlouhé. Takže zde můžu například detailně porovnat nějaká tři řešení, která můj produkt nabízí. Ale vždy myslím na to, aby byly bloky obsahově stejně nebo alespoň podobně naplněné. Tato stupnice "náplní" slouží k tomu, abyste věděli, že obsahově je zde dost prostoru.

Tento blok je fakt super

Tento blok je fakt super, protože mi dává možnost dát vedle sebe tři ideálně stejně dlouhé texty. A můžou být fakt hodně dlouhé. Takže zde můžu například detailně porovnat nějaká tři řešení, která můj produkt nabízí. Ale vždy myslím na to, aby byly bloky obsahově stejně nebo alespoň podobně naplněné. Tato stupnice "náplní" slouží k tomu, abyste věděli, že obsahově je zde dost prostoru. A protože textu se vejde fakt hodně, text sem ještě jednou zkopíruju.Tento blok je fakt super, protože mi dává možnost dát vedle sebe tři ideálně stejně dlouhé texty. A můžou být fakt hodně dlouhé. Takže zde můžu například detailně porovnat nějaká tři řešení, která můj produkt nabízí. Ale vždy myslím na to, aby byly bloky obsahově stejně nebo alespoň podobně naplněné. Tato stupnice "náplní" slouží k tomu, abyste věděli, že obsahově je zde dost prostoru.

13. Popis Bloky se skrytým obsahem

Používáme pro velké množství obsahu - primárně je zobrazen pouze jeden odstavec, pro další je nutné rozkliknutí. Text je spojen s fotkou - pozor, aby text nepřetekl výšku fotky. Blok je dostupný v subbradnových barvách.

Bloky se skrytým obsahem

Fotka má ladit s obsahem

Je důležité, aby zvolený obrázek korespondoval s textem. Obrázek nám slouží jako jeho dokreslí, takže by to společně s obsahem sdělení mělo ladit. Důležitá je ale také délka tohoto textu. Neměl by přesahovat svou délkou výšku obrázku. To designově opravdu nepůsobí dobře.

Fotka má ladit s obsahem

Fotka má ladit s textem a tonalitou dalších fotek

Je důležité, aby zvolený obrázek korespondoval s textem. Obrázek nám slouží jako jeho dokreslí, takže by to společně s obsahem sdělení mělo ladit. Důležitá je ale také délka tohoto textu. Neměl by přesahovat svou délkou výšku obrázku. To designově opravdu nepůsobí dobře. Tato fotka je vyšší - proto můžu použít obsahově delší text.

Fotka má ladit s textem a tonalitou dalších fotek
Vlastní otevírací text Vlastní zavírací text

14. Popis Citace

Citaci používáme v kombinaci s fotkou nebo s logem. Lze použít jako referenci nebo citaci vlastního zaměstnance. Podklad je dostupný v subbrandových barvách. 

Citace

Ve firmě Solitea pracuju vážně rád. Ačkoliv se jedná o opravdu velký holding, snaží se udržet osobité vztahy a jednání. Když mám nějaký problém, tak ho mám s kým řešit a nemusím si lámat hlavu s tím, za kým mám vlastně jít. Prostě je to tady fajn. Navíc se jednotlivým subbrandům daří udržet specifickou atmosféru. A tak to má být.

Josef Nárožný

Marketingový specialista Solitea Vario


15. Popis DEMO

Jedná se o fullscreenový blok, který má v levé části obsah a vpravo formuláře. Obsah lze naplnit titlem, perex a také fotkou. Je vhodné například pro e-book ke stažení - vlevo prezentujeme obsah e-booku, formulář vpravo pak služí k jeho stažení.

DEMO

E-book ke stažení!

Tento obrázek se sem obsahově opravdu nehodí. Ale dobře tu bude vypadat například náhled e-booku, pokud formulář vpravo slouží k jeho stažení. 

16. Popis flexibilní seznam

Používáme pro trojsloupcový odrážkový seznam. Lze použít čístlo / odrážky.

Seznam devíti položek

Tento text zde můžu, ale nemusím mít. Záleží na tom, jestli výčet seznamu potřebuje uvést nějakým perexem. Pokud je název dostatečně srozumitelný a obsah očividný, perex zde být rozhodně nemusí.

 

  • 1. položka
  • 2. položka
  • 3. položka
  • 4. položka
  • 5. položka
  • 6. položka
  • 7. položka
  • 8. položka
  • 9. položka

17. Popis Formulář

Formulář plníme dle požadavků na údaje, které chceme od zákazníka získat. Nezapomenout na zaškrtávací políčka - Souhlas ze zpracováním údajů.

Formulář

18. Popis Horizontální seznam ikon

Lze použít na zdůraznění pains, gains, procesu aj. Není klikatelné, ani ničím orámované. Správně naplněné obsahuje ikonu/číslo, title a perex.

Jak na tento blok?

Příprava ikon

Jako první zvolím vhodnou ikonu k obsahu.

Délka textu

Pozor na nevhodně příliš dlouhý text.

19. Popis Obrázek

Obrázek se maximalixuje při kliknutí - proto dbáme na dostatečnou kvalitu.

Obrázek

20. Popis Obsah

Hodí se pro dlouhý text. Ideální strukturovat do odstavců. Je možné naplnit i fotkou. 

Obsah

Blok s názvem Obsah používáme pro opravdu dlouhý text. Slouží tedy k detailnímu popisku našeho řešení, produktu nebo jej lze použít pro vyprávění nějakého příběhu. Rozhodně ho nepoužíváme, pokud chceme říct pouze pár úderných slov.

Blok s názvem Obsah používáme pro opravdu dlouhý text. Slouží tedy k detailnímu popisku našeho řešení, produktu nebo jej lze použít pro vyprávění nějakého příběhu. Rozhodně ho nepoužíváme, pokud chceme říct pouze pár úderných slov.

21. Popis Popup okno

Hodí se pro přihlášení na odběr Newsletteru aj.

Popup okno

Popup okno

Popup okno

22. Popis Porovnání

Slouží pro srovnávání ne/výhod řešení aj. Max tři sloupce. 

Porovnání

Vario

Zde můžete v případě porovnání dvou produktů dát krátký perex, kterým se porovnání uvede. Například, že je to ERP systém pro středně velké podniky.

 

  • Výrazná modrá v logu
  • Krásná vizuální identita
  • Skvělí konzultanti
  • Osobitý přístup
  • Radost ze spolupráce
  • Samá pozitiva

Byznys

Zde můžete v případě porovnání dvou produktů dát krátký perex, kterým se porovnání uvede. Například, že je to ERP systém pro středně velké podniky.

 

  • Výrazná červená v logu
  • Krásná vizuální identita
  • Skvělí konzultanti
  • Osobitý přístup
  • Radost ze spolupráce
  • Samá pozitiva

23. Popis Proces

Pro zobrazení kroků v postupu - implementace, spuštění, zhodnocení aj. Jednotlivé karty nejsou klikatelné.

Proces tvorby landing page

Vyberu si z již existujících bloků.

Nechám si naklikat landing page.

Zkontroluju obsah a používám ji.

24. Popis Slider ikon

Používáme hlavně pro prezentaci referečních společností. Loga vkládáme v šedivé barvě (přímo definovaný odstín solitea blue).

S kým spolupracujeme?

Ikona 1
Ikona 2
Ikona 3
Ikona 4

25. Popis Textové bloky s odkazy

Lze použít jako rozcestník. Správně naplněná karta obsahuje nadpis, perex a button. 

Textové bloky s odkazy

Blok 1

Tento blok je klikatelný, takže se jedná o nejlepšího parťáka pro rozcestník. My jsme ho použili na referenční stránce, kde každá firma znamená jiný sektor. První karta tak může vést na řešení pro malé podniky a živnostníky.

Blok 2

Tento blok je klikatelný, takže se jedná o nejlepšího parťáka pro rozcestník. My jsme ho použili na referenční stránce, kde každá firma znamená jiný sektor. Druhá karta tak může vést na dostupná řešení pro velké společnosti.

26. Popis Textový blok s ikonou

Používáme pro obsáhlý text v kombinaci s ikonou - například když nemáme k dispozici fotku. Nelze použít jako rozcestník nebo pro porovnání - bloky se řadí pod sebou.

Textový blok s ikonou

I s ikonou se dají dělat velké věci

Někdy se může stát, že budeme mít velké množství textu, ale nebudeme k němu mít žádnou fotku. Jak takovou situaci řešit? Textovým blokem s ikonou - ano, protože i s ikonou se dají dělat velké věco. Nebude to na pohled tak lákavé, jako blok s fotkou, ale určitě to splní svůj účel. Zatím se nám nestalo, že bychom fotku nezvládli pro obsah najít, ale je lepší být vždy připraven. No není to pravda?

27. Popis Textový blok s obrázkem

Používáme pro text v kombinaci s fotkou. Lze doplnit o title a button. Pozor, aby délka textu nepřetekla přes výšku fotografie.

Textový blok s obrázkem

Fotka má ladit s obsahem

Je důležité, aby zvolený obrázek korespondoval s textem. Obrázek nám slouží jako jeho dokreslí, takže by to společně s obsahem sdělení mělo ladit. Důležitá je ale také délka tohoto textu. Neměl by přesahovat svou délkou výšku obrázku. To designově opravdu nepůsobí dobře

28. Popis Textový blok s rámečkem

Používáme pro text v kombinaci s fotkou - screenem, který umístíme do rámečku dle zařízení (mobil, tablet, notebook). Lze doplnit o title a button. Pozor, aby druh rámečku udpovídal obrázku, který do něho umísťujeme. Hodí se například pro screeny z aplikací. Velikosti screenů: telefon - 186x400 px, tablet - 550x418 px, notebook - 479x304 px

Textový blok s rámečkem

Pozor na velikost i obsah obrázku

Tyto rámečky jsou dělané speciálně pro náplň ve formě screenů - z webových prohlížečů či z aplikací. Je důležité, aby byl screen připraven v přesné velikosti, jinak v kombinaci s rámečkem nepůsobí dobře. Pozor na barvu pozadí - subbrand barvy jsou určené pro subbrand řešení. Velikost screenu pro notebook 479x304 px.

Pozor na velikost i obsah obrázku

Tyto rámečky jsou dělané speciálně pro náplň ve formě screenů - z webových prohlížečů či z aplikací. Je důležité, aby byl screen připraven v přesné velikosti, jinak v kombinaci s rámečkem nepůsobí dobře. Pozor na barvu pozadí - subbrand barvy jsou určené pro subbrand řešení. Velikost screenu pro tablet 550x418 px.

Pozor na velikost i obsah obrázku

Tyto rámečky jsou dělané speciálně pro náplň ve formě screenů - z webových prohlížečů či z aplikací. Je důležité, aby byl screen připraven v přesné velikosti, jinak v kombinaci s rámečkem nepůsobí dobře. Pozor na barvu pozadí - subbrand barvy jsou určené pro subbrand řešení. Velikost screenu pro telefon 186x400 px.

29. Popis Textový blok s řešením

Používáme pro text v kombinaci se slideshow. Lze doplnit o title a button. Pozor, aby délka textu nepřetekla přes výšku fotografií. Pozadí je dostupné v subbrandových barvách.

Textový blok se slideshow

Poutavý titulek k vaší krásné slideshow

Použití slideshow se hodí pro prezentaci systému nebo řešení pomocí vizualizací ze screeny - jak můžete vidět v pravo. Ukazujeme ERP systémy, ale zajímavě, z různých zařízní a různých míst. Je to fajn prvek, který může oživit každou landing page.

Poutavý titulek k vaší krásné slideshow

30. Popis Tlačítko

Popis Tlačítko

Tlačítko

31. Popis Video

Slouží k prolinkování videa z Youtube - video je tedy nejprve potřeba nahrát tam, nikoli přímo do Xavera.

Video

32. Popis Číselný seznam

Využíváme, když chceme proces/postup/body podpořit číslicí - např. 5 na sebe navazujích výhod, 5 kroků v rámci procesu aj. Snažíme se držet maximálně pět odrážek. Pozadí bloku je dostupné v subbrand barvách.

Jak získat pěknou landing page?

  1. Vymyslet si obsah stránky.

  2. Vybrat si bloky z katalogu.

  3. Domluvit se s plničem.

  4. Zkompletovat podklady.

  5. Počkat na naklikání.

  1. Kontrola obsahu

  2. Zveřejnění

  3. Kontrola funkčnosti

  4. Radost

33. Popis Sekce s carouselem

Lze použít na zdůraznění pains, gains, procesu aj. Není klikatelné. Správně naplněné obsahuje ikonu/číslo, title a perex. Lze naplnit větším počtem karet - objeví se šipky pro posouvání.

Sekce s carouselem

34. Popis Sekce s horizontálním filtrem

Sekce slouží k rozdělení následující sekce podle kategorií/řešení aj. Obsah se bude měnit v celé následné sekci, ta je dostupná v subbrandových barvách. Doporučený maximální počet položek ve filteru je pět.

Vložená sekce v tabu 1

Vložená sekce v tabu 1

Vložená sekce v tabu 2

Vložená sekce v tabu 2