Chceli by ste vytvoriť a Kontaktný formulár v Divi, ktorý sa zobrazí po kliknutí na tlačidlo?
V tomto návode Divi vám ukážeme, ako vytvoriť a Kontaktný formulár ktorý sa zobrazí po kliknutí na tlačidlo, ktoré nepoužíva nič iné ako Divi, kód jQuery a kód CSS.
Prečítajte si tiež nášho sprievodcu: Divi: Ako vytvoriť lepiacu pätu s efektom „Odhaliť“.
Je to skvelý spôsob, ako udržať Návštevníci váš webové stránky sa zamerali na akciu, ku ktorej sa zaviazali kliknutím na tlačidlo. Neprejde ich na inú stránku.
prehľad
Nižšie sa môžete rýchlo pozrieť na to, čo budeme vytvárať, a potom sa pustiť do tutoriálu!
Náhľad na PC
Ukážka na telefóne a tablete
Vytvorte novú stránku s preddefinovaným rozložením
Začnime s použitím preddefinovaného rozloženia z knižnice Divi. Pre tento príklad použijeme kontaktnú stránku Balíček rozloženia kozmetického produktu .
Pridajte na svoju stránku novú stránku webové stránky a zadajte názov a potom vyberte možnosť „Použiť Divi Builder“.
Pre tento príklad použijeme vopred pripravené rozloženie z knižnice Divi, takže vyberte „Vyberte rozloženie".
Nájdite a vyberte domovskú stránku rozloženia 'Spoločnosť interiérového dizajnu".
Vyberte 'Vyberte rozloženie“ na pridanie rozloženia na vašu stránku.
Teraz sme pripravení pokračovať v našom návode.
Vytvorte sekciu pomocou modulu Button
Prvá vec, ktorú budeme musieť urobiť, je pridať novú sekciu, kde umiestnime tlačidlo, ktoré umožní Kontaktný formulár zobraziť.
Pozri tiež: Divi: Ako vytvoriť vlastnú pätu
Stačí pridať štandardnú sekciu
Ďalej vyberte riadok s jedným stĺpcom.
Keď to urobíte, pridajte k nemu modul Button.
Tlačidlo si môžete prispôsobiť, ako chcete, ale musíte sa uistiť, že adresa URL tlačidla začína znakom „#“, za ktorým nasleduje niečo iné. Nemôžete ho nechať len tak prázdne alebo použiť znak „#“. Pridaním znaku „#“ a textu sa stránka po kliknutí na tlačidlo nepohne. Ak ho necháte prázdne, stránka sa po kliknutí obnoví. A ak použijete iba '#', budete presmerovaní na začiatok stránky.
Ďalšia dôležitá vec, ktorú budeme musieť urobiť, je priradiť tlačidlu triedu CSS. Túto CSS triedu použijeme neskôr v tomto článku v kóde jQuery, aby sme zabezpečili, že sa po kliknutí zobrazí kontaktný formulár. Trieda, ktorú budeme musieť priradiť k tlačidlu, je jednoducho „tlačidlo“.
- CSS trieda: tlačidlo
Vytvorte kontaktný formulár pre PC verziu
Ďalšia vec, ktorú budeme musieť urobiť, je vytvoriť kontaktný formulár na pracovnej ploche, ktorý sa zobrazí, keď niekto klikne na tlačidlo, ktoré sme vytvorili v predchádzajúcej časti tohto článku. Ďalej v tomto článku vám tiež ukážeme, ako vytvoriť mobilnú verziu.
Pridajte novú štandardnú sekciu
Začnite pridaním novej štandardnej sekcie na stránku, na ktorej pracujete. V nastaveniach sekcie prejdite na kartu Rozšírené a do poľa Trieda CSS pridajte „vyskakovacie okno“.
Posuňte sa nadol na tej istej karte a umiestnite nasledujúce riadky kódu CSS do poľa Pred v podkategórii Custom CSS:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Pridaním tohto zabezpečíme, že sekcia zaberie celú kartu. Farbu pozadia v kóde CSS môžete upraviť tak, aby ste vytvorili požadované prekrytie pozadia. V tomto prípade používame čiernu farbu s určitou transparentnosťou. Na tej istej karte pridajte do hlavného prvku aj nasledujúci riadok kódu CSS:
display: none;
Posledná vec, ktorú budeme musieť urobiť na karte Rozšírené, je deaktivácia sekcie na telefóne a tablete v podkategórii Viditeľnosť.
Pridajte riadok do dvoch stĺpcov
Pokračujte pridaním riadku s dvoma stĺpcami a prejdite na kartu Štýl.
- Použiť vlastnú šírku odkvapu: ÁNO
- Maximálna šírka: 1291 pixelov
Zadajte parametre každého zo stĺpcov.
Upravte vnútorné okraje (horný, ľavý a pravý) nasledovne:
- Vnútorný okraj (horný, ľavý, pravý): 30 pixelov
Dokončite tak, že prejdete na kartu Rozšírené. Do hlavného prvku pridajte nasledujúce riadky kódu CSS:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Pridajte prvý modul Text
Po vykonaní všetkých zmien v sekcii a riadku je čas pridať rôzne moduly, ktoré chcete zobraziť.
Prvá vec, ktorú pridáme, je názov, ktorý sa zobrazí. Začnite pridaním nového modulu Text do prvého stĺpca riadku, text napíšte do záložky Obsah a prepnite na kartu Štýl.
Na karte Štýl sme použili nasledujúce nastavenia pre podkategóriu Text:
- Písmo hlavičky: Lobster
- Hlavička jemného svetla: Tučný text
- Zarovnanie textu: Tučné
- Farba textu hlavičky: #002282
- Veľkosť textu hlavičky: 37 pixelov
- Výška hlavičky: 1,7 em
Pridajte druhý textový modul
Pokračujte pridaním nového modulu Text a zadajte text, ktorý sa má zobraziť na karte Obsah. Prepnite na kartu Štýl a použite nasledujúce nastavenia na podkategóriu Text:
- Zarovnanie textu: na stred
- Písmo textu: Arial
- Veľkosť textu: 13 pixelov
- Farba textu Text: #002282
- Výška textového riadka: 1,7 em
Pridajte modul „Sledujte nás na sociálnych sieťach“.
Ďalej do prvého stĺpca pridáme aj modul 'Follow us on social media'. V tomto prípade sme vybrali tri ikony sociálnych médií; Facebook, Twitter a Instagram.
Posledná vec, ktorú budeme musieť urobiť, je pridať výplň (vľavo) do tohto modulu na karte Rozšírené. Pridajte nasledujúci riadok kódu CSS do hlavného prvku:
padding-left: 40%;
Pridajte modul kontaktného formulára
Potom sa môžeme presunúť do druhého stĺpca v riadku. V tomto stĺpci prvá vec, ktorú umiestnime, je modul Kontaktný formulár.
Pre tento príklad sme vybrali iba dve polia; meno a email.
Po pridaní modulu Kontaktný formulár prejdite na kartu Štýl modulu Kontaktný formulár a v podkategórii Polia vykonajte nasledujúce zmeny:
- Textové farebné polia: #002282
- Polia veľkosti textu: #002282
- Výška čiary poľa: 1,7 em
Na tej istej karte vykonajte nasledujúce zmeny v podkategórii Tlačidlo:
- Použiť vlastné štýly pre tlačidlo: Áno
- Tlačidlo veľkosti textu: 20
- Farba textu tlačidla: #FFFFFF
- Tlačidlo pozadia: #0086c4
Pozri tiež: Ako vytvoriť posuvné a tlačné menu v DIVI
- Šírka okraja tlačidla: 2
- Tlačidlo Polomer okraja: 3
Prepnite sa na kartu Rozšírené a pridajte okraj 5 %.
Pridajte modul Súhrn
Ďalšia vec, ktorú budeme musieť pridať do druhého stĺpca, je modul Súhrn. Jediná vec, na ktorú potrebujeme tento modul, je ikona ukončenia v pravej hornej časti kontextového okna. Vyberte ďalšiu ikonu zo zoznamu ikon a všetko ostatné nechajte prázdne.
Potom prejdite na kartu Rozšírené a ako triedu CSS napíšte „zavrieť“.
Na tej istej karte pridajte nasledujúce riadky kódu do hlavného prvku vlastnej podkategórie CSS:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Na čiaru použite prechodovú výplň
Nakoniec na čiaru pridáme pekné gradientné pozadie. Otvorte nastavenia a použite nasledujúce zmeny na možnosť pozadia s prechodom:
- Prvá farba prechodu: #FFFFFF
- Druhá farba prechodu: #0c71c3
- Typ gradientu: Lineárny
- Smer gradientu: 124 stupňov
- Počiatočná pozícia: 50%
- Konečná pozícia: 50%
Vytvorte kontaktný formulár pre tablet a telefón
Teraz, keď sme vytvorili verziu pre PC, verzia pre tablet a telefón pôjde oveľa rýchlejšie. Väčšina modulov, ktoré sme použili pre PC verziu, je rovnaká ako pre mobilnú verziu.
Duplikovať predchádzajúcu časť
Namiesto vypnutia pre telefón a tablet, ako sme to urobili pri PC verzii, zakážeme PC verziu v podkategórii Viditeľnosť v nastaveniach modulu:
Upravte kód CSS modulu Súhrn
Namiesto použitia kódu pracovnej plochy použite tento:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Na čiaru použite prechodovú výplň
Pre mobilnú verziu používame rôzne nastavenia pre gradient pozadia čiary:
- Prvá farba prechodu: #FFFFFF
- Druhá farba prechodu: #0c71c3
- Typ gradientu: Lineárny
- Smer gradientu: 180 stupňov
- Počiatočná pozícia: 40%
- Konečná pozícia: 40%
Pridajte kód jQuery
Posledná vec, ktorú budeme musieť urobiť pre tento tutoriál, je pridať kód jQuery. Pridajte modul kódu a vložte nasledujúci 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ýsledok
Ak budete postupovať podľa hlásenia krok za krokom, v počítači by ste mali byť schopní získať nasledujúci výsledok:
A nasledujúci výsledok na tabletoch a telefónoch:
Stiahnite si DIVI teraz!!!
záver
V tomto článku sme vám ukázali, ako vytvoriť kontaktný formulár jedným kliknutím. Pomocou tejto metódy sa skontaktujte so svojím Návštevníci je jemný, ale účinný.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
