Potřebujete vytvořit globální záhlaví s formulář připojení v DIVI?
Vytvoření a formulář přihlášení na vaší hlavičce může být velkou podporou User Experience.
Jsou ideální pro webové stránky s předplatným a online obchody, protože umožňují uživatelům přihlásit se kdykoli na jakékoli stránce webové stránky.
V tomto tutoriálu vám ukážeme, jak navrhnout a formulář online přihlášení pro uživatele na vlastní hlavičce. Začněme!
přehled
Zde je rychlý náhled vlastní hlavičky s přihlašovacím formulářem, který vytvoříme v tomto tutoriálu.
Zde je zpráva „odhlášení“ a odkaz, který se zobrazí, když jsou uživatelé přihlášeni.
Přidání nové globální hlavičky
Aby se věci rozběhly, musíme pro naše vytvořit novou globální hlavičku Webové stránky. Chcete-li to provést, přejděte na řídicí panel WordPress a přejděte na Divi > Theme Builder.
Na šablona webových stránek ve výchozím nastavení klikněte na „Přidat globální záhlaví“ a poté klikněte na „Vytvořit globální záhlaví“.
Divi globální design záhlaví s horizontálním přihlašovacím formulářem
Přizpůsobte sekci
Z editoru globálního rozvržení záhlaví můžete vytvořit vlastní záhlaví webové stránky Počínaje z ničeho. Chcete-li začít, otevřete nastavení v normální části a aktualizujte následující:
- Barva přechodu levého pozadí:
- Pravá barva přechodu pozadí:
- Směr gradientu: 48 stupňů
- Vnitřní okraj: 10 pixelů nahoře, 10 pixelů dole, 20 pixelů vlevo, 20 pixelů vpravo
Aby naše hlavička byla citlivější, přidáme do prvku hlavní sekce následující vlastní CSS.
display:flex;
justify-content:center;
align-items:center;
Přidejte logo záhlaví do prvního řádku
Nyní, když je sekce připravena, můžeme přidat první řádek.
Přidat řádek
Přidejte řádek do sloupce v sekci.
Přidejte obrázkový modul s obrázkem loga
Do řádku s jedním sloupcem přidejte modul Obrázek. Zde přidáme logo záhlaví.
Aktualizujte obrázek a okraj modulu obrázku
Aktualizujte nastavení obrazu následovně:
- Obrázek: [přidat logo (cca 64 x 64 px)]
- Okraj: 20 pixelů vpravo
Aktualizujte parametry linky
Než budete pokračovat, otevřete nastavení linky a aktualizujte následující:
- Použít vlastní šířku okapu: ANO
- Rozteč sloupců: 1
- Maximální šířka: 25%
- Zarovnání: vlevo
- Vnitřní okraj: 0px nahoře, 0px dole
Do druhého řádku přidán horizontální přihlašovací formulář
Přidat řádek
Nyní, když je připraven první řádek, v editoru si všimnete, že první řádek zabere 25 % levé části. Toto bude v podstatě řádek určený pro naše logo záhlaví. Musíme vytvořit řádek sekce pro přihlašovací formulář a menu na pravé straně.
Do sloupce v sekci přidejte druhý řádek se strukturou.
Přidejte přihlašovací formulář
Do řádku s jedním sloupcem přidejte modul „Připojit“.
Odebrat výchozí obsah
V nastavení modulu přihlášení odstraňte falešný název a obsah těla.
Přidejte vlastní třídu pro přihlašovací formulář a CSS
Než zajdeme příliš daleko v návrhu přihlašovacího formuláře, nejprve do modulu Login přidejte třídu CSS a vlastní CSS. Tím se nastaví základní online struktura formuláře před dokončením návrhu formuláře s vestavěnými možnostmi Divi.
Viz také náš průvodce Jak vytvořit posuvné a responzivní boční menu v DIVI
Na kartě Upřesnit přidejte následující třídu CSS:
- CSS třída: header-login-form
Přidejte následující vlastní CSS do pole CSS popisu připojení:
margin-bottom: 0px !important
Poté přidejte následující vlastní CSS do oblasti CSS přihlašovacího formuláře:
width: 100%;Přidejte následující vlastní CSS do oblasti CSS Pole přihlášení:
padding: 5px 4% !important
Přidejte vlastní CSS do nastavení rozložení záhlaví
Protože jsme do modulu přihlašovacího formuláře přidali naši vlastní třídu CSS, můžeme přidat naše vlastní CSS, které bude cílit pouze na tento konkrétní přihlašovací formulář.
Přečtěte si také náš tutoriál o Jak vytvořit stránku blogu s modulem Blog s DIVI
Otevřete nastavení rozvržení záhlaví a přidejte následující vlastní CSS:
.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}Tento CSS způsobí, že přihlašovací pole a tlačítko zobrazí inline (vodorovně) zprávu "Zapomněli jste heslo?" se skryje a mezi poli bude přidán malý okraj.
Nastavení linky
Než dokončíme přihlašovací formulář, aktualizujeme parametry linky následovně:
- Použít vlastní šířku okapu: ANO
- Rozteč sloupců: 1
- Zarovnání: vpravo
- Vnitřní okraj: 0px nahoře, 0px dole
Návrh nastavení přihlašovacího formuláře
Nyní jsme připraveni aktualizovat nastavení přihlašovacího formuláře. Otevřete nastavení modulu Connect a aktualizujte následující:
- Použít barvu pozadí: NE
Pole a text odkazu
- Pole barev pozadí: rgba(255,255,255,0.2)
- Pole barev textu: #ffffff
- Písmo polí: Lato
- Velikost textu polí: 14px
- Zarovnání textu: vpravo
Design tlačítka
- Použít vlastní styly pro tlačítko: NE
- Velikost textu tlačítka: 15px
- Tlačítko pozadí: #ff3190
- Tlačítko šířky ohraničení: 0 pixelů
- Písmo tlačítka: Lato
- Tlačítko okraje: 2px nahoře, 2px dole
- Tlačítko výplně: 15px dole
- Vnitřní okraj: 0 pixelů nahoře, 0 pixelů dole, 0 pixelů vlevo, 0 pixelů vpravo
Přidání nabídky do druhého řádku
Modul menu
S naším přihlašovacím formulářem můžeme přidat nabídku přímo níže.
Přidejte modul nabídky pod modul přihlášení.
Nastavení modulu nabídky
Aktualizujte nastavení nabídky následovně:
- Pozadí: rgba(0,0,0,0)
- Nabídka písem: Lato
- Nabídka měkkého světla: Tučné
- Barva textu nabídky: #ffffff
- Velikost textu nabídky: 16px
- Zarovnání textu: vpravo
- Barva pozadí rozbalovací nabídky: #ffffff
- Barva řádku rozbalovací nabídky: rgba(0,0,0,0)
- Barva textu rozbalovací nabídky: #000000
- Barva pozadí mobilní nabídky: #ffffff
- Barva textu mobilní nabídky: #000000
- Barva ikony košíku: #ffffff
- Barva ikony vyhledávání: #ffffff
- Barva ikony menu hamburger: #ffffff
Uložení záhlaví přihlašovacího formuláře
Před ukončením editoru záhlaví nezapomeňte rozvržení uložit.
Dále uložte také nastavení Theme Builder.
Konečné výsledky
Hotovo !
Nyní se podívejme na konečný výsledek. Chcete-li vidět konečný výsledek, vše, co musíte udělat, je navštívit stránku na vašem webu.
A to uživatel uvidí, když se přihlásí.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Tato vlastní globální hlavička s přihlašovacím formulářem se určitě bude hodit pro jakýkoli web s předplatným nebo internetový obchod.
Jen s trochou vlastního CSS jsme byli schopni převést přihlašovací modul Divi do elegantního přihlašovacího formuláře, který se perfektně hodí do záhlaví jakéhokoli webu.
Doufám, že to bude užitečné pro váš další projekt. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete však také konzultovat 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.
...
