Divi: Hvordan lage et popup-påloggingsskjema

Vil du lage en skjema popup-pålogging i Divi med påloggings-/utloggingsknapper?

Opprettelsen av en skjema popup-vindu for pålogging Divi kan være en effektiv måte å forbedre nettstedets design og brukeropplevelse for pålogging/avlogging. 

Tanken er å lage en skjema pålogging som vises i et popup-vindu hver gang brukeren klikker på en påloggingsknapp i sideoverskriften. 

Dette er mer praktisk enn å omdirigere brukeren til en tilpasset påloggingsside.

I denne opplæringen vil vi lage et popup-påloggingsskjema med tilpassede påloggings- og utloggingsknapper i Divi. 

Ved å bruke Divi Login-modulen og noen få knappemoduler vil vi skape en sømløs popup-påloggingsopplevelse på front-end ved å la brukere logge på og ut uten å bli omdirigert til en annen side.

La oss begynne!

undersøkelsen

Her er en rask titt på designet vi skal lage i denne opplæringen.

Legg merke til hvordan påloggingsknappen og utloggingsknappene endres henholdsvis. Og når brukeren logger på, forblir de på gjeldende side. 

I tillegg viser popup-påloggingsskjemaet forskjellig "advarsel"-innhold hver gang brukeren prøver å logge ut.

Hva du trenger for å komme i gang

Mens du kan legge til dette popup-påloggingsskjemaet og tilpassede påloggings-/avloggingsknapper til en hvilken som helst egendefinert overskrift, bruker vi en forhåndsdefinert overskrift for å fremskynde prosessen og få designen raskt i gang.

Importer overskriftsmalen "Crowdfunding Layout Pack" til Divi-byggeren

For å komme i gang, last ned Divi Crowdfunding Layout Pack topptekst og bunntekst gratis . For å gjøre dette, gå til blogginnlegget .

Skriv deretter inn e-postadressen din for å laste ned zip-filen.

Deretter pakker du ut filen slik at den er klar til å importeres.

Følg disse trinnene for å importere filen til temaredigering:

1. Gå til Divi > Temabygger.
2. Klikk på portabilitetsikonet.
3. I popup-vinduet Portabilitet velger du importfanen.
4. Velg den tidligere nedlastede utpakkede filen du vil importere.
5. Cliquer sur Importer Divi Theme Builder maler.
6. Klikk på redigeringsikonet for å redigere den importerte overskriften.

Opprette popup-påloggingsskjemaet i Divi

Del 1: Lage påloggings- og utloggingsknapper

Når du er i Global Header Layout Editor, åpner du lagvisning slik at du enkelt kan se alle elementene.

Slett modulen i den øverste raden i overskriftsdelen Sosiale medier Følg ved siden av Logg på-knappen i kolonne 3.

Les også: Divi: Sammenligning av de forskjellige typene gradienter

Opprette påloggingsknappen

For å opprette vår påloggingsknapp, åpne knappemodulinnstillingene i kolonne 3 i den øverste raden.

Oppdater følgende elementer under designfanen:

• Knappikon: låsikon (se skjermbilde)
• Plassering av knappikon: Høyre
• Vis kun ikon ved peker for knapp: NEI
• Polstring: 0,5em (øverst og bunn), 2em (venstre), 0,7em (høyre)

Under fanen Avansert, tilordne knappen to egendefinerte CSS-klasser som følger:

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

Oppretting av utloggingsknappen

For å lage vår utloggingsknapp, dupliser den eksisterende påloggingsknappen i kolonne 3.

For å hjelpe til med å skille de to knappene, kan du oppdatere etiketten til hver av dem. Deretter åpner du Duplicate Button-modulinnstillingene i kolonne 3.

Endre knappeteksten til å lese "Logg ut".

Oppdater følgende elementer under designfanen:

• Knappikon: opplåsingsikon (se skjermbilde)

Under fanen Avansert, oppdater CSS-klasser-knappen som følger:

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

Den første klassen vil forbli den samme, men den andre klassen vil være annerledes.

Del 2: Opprette popup-delen

Når knappene er ferdige, er vi klare til å lage popup-delen som vil fungere som vår popup som inneholder skjemaer forbindelse.

Legg til en ny vanlig seksjon under overskriftsdelen.

Sett deretter inn en rad med én kolonne inne i seksjonen.

Seksjonsinnstillinger

Før du oppdaterer raden, åpne seksjonsinnstillingene.

