Vytvorenie a formulár Inline prihlásenie pre vašu hlavičku môže byť obrovskou podporou pre používateľskú skúsenosť. Sú ideálne pre členské stránky a online obchody, pretože umožňujú používateľom prihlásiť sa kedykoľvek a na ktorejkoľvek stránke webu.
V tomto návode vám ukážeme, ako navrhnúť a formulár online pomocou vlastnej hlavičky v Divi Theme Builder. Na tento účel vytvoríme jednoduchú responzívnu globálnu hlavičku a potom navrhneme a formulár kompaktné online prihlásenie v pravej hornej časti hlavičky pomocou prihlasovacieho modulu Divi. Zostavenie vyžaduje trochu vlastného kódu CSS, ale keď bude všetko na svojom mieste, bude ľahké prispôsobiť online prihlasovací formulár tak, aby sa ľahko zhodoval s akýmkoľvek dizajnom hlavičky pomocou možností dizajnu integrovaných služieb Divi.
Prehľad výsledkov
Tu je rýchly prehľad vlastnej hlavičky s online prihlasovacím formulárom, ktorý vytvoríme v tomto návode.
A tu je online prihlasovací formulár na obrazovke tabletu a telefónu.
Tu je odhlasovacia správa a odkaz, ktorý sa zobrazí po prihlásení používateľov.
Čo potrebujete, aby ste začali
Ak ste to ešte neurobili, nainštalujte a aktivujte tému Divi . To je skoro všetko, čo potrebujete, aby ste mohli začať. Chystáme sa vytvoriť úplne nové rozloženie šablón hlavičiek pomocou nástroja Divi Theme Builder.
Pridáva sa nová globálna hlavička
Aby sa veci rozbehli, musíme pre náš vytvoriť novú globálnu hlavičku webové stránky. Ak to chcete urobiť, prejdite na informačný panel WordPress a prejdite na Divi > Theme Builder.
Na šablóna webovej stránky v predvolenom nastavení kliknite na „Pridať globálnu hlavičku“ a potom na „Vytvoriť globálnu hlavičku“.
Potom vyberte možnosť Vytvoriť od začiatku.
Navrhnite globálnu hlavičku Divi pomocou online prihlasovacieho formulára
Prispôsobenie sekcie
V editore globálneho rozloženia hlavičiek budete môcť úplne vytvoriť vlastnú hlavičku svojej stránky. Ak chcete začať, otvorte nastavenia bežnej sekcie a aktualizujte nasledujúce položky:
- Prechod ľavého farebného pozadia:
- Pravý gradient pozadia:
- Smer sklonu: 48 stupňov
- Výplň: 10 pixelov hore, 10 pixelov dole, 20 pixelov vľavo, 20 pixelov vpravo
Aby naša vlastná hlavička pohotovejšie reagovala, pridáme do prvku hlavnej sekcie nasledujúce vlastné CSS.
display:flex;justify-content:center;align-items:center;
Pridanie loga hlavičky do prvého riadku
Teraz, keď je táto sekcia pripravená, môžeme pridať prvý riadok.
Pridajte riadok
Pridajte riadok do stĺpca v sekcii.
Pridajte modul obrázkov s obrázkom loga
V jednom riadku stĺpca pridajte modul obrázka. Toto bude miesto, kde pridáme logo pre hlavičku.
Aktualizácia obrázka a okraja obrazového modulu
Aktualizujte nastavenia obrázka takto:
- Obrázok: [pridať logo (približne 64 pixelov až 64 pixelov)]
- Marža: 20px doprava
Aktualizujte parametre linky
Predtým, ako budete pokračovať, otvorte nastavenia riadkov a aktualizujte nasledujúce položky:
- Použite vlastnú šírku odkvapov: ÁNO
- Šírka odkvapov: 1
- Šírka: 25%
- Zarovnanie riadkov: vľavo
- Výplň: vysoká 0px, nízka 0px
Pridanie online prihlasovacieho formulára na druhý riadok
Pridajte riadok
Teraz, keď je prvý riadok pripravený, si v editore všimnete, že prvý riadok zaberá 25% ľavej časti. Bude to v podstate určený riadok pre naše logo hlavičky. Musíme vytvoriť riadok sekcie pre formulár a ponuku online prihlásenia na pravej strane.
Do stĺpca v sekcii pridajte druhý riadok so štruktúrou.
Pridajte prihlasovací formulár
V riadku stĺpca pridajte prihlasovací modul.
Odstráňte predvolený obsah
V nastaveniach prihlásenia vymažte falošný názov a obsah tela.
Pridajte prihlasovací formulár a vlastnú triedu CSS
Než pôjdeme príliš ďaleko do návrhu online prihlasovacieho formulára, najskôr do modulu prihlásenia pridáme vlastné triedy CSS a CSS. To nám umožní nastaviť základnú online štruktúru formulára pred konečným dizajnom formulára pomocou vstavaných možností Divi.
Na karte Spresnenie pridajte nasledujúcu triedu CSS:
- Trieda CSS: header-login-form
Do oblasti CSS s popisom pripojenia pridajte nasledujúci vlastný CSS:
margin-bottom: 0px !important
Potom pridajte nasledujúci vlastný CSS do oblasti CSS prihlasovacieho formulára:
width: 100%;
Do poľa Connection Fields CSS pridajte nasledujúci vlastný CSS:
padding: 5px 4% !important
Pridajte do nastavení rozloženia hlavičky vlastný CSS
Pretože sme do modulu prihlasovacieho formulára pridali našu vlastnú triedu CSS, môžeme pridať našu vlastnú CSS, ktorá bude zacielená iba na tento konkrétny prihlasovací formulár.
Otvorte nastavenie rozloženia hlavičky a pridajte nasledujúci 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;}
Vďaka tomuto CSS sa prihlasovacie polia a tlačidlo zobrazia vložené (vodorovne) a skryjú odkaz „Zabudli ste heslo?“. »A medzi polia pridajte malú rezervu.
Nastavenie linky
Predtým, ako dokončíte prihlasovacie formuláre online, aktualizujte parametre riadku takto:
- Použite vlastnú šírku odkvapov: ÁNO
- Šírka odkvapov: 1
- Zarovnanie čiary: priame
- Výplň: vysoká 0px, nízka 0px
Dizajnové nastavenia prihlasovacieho formulára
Teraz sme pripravení aktualizovať nastavenia prihlasovacieho formulára. Otvorte nastavenia modulu prihlasovacieho formulára a aktualizujte nasledujúce položky:
- Použiť farbu pozadia: NIE
Text poľa a odkazu
- Pozadie poľa: Farba: rgba (255,255,255,0.2)
- Farba textu poľa: #ffffff
- Poľná polícia: Lato
- Veľkosť textu poľa: 14 pixlov
- Zarovnanie textu: vpravo
- Odkazové písmo: Lato
- Štýl prepojeného písma: podčiarknuté
- Farba textu odkazu: # ff3190
Dizajn gombíkov
- Veľkosť textu tlačidla: 15px
- Farba pozadia tlačidla: # ff3190
- Šírka okraja tlačidla: 0px
- Písmo tlačidla: Lato
- Vypchávanie gombíkov: 2px hore, 2px dole
- Marža: nízka 15px
- Výplň: 0px hore, 0px dole, 0px vľavo, 0px vpravo
Pridanie ponuky do druhého riadku
Modul ponuky
S naším online prihlasovacím formulárom môžeme pridať ponuku priamo nižšie.
Pridajte modul ponuky pod modul prihlasovacieho formulára.
Nastavenia modulu ponuky
Aktualizujte nastavenia ponuky nasledovne:
- Farba pozadia: rgba (0,0,0,0)
- Písmo ponuky: Lato
- Hmotnosť písma ponuky: tučné
- Farba textu ponuky: #ffffff
- Veľkosť textu ponuky: 16px
- Zarovnanie textu: vpravo
- Farba pozadia rozbaľovacej ponuky: #ffffff
- Farba čiary v rozbaľovacej ponuke: rgba (0,0,0,0)
- Farba textu rozbaľovacej ponuky: # 000000
- Farba pozadia ponuky pre mobil: #ffffff
- Farba textu mobilnej ponuky: # 000000
- Farba ikony košíka: #ffffff
- Farba ikony hľadania: #ffffff
- Farba ikony ponuky Hamburger: #ffffff
Uloženie hlavičky prihlasovacieho formulára
Pred opustením editora rozloženia hlavičky nezabudnite rozloženie uložiť.
Potom tiež uložte nastavenia generátora tém.
Konečné výsledky
To je všetko!
Teraz sa pozrime na konečný výsledok. Ak chcete vidieť konečný výsledok, jednoducho navštívte svoju stránku webové stránky.
Tu je hlavička na ploche.
Tu je hlavička online prihlasovacieho formulára na obrazovke tabletu.
A tu je online prihlasovací formulár na obrazovke telefónu. Všimnite si tiež mobilné menu.
A toto užívateľ uvidí po prihlásení.
záverečné myšlienky
Táto vlastná globálna hlavička s online prihlasovacím formulárom určite príde vhod pre každú členskú stránku alebo internetový obchod. Len s trochou vlastného CSS sme dokázali previesť prihlasovací modul Divi na elegantný online prihlasovací formulár, ktorý by vyzeral dobre v hlavičke každého webové stránky. Dúfam, že vám to pomôže pri ďalšom projekte.
Teším sa na vaše komentáre.
Na vaše zdravie!
