Divi: Si të krijoni një formular hyrjeje në dritare

Dëshironi të krijoni një formë Hyrja popup në Divi me butonat e hyrjes / daljes?

Krijimi i një formë login popup në Divi mund të jetë një mënyrë efektive për të përmirësuar dizajnin e faqes suaj dhe përvojën e përdoruesit për hyrje/dalje. 

Ideja është të krijohet një formë hyrje që shfaqet në një dritare pop-up sa herë që përdoruesi klikon një buton identifikimi në kokën e faqes. 

Kjo është më e përshtatshme sesa ridrejtimi i përdoruesit në një faqe të personalizuar të hyrjes.

Në këtë tutorial, ne do të krijojmë një formular identifikimi që shfaqet me butonat e personalizuar të hyrjes dhe daljes në Divi. 

Duke përdorur modulin Divi Login dhe disa module Button, ne do të krijojmë një përvojë të pandërprerë hyrjeje në dritare në pjesën e përparme duke i lejuar përdoruesit të identifikohen dhe të dalin pa u ridrejtuar në një faqe tjetër.

Le të fillojmë!

studim

Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.

Vini re se si ndryshojnë përkatësisht butoni i hyrjes dhe butonat e daljes. Dhe, pasi përdoruesi të regjistrohet, ata qëndrojnë në faqen aktuale. 

Për më tepër, formulari i hyrjes pop-up shfaq përmbajtje të ndryshme "paralajmëruese" sa herë që përdoruesi përpiqet të dalë.

Çfarë duhet të filloni

Ndërsa mund ta shtoni këtë formular identifikimi që shfaqet dhe butonat e personalizuar të hyrjes/daljes në çdo titull të personalizuar, ne do të përdorim një titull të parapërgatitur për të shpejtuar procesin dhe për të nisur shpejt dizajnin.

Importoni shabllonin e kokës "Paketa e paraqitjes së Crowdfunding" në ndërtuesin Divi

Për të filluar, shkarkoni Divi Crowdfunding Layout Pack Header and Footer falas . Për ta bërë këtë, shkoni te postimi në blog .

Më pas shkruani emailin tuaj për të shkarkuar skedarin zip.

Pas kësaj, hiqni skedarin në mënyrë që të jetë gati për import.

Për të importuar skedarin në redaktuesin e temës, ndiqni këto hapa:

1. Shkoni te Divi > Ndërtuesi i Temave.
2. Klikoni në ikonën e transportueshmërisë.
3. Në dritaren kërcyese të Transportueshmërisë, zgjidhni skedën e importit.
4. Zgjidhni skedarin e zbërthyer të shkarkuar më parë për ta importuar.
5. Klikoni mbi Importo Ndërtuesin e Temave Divi Templates.
6. Klikoni ikonën e redaktimit për të modifikuar kokën e importuar.

Krijimi i formës së hyrjes së hyrjes në Divi

Pjesa 1: Krijimi i butonave të hyrjes dhe daljes

Pasi të jeni në Redaktorin e Paraqitjes së Kreut Global, hapni pamje e shtresës në mënyrë që të mund të shihni lehtësisht të gjithë elementët.

Në rreshtin e sipërm të seksionit të kokës, fshini modulin Ndiqni mediat sociale pranë butonit Hyrja në kolonën 3.

Lexo gjithashtu: Divi: Krahasimi i llojeve të ndryshme të gradientëve

Krijimi i butonit të hyrjes

Për të krijuar butonin tonë të hyrjes, hapni cilësimet e modulit Button në kolonën 3 të rreshtit të sipërm.

Përditësoni artikujt e mëposhtëm nën skedën e dizajnit:

• Ikona e butonit: ikona e kyçjes (shih pamjen e ekranit)
• Vendosja e ikonës së butonit: djathtas
• Shfaq vetëm ikonën në lëvizje për butonin: JO
• Mbushja: 0,5em (lart dhe poshtë), 2em (majtas), 0,7em (djathtas)

