De inlogmodule (aanmelden) geeft een formulier WordPress login, Divi-stijl, overal op uw pagina. Als je WordPress gebruikt met een ledengedeelte, voeg dan een formulier rechtstreeks verbinding maken met een pagina kan erg handig zijn (in plaats van mensen door te sturen naar de formulier WordPress-login die een andere stijl gebruikt dan uw thema).
Een inlogmodule toevoegen aan uw pagina
Voordat u een inlogmodule aan uw pagina kunt toevoegen, moet u eerst in de Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.
Nadat u Visual Builder heeft geopend, kunt u op de grijze plusknop klikken om een nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als u een nieuwe pagina begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.
Zoek de inlogmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "Connect" kunt typen en vervolgens op "Enter" kunt klikken om de verbindingsmodule automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .
Voorbeeldtoepassing: voeg een aangepast inlogformulier toe aan de inlogpagina van een ledengedeelte
Aangezien lidmaatschapssites vereisen dat de gebruiker inlogt op een deel of alle inhoud, maakt de inlogmodule het gemakkelijk om een inlogformulier toe te voegen aan uw eigen inlogpagina. U kunt er ook voor kiezen om gebruikers om te leiden naar dit formulier in plaats van de standaard WordPress-inlogpagina.
Hier is een eenvoudige inlogpagina met de inlogmodule. Ik zal je laten zien hoe je kunt maken:
Voeg met Visual Builder een nieuwe standaardsectie toe aan de aanmeldingspagina voor leden met een rij over de volledige breedte (1 kolom). Plaats vervolgens de aansluitmodule op de lijn.
Werk de verbindingsinstellingen als volgt bij:
Inhoud opties
Titel: Verbinding
Inhoud: [vul een korte beschrijving van de cursus in of instructies voor het inloggen]
Doorverwijzen naar huidige pagina: YES
Ontwerpopties
Achtergrondkleur veld: # f0f0f0 Tekstkleur: Dark Lettertype koptekst: 35px Kleur koptekst: # 888888 Lettergrootte hoofdtekst: 16px Rand: Ja Randkleur: # 0c71c3 Randbreedte: 1px Aangepaste opvulling: 50px boven, 50px rechts, 50px onder, 50px links Gebruik aangepaste stijlen voor knop: JA Knoptekstgrootte: 26px Knoptekstkleur: #ffffff Knopkleur: # 0c71c3 knop: 0px Lettertype-knop: standaard, hoofdletters Pictogram voor knop toevoegen: JA Knoppictogram: geef het pictogram alleen weer wanneer u de muisaanwijzer op de knop beweegt: NEE
Dat is alles. De site van het ledengedeelte heeft nu een persoonlijk inlogformulier waar gebruikers naar worden doorverwezen wanneer ze zich moeten aanmelden bij de cursus. U hoeft geen genoegen te nemen met het standaard WordPress-inlogformulier.
Inhoudsopties voor verbindingsmodule
Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.
Titel
De titel verschijnt in het inlogvak, boven het inlogformulier.
Inhoud
De inhoud wordt weergegeven in het inlogvenster, onder de titel. Als u een aanvullende beschrijving wilt toevoegen, kunt u het veld gebruiken. Laat het anders leeg.
Doorverwijzen naar de huidige pagina
Hier kunt u kiezen of de gebruiker moet worden omgeleid naar de huidige pagina.
Gebruik de achtergrondkleur
Als u uw inlogformulier een effen achtergrondkleur wilt geven, selecteert u "ja" voor deze optie en de achtergrondkleur die u in de volgende optie selecteert, wordt gebruikt.
Achtergrondkleur
Selecteer een achtergrondkleur om weer te geven als de achtergrond van uw inlogvenster. Als u ervoor kiest om achtergrondkleuren uit te schakelen in de vorige optie, heeft die kleur geen effect.
Admin label
Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.
Stijlopties voor de aanmeldmodule
Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.
Formulier veld achtergrondkleur
Het inlogformulier bevat twee invoervelden voor gebruikersnaam en wachtwoord. U kunt deze instelling gebruiken om de achtergrondkleur van deze velden aan te passen.
Tekstkleur van het formulierveld
Het inlogformulier bevat twee invoervelden voor gebruikersnaam en wachtwoord. U kunt deze instelling gebruiken om de tekstkleur van deze velden aan te passen. Als u de achtergrondkleur van het formulierveld heeft aangepast, kunt u ook de tekstkleur aanpassen om een vloeiende kleurrelatie te garanderen.
Achtergrondkleur
Wanneer een invoerveld wordt gefocust met de muis van een bezoeker, veranderen de kleuren om duidelijk aan te geven welk veld actief is. Hier kunt u de achtergrondkleur van de gefocuste velden definiëren.
Focus tekstkleur
Wanneer een invoerveld wordt gefocust met de muis van een bezoeker, veranderen de kleuren om duidelijk aan te geven welk veld actief is. Hier kunt u de tekstkleur van de gefocuste velden definiëren.
Gebruik de kleur van de focusrand
Als u een rand wilt toevoegen aan invoervelden wanneer deze in focus zijn, kunt u deze optie inschakelen.
Kleur van de focusrand
Met deze instelling kunt u de kleur wijzigen van de rand die op de gerichte invoervelden verschijnt.
Tekstkleur
Hier kunt u kiezen of uw tekst licht of donker moet zijn. Als u op een donkere achtergrond werkt, moet uw tekst licht zijn. Als uw achtergrond licht is, moet uw tekst donker zijn.
Tekstoriëntatie
Hier kunt u de uitlijning van uw tekst aanpassen.
Header lettertype
U kunt het lettertype van uw koptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.
Lettergrootte koptekst
Hier kunt u de grootte van uw koptekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Kleur koptekst
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw koptekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.
Tussenruimte koptekst
Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw koptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Hoogte koprij
Rijhoogte is van invloed op de ruimte tussen elke rij van uw koptekst.Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het veld in. invoerveld rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Lichaamsdoopvont
U kunt uw hoofdlettertype wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.
Tekst lettergrootte
Hier kunt u de grootte van uw hoofdtekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Tekstkleur hoofdtekst
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw tekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurenkiezer.
Afstand van hoofdletters
Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw tekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Hoogte van de lichaamslijn
De regelhoogte is van invloed op de ruimte tussen elke regel tekst in uw lichaam.Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Gebruik de rand
Als u deze optie inschakelt, wordt er een rand rond uw module geplaatst. Deze rand kan worden aangepast met behulp van de volgende voorwaardelijke parameters.
Kleur van de rand
Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur uit de kleurkiezer om deze op uw rand toe te passen.
Breedte van de rand
Standaard zijn de randen 1 pixel breed. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of een aangepaste waarde in het invoerveld rechts van de schuifregelaar in te voeren. Aangepaste maateenheden worden ondersteund, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders zoals em, vh, vw enz.
Randstijl
Randen ondersteunen acht verschillende stijlen: effen, gestippeld, gestippeld, dubbel, groef, rand, overlay en start. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.
Aangepaste marge
De marge is de ruimte die aan de buitenkant van uw module wordt toegevoegd, tussen de module en het volgende element erboven, eronder of links en rechts ervan. U kunt aangepaste margewaarden toevoegen aan elk van de vier zijden van de module. Om de aangepaste marge te verwijderen, verwijdert u de toegevoegde waarde uit het invoerveld. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.
Aangepaste vulling
Infill is de ruimte die in uw module wordt toegevoegd, tussen de rand van de module en de interne elementen. U kunt aangepaste opvulwaarden toevoegen aan elk van de vier zijden van de module. Om de aangepaste marge te verwijderen, verwijdert u de toegevoegde waarde uit het invoerveld. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.
Gebruik aangepaste stijlen voor de knop
Als u deze optie inschakelt, worden verschillende instellingen voor het aanpassen van knoppen weergegeven die u kunt gebruiken om het uiterlijk van de knop van uw module te wijzigen.
Knop tekstgrootte
Deze instelling kan worden gebruikt om de grootte van de tekst in de knop te vergroten of te verkleinen. De knop past zich aan naarmate de tekst groter en kleiner wordt.
Knop tekstkleur
Standaard nemen de knoppen de accentkleur van uw thema aan, zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste tekstkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de knopkleur te wijzigen.
Knop achtergrondkleur
Standaard hebben de knoppen een transparante achtergrondkleur. Dit kan worden gewijzigd door de gewenste achtergrondkleur te selecteren in de kleurenkiezer.
Randbreedte-knop
Alle Divi-knoppen hebben standaard een rand van 2 px. Met deze instelling kan deze rand worden vergroot of verkleind. Randen kunnen worden verwijderd door de waarde 0 in te voeren.
Knooprandkleur
Standaard nemen knopranden de accentkleur van uw thema over zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste randkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de kleur van de knoprand te wijzigen.
Knoop de randradius
De straal van de rand heeft invloed op de rondheid van de hoeken van uw knoppen. Standaard hebben de knoppen in Divi een kleine randradius die de hoeken met 3 pixels rond maakt. U kunt deze waarde verlagen tot 0 om een vierkante knop te maken of aanzienlijk verhogen om knoppen met ronde randen te maken.
Afstand van knopletters
Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw knoptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Knop lettertype
U kunt het lettertype van uw knoptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.
Voeg een knoppictogram toe
Uitgeschakeld, deze instelling verwijdert pictogrammen van uw knop. Standaard geven alle Divi-knoppen een pijlpictogram weer op de muisaanwijzer.
Knop pictogram
Als pictogrammen zijn ingeschakeld, kunt u deze instelling gebruiken om te kiezen welk pictogram u in uw knop wilt gebruiken. Divi heeft verschillende pictogrammen om uit te kiezen.
Kleur pictogram knop
Als u deze instelling aanpast, verandert de kleur van het pictogram dat op uw knop verschijnt. Standaard is de kleur van het pictogram hetzelfde als de tekstkleur van uw knop, maar met deze instelling kunt u de kleur onafhankelijk aanpassen.
Pictogramplaatsingstoets
U kunt ervoor kiezen om het pictogram van uw knop links of rechts van uw knop weer te geven.
Alleen pictogram weergeven wanneer u over de knop beweegt
Standaard worden knoppictogrammen alleen weergegeven tijdens het zweven. Schakel deze instelling uit als u wilt dat het pictogram altijd wordt weergegeven.
Knop Tekstkleur verbergen
Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.
Knop achter achtergrondkleur
Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.
Kleur op de randknop
Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.
Knop Randstraal zweven
Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.
Knop voor het markeren van afstanden van notities
Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.
Geavanceerde opties van de Login-module
Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.
CSS ID
Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.
CSS-klasse
Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een aangepaste CSS-stijl te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi-child-thema of in de aangepaste CSS-stylesheet die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de instellingen op de Divi Builder-pagina.
Aangepaste CSS
Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.
zichtbaarheid
Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andere Divi-zelfstudies
- 5 websites voor restaurant gebruik Divi thema
- Tekst toevoegen aan een Divi WooCommerce-product
- Hoe de menukleur tussen Divi-pagina's te veranderen
- Hoe de rasters van een blog personaliseren met Divi
- Hoe de rol Divi editor op WordPress
- Een Divi-schuifregelaar op volledig scherm maken
- Hoe de kleur van menu's tussen Divi-pagina's te veranderen
- Functies die u waarschijnlijk niet kent over Divi
- Divi Builder gebruiken op WordPress
- Hoe de Divi-scrolmodule video te gebruiken
- Hoe de Divi Builder Flip-module te gebruiken
- Hoe een getuigenismodule op Divi Builder toe te voegen
- Hoe de Divi-tekstmodule te gebruiken
- Hoe maak je een schuifregelaar op Divi
- Hoe u een Divi-gebruikersrol kunt bewerken
- Hoe de Divi Social Media-module te gebruiken
- Hoe de shopmodule te gebruiken met het thema WordPress Divi
- Hoe de Divi zijbalkmodule te gebruiken
- Hoe de Divi Price Table-module te gebruiken
- Hoe de titelmodule van Divi-publicaties te gebruiken
- Hoe een videomodule van Divi toe te voegen
- Hoe de artikelnavigatiemodule te gebruiken
- Hoe de Divi-zoekmodule te gebruiken
- Hoe de Divi wallet-module te gebruiken
- Hoe de persoonsmodule op Divi Builder te gebruiken
- De walletmodule gebruiken met Divi-filter
- De schuifregelaarmodule op de volledige breedte gebruiken
- Hoe de Divi Builder-beeldmodule te gebruiken
- De navigatiemodule op de volledige breedte van Divi Builder gebruiken
- Hoe de afbeeldingengalerij-module te gebruiken
- Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
- Hoe de Divi Full Width Portfolio Module te gebruiken
- Hoe de Divi header-module over de volle breedte te gebruiken
- Hoe de Divi Counter-module te gebruiken
- De schuifregelaar voor artikelen gebruiken in Divi Builder
- Hoe de Divi Email Optin-module te gebruiken
Goedemorgen.
Uitstekend artikel.
Desalniettemin heb ik op mijn inlogformulier een probleem zoals op je afbeelding zie ik: "Gebruikersnaam" en ik zou dit veld willen personaliseren omdat ik vind dat het alles verpest. Hoe kan ik doen?
dank u
Hallo Joey,
Sorry voor het late antwoord. Je kunt de vertaling van divi gewoon corrigeren.