Noodzaak om globale koptekst te maken met formulier aansluiting in DIVI?
De oprichting van een formulier login op je header kan een geweldige boost zijn voor de gebruikerservaring.
Ze zijn ideaal voor abonnementswebsites en online winkels, omdat ze gebruikers in staat stellen om op elk moment in te loggen op elke pagina van de website.
In deze zelfstudie laten we u zien hoe u een formulier online inloggen voor gebruikers op een aangepaste header. Laten we beginnen!
overzicht
Hier is het snelle voorbeeld van de aangepaste koptekst met het inlogformulier dat we in deze zelfstudie gaan maken.
Hier is het "uitloggen"-bericht en de link die wordt weergegeven wanneer gebruikers zijn ingelogd.
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 "Globale koptekst toevoegen" en klik vervolgens op "Globale koptekst maken".
Divi globaal kopontwerp met een horizontaal inlogformulier
Pas de sectie aan
Vanuit de Global Header Layout-editor kunt u de gepersonaliseerde header van uw website Beginnend vanuit niets. Om aan de slag te gaan, opent u de instellingen in het normale gedeelte en werkt u het volgende bij:
- Linker achtergrondverloopkleur:
- Rechter achtergrondverloopkleur:
- Gradiëntrichting: 48 graden
- Binnenmarge: 10px boven, 10px onder, 20px links, 20px rechts
Om onze header responsiever te maken, zullen we de volgende aangepaste CSS toevoegen aan het hoofdsectie-element.
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.
Lijn toevoegen
Voeg een rij toe aan een kolom in de sectie.
Voeg een afbeeldingsmodule toe met een logo-afbeelding
Voeg in de rij met één kolom een afbeeldingsmodule toe. Hier voegen we het header-logo toe.
Werk de afbeeldings- en afbeeldingsmodule-marge bij
Werk de beeldinstellingen als volgt bij:
- Afbeelding: [logo toevoegen (ca. 64 x 64 px)]
- Marge: 20px rechts
Werk de parameters van de lijn bij
Voordat u verder gaat, opent u de lijninstellingen en werkt u het volgende bij:
- Gebruik aangepaste gootbreedte: JA
- Kolomafstand: 1
- Maximale breedte: 25%
- Uitlijning: links
- Interne marge: 0px boven, 0px onder
Horizontaal inlogformulier toegevoegd aan tweede regel
Lijn toevoegen
Nu de eerste rij klaar is, zul je in de editor zien dat de eerste rij 25% van het linkerdeel in beslag zal nemen. Dit is in feite de regel die is aangewezen voor ons koptekstlogo. We moeten een sectierij maken voor het inlogformulier en het menu aan de rechterkant.
Voeg een tweede rij met structuur toe aan een kolom in de sectie.
Voeg een inlogformulier toe
Voeg in de rij met één kolom een module 'Verbinden' toe.
Verwijder standaardinhoud
Verwijder onder de instellingen van de inlogmodule de valse titel en hoofdtekst.
Aangepaste klasse toevoegen voor inlogformulier en CSS
Voordat we te ver gaan in het ontwerpen van het aanmeldingsformulier, laten we eerst de CSS-klasse en aangepaste CSS toevoegen aan de aanmeldingsmodule. Hiermee wordt de online basisstructuur van het formulier ingesteld voordat de laatste hand wordt gelegd aan het formulierontwerp met de ingebouwde opties van Divi.
Zie ook onze gids over Een glijdend en responsief zijmenu maken in 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-vak met de verbindingsbeschrijving:
margin-bottom: 0px !important
Voeg vervolgens de volgende aangepaste CSS toe in het CSS-gebied van het inlogformulier:
width: 100%;Voeg de volgende aangepaste CSS toe aan het CSS-gebied voor aanmeldingsvelden:
padding: 5px 4% !important
Aangepaste CSS toevoegen aan instellingen voor koptekstlay-out
Omdat we onze aangepaste CSS-klasse aan de inlogformuliermodule hebben toegevoegd, kunnen we onze aangepaste CSS toevoegen die alleen op dat specifieke inlogformulier is gericht.
Lees ook onze tutorial over Hoe de blogpagina te maken met de Blog-module met DIVI
Open de instelling voor 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 -knop inline (horizontaal) worden weergegeven, het bericht "Wachtwoord vergeten?" worden verborgen en er wordt een kleine marge tussen de velden toegevoegd.
Lijn instellingen
Voordat we de laatste hand leggen aan het inlogformulier, laten we de regelparameters als volgt bijwerken:
- Gebruik aangepaste gootbreedte: JA
- Kolomafstand: 1
- Uitlijning: Rechts
- Interne marge: 0px boven, 0px onder
Ontwerpinstellingen voor het inlogformulier
We zijn nu klaar om de instellingen van het inlogformulier bij te werken. Open de instellingen van de Connect-module en werk het volgende bij:
- Gebruik achtergrondkleur: NEE
Veld- en linktekst
- Achtergrondkleurvelden: rgba(255,255,255,0.2)
- Tekstkleurvelden: #ffffff
- Velden lettertype: Lato
- Tekstgrootte Velden: 14px
- Tekstuitlijning: rechts
Knop ontwerp
- Gebruik aangepaste stijlen voor Knop: NEE
- Tekstgrootte knop: 15px
- Achtergrondknop: #ff3190
- Randbreedte knop: 0 pixels
- Lettertype knop: Lato
- Marge-knop: 2px boven, 2px onder
- Opvulknop: 15px onderkant
- Binnenmarge: 0px boven, 0px onder, 0px links, 0px rechts
Het menu toevoegen aan de tweede regel
Menumodule
Met ons inlogformulier kunnen we het menu direct hieronder toevoegen.
Voeg een Menu module toe onder de Login module.
Menu module instellingen
Werk de menu-instellingen als volgt bij:
- Achtergrond: rgba(0,0,0,0)
- Lettertypemenu: Lato
- Zacht lichtmenu: vet
- Kleur menutekst: #ffffff
- Grootte menutekst: 16px
- Tekstuitlijning: rechts
- Achtergrondkleur van het vervolgkeuzemenu: #ffffff
- Kleur vervolgkeuzelijst: rgba(0,0,0,0)
- Tekstkleur vervolgkeuzemenu: #000000
- Achtergrondkleur mobiel menu: #ffffff
- Tekstkleur mobiel menu: #000000
- Kleur winkelwagenpictogram: #ffffff
- Kleur van zoekpictogram: #ffffff
- Hamburger Menu Pictogram Kleur: #ffffff
De koptekst van het inlogformulier opslaan
Zorg ervoor dat u de lay-out opslaat voordat u de kopteksteditor verlaat.
Sla vervolgens ook de Theme Builder-instellingen op.
Definitieve resultaten
Het is gebeurd !
Laten we nu het eindresultaat bekijken. Om het eindresultaat te zien, hoeft u alleen maar een pagina op uw website te bezoeken.
En dit is wat de gebruiker zal zien wanneer hij is ingelogd.
Download DIVI nu!!!
Conclusie
Deze aangepaste globale header met een inlogformulier zal zeker van pas komen voor elke abonnementswebsite of online winkel.
Met slechts een beetje aangepaste CSS konden we Divi's Login-module omzetten in een elegant login-formulier dat perfect in de header van elke website past.
Ik hoop dat dit nuttig zal zijn voor uw volgende project. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
