Potrebujete vytvoriť globálnu hlavičku s formulár pripojenie v DIVI?
Vytvorenie a formulár prihlásenie v hlavičke môže byť pre vás veľkým prínosom užívateľskú skúsenosť.
Sú ideálne pre webové stránky s predplatným a online obchody, pretože umožňujú používateľom prihlásiť sa kedykoľvek na ktorejkoľvek stránke webové stránky.
V tomto návode vám ukážeme, ako navrhnúť a formulár online prihlásenie pre používateľov na vlastnej hlavičke. Začnime!
prehľad
Tu je rýchly náhľad vlastnej hlavičky s prihlasovacím formulárom, ktorý vytvoríme v tomto návode.
Tu je správa „odhlásenie“ a odkaz, ktorý sa zobrazí, keď sú používatelia prihlásení.
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 predvolene kliknite na "Pridať globálnu hlavičku" a potom kliknite na "Vytvoriť globálnu hlavičku".
Divi globálny dizajn hlavičky s horizontálnym prihlasovacím formulárom
Prispôsobte sekciu
V editore globálneho rozloženia hlavičky si môžete vytvoriť prispôsobenú hlavičku webové stránky Počnúc od ničoho. Ak chcete začať, otvorte nastavenia v normálnej časti a aktualizujte nasledujúce:
- Farba prechodu ľavého pozadia:
- Pravá farba gradientu pozadia:
- Smer gradientu: 48 stupňov
- Vnútorný okraj: 10 pixelov hore, 10 pixelov dole, 20 pixelov vľavo, 20 pixelov vpravo
Aby bola naša hlavička citlivejšia, do prvku hlavnej sekcie pridáme nasledujúci 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.
Pridať riadok
Pridajte riadok do stĺpca v sekcii.
Pridajte obrázkový modul s obrázkom loga
V riadku s jedným stĺpcom pridajte modul Obrázok. Tu pridáme logo hlavičky.
Aktualizácia obrázka a okraja obrazového modulu
Aktualizujte nastavenia obrazu takto:
- Obrázok: [pridať logo (približne 64 x 64 px)]
- Okraj: 20 pixelov vpravo
Aktualizujte parametre linky
Skôr ako budete pokračovať, otvorte nastavenia linky a aktualizujte nasledujúce:
- Použiť vlastnú šírku odkvapu: ÁNO
- Rozstup stĺpcov: 1
- Maximálna šírka: 25%
- Zarovnanie: vľavo
- Vnútorný okraj: 0px hore, 0px dole
Do druhého riadku bol pridaný horizontálny prihlasovací formulár
Pridať riadok
Teraz, keď je prvý riadok pripravený, v editore si všimnete, že prvý riadok zaberie 25 % ľavej časti. Toto bude v podstate riadok určený pre naše logo hlavičky. Musíme vytvoriť riadok sekcie pre prihlasovací formulár a menu na pravej strane.
Do stĺpca v sekcii pridajte druhý riadok so štruktúrou.
Pridajte prihlasovací formulár
Do riadku s jedným stĺpcom pridajte modul „Pripojiť“.
Odstráňte predvolený obsah
V nastaveniach modulu Prihlásenie odstráňte falošný názov a obsah tela.
Pridajte vlastnú triedu pre prihlasovací formulár a CSS
Predtým, než pôjdeme príliš ďaleko pri navrhovaní prihlasovacieho formulára, pridajme najprv triedu CSS a vlastný CSS do modulu Login. Tým sa nastaví základná online štruktúra formulára pred konečnými úpravami dizajnu formulára so vstavanými možnosťami Divi.
Prečítajte si tiež nášho sprievodcu Ako vytvoriť posuvné a responzívne bočné menu v DIVI
Na karte Rozšírené pridajte nasledujúcu triedu CSS:
- CSS trieda: header-login-form
Pridajte nasledujúci vlastný CSS do poľa CSS popisu pripojenia:
margin-bottom: 0px !important
Potom pridajte nasledujúci vlastný CSS do oblasti CSS prihlasovacieho formulára:
width: 100%;Pridajte nasledujúci vlastný CSS do oblasti CSS Polia prihlásenia:
padding: 5px 4% !important
Pridajte vlastný CSS do nastavení rozloženia hlavičky
Keďže sme do modulu prihlasovacieho formulára pridali našu vlastnú triedu CSS, môžeme pridať náš vlastný CSS, ktorý bude zacielený iba na konkrétny prihlasovací formulár.
Prečítajte si tiež našu príručku Ako vytvoriť stránku blogu s modulom Blog s DIVI
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;
}Tento CSS spôsobí, že prihlasovacie polia a tlačidlo sa v riadku (vodorovne) zobrazia so správou "Zabudli ste heslo?" sa skryje a medzi poliami sa pridá malý okraj.
Nastavenie linky
Predtým, ako dokončíme prihlasovací formulár, aktualizujme parametre linky nasledovne:
- Použiť vlastnú šírku odkvapu: ÁNO
- Rozstup stĺpcov: 1
- Zarovnanie: vpravo
- Vnútorný okraj: 0px hore, 0px dole
Dizajnové nastavenia prihlasovacieho formulára
Teraz sme pripravení aktualizovať nastavenia prihlasovacieho formulára. Otvorte nastavenia modulu Connect a aktualizujte nasledovné:
- Použite farbu pozadia: NIE
Text poľa a odkazu
- Polia farieb pozadia: rgba(255,255,255,0.2)
- Textové farebné polia: #ffffff
- Písmo polí: Lato
- Veľkosť textových polí: 14px
- Zarovnanie textu: vpravo
Dizajn gombíkov
- Použite vlastné štýly pre tlačidlo: NIE
- Veľkosť textu tlačidla: 15px
- Tlačidlo pozadia: #ff3190
- Tlačidlo šírky orámovania: 0 pixelov
- Písmo tlačidla: Lato
- Tlačidlo okraja: 2px hore, 2px dole
- Tlačidlo výplne: 15 pixelov dole
- Vnútorný okraj: 0 pixelov hore, 0 pixelov dole, 0 pixelov vľavo, 0 pixelov vpravo
Pridanie ponuky do druhého riadku
Modul menu
S naším prihlasovacím formulárom môžeme pridať menu priamo nižšie.
Pridajte modul ponuky pod modul Prihlásenie.
Nastavenia modulu ponuky
Aktualizujte nastavenia ponuky nasledovne:
- Pozadie: rgba(0,0,0,0)
- Ponuka písma: Lato
- Menu Soft Light: Tučné
- Farba textu ponuky: #ffffff
- Veľkosť textu ponuky: 16 pixelov
- Zarovnanie textu: vpravo
- Farba pozadia rozbaľovacej ponuky: #ffffff
- Farba rozbaľovacieho riadka: 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 vyhľadávania: #ffffff
- Farba ikony ponuky Hamburger: #ffffff
Uloženie hlavičky prihlasovacieho formulára
Pred ukončením editora hlavičky nezabudnite rozloženie uložiť.
Ďalej uložte aj nastavenia nástroja Theme Builder.
Konečné výsledky
Je to hotové !
Teraz sa pozrime na konečný výsledok. Ak chcete vidieť konečný výsledok, všetko, čo musíte urobiť, je navštíviť stránku na vašom webe.
A toto užívateľ uvidí po prihlásení.
Stiahnite si DIVI teraz!!!
záver
Táto vlastná globálna hlavička s prihlasovacím formulárom sa určite bude hodiť pre každú predplatenú webovú stránku alebo internetový obchod.
Len s trochou vlastného CSS sme dokázali previesť prihlasovací modul Divi do elegantného prihlasovacieho formulára, ktorý dokonale zapadne do hlavičky akejkoľvek webovej stránky.
Dúfam, že to bude užitočné pre váš ďalší projekt. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa však 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.
...
