Naučte se designovat úžasná modální okna a vyskakovací okna pro newslettery, propagace a oznámení pomocí ai4shops.com
Modální okna (vyskakovací okna) jsou mocné nástroje pro upoutání pozornosti a konverzi návštěvníků. S Designerem modálních oken od ai4shops.com můžete vytvářet krásná, profesionální modální okna bez jakýchkoliv znalostí programování.
Předpoklady: Ujistěte se, že máte vytvořený projekt před zahájením tohoto průvodce.
Video placeholder: Prohlídka editoru modálních oken
Délka: 3-4 minuty | Kompletní průvodce rozhraním editoru modálních oken
Modální okna jsou překryvná okna, která se zobrazují nad obsahem vašeho webu. Běžná použití zahrnují:
Z dashboardu projektu klikněte na "Modální okna" v postranním panelu.
Screenshot: Stránka se seznamem modálních oken a možnostmi vytvoření
Soubor: /_static/guides/modal-designer/modal-list-cs.png
Máte dvě možnosti:
| Možnost | Popis |
|---|---|
| Vytvořit nové | Začněte s prázdným plátnem |
| Ze šablony | Začněte s předpřipraveným designem |
Zadejte popisný název jako "Newsletter Popup" nebo "Letní výprodej Banner".
Začněte rychleji s našimi profesionálně navrženými šablonami!
Screenshot: Mřížka knihovny šablon
Soubor: /_static/guides/modal-designer/template-library-cs.png
Editor modálních oken je váš kreativní pracovní prostor. Pojďme prozkoumat jeho součásti:
Screenshot: Kompletní rozhraní editoru s popisky
Soubor: /_static/guides/modal-designer/editor-interface-cs.png
Centrální oblast, kde designujete své modální okno:
Přidávejte prvky do modálního okna:
| Prvek | Použití |
|---|---|
| Text | Nadpisy, popisy, popisky |
| Obrázek | Loga, fotky produktů, ilustrace |
| Tlačítko | Výzva k akci, odeslat, zavřít |
| Vstup | Textová pole, e-mailová pole |
| Checkbox | Souhlas, preference |
| Kontejner | Seskupení prvků dohromady |
Spravujte pořadí vrstvení prvků:
Konfigurujte vybraný prvek:
Vytvářejte vizuálně úžasná modální okna s našimi možnostmi stylování.
Klikněte na pozadí plátna (ne na žádný prvek) nebo vyberte "Plátno" z panelu vrstev.
Nastavte rozměry modálního okna:
| Předvolba | Rozměry | Nejlepší pro |
|---|---|---|
| Malé | 400 x 300px | Jednoduché zprávy |
| Střední | 500 x 400px | Přihlášení k newsletteru |
| Velké | 600 x 500px | Podrobné formuláře |
| Vlastní | Libovolná velikost | Specifické potřeby |
Zvolte pozadí:
Screenshot: Panel vlastností plátna
Soubor: /_static/guides/modal-designer/canvas-properties-cs.png
Klikněte na libovolný prvek na plátně nebo v panelu vrstev.
V panelu Vlastností:
Vylepšete vizuálními efekty:
Screenshot: Panel vlastností s možnostmi stylování
Soubor: /_static/guides/modal-designer/element-styling-cs.png
Pro moderní, průsvitný vzhled:
Sbírejte informace od návštěvníků pomocí vstupních polí formuláře.
Screenshot: Prvky formuláře v modálním okně
Soubor: /_static/guides/modal-designer/form-elements-cs.png
| Typ vstupu | Popis | Použití |
|---|---|---|
| Textový vstup | Jednořádkový text | Jméno, předmět |
| E-mailový vstup | Validace e-mailu | Přihlášení k newsletteru |
| Textarea | Víceřádkový text | Zprávy, zpětná vazba |
| Checkbox | Výběr Ano/Ne | Souhlas, preference |
| Radio tlačítka | Jeden výběr | Možnosti, plány |
| Dropdown výběr | Více možností | Kategorie, země |
Přetáhněte vstup z panelu nástrojů na plátno.
Konfigurujte v panelu Vlastností:
Vlastnost Název identifikuje pole při odesílání dat:
email, firstName, phone, message
Udělejte své modální okno interaktivní pomocí akcí!
Screenshot: Panel konfigurace akcí
Soubor: /_static/guides/modal-designer/actions-config-cs.png
| Akce | Popis |
|---|---|
| closeModal | Zavře modální okno |
| submitForm | Odešle data formuláře do připojeného formuláře |
| navigateTo | Otevře URL nebo stránku |
| customJS | Spustí vlastní JavaScript (sandbox) |
Klikněte na prvek tlačítka ve vašem modálním okně.
V panelu Vlastností najděte sekci "Akce" nebo "Při kliknutí".
Klikněte na "Přidat akci" a vyberte typ akce:
Příklad: Odeslat a zavřít
submitFormcloseModalAkce se provádějí v pořadí shora dolů.
Pro navigateTo:
URL: https://vasweb.cz/dekujeme
Otevřít v: Nový tab / Stejný tab
Pro customJS:
console.log("Formulář odeslán!");
// Váš vlastní kód zdePoznámka: Vlastní JavaScript běží v sandboxu z bezpečnostních důvodů. Přístup k cookies, localStorage a některým DOM operacím může být omezen.
Pro ukládání odeslaných dat propojte modální okno s Formulářem v ai4shops.com.
Screenshot: Dialog propojení modálního okna
Soubor: /_static/guides/modal-designer/connect-form-cs.png
Po propojení:
Klikněte na ikonu nastavení nebo jděte na Nastavení modálního okna.
Klikněte na "Propojit s formulářem" nebo "Datové propojení".
Buď:
Zajistěte, aby názvy vstupů modálního okna odpovídaly názvům polí formuláře:
| Název vstupu modálního okna | Pole formuláře |
|---|---|
email | Pole E-mail |
firstName | Pole Jméno |
message | Pole Zpráva |
Klikněte na "Propojit" pro spojení modálního okna a formuláře.
Nyní když návštěvníci odešlou vaše modální okno, data plynou do propojeného formuláře!
Přidejte modální okno na jakýkoliv web pomocí jednoduchého kódu pro vložení.
Video placeholder: Vytvoření newsletter popup od začátku
Délka: 5 minut | Vytvoření a vložení kompletního newsletter modálního okna
Ve vašem modálním okně klikněte na "Vložit" nebo "Získat kód".
Screenshot: Dialog vložení s možnostmi
Soubor: /_static/guides/modal-designer/embed-dialog-cs.png
| Režim | Popis | Použití |
|---|---|---|
| Popup | Plovoucí překrytí | Propagace, přihlášení |
| Inline | Vloženo do obsahu stránky | Kontaktní sekce |
Pro režim Popup zvolte, kdy se má zobrazit:
| Spouštěč | Popis |
|---|---|
| Při načtení | Zobrazit ihned při načtení stránky |
| Zpoždění | Zobrazit po X sekundách |
| Scroll % | Zobrazit když uživatel scrolluje na procento |
| Exit Intent | Zobrazit když uživatel chce odejít |
| Klik na tlačítko | Zobrazit po kliknutí na tlačítko |
Váš kód bude vypadat takto:
<script
src="https://ai4shops.com/embed/modal.js"
data-modal-id="vase-modal-id"
data-trigger="exit-intent"
></script>Vložte script před </body> ve vašem HTML:
<!DOCTYPE html>
<html>
<body>
<!-- Váš obsah -->
<!-- ai4shops.com Modální okno -->
<script
src="https://ai4shops.com/embed/modal.js"
data-modal-id="vase-modal-id"
data-trigger="delay"
data-delay="5000"
></script>
</body>
</html>Pro zobrazení modálního okna při kliknutí na tlačítko:
<!-- Vaše tlačítko -->
<button onclick="ai4shops.showModal('vase-modal-id')">
Přihlásit se k newsletteru
</button>
<!-- Script modálního okna (pouze jednou na stránku) -->
<script
src="https://ai4shops.com/embed/modal.js"
data-modal-id="vase-modal-id"
data-trigger="manual"
></script>Ve výchozím nastavení jsou modální okna soukromá. Zveřejněte je pro vložení.
Screenshot: Přepínač veřejného stavu v nastavení
Soubor: /_static/guides/modal-designer/public-toggle-cs.png
Klikněte na ikonu nastavení na vašem modálním okně.
Najděte přepínač "Veřejné" nebo "Publikováno" a aktivujte ho.
Klikněte na "Uložit" pro aplikování.
Bezpečnostní poznámka: K veřejným modálním oknům má přístup kdokoliv s kódem pro vložení. Ujistěte se, že máte nakonfigurovány povolené domény pro zabránění neoprávněnému použití.