Divi: Jak vytvořit vyskakovací přihlašovací formulář

Chcete vytvořit a formulář vyskakovací přihlášení v Divi pomocí tlačítek přihlášení / odhlášení?

Vytvoření a formulář přihlašovací vyskakovací okno divi může být účinným způsobem, jak zlepšit vzhled vašich stránek a uživatelské zkušenosti s přihlášením/odhlášením. 

Cílem je vytvořit a formulář přihlášení, které se zobrazí ve vyskakovacím okně pokaždé, když uživatel klikne na přihlašovací tlačítko v záhlaví stránky. 

Je to pohodlnější než přesměrování uživatele na vlastní přihlašovací stránku.

V tomto tutoriálu vytvoříme vyskakovací přihlašovací formulář s vlastními tlačítky pro přihlášení a odhlášení v Divi. 

Pomocí modulu Divi Login a několika modulů Button vytvoříme bezproblémové vyskakovací přihlašovací prostředí na front-endu tím, že uživatelům umožníme přihlášení a odhlášení, aniž by byli přesměrováni na jinou stránku.

Začněme!

přehled

Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.

Všimněte si, jak se mění tlačítko pro přihlášení a tlačítka pro odhlášení. A jakmile se uživatel přihlásí, zůstane na aktuální stránce. 

Navíc vyskakovací přihlašovací formulář zobrazuje jiný "varovný" obsah pokaždé, když se uživatel pokusí odhlásit.

Co potřebujete, abyste mohli začít

I když můžete tento vyskakovací přihlašovací formulář a vlastní tlačítka pro přihlášení/odhlášení přidat do libovolné vlastní hlavičky, my použijeme předpřipravenou hlavičku, abychom urychlili proces a rychle zahájili návrh.

Importujte šablonu záhlaví „Crowdfunding Layout Pack“ do Divi builderu

Chcete-li začít, stáhněte si Divi Crowdfunding Layout Pack Header and Footer zdarma . Chcete-li to provést, přejděte na stránku blogový příspěvek .

Poté zadejte svůj e-mail a stáhněte si soubor zip.

Poté soubor rozbalte, aby byl připraven k importu.

Chcete-li importovat soubor do editoru motivu, postupujte takto:

1. Přejděte na Divi > Theme Builder.
2. Klikněte na ikonu přenositelnosti.
3. Ve vyskakovacím okně Přenositelnost vyberte kartu importu.
4. Vyberte dříve stažený rozbalený soubor, který chcete importovat.
5. Klikněte na Import Divi Theme Builder Šablony.
6. Kliknutím na ikonu úprav upravíte importované záhlaví.

Vytvoření vyskakovacího přihlašovacího formuláře v Divi

Část 1: Vytvoření tlačítek pro přihlášení a odhlášení

Jakmile jste v editoru globálního rozvržení záhlaví, otevřete soubor zobrazení vrstvy takže můžete snadno vidět všechny prvky.

V horním řádku sekce záhlaví odstraňte modul Sledujte sociální sítě vedle tlačítka Přihlásit ve sloupci 3.

Čtěte také: Divi: Porovnání různých typů gradientů

Vytvoření přihlašovacího tlačítka

Chcete-li vytvořit naše přihlašovací tlačítko, otevřete nastavení modulu Tlačítko ve sloupci 3 v horním řádku.

Aktualizujte následující položky na kartě Návrh:

• Ikona tlačítka: ikona zámku (viz snímek obrazovky)
• Umístění ikony tlačítka: Vpravo
• Zobrazit ikonu pouze při umístění kurzoru na tlačítko: NE
• Polstrování: 0,5 em (nahoře a dole), 2 em (vlevo), 0,7 em (vpravo)

Na kartě pokročilý, přiřaďte tlačítku dvě vlastní třídy CSS následovně:

• Třída CSS: et-toggle-popup et-popup-login-button

Vytvoření tlačítka pro odhlášení

Chcete-li vytvořit naše tlačítko pro odhlášení, duplikujte stávající přihlašovací tlačítko ve sloupci 3.

Chcete-li pomoci odlišit tato dvě tlačítka, můžete aktualizovat štítek každého z nich. Dále otevřete nastavení modulu Duplicate Button ve sloupci 3.

Změňte text tlačítka na „Odhlásit“.

Aktualizujte následující položky na kartě Návrh:

• Ikona tlačítka: ikona odemknutí (viz snímek obrazovky)

Na kartě pokročilý, aktualizujte tlačítko Třídy CSS následovně:

• Třída CSS: et-toggle-popup et-popup-logout-button

První třída zůstane stejná, ale druhá třída bude jiná.

Část 2: Vytvoření vyskakovací sekce