Under fanen Innhold, gi delen en hvit bakgrunnsfarge:

• Bakgrunn: #ffffff

Under fanen utforming, oppdater følgende:

• Bredde: 100 %
• Maks bredde: 800 piksler (stasjonær datamaskin), 80 % (nettbrett), 100 % (telefon)
• Seksjonsjustering: Senter
• Høyde: automatisk (stasjonær PC og nettbrett), 100 % (telefon)
• Maks høyde: 100 %
• Polstring: 0px (øverst og bunn)

• Avrundede hjørner: 10px
• Box Shadow: se skjermbilde
• Box Shadow Vertikal posisjon: 0px
• Uskarphetstyrke: 100 piksler
• Spredningsstyrke: 50px

Under fanen Avansert, oppdater følgende:

Legg til en tilpasset CSS-klasse.

• CSS-klasse: et-popup-login

Legg til en tilpasset CSS-kodebit til hovedelementet:

overscroll-behavior: contain;

Oppdater alternativene for synlighet og posisjon.

• Horisontalt overløp: Skjult
• Vertikal overløp: auto
• Posisjon: Fast
• Sted: Sentersenter
• Z-indeks: 999999

Linjeinnstillinger

Med seksjonsinnstillingene på plass åpner du linjeinnstillingene og oppdaterer følgende designinnstillinger:

• Bruk egendefinert takrennebredde: JA
• Rennebredde: 1
• Bredde: 100 %
• Maks bredde: 100 %
• Polstring: 0px (øverst), 5vh (bunn)

Del 3: Opprette popup-ikonet for lukke

For å lage popup-lukkikonet som lukker/skjuler popup-vinduet ved klikk, skal vi bruke en Blurb-modul.

Legg til en ny Blurb-modul i raden.

Åpne modulinnstillingen og slett tittelen og brødteksten.

Legg deretter til ikonet som følger:

• Bruk ikon: JA
• Ikon: "x"-ikon (se skjermbilde)

Under fanen utforming, oppdater følgende:

• Ikonfarge: #004e43
• Bilde/ikonjustering: sentrert
• Bruk ikonets skriftstørrelse: JA
• Ikon Skriftstørrelse: 50px
• Bredde: 50px
• Justeringsmodul: høyre
• Høyde: 50px

Under fanen Avansert, legg til en CSS-klasse i Blurb-modulen som følger:

• CSS-klasse: et-toggle-popup

Del 4: Oppretting av påloggingsskjemaene for "pålogget" og "avlogget".

For å ha ulikt innhold og design for innloggingsskjemaet ved inn- og utlogging, vil vi lage to ulike innloggingsskjemamoduler. 

Det første vil være påloggingsskjemaet som vil vises hver gang brukeren blir "logget ut". Det andre vil være påloggingsskjemaet som vil vises hver gang brukeren er "logget inn".

Oppretting av skjemaet "Avlogget".

For å opprette påloggingsskjemaet "Logged Out", legg til en ny påloggingsmodul under Blurb-modulikonet inne i raden.

Åpne modulinnstillingene og endre følgende innstillinger:

Innhold-fanen

• Omdirigere til gjeldende side: JA
• Bruk bakgrunnsfarge: NEI

Design-fanen

• Felt bakgrunnsfarge: rgba(0,78,67,0.05)
• Bakgrunnsfarge for feltfokus: rgba (0,78,67,0,15)
• Tekstjustering: Sentrert
• Tekstfarge: Mørk

• Tittelfont: Poppins
• Tittel Skriftvekt: halvfet
• Tekstfarge: #000000
• Tittellinjehøyde: 1,3 em
• Body Font: Work Sans

For å oppdatere knappestilene kopierer du knappestilene fra påloggingsknappen vi opprettet til den tredje kolonnen i raden i Header-delen.

Lim deretter inn knappestilene i knappealternativgruppen i tilkoblingsinnstillingene under kategorien Design.

Deretter oppdaterer du knappestilene for påloggingsskjemaet som følger:

• Button
  • Tekstfarge: #ffffff
  • Bakgrunn: #004e43
  • Bakgrunn (hover): #00683c
  • Kantbredde: 0 piksler
  • Polstring: 15px (øverst og bunn)

Deretter oppdaterer du størrelsesalternativene som følger:

• Bredde: 100 %
• Maks bredde: 80 % (stasjonær datamaskin), 90 % (nettbrett), 95 % (telefon)
• Justeringsmodul: Senter