Nën skedinë Avancuar, caktoni butonin dy klasa të personalizuara CSS si më poshtë:

• Klasa CSS: et-toggle-popup et-popup-login-button

Krijimi i butonit të daljes

Për të krijuar butonin tonë të daljes, dubliko butonin ekzistues të hyrjes në kolonën 3.

Për të ndihmuar në dallimin e dy butonave, mund të përditësoni përkatësisht etiketën e secilit. Më pas, hapni cilësimet e modulit Duplicate Button në kolonën 3.

Ndrysho tekstin e butonit për të lexuar "Dalje".

Përditësoni artikujt e mëposhtëm nën skedën e dizajnit:

• Ikona e butonit: ikona e zhbllokimit (shih pamjen e ekranit)

Nën skedinë Avancuar, përditësoni butonin e klasave CSS si më poshtë:

• Klasa CSS: et-toggle-popup et-popup-logout-button

Klasa e parë do të mbetet e njëjtë, por klasa e dytë do të jetë e ndryshme.

Pjesa 2: Krijimi i seksionit kërcyes

Pasi të jenë bërë butonat, ne jemi gati të krijojmë seksionin kërcyes që do të shërbejë si popup ynë që përmban format lidhje.

Nën seksionin e kokës, shtoni një seksion të ri të rregullt.

Pastaj futni një rresht me një kolonë brenda seksionit.

Cilësimet e seksionit

Para se të përditësoni rreshtin, hapni cilësimet e seksionit.

Nën skedinë Përmbajtja, jepini seksionit një ngjyrë të bardhë sfondi:

• Sfondi: #ffffff

Nën skedinë Projektimi, përditësoni sa vijon:

• Gjerësia: 100%
• Gjerësia maksimale: 800 px (Desktop), 80% (Tablet), 100% (Telefon)
• Rreshtimi i seksionit: Qendër
• Lartësia: automatike (Desktop dhe tablet), 100% (Telefon)
• Lartësia maksimale: 100%
• Mbushja: 0 px (lart dhe poshtë)

• Këndet e rrumbullakosura: 10 px
• Box Shadow: shikoni pamjen e ekranit
• Pozicioni vertikal i hijes së kutisë: 0 px
• Forca e turbullimit: 100 pixel
• Forca e përhapjes: 50 px

Nën skedinë Avancuar, përditësoni sa vijon:

Shto një klasë të personalizuar CSS.

• Klasa CSS: et-popup-login

Shtoni një fragment të personalizuar CSS në elementin kryesor:

overscroll-behavior: contain;

Përditësoni opsionet e dukshmërisë dhe pozicionit.

• Vërshimi horizontal: I fshehur
• Vërshimi vertikal: automatik
• Pozicioni: Fiks
• Vendndodhja: Qendra Qendra
• Z Indeksi: 999999

Cilësimet e linjës

Me cilësimet e seksionit në vend, hapni cilësimet e linjës dhe përditësoni cilësimet e mëposhtme të dizajnit:

• Përdorni gjerësinë e ulluqit të personalizuar: PO
• Gjerësia e kanalit: 1
• Gjerësia: 100%
• Gjerësia maksimale: 100%
• Mbushja: 0 px (lart), 5vh (poshtë)

Pjesa 3: Krijimi i ikonës së dritares së mbylljes

Për të krijuar ikonën e mbylljes së dritares që do të mbyllë/fshehë dritaren kërcyese me klikim, ne do të përdorim një modul Blurb.

Shtoni një modul të ri Blurb në rresht.

Hapni cilësimin e modulit dhe fshini titullin dhe tekstin e trupit.

Pastaj shtoni ikonën si më poshtë:

• Përdorni ikonën: PO
• Ikona: ikona "x" (shih pamjen e ekranit)

Nën skedinë Projektimi, përditësoni sa vijon:

• Ngjyra e ikonës: #004e43
• Shtrirja e imazhit/ikonës: në qendër
• Përdorni madhësinë e shkronjave të ikonës: PO
• Madhësia e shkronjave të ikonës: 50 px
• Gjerësia: 50 px
• Moduli i shtrirjes: djathtas
• Lartësia: 50 px

