Divi: Sådan opretter du en popup-loginformular

Kunne du tænke dig at oprette en formular popup login i Divi med login / logout knapper?

Oprettelsen af ​​en formular login popup ind Divi kan være en effektiv måde at forbedre dit websteds design og login/log ud brugeroplevelse. 

Tanken er at skabe en formular login, der vises i en pop-up, hver gang brugeren klikker på en login-knap i sidehovedet. 

Dette er mere praktisk end at omdirigere brugeren til en brugerdefineret login-side.

I denne vejledning vil vi oprette en pop-up login-formular med brugerdefinerede login- og logout-knapper i Divi. 

Ved at bruge Divi Login-modulet og nogle få Button-moduler vil vi skabe en problemfri popup-loginoplevelse på front-end ved at tillade brugere at logge ind og logge ud uden at blive omdirigeret til en anden side.

Lad os starte!

undersøgelse

Her er et hurtigt kig på det design, vi vil skabe i denne tutorial.

Bemærk, hvordan login-knappen og logout-knapperne ændres. Og når først brugeren logger på, bliver de på den aktuelle side. 

Derudover viser pop-up login-formularen forskelligt "advarsels"-indhold, hver gang brugeren forsøger at logge ud.

Hvad du behøver for at komme i gang

Mens du kan tilføje denne pop-up login-formular og brugerdefinerede login/logud-knapper til enhver brugerdefineret header, bruger vi en foruddefineret header til at fremskynde processen og få designet hurtigt i gang.

Importer "Crowdfunding Layout Pack"-hovedskabelonen til Divi-builderen

Download for at komme i gang Divi Crowdfunding Layout Pack Header og Footer gratis . For at gøre dette, gå til blogindlægget .

Indtast derefter din e-mail for at downloade zip-filen.

Udpak derefter filen, så den er klar til import.

Følg disse trin for at importere filen til temaeditoren:

1. Gå til Divi > Theme Builder.
2. Klik på portabilitetsikonet.
3. I pop op-vinduet Portabilitet skal du vælge fanen Import.
4. Vælg den tidligere downloadede udpakkede fil, der skal importeres.
5. Cliquer sur Importer Divi Theme Builder skabeloner.
6. Klik på redigeringsikonet for at redigere den importerede overskrift.

Oprettelse af popup-login-formularen i Divi

Del 1: Oprettelse af login- og logout-knapper

Når du er i Global Header Layout Editor, skal du åbne lagvisning så du nemt kan se alle elementerne.

Slet modulet i den øverste række af overskriftssektionen Sociale medier Følg ved siden af ​​knappen Log på i kolonne 3.

Læs også: Divi: Sammenligning af de forskellige typer gradienter

Oprettelse af login-knappen

For at oprette vores login-knap skal du åbne Knapmodulets indstillinger i kolonne 3 i den øverste række.

Opdater følgende elementer under designfanen:

• Knapikon: låseikon (se skærmbillede)
• Knapikonplacering: Højre
• Vis kun ikon ved svæv for knap: NEJ
• Polstring: 0,5 em (top og bund), 2 em (venstre), 0,7 em (højre)

Under fanen Avanceret, tildel knappen to tilpassede CSS-klasser som følger:

• CSS-klasse: et-toggle-popup et-popup-login-knap

Oprettelse af logout-knappen

For at oprette vores logout-knap skal du duplikere den eksisterende login-knap i kolonne 3.

For at hjælpe med at skelne mellem de to knapper kan du opdatere etiketten for hver af dem. Åbn derefter indstillingerne for Duplicate Button-modulet i kolonne 3.

Skift knapteksten til at læse "Log ud".

Opdater følgende elementer under designfanen:

• Knapikon: oplåsningsikon (se skærmbillede)

Under fanen Avanceret, skal du opdatere knappen CSS-klasser som følger:

• CSS-klasse: et-toggle-popup et-popup-logout-knap

Den første klasse forbliver den samme, men den anden klasse vil være anderledes.

Del 2: Oprettelse af popup-sektionen

Når knapperne er færdige, er vi klar til at oprette popup-sektionen, der vil fungere som vores popup, der indeholder formularer forbindelse.

Tilføj en ny almindelig sektion under overskriftssektionen.

Indsæt derefter en række med én kolonne inde i sektionen.

Sektionsindstillinger

