Chcete vytvořit a kontaktní formulář lepkavý v DIVI?
Vestavěné lepivé možnosti Divi vám umožňují vytvářet úžasné vizuální efekty na vaší stránce pomocí pouhých několika kliknutí.
Lepivé efekty můžete použít na jakýkoli prvek na vaší stránce, ale v tomto tutoriálu se zaměříme na to, jak vytvořit kontaktní formulář sticky na jakékoli Divi stránce, kterou vytvoříte.
Přečtěte si také našeho průvodce Jak vytvořit lepivou globální hlavičku v DIVI
V tomto příkladu přidáme obrázky a kontaktní informace, které se budou posouvat jako kontaktní formulář zůstane na místě.
přehled
Zde je náhled toho, co budeme navrhovat. Na mobilu neaplikujeme lepivý efekt.
Jak přidat lepící kontaktní formulář na vaši stránku Divi
Vytvořte novou stránku s předdefinovaným rozložením
Začněme tím, že použijeme předdefinované rozložení z knihovny Divi. Pro tento příklad použijeme kontaktní stránku Beauty Product Layout Pack .
Přidejte do své stránky novou stránku Webové stránky a pojmenujte jej a poté vyberte možnost „Použít Divi Builder“.
Pro tento příklad použijeme předem připravené rozvržení z knihovny Divi, takže vyberte 'Vyberte rozložení".
Najděte a vyberte kontaktní stránku rozložení 'Kosmetický produkt".
Vyberte 'Vyberte rozložení' pro přidání rozvržení na stránku.
Nyní jsme připraveni pokračovat v našem tutoriálu.
Změna rozložení formuláře s lepivým kontaktem
V tomto tutoriálu chceme, aby kontaktní formulář v levém sloupci (sloupec 1) zůstal nalepený, zatímco uživatel bude procházet ostatními moduly obsahu v pravém sloupci (sloupec 2). Získáme tak dynamický posouvací efekt, díky kterému vynikne váš kontaktní formulář. Začněme úpravou naší předdefinované šablony.
Viz též: Jak vytvořit posuvné a tlačné menu v DIVI
Vytvořte novou sekci
Přidejte na stránku novou sekci.
Poté vložte nový řádek se dvěma sloupci. Tuto sekci můžete přidat kamkoli na stránku, ostatní sekce budou nakonec odstraněny, jak budeme postupovat tímto tutoriálem.
Otevřete nastavení sekce a změňte barvu pozadí tak, aby odpovídala návrhu rozvržení:
- Pozadí: #EEE8E2
Přidání vašich lepivých modulů do sloupce 1
Přidejte modul kontaktního formuláře do sloupce 1. Pokud sledujete tento tutoriál nebo již máte na své stránce kontaktní formulář, můžete modul jednoduše přetáhnout 'Kontaktní formulář“ existující ve sloupci 1.
Přesuňte modul Text Contactez-nous v horní části této sekce. Bude to také lepkavé. Přidejte bílý okraj do nastavení textu, aby odpovídal stylu rozvržení:
- Šířka okraje: 20px
- Barva ohraničení: #FFFFFF
Původní rozvržení zahrnovalo výplň mezi textem a okrajem, ale to přeskočíme, protože na menších obrazovkách ořízne spodní část kontaktního formuláře.
Přidejte své posuvné moduly do sloupce 2
Ve sloupci 2 přidejte všechny své posuvné moduly. V našem případě přesuňte dva obrázkové moduly, kontaktní informace a informace o umístění do sloupce 2. Jakmile moduly přesunete do nové sekce, můžete smazat všechny zbývající prázdné sekce.
Tip: Pokud potřebujete přesunout několik modulů současně, podržte klávesu 'Květen“ na klávesnici a vyberte moduly, které chcete přesunout. Použijte funkci přesunutí modulu k přesunutí všech modulů současně.
Velký offsetový obrázek rozvržení, které jsme zvolili, může způsobit problémy s horizontálním posouváním. Pojďme tedy změnit některá nastavení, abychom tento problém vyřešili.
Čtěte také: Jak vytvořit globální hlavičku s přihlašovacím formulářem v DIVI
Otevřete nastavení sekce. Pod pokročilý, přejděte na Viditelnost a poté aktualizujte nastavení horizontálního a vertikálního přetečení:
- Horizontální přepad: skrytý
- Vertikální přepad: skrytý
Vaše stránka by nyní měla vypadat takto, s vaším lepivým obsahem ve sloupci 1 a s rolovacím obsahem ve sloupci 2.
Jsme připraveni udělat poslední krok: vytvořit lepivý kontaktní formulář.
Udělejte kontaktní formulář lepivým
Díky našemu rozvržení můžeme povolit pevná nastavení pro náš kontaktní formulář. Vyberte 'Nastavení řádku“, poté vyberte nastavení sloupce 1.
Na kartě Upřesnit přejděte na položku Efekty posouvání. Zde nastavíme parametry sticky.
- Sticky Position: Stick to Top
- Posun nahoře: 15px
- Spodní lepivý limit: čára
A to je vše! Nyní jste do sloupce 1 přidali nastavení rychlého nastavení, takže váš kontaktní formulář a titul budou při posouvání stránky stále pevnější. Vedle kontaktního formuláře byste měli vidět posouvání obsahu sloupce 2.
Konečný výsledek
Nyní se podívejme na náš kontaktní formulář v akci.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Tak ! To je pro tento článek vše. Pevná nastavení Divi jsou snadným způsobem, jak zlepšit vzhled vašeho kontaktního formuláře – nebo jakéhokoli jiného prvku na vaší stránce. Můžete použít pevná nastavení pro libovolnou sekci, řádek nebo modul a vykreslit téměř cokoli Webové stránky lepkavý.
Pokud se chcete dozvědět více o tom, co můžete dělat s lepivými funkcemi Divi, podívejte se na naše výukové programy. Můžete se například podívat na náš tutoriál Jak přidat kontaktní formulář do globální hlavičky.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