Jakmile jsou tlačítka hotová, jsme připraveni vytvořit vyskakovací sekci, která bude sloužit jako naše vyskakovací okno obsahující formuláře spojení.

Pod sekci záhlaví přidejte novou běžnou sekci.

Poté vložte do sekce řádek s jedním sloupcem.

Nastavení sekce

Před aktualizací řádku otevřete nastavení sekce.

Na kartě Obsah, dejte sekci bílou barvu pozadí:

• Pozadí: #ffffff

Na kartě Design, aktualizujte následující:

• Šířka: 100 %
• Maximální šířka: 800 pixelů (počítač), 80 % (tablet), 100 % (telefon)
• Zarovnání řezu: Střed
• Výška: auto (stolní počítač a tablet), 100 % (telefon)
• Maximální výška: 100 %
• Odsazení: 0px (nahoře a dole)

• Zaoblené rohy: 10px
• Box Shadow: viz snímek obrazovky
• Vertikální poloha stínu rámečku: 0px
• Síla rozostření: 100 pixelů
• Síla šíření: 50px

Na kartě pokročilý, aktualizujte následující:

Přidejte vlastní třídu CSS.

• Třída CSS: et-popup-login

Přidejte vlastní fragment CSS do hlavního prvku:

overscroll-behavior: contain;

Aktualizujte možnosti Viditelnost a Pozice.

• Horizontální přetečení: Skryté
• Vertikální přetečení: auto
• Poloha: Pevná
• Umístění: Center Center
• Index Z: 999999

Nastavení linky

Po nastavení řezu otevřete nastavení čáry a aktualizujte následující nastavení návrhu:

• Použít vlastní šířku okapu: ANO
• Šířka žlabu: 1
• Šířka: 100 %
• Max. šířka: 100 %
• Výplň: 0px (nahoře), 5vh (dole)

Část 3: Vytvoření ikony zavřít vyskakovací okno

K vytvoření ikony zavření vyskakovacího okna, která zavře/skryje vyskakovací okno po kliknutí, použijeme modul Blurb.

Přidejte do řádku nový modul Blurb.

Otevřete nastavení modulu a odstraňte nadpis a hlavní text.

Poté přidejte ikonu následovně:

• Použít ikonu: ANO
• Ikona: ikona "x" (viz snímek obrazovky)

Na kartě Design, aktualizujte následující:

• Barva ikony: #004e43
• Zarovnání obrázku/ikony: na střed
• Použít velikost písma ikony: ANO
• Velikost písma ikony: 50px
• Šířka: 50px
• Vyrovnávací modul: vpravo
• Výška: 50px

Na kartě pokročilý, přidejte třídu CSS do modulu Blurb následovně:

• Třída CSS: et-toggle-popup

Část 4: Vytvoření přihlašovacích formulářů „Přihlášení“ a „Odhlášení“.

Abychom měli různý obsah a design přihlašovacího formuláře při přihlášení a odhlášení, vytvoříme dva různé moduly přihlašovacího formuláře. 

První bude přihlašovací formulář, který se zobrazí pokaždé, když je uživatel „odhlášen“. Druhým bude přihlašovací formulář, který se zobrazí pokaždé, když je uživatel „přihlášen“.

Vytvoření formuláře „Odhlášení“.

Chcete-li vytvořit přihlašovací formulář „Odhlášení“, přidejte nový modul přihlášení pod ikonu modulu Blurb na řádku.

Otevřete nastavení modulu a změňte následující nastavení:

Záložka Obsah

• Přesměrování na aktuální stránku: ANO
• Použít barvu pozadí: NE

Záložka Design

• Barva pozadí polí: rgba (0,78,67,0.05)
• Barva pozadí zaměření pole: rgba (0,78,67,0,15)
• Zarovnání textu: Na střed
• Barva textu: Tmavá

• Písmo názvu: Poppins
• Tloušťka písma názvu: polotučné
• Barva textu: #000000
• Výška řádku nadpisu: 1,3 em
• Body Font: Work Sans

Chcete-li aktualizovat styly tlačítek, zkopírujte styly tlačítek z přihlašovacího tlačítka, které jsme vytvořili, do třetího sloupce v řádku sekce Záhlaví.

Poté vložte styly tlačítek do skupiny možností tlačítka v nastavení připojení na kartě Návrh.

Dále aktualizujte styly tlačítek pro přihlašovací formulář následovně:

• Tlačítko
  • Barva textu: #ffffff
  • Pozadí: #004e43
  • Pozadí (umístění myši): #00683c
  • Šířka okraje: 0 pixelů
  • Výplň: 15 pixelů (nahoře a dole)

Dále aktualizujte možnosti velikosti následovně:

• Šířka: 100 %
• Maximální šířka: 80 % (počítač), 90 % (tablet), 95 % (telefon)
• Modul zarovnání: Střed