Før du opdaterer rækken, skal du åbne sektionsindstillingerne.

Under fanen Indhold, giv sektionen en hvid baggrundsfarve:

• Baggrund: #ffffff

Under fanen Design, opdater følgende:

• Bredde: 100 %
• Maks. bredde: 800 px (computer), 80 % (tablet), 100 % (telefon)
• Sektionsopretning: Center
• Højde: automatisk (computer og tablet), 100 % (telefon)
• Max højde: 100 %
• Polstring: 0px (top og bund)

• Afrundede hjørner: 10px
• Box Shadow: se skærmbillede
• Box Shadow Lodret position: 0px
• Sløringsstyrke: 100 pixels
• Spredningsstyrke: 50px

Under fanen Avanceret, opdater følgende:

Tilføj en tilpasset CSS-klasse.

• CSS-klasse: et-popup-login

Tilføj et tilpasset CSS-kodestykke til hovedelementet:

overscroll-behavior: contain;

Opdater mulighederne for synlighed og position.

• Vandret overløb: Skjult
• Lodret overløb: auto
• Position: Fast
• Sted: Center Center
• Z-indeks: 999999

Linieindstillinger

Med sektionsindstillingerne på plads skal du åbne linjeindstillingerne og opdatere følgende designindstillinger:

• Brug tilpasset tagrendebredde: JA
• Rendebredde: 1
• Bredde: 100 %
• Maks. bredde: 100 %
• Polstring: 0px (øverst), 5vh (bund)

Del 3: Oprettelse af luk popup-ikonet

For at oprette popup-luk-ikonet, der lukker/skjuler pop op-vinduet ved klik, skal vi bruge et Blurb-modul.

Tilføj et nyt Blurb-modul til rækken.

Åbn modulindstillingen og slet titlen og brødteksten.

Tilføj derefter ikonet som følger:

• Brug ikon: JA
• Ikon: "x" ikon (se skærmbillede)

Under fanen Design, opdater følgende:

• Ikonfarve: #004e43
• Billed/ikonjustering: centreret
• Brug ikonets skriftstørrelse: JA
• Ikon Skriftstørrelse: 50px
• Bredde: 50px
• Justeringsmodul: højre
• Højde: 50px

Under fanen Avanceret, tilføj en CSS-klasse til Blurb-modulet som følger:

• CSS-klasse: et-toggle-popup

Del 4: Oprettelse af loginformularerne "Logget ind" og "Logget ud".

For at få forskelligt indhold og design til loginformularen ved login og logout, vil vi lave to forskellige loginformularmoduler. 

Den første vil være login-formularen, som vil blive vist, hver gang brugeren er "logget ud". Den anden vil være login-formularen, som vil blive vist, hver gang brugeren er "logget ind".

Oprettelse af formularen "Logget ud".

For at oprette login-formularen "Logget ud" skal du tilføje et nyt login-modul under Blurb-modulikonet inde i rækken.

Åbn modulindstillingerne og skift følgende indstillinger:

Fanen Indhold

• Omdiriger til den aktuelle side: JA
• Brug baggrundsfarve: NEJ

Fanen Design

• Felter baggrundsfarve: rgba(0,78,67,0.05)
• Feltfokus baggrundsfarve: rgba (0,78,67,0,15)
• Tekstjustering: Centreret
• Tekstfarve: Mørk

• Titelskrifttype: Poppins
• Titel Skrifttypevægt: halvfed
• Tekstfarve: #000000
• Titellinjehøjde: 1,3 em
• Body Font: Work Sans

For at opdatere knapstilene skal du kopiere knapstilene fra den login-knap, vi oprettede, til den tredje kolonne i rækken af ​​sektionen Overskrift.

Indsæt derefter knapstilene i knapindstillingsgruppen i forbindelsesindstillingerne under fanen Design.

Opdater derefter knapstilene for loginformularen som følger:

• Button
  • Tekstfarve: #ffffff
  • Baggrund: #004e43
  • Baggrund (Hover): #00683c
  • Kantbredde: 0 pixels
  • Polstring: 15px (top og bund)

Opdater derefter størrelsesindstillingerne som følger:

• Bredde: 100 %
• Maks. bredde: 80 % (skrivebord), 90 % (tablet), 95 % (telefon)
• Justeringsmodul: Center

Avanceret fane