Avansert-fanen

Under fanen Avansert, oppdater CSS-klassen og tilpasset CSS som følger:

• CSS-klasse: et-utlogget-skjema

Egendefinert CSS for tilkoblingsbeskrivelse:

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

Egendefinert CSS for påloggingsskjemaet:

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

Dette vil sikre at påloggingsmodulen spenner over hele rad-/kolonnebredden, selv på skrivebordet.

Oppretting av "pålogget"-skjemaet

Nå som «Logged Out»-versjonen av skjemaet er fullført, må vi lage «Logged In»-versjonen som vil ha forskjellig innhold og stil for å maksimere brukeropplevelsen.

Dupliser det eksisterende påloggingsskjemaet for å opprette påloggingsskjemaet "Avlogget".

Deretter oppdaterer du etiketten for hver av de skjemaer hhv.

Åpne duplikatinnstillingene («Pålogget»-skjemaet) og legg til sidetittelen som dynamisk innhold i tittelen på påloggingsskjemamodulen.

Åpne deretter nettstedstittelens dynamiske innholdsinnstillinger og oppdater før og etter innholdet som følger:

• Før: "Du prøver å logge ut av elegante temaer"
• Etter: ". " 

Dette vil skape en fin dynamisk varsling for brukere som prøver å logge ut av nettstedet.

Legg deretter til følgende H3-overskrift i brødteksten:

<h3>Are you sure?</h3>

Hvis du noen gang har sett innholdet i påloggingsmodulen når du er logget på, vet du at det er en personlig melding som inkluderer en personlig "logg ut"-lenke. For å få denne lenken til å se ut som en knapp, må vi tilpasse skrift-/tekstinnstillingene for brødtekstlenken som følger:

• Velg fanen link under alternativ Brødtekst.
• Link Font: Work Sans
• Link Font Vekt: Semi fet
• Skriftstil: TT
• Koblingstekstjustering: sentrert
• Linktekstfarge: #ffffff

MERK: Du vil ikke kunne forhåndsvise disse resultatene før du ser skjemaet på en aktiv side.

Under fanen Avansert, oppdater CSS-klassen og tilpasset CSS som følger:

• CSS-klasse: et-pålogget-i-skjema

Egendefinert CSS for påloggingsskjemaet:

display:none;

Del 5: Legg til egendefinert kode

For å legge til den tilpassede CSS og JQuery som trengs for popup-påloggingsskjemafunksjonaliteten, oppretter du en ny kodemodul under den siste påloggingsmodulen.

CSS

Åpne kodemodulinnstillingene og lim inn følgende CSS i kodeområdet, og pass på å pakke inn CSS i de nødvendige stiltaggene.

/* 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;
}

Merk at CSS bruker klassen "tilkoblet" som er innebygd i WordPress for å skjule/vise de tilsvarende påloggings-/utloggingsknappene og skjemaer Logget inn/avlogget hver gang brukeren er inn- eller utlogget.

JQuery

Under sluttstiltaggen limer du inn følgende JQuery og pass på å pakke inn koden i de nødvendige skripttaggene.

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

Denne kodebiten bytter ganske enkelt popup-delen når brukeren klikker på ett av de tre elementene med klassen " og-veksle-popup (påloggings- og utloggingsknappene pluss presentasjonsikonet "x").

Se også: Divi: Slik bruker du bakgrunnsmaskeinnstillinger og alternativer for mønstertransformasjon

Det er gjort !

Ikke glem å lagre endringene du har gjort i malen i temabyggeren. Når du er lagret, kan du se resultatene på en live-side.

Endelig resultat

Her er de endelige resultatene på datamaskin, nettbrett og telefon.

Legg merke til hvordan påloggingsknappen og utloggingsknappen endres. Og når brukeren logger på, forblir brukeren på gjeldende side. 

I tillegg viser popup-påloggingsskjemaet forskjellig "advarsel"-innhold hver gang brukeren prøver å logge ut.

Last ned DIVI nå!!!

Konklusjon.

Forhåpentligvis vil det å lage dette popup-påloggingsskjemaet og tilpassede påloggings-/utloggingsknapper gi deg litt innsikt i hvordan du bruker Divis påloggingsskjema kreativt. 

Juster gjerne design og innhold på hvert påloggingsskjema (eller knapper) for å skape en unik påloggingsopplevelse på din egen nettside.

Vi håper også at denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.

Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...