Karta Upřesnit

Na kartě pokročilý, aktualizujte třídu CSS a vlastní CSS následovně:

• CSS Třída: et-logged-out-form

Vlastní CSS pro popis připojení:

width: 100% !important;
float: none !important;

Vlastní CSS pro přihlašovací formulář:

width: 100% !important;
padding: 0px !important;

Tím zajistíte, že přihlašovací modul bude pokrývat celou šířku řádku/sloupce, a to i na ploše.

Vytvoření formuláře „Přihlášeno“.

Nyní, když je „Logged Out“ verze formuláře hotová, musíme vytvořit verzi „Logged In“, která bude mít jiný obsah a styl, aby se maximalizoval uživatelský dojem.

Chcete-li vytvořit přihlašovací formulář „Odhlášení“, zkopírujte existující přihlašovací formulář.

Dále aktualizujte štítek pro každý z formuláře připojení resp.

Otevřete duplicitní nastavení (formulář „Přihlášeno“) a přidejte název webu jako dynamický obsah do názvu modulu přihlašovacího formuláře.

Poté otevřete nastavení dynamického obsahu názvu webu a aktualizujte obsah před a po následujícím způsobem:

• Před: „Pokoušíte se odhlásit z Elegant Themes“
• Po: ". " 

Tím vytvoříte pěkné dynamické upozornění pro uživatele, kteří se snaží odhlásit z webu.

Poté do těla přidejte následující záhlaví H3:

<h3>Are you sure?</h3>

Pokud jste někdy viděli obsah modulu Přihlášení při přihlášení, víte, že existuje personalizovaná zpráva, která obsahuje personalizovaný odkaz „odhlásit se“. Aby tento odkaz vypadal jako tlačítko, musíme upravit nastavení písma/textu odkazu těla následovně:

• Vyberte kartu Odkaz pod opcí Hlavní text.
• Písmo odkazu: Work Sans
• Tloušťka písma odkazu: Polotučné
• Styl písma: TT
• Zarovnání textu odkazu: na střed
• Barva textu odkazu: #ffffff

POZNÁMKA: Nebudete moci zobrazit náhled těchto výsledků, dokud formulář nezobrazíte na aktivní stránce.

Na kartě pokročilý, aktualizujte třídu CSS a vlastní CSS následovně:

• Třída CSS: et-logged-in-form

Vlastní CSS pro přihlašovací formulář:

display:none;

Část 5: Přidejte vlastní kód

Chcete-li přidat vlastní CSS a JQuery potřebné pro funkci vyskakovacího přihlašovacího formuláře, vytvořte nový modul Kód pod posledním modulem přihlášení.

CSS

Otevřete nastavení modulu Kód a vložte následující CSS do pole s kódem, přičemž nezapomeňte zabalit CSS do potřebných značek stylu.

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Všimněte si, že CSS používá třídu „connected“, která je zabudována do WordPressu, aby skryla/zobrazila odpovídající tlačítka přihlášení/odhlášení a formuláře Přihlášení/odhlášení pokaždé, když je uživatel přihlášen nebo odhlášen.

JQuery

Pod značku koncového stylu vložte následující JQuery a ujistěte se, že jste kód zabalili do potřebných značek skriptu.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Tento úryvek jednoduše přepne vyskakovací sekci vždy, když uživatel klikne na jednu ze tří položek s třídou " a-toggle-popup (tlačítka přihlášení a odhlášení plus ikona prezentace „x“).

Viz také: Divi: Jak používat nastavení masky pozadí a možnosti transformace vzoru

Hotovo !

Nezapomeňte uložit změny, které jste provedli v šabloně v nástroji pro tvorbu motivů. Po uložení si můžete výsledky prohlédnout na živé stránce.

Konečný výsledek

Zde jsou konečné výsledky na počítači, tabletu a telefonu.

Všimněte si, jak se mění tlačítko pro přihlášení a tlačítko pro odhlášení. A jakmile se uživatel přihlásí, zůstane na aktuální stránce. 

Navíc vyskakovací přihlašovací formulář zobrazuje různý obsah „varování“ pokaždé, když se uživatel pokusí odhlásit.

Stáhněte si DIVI hned teď!!!

Závěr.

Doufejme, že vytvoření tohoto vyskakovacího přihlašovacího formuláře a vlastních tlačítek pro přihlášení/odhlášení vám poskytne určitý přehled o tom, jak kreativně používat přihlašovací formulář Divi. 

Neváhejte upravit design a obsah každého přihlašovacího formuláře (nebo tlačítek), abyste vytvořili jedinečný přihlašovací zážitek na vašem vlastním webu.

Také 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 projektů vytváření internetových stránek.

Neváhejte se také podívat na našeho průvodce na 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.

...