Under fanen Avanceret, opdater CSS-klassen og tilpasset CSS som følger:

• CSS-klasse: et-logget-ud-formular

Brugerdefineret CSS til forbindelsesbeskrivelse:

width: 100% !important;
float: none !important;

Brugerdefineret CSS til loginformularen:

width: 100% !important;
padding: 0px !important;

Dette vil sikre, at login-modulet spænder over hele række-/kolonnebredden, selv på skrivebordet.

Oprettelse af "Logget ind"-formularen

Nu hvor "Logget ud"-versionen af ​​formularen er færdig, skal vi oprette "Logget ind"-versionen, som vil have forskelligt indhold og stil for at maksimere brugeroplevelsen.

For at oprette loginformularen "Logget ud" skal du duplikere den eksisterende loginformular.

Opdater derefter etiketten for hver af de formularer tilslutning hhv.

Åbn duplikatindstillingerne (formularen "Logget ind") og tilføj webstedets titel som dynamisk indhold til titlen på loginformularmodulet.

Åbn derefter webstedstitlens dynamiske indholdsindstillinger og opdater før- og efterindholdet som følger:

• Før: "Du forsøger at logge ud af Elegant Themes"
• Efter: ". " 

Dette vil skabe en flot dynamisk meddelelse til brugere, der forsøger at logge ud af webstedet.

Tilføj derefter følgende H3-header til brødteksten:

<h3>Are you sure?</h3>

Hvis du nogensinde har set indholdet af login-modulet, når du er logget ind, ved du, at der er en personlig besked, der indeholder et personligt "log ud"-link. For at få dette link til at ligne en knap, skal vi tilpasse skrifttype-/tekstindstillingerne for brødtekstlinket som følger:

• Vælg fanen Link under mulighed BodyText.
• Link skrifttype: Work Sans
• Linkskrifttypevægt: Semi fed
• Skrifttype: TT
• Linktekstjustering: centreret
• Linktekstfarve: #ffffff

BEMÆRK: Du vil ikke være i stand til at få vist disse resultater, før du får vist formularen på en live-side.

Under fanen Avanceret, opdater CSS-klassen og tilpasset CSS som følger:

• CSS-klasse: et-logged-in-form

Brugerdefineret CSS til loginformularen:

display:none;

Del 5: Tilføj tilpasset kode

For at tilføje den tilpassede CSS og JQuery, der er nødvendig for pop-up login-formularfunktionaliteten, skal du oprette et nyt kodemodul under det sidste login-modul.

CSS

Åbn Kodemodulets indstillinger og indsæt følgende CSS i kodeboksen, og sørg for at pakke CSS'en ind i de nødvendige stiltags.

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Bemærk, at CSS'en bruger den "forbundne" klasse, som er indbygget i WordPress for at skjule/vise de tilsvarende login/log ud knapper og formularer “Logget ind”/”Logget ud” login-meddelelse, hver gang brugeren er logget ind eller ud.

JQuery

Indsæt følgende JQuery under slutstiltagget, og sørg for at pakke koden ind i de nødvendige script-tags.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Dette uddrag skifter simpelthen pop op-sektionen, når brugeren klikker på et af de tre elementer med klassen " og-skift-popup (login- og logout-knapperne plus præsentationsikonet "x").

Se også: Divi: Sådan bruger du baggrundsmaskeindstillinger og mønstertransformeringsindstillinger

Det er gjort !

Glem ikke at gemme de ændringer, du har lavet i skabelonen, i temabyggeren. Når de er gemt, kan du se resultaterne på en live-side.

Endelig resultat

Her er de endelige resultater på computer, tablet og telefon.

Bemærk, hvordan login-knappen og logout-knappen ændres. Og når brugeren logger på, forbliver brugeren på den aktuelle side. 

Derudover viser popup-logonformularen forskelligt "advarsels"-indhold, hver gang brugeren forsøger at logge ud.

Download DIVI nu!!!

Konklusion.

Forhåbentlig vil oprettelsen af ​​denne popup-loginformular og brugerdefinerede login/logud-knapper give dig lidt indsigt i, hvordan du bruger Divis login-formular kreativt. 

Du er velkommen til at justere designet og indholdet af hver loginformular (eller knapper) for at skabe en unik loginoplevelse på din egen hjemmeside.

Vi håber også, at denne tutorial vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.

Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...