Video hero banner pro Shoptet – YouTube pozadí + text + CTA

Detailní popis produktu

Proměň úvodní stranu Shoptetu ve video prodejní zónu

Video hero banner přidá na úvodní stranu tvého Shoptet e-shopu moderní blok s videem na pozadí, čitelným textem na zatemněné vrstvě a výrazným tlačítkem s výzvou k akci. Ideální pro hlavní nabídku, akci, nový produkt nebo službu.

Co tento digitální produkt umí

• vloží na úvodní stranu celoplošný video banner s fixní výškou (cca 600 px na desktopu),
• používá YouTube video na pozadí (bez ovládacích prvků),
• zachovává poměr videa 16:9 a ořezává ho jen shora a zespodu tak, aby vypadal dobře na všech šířkách,
• na desktopu zobrazí text a tlačítko na jemně zatemněném overlay přes video,
• na mobilu přesune text pod video pro maximální čitelnost,
• tlačítko má šířku podle obsahu (žádný nehezký fullwidth blok),
• funguje jako statický blok – text i odkaz si upravíš přímo v kódu, bez programování.

Pro koho je banner ideální

• pro e-shopy na Shoptetu, které chtějí na úvodní straně silný první dojem,
• pro prodej digitálních produktů, kurzů, služeb nebo dražších řešení, kde video pomáhá vysvětlit hodnotu,
• pro kampaně jako Black Friday, sezónní akce, launch nového produktu nebo sběr leadů,
• pro majitele, kteří nechtějí čekat na programátora a chtějí hotové řešení “vložit a jet”.

Co přesně získáš

• HTML strukturu video banneru připravenou pro vložení do úvodní stránky Shoptetu,
• CSS kód pro správné zobrazení videa, overlay, textů a tlačítka,
• řešení fixní výšky banneru na desktopu s vertikálním vystředěním videa,
• responzivní chování pro mobily a tablety (text se přesune pod video),
• návod, kam kód vložit a jak si upravit:
  • YouTube video (výměna URL videa),
  • nadpis a text,
  • odkaz a text tlačítka.

Jak to technicky funguje

1. Vytvoří se vnější blok banneru s pevnou výškou (600 px), který drží celý hero.
2. Uvnitř je další obal s poměrem stran 16:9, který obsahuje YouTube iframe a stará se o to, aby video mělo vždy správný formát.
3. Celek se vertikálně vystředí a ořízne se pouze z vrchu a zespodu, takže na šířku zabere celou stránku, ale nevyteče z banneru.
4. Přes video je poloprůhledný gradient, který zajišťuje čitelný bílý text a tlačítko.
5. Na menších zařízeních se layout přepne: video zůstává v poměru 16:9 a text se zobrazí pod ním na světlém pozadí.

Co je potřeba mít připravené

• Shoptet e-shop (doporučeno pro šablony Classic/Colors a jejich deriváty),
• URL videa na YouTube, které chceš použít na pozadí,
• vlastní text do nadpisu, krátkého popisu a tlačítka,
• URL cílové stránky, na kterou má tlačítko vést (produkt, kategorie, landing page, formulář).

Kam kód vložíš

1. HTML část vložíš do úvodní stránky – typicky přes: Vzhled > Editor > Úvodní stránka nebo do vlastního HTML bloku.
2. CSS část vložíš do: Vzhled > Editor > Vlastní CSS.
3. V kódu upravíš:
   • URL videa v atributu src u <iframe>,
   • text v <h1> a <p>,
   • adresu a text tlačítka v <a> prvku.

Výhody oproti běžnému banneru

• lepší první dojem – video prodá atmosféru a kontext během pár vteřin,
• vyšší šance, že návštěvník pochopí, co nabízíš, ještě před scrollováním,
• flexibilita – můžeš rychle měnit videa podle kampaní (BF, Vánoce, nový produkt),
• bezpečné řešení – nic nehackuješ, jen přidáváš vlastní HTML a CSS,
• časová úspora – hotové řešení místo zadávání práce programátorovi.

Podpora

Pokud si nebudeš vědět rady s nasazením nebo budeš chtít banner upravit na míru (např. jinou výšku, jiný layout textu, více tlačítek), můžeš se na mě kdykoliv obrátit – pomůžu ti s doladěním přímo pro tvůj e-shop.