Nën skedinë Avancuar, shtoni një klasë CSS në modulin Blurb si më poshtë:

• Klasa CSS: et-toggle-popup

Pjesa 4: Krijimi i formularëve të hyrjes "Identifikohu" dhe "Dalja".

Në mënyrë që të kemi përmbajtje dhe dizajn të ndryshëm për formularin e hyrjes në hyrje dhe dalje, ne do të krijojmë dy module të ndryshme të formularit të hyrjes. 

E para do të jetë forma e hyrjes e cila do të shfaqet sa herë që përdoruesi "dalë". E dyta do të jetë forma e identifikimit e cila do të shfaqet sa herë që përdoruesi është "log in".

Krijimi i formularit "I dalur".

Për të krijuar formularin e identifikimit "Logged Out", shtoni një modul të ri identifikimi poshtë ikonës së modulit Blurb brenda rreshtit.

Hapni cilësimet e modulit dhe ndryshoni cilësimet e mëposhtme:

Skeda e përmbajtjes

• Ridrejto në faqen aktuale: PO
• Përdorni ngjyrën e sfondit: JO

Skeda e dizajnit

• Ngjyra e sfondit të fushave: rgba(0,78,67,0.05)
• Ngjyra e sfondit të fokusimit në terren: rgba (0,78,67,0,15)
• Rreshtimi i tekstit: në qendër
• Ngjyra e tekstit: E errët

• Fonti i titullit: Poppins
• Pesha e shkronjave të titullit: gjysmë e trashë
• Ngjyra e tekstit: #000000
• Lartësia e linjës së titullit: 1,3 em
• Font Body: Work Sans

Për të përditësuar stilet e butonave, kopjoni stilet e butonave nga butoni i hyrjes që krijuam në kolonën e tretë në rreshtin e seksionit Header.

Më pas ngjitni stilet e butonave në grupin e opsioneve të butonave në cilësimet e lidhjes nën skedën Dizajn.

Më pas, përditësoni stilet e butonave për formën e hyrjes si më poshtë:

• Buton
  • Ngjyra e tekstit: #ffffff
  • Sfondi: #004e43
  • Sfondi (Hover): #00683c
  • Gjerësia e kufirit: 0 piksele
  • Mbushja: 15 px (lart dhe poshtë)

Më pas, përditësoni opsionet e madhësisë si më poshtë:

• Gjerësia: 100%
• Gjerësia maksimale: 80% (Desktop), 90% (Tablet), 95% (Telefon)
• Moduli i shtrirjes: Qendra

Skeda e avancuar

Nën skedinë Avancuar, përditësoni klasën CSS dhe CSS të personalizuar si më poshtë:

• Klasa CSS: et-logged-out-form

CSS e personalizuar për përshkrimin e lidhjes:

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

CSS e personalizuar për formularin e hyrjes:

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

Kjo do të sigurojë që moduli i hyrjes të shtrihet në të gjithë gjerësinë e rreshtit/kolonës, edhe në desktop.

Krijimi i formularit "Identifikohu".

Tani që versioni "Logged Out" i formularit është i plotë, ne duhet të krijojmë versionin "Logged In" i cili do të ketë përmbajtje dhe stil të ndryshëm për të maksimizuar përvojën e përdoruesit.

Për të krijuar formularin e hyrjes "Logged Out", dublikojeni formularin ekzistues të hyrjes.

Më pas, përditësoni etiketën për secilën prej tyre format lidhje përkatësisht.

Hapni cilësimet e kopjuara (formularin "Identifikohu") dhe shtoni titullin e faqes si përmbajtje dinamike në titullin e modulit të formularit të hyrjes.

Pastaj hapni cilësimet e përmbajtjes dinamike të titullit të faqes dhe përditësoni përmbajtjen para dhe pas si më poshtë:

• Më parë: "Po përpiqeni të dilni nga Temat Elegante"
• Pas: “. " 

Kjo do të krijojë një njoftim të këndshëm dinamik për përdoruesit që përpiqen të dalin nga faqja.

Pastaj shtoni titullin e mëposhtëm H3 në trup:

<h3>Are you sure?</h3>

Nëse e keni parë ndonjëherë përmbajtjen e modulit Login kur jeni identifikuar, e dini se ekziston një mesazh i personalizuar që përfshin një lidhje të personalizuar "dalje". Për ta bërë këtë lidhje të duket si një buton, duhet të personalizojmë cilësimet e shkronjave/tekstit të lidhjes së trupit si më poshtë:

• Zgjidhni skedën lidhje nën opsion BodyText.
• Fonti i lidhjes: Work Sans
• Pesha e shkronjave të lidhjes: Gjysmë e trashë
• Stili i shkronjave: TT
• Rreshtimi i tekstit të lidhjes: në qendër
• Ngjyra e tekstit të lidhjes: #ffffff

SHËNIM: Nuk do të mund t'i shikoni paraprakisht këto rezultate derisa të shikoni formularin në një faqe të drejtpërdrejtë.

Nën skedinë Avancuar, përditësoni klasën CSS dhe CSS të personalizuar si më poshtë:

• Klasa CSS: et-logged-in-form

CSS e personalizuar për formularin e hyrjes:

display:none;

Pjesa 5: Shtoni kodin personal

Për të shtuar CSS-në e personalizuar dhe JQuery të nevojshme për funksionalitetin e formularit të hyrjes që shfaqet, krijoni një modul të ri Kodi nën modulin e fundit të hyrjes.

CSS

Hapni cilësimet e modulit të Kodit dhe ngjisni CSS-në e mëposhtme në kutinë e kodit, duke u siguruar që ta mbështillni CSS në etiketat e stilit të nevojshëm.

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

Vini re se CSS përdor klasën "lidhur" e cila është e integruar në WordPress për të fshehur/shfaqur butonat përkatës të hyrjes/daljes dhe format Identifikuar/Daluar çdo herë që përdoruesi identifikohet ose del nga llogaria.

JQuery

Nën etiketën e stilit të fundit, ngjitni JQuery-n e mëposhtëm duke u siguruar që ta mbështillni kodin në etiketat e nevojshme të skriptit.

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

Ky fragment thjesht ndryshon seksionin kërcyes sa herë që përdoruesi klikon në një nga tre artikujt me klasën " dhe-toggle-popup (butonat e hyrjes dhe daljes plus ikonën e prezantimit "x").

Shiko gjithashtu: Divi: Si të përdorni cilësimet e maskës së sfondit dhe opsionet e transformimit të modelit

Ajo është bërë !

Mos harroni të ruani ndryshimet që keni bërë në shabllon në ndërtuesin e temave. Pasi të ruhen, mund t'i shikoni rezultatet në një faqe të drejtpërdrejtë.

Rezultati përfundimtar

Këtu janë rezultatet përfundimtare në kompjuter, tablet dhe telefon.

Vini re se si ndryshojnë butoni i hyrjes dhe butoni i daljes. Dhe, pasi përdoruesi të regjistrohet, përdoruesi qëndron në faqen aktuale. 

Për më tepër, formulari i hyrjes në dritare shfaq përmbajtje të ndryshme "paralajmëruese" sa herë që përdoruesi përpiqet të dalë.

Shkarkoni DIVI tani!!!

Përfundim.

Shpresojmë se krijimi i këtij formulari të hyrjes që shfaqet dhe butonat e personalizuar të hyrjes/daljes do t'ju japë një pasqyrë se si të përdorni në mënyrë krijuese formularin e hyrjes së Divi. 

Mos ngurroni të rregulloni dizajnin dhe përmbajtjen e çdo forme identifikimi (ose butona) për të krijuar një përvojë unike identifikimi në faqen tuaj të internetit.

Shpresojmë gjithashtu që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.

Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...