Chcete vytvořit a kontaktní formulář v Divi, který se objeví po kliknutí na tlačítko?
V tomto tutoriálu Divi vám ukážeme, jak vytvořit a kontaktní formulář který se objeví po kliknutí na tlačítko, které nepoužívá nic jiného než Divi, kód jQuery a kód CSS.
Přečtěte si také našeho průvodce: Divi: Jak vytvořit lepící zápatí s efektem "Odhalit".
Je to skvělý způsob, jak udržet Návštěvníci váš webové stránky zaměřili na akci, ke které se zavázali kliknutím na tlačítko. Nepřenese je na jinou stránku.
přehled
Níže se můžete rychle podívat na to, co budeme vytvářet, a pak se vrhnout na tutoriál!
Náhled na PC
Náhled na telefonu a tabletu
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 dejte mu název, pak 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 domovskou stránku rozvržení 'Společnost interiérového designu".
Vyberte 'Vyberte rozložení' pro přidání rozvržení na stránku.
Nyní jsme připraveni pokračovat v našem tutoriálu.
Vytvořte sekci pomocí modulu Tlačítko
První věc, kterou budeme muset udělat, je přidat novou sekci, kam umístíme tlačítko, které umožní kontaktní formulář ukázat se.
Viz též: Divi: Jak vytvořit vlastní zápatí
Stačí přidat standardní sekci
Dále vyberte řádek s jedním sloupcem.
Jakmile to uděláte, přidejte do něj modul Button.
Tlačítko si můžete přizpůsobit, jak chcete, ale musíte se ujistit, že adresa URL tlačítka začíná znakem „#“ následovaným něčím jiným. Nemůžete to nechat prázdné nebo prostě použít znak '#'. Přidáním '#' a textu se stránka po kliknutí na tlačítko nepohne. Pokud jej necháte prázdné, stránka se po kliknutí obnoví. A pokud použijete pouze '#', budete přesměrováni na začátek stránky.
Další důležitá věc, kterou budeme muset udělat, je přiřadit tlačítku třídu CSS. Tuto CSS třídu použijeme dále v tomto článku v kódu jQuery, abychom zajistili, že se po kliknutí zobrazí kontaktní formulář. Třída, kterou budeme muset tlačítku přiřadit, je jednoduše „tlačítko“.
- CSS třída: tlačítko
Vytvořte kontaktní formulář pro PC verzi
Další věc, kterou budeme muset udělat, je vytvořit kontaktní formulář na ploše, který se zobrazí, jakmile někdo klikne na tlačítko, které jsme vytvořili v předchozí části tohoto článku. Později v tomto článku vám také ukážeme, jak vytvořit mobilní verzi.
Přidejte novou standardní sekci
Začněte přidáním nové standardní sekce na stránku, na které pracujete. V nastavení sekce přejděte na kartu Upřesnit a do pole Třída CSS přidejte „vyskakovací okno“.
Přejděte na stejnou kartu dolů a umístěte následující řádky kódu CSS do pole Před v podkategorii Custom CSS:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Přidáním tohoto zajistíme, že sekce zabere celou kartu. Můžete upravit barvu pozadí v kódu CSS, abyste vytvořili požadované překrytí pozadí. V tomto případě použijeme černou barvu s určitou průhledností. Na stejné kartě přidejte do hlavního prvku také následující řádek kódu CSS:
display: none;
Poslední, co budeme muset v záložce Upřesnit udělat, je deaktivace sekce na telefonu a tabletu v podkategorii Viditelnost.
Přidejte řádek do dvou sloupců
Pokračujte přidáním řádku se dvěma sloupci a přejděte na kartu Styl.
- Použít vlastní šířku okapu: ANO
- Maximální šířka: 1291 pixelů
Zadejte parametry každého ze sloupců.
Upravte vnitřní okraje (horní, levý a pravý) následovně:
- Vnitřní okraj (nahoře, vlevo, vpravo): 30 pixelů
Dokončete přechodem na kartu Upřesnit. Do hlavního prvku přidejte následující řádky kódu CSS:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Přidejte první modul Text
Jakmile provedete všechny změny v sekci a řádku, je čas přidat různé moduly, které chcete zobrazit.
První věc, kterou přidáme, je název, který se objeví. Začněte přidáním nového modulu Text do prvního sloupce řádku, text napište do záložky Obsah a přepněte na kartu Styl.
Na kartě Styl jsme pro podkategorii Text použili následující nastavení:
- Písmo záhlaví: Lobster
- Soft Light Header: Tučný text
- Zarovnání textu: Tučné
- Barva textu záhlaví: #002282
- Velikost textu záhlaví: 37px
- Výška záhlaví: 1,7 em
Přidejte druhý modul Text
Pokračujte přidáním nového modulu Text a zadejte text, který se má zobrazit na kartě Obsah. Přejděte na kartu Styl a použijte následující nastavení na podkategorii Text:
- Zarovnání textu: Na střed
- Písmo textu: Arial
- Text Velikost textu: 13px
- Barva textu Text: #002282
- Výška řádku textu: 1,7 em
Přidejte modul „Sledujte nás na sociálních sítích“.
Dále do prvního sloupce přidáme také modul 'Follow us on social media'. V tomto případě jsme vybrali tři ikony sociálních sítí; Facebook, Twitter a Instagram.
Poslední věc, kterou budeme muset udělat, je přidat výplň (vlevo) do tohoto modulu v záložce Upřesnit. Přidejte následující řádek kódu CSS do hlavního prvku:
padding-left: 40%;
Přidejte modul kontaktního formuláře
Poté se můžeme přesunout do druhého sloupce v řadě. V tomto sloupci první věc, kterou umístíme, je modul Kontaktní formulář.
Pro tento příklad jsme vybrali pouze dvě pole; jméno a email.
Jakmile přidáte modul Kontaktní formulář, přejděte na kartu Styl modulu Kontaktní formulář a proveďte následující změny v podkategorii Pole:
- Pole barev textu: #002282
- Pole velikosti textu: #002282
- Výška siločáry: 1,7 em
Na stejné kartě proveďte následující změny v podkategorii Tlačítko:
- Použít vlastní styly pro tlačítko: Ano
- Tlačítko velikosti textu: 20
- Barva textu tlačítka: #FFFFFF
- Tlačítko pozadí: #0086c4
- Šířka okraje tlačítka: 2
- Tlačítko Poloměr okraje: 3
Přejděte na kartu Upřesnit a přidejte okraj 5 %.
Přidejte modul Souhrn
Další věc, kterou budeme muset přidat do druhého sloupce, je modul Souhrn. Jediné, k čemu tento modul potřebujeme, je ikona ukončení v pravé horní části vyskakovacího okna. Vyberte další ikonu ze seznamu ikon a vše ostatní nechte prázdné.
Poté přejděte na kartu Upřesnit a jako třídu CSS zadejte „zavřít“.
Na stejné kartě přidejte následující řádky kódu do hlavního prvku vlastní podkategorie CSS:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Aplikujte na čáru přechodovou výplň
Nakonec na čáru přidáme pěkné gradientní pozadí. Otevřete nastavení a aplikujte následující změny na možnost pozadí s přechodem:
- První barva přechodu: #FFFFFF
- Druhá barva přechodu: #0c71c3
- Typ gradientu: Lineární
- Směr gradientu: 124 stupňů
- Výchozí pozice: 50%
- Konečná pozice: 50 %
Vytvořte kontaktní formulář pro tablet a telefon
Nyní, když jsme vytvořili verzi pro PC, verze pro tablety a telefony půjde mnohem rychleji. Většina modulů, které jsme použili pro PC verzi, je stejná jako pro mobilní verzi.
Duplikovat předchozí sekci
Místo deaktivace pro telefon a tablet, jako jsme to udělali u PC verze, zakážeme PC verzi v podkategorii Viditelnost v nastavení modulu:
Upravte kód CSS modulu Souhrn
Namísto použití kódu pro plochu použijte následující:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Aplikujte na čáru přechodovou výplň
Pro mobilní verzi používáme různá nastavení pro gradient pozadí čáry:
- První barva přechodu: #FFFFFF
- Druhá barva přechodu: #0c71c3
- Typ gradientu: Lineární
- Směr gradientu: 180 stupňů
- Výchozí pozice: 40%
- Konečná pozice: 40 %
Přidejte kód jQuery
Poslední věc, kterou budeme muset pro tento tutoriál udělat, je přidat kód jQuery. Přidejte modul kódu a vložte následující kód JQuery:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Výsledek
Pokud budete postupovat podle zprávy krok za krokem, měli byste být schopni získat na počítači následující výsledek:
A následující výsledek na tabletech a telefonech:
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak vytvořit kontaktní formulář jedním kliknutím. Použijte tuto metodu ke spojení se svým Návštěvníci je jemný, ale účinný.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
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.
...
