De oprichting van een formulier Inline login voor uw header kan een enorme boost zijn voor de gebruikerservaring. Ze zijn perfect voor lidmaatschapssites en online winkels omdat ze gebruikers in staat stellen om altijd en op elke pagina van de site in te loggen.
In deze zelfstudie laten we u zien hoe u een ontwerp maakt formulier online met behulp van een aangepaste header in Divi Theme Builder. Om dit te doen, maken we een eenvoudige responsieve globale header en ontwerpen we vervolgens een formulier compacte online login rechtsboven in de header met behulp van de inlogmodule van Divi. De build vereist een beetje aangepaste CSS-code, maar zodra alles op zijn plaats staat, is het eenvoudig om het online inlogformulier aan te passen zodat het gemakkelijk bij elk headerontwerp past met behulp van de ontwerpopties van de geĂŻntegreerde services van Divi.
Resultaat overzicht
Hier is een snel overzicht van de aangepaste koptekst met het online inlogformulier dat we in deze zelfstudie zullen maken.
En hier is het online inlogformulier op het scherm van de tablet en telefoon.
Hier is het uitlogbericht en de link die worden weergegeven wanneer gebruikers zijn ingelogd.
Wat je nodig hebt om te beginnen
Als je dat nog niet hebt gedaan, installeer en activeer het Divi-thema . Dat is vrijwel alles wat u nodig heeft om te beginnen. We zullen met de Divi Theme Builder een geheel nieuwe lay-out voor de koptekst maken.
Een nieuwe algemene koptekst toevoegen
Om dingen op gang te krijgen, moeten we een nieuwe globale kop maken voor onze Site web. Ga hiervoor naar het WordPress-dashboard en navigeer naar Divi > Theme Builder.
Op de website-sjabloon klik standaard op "Algemene koptekst toevoegen" en vervolgens op "Globale koptekst maken".
Selecteer vervolgens de optie Build from scratch.
Ontwerp de Divi-globale header met een online inlogformulier
Sectie maatwerk
Vanuit de Global Header Layout Editor kunt u de aangepaste header van uw site maken. Om aan de slag te gaan, opent u de normale sectie-instellingen en werkt u het volgende bij:
- Linkerkleur achtergrondverloop:
- Achtergrondverloop rechts:
- Gradiëntrichting: 48 graden
- Opvulling: 10 pixels bovenaan, 10 pixels onderaan, 20 pixels links, 20 pixels rechts
Om onze aangepaste koptekst responsiever te maken, voegen we de volgende aangepaste CSS toe aan het hoofdelement van de sectie.
display:flex;justify-content:center;align-items:center;
Voeg koptekstlogo toe aan de eerste regel
Nu het gedeelte klaar is, kunnen we de eerste regel toevoegen.
Voeg een rij toe
Voeg een rij toe aan een kolom in de sectie.
Voeg een afbeeldingsmodule toe met een logo-afbeelding
Voeg een afbeeldingsmodule toe in de rij met Ă©Ă©n kolom. Hier zullen we het logo voor de koptekst toevoegen.
Werk de afbeeldings- en afbeeldingsmodule-marge bij
Werk de beeldinstellingen als volgt bij:
- Afbeelding: [logo toevoegen (ongeveer 64 pixels bij 64 pixels)]
- Marge: 20 px rechts
Werk lijnparameters bij
Voordat u verder gaat, opent u de rij-instellingen en werkt u het volgende bij:
- Gebruik een aangepaste gootbreedte: JA
- Dakgootbreedte: 1
- Breedte: 25%
- Rij uitlijning: links
- Vulling: 0 px hoog, 0 px laag
Het online inlogformulier toevoegen aan de tweede regel
Voeg een rij toe
Nu de eerste rij klaar is, zul je in de editor zien dat de eerste rij 25% van het linkergedeelte beslaat. Dit is in feite de aangewezen regel voor ons headerlogo. We moeten een sectieregel maken voor het formulier en het online inlogmenu aan de rechterkant.
Voeg een tweede rij met structuur toe aan een kolom in de sectie.
Voeg een inlogformulier toe
Voeg in de rij van een kolom een ââinlogmodule toe.
Verwijder standaardinhoud
Verwijder onder de aanmeldingsinstellingen de neptitel en de bodyinhoud.
Voeg een inlogformulier en een aangepaste CSS-klasse toe
Voordat we te ver gaan met het ontwerpen van het online inlogformulier, moeten we eerst de aangepaste CSS- en CSS-klassen toevoegen aan de inlogmodule. Dit stelt ons in staat om de online basisstructuur van het formulier op te zetten voordat we de laatste hand aan het ontwerp geven met de ingebouwde opties van Divi.
Voeg op het tabblad Geavanceerd de volgende CSS-klasse toe:
- CSS-klasse: header-login-formulier
Voeg de volgende aangepaste CSS toe aan het CSS-gebied met de verbindingsbeschrijving:
margin-bottom: 0px !important
Voeg vervolgens de volgende aangepaste CSS toe in het CSS-gebied van het aanmeldingsformulier:
width: 100%;
Voeg de volgende aangepaste CSS toe aan het vak CSS van Verbindingsvelden:
padding: 5px 4% !important
Voeg aangepaste CSS toe aan de instellingen voor de koptekstlay-out
Omdat we onze aangepaste CSS-klasse hebben toegevoegd aan de inlogformuliermodule, kunnen we onze aangepaste CSS toevoegen die alleen dit specifieke inlogformulier target.
Open de instelling voor de koptekstlay-out en voeg de volgende aangepaste CSS toe:
.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;}
Deze CSS zorgt ervoor dat de inlogvelden en de knop inline (horizontaal) verschijnen, verberg de link "Wachtwoord vergeten?". »En voeg een kleine marge toe tussen de velden.
Lijn instellingen
Voordat we de laatste hand leggen aan het online inlogformulier, werken we de regelparameters als volgt bij:
- Gebruik een aangepaste gootbreedte: JA
- Dakgootbreedte: 1
- Lijnuitlijning: recht
- Vulling: 0 px hoog, 0 px laag
Ontwerpinstellingen voor het inlogformulier
We zijn nu klaar om de instellingen van het aanmeldingsformulier bij te werken. Open de instellingen van de aanmeldingsformuliermodule en werk het volgende bij:
- Gebruik achtergrondkleur: NEE
Veld- en linktekst
- Veldachtergrond: Kleur: rgba (255,255,255,0.2)
- Tekstkleur veld: #ffffff
- Veldpolitie: Lato
- Tekstgrootte veld: 14 px
- Tekstuitlijning: rechts
- Linklettertype: Lato
- Linkletterstijl: onderstreept
- Tekstkleur koppeling: # ff3190
Knop ontwerp
- Knoptekstgrootte: 15px
- Achtergrondkleur knop: # ff3190
- Breedte van de knoprand: 0px
- Knooplettertype: Lato
- Knopvulling: 2 px bovenaan, 2 px onderaan
- Marge: 15 px laag
- Vulling: 0 px bovenaan, 0 px onderaan, 0 px links, 0 px rechts
Het menu toevoegen aan de tweede regel
Menumodule
Met ons online inlogformulier kunnen we het onderstaande menu direct toevoegen.
Voeg een menumodule toe onder de inlogformuliermodule.
Menu module instellingen
Werk de menu-instellingen als volgt bij:
- Achtergrondkleur: rgba (0,0,0,0)
- Menulettertype: Lato
- Gewicht lettertype: vetgedrukt
- Menutekstkleur: #ffffff
- Menutekstgrootte: 16px
- Tekstuitlijning: rechts
- Achtergrondkleur vervolgkeuzemenu: #ffffff
- Kleur van de lijn in het vervolgkeuzemenu: rgba (0,0,0,0)
- Tekstkleur van vervolgkeuzemenu: # 000000
- Achtergrondkleur van mobiel menu: #ffffff
- Tekstkleur mobiel menu: # 000000
- Kleur van winkelwagenpictogram: #ffffff
- Kleur van zoekpictogram: #ffffff
- Kleur hamburgermenupictogram: #ffffff
De koptekst van het inlogformulier opslaan
Zorg ervoor dat u de lay-out opslaat voordat u de Header Layout Editor verlaat.
Sla vervolgens ook de instellingen van de themagenerator op.
Definitieve resultaten
Dat is het!
Laten we nu het eindresultaat bekijken. Om het eindresultaat te zien, gaat u gewoon naar een pagina van uw Site web.
Hier is de koptekst op het bureaublad.
Hier is de koptekst van het online inlogformulier op het tabletscherm.
En hier is het online inlogformulier op het telefoonscherm. Let ook op het mobiele menu.
En dit is wat de gebruiker zal zien wanneer hij is ingelogd.
Final gedachten
Deze aangepaste globale header met een online inlogformulier zal zeker van pas komen voor elke lidmaatschapssite of online winkel. Met slechts een beetje aangepaste CSS konden we de inlogmodule van Divi omzetten in een elegant online inlogformulier dat er goed uit zou zien in de header van elk Site web. Ik hoop dat dit nuttig is voor je volgende project.
Ik kan niet wachten om van je te horen in de comments.
Voor je gezondheid!
