Krijimi i një formë Hyrja në linjë për kokën tuaj mund të jetë një nxitje e jashtëzakonshme për përvojën e përdoruesit. Ato janë perfekte për faqet e anëtarësimit dhe dyqanet online, sepse i lejojnë përdoruesit të identifikohen në çdo kohë dhe në çdo faqe të faqes.
Në këtë tutorial, ne do t'ju tregojmë se si të dizajnoni një formë në internet duke përdorur një kokë të personalizuar në Divi Theme Builder. Për ta bërë këtë, ne do të krijojmë një kokë të thjeshtë globale të përgjegjshme dhe më pas do të dizajnojmë një formë hyrje kompakte në internet në krye të djathtë të kokës duke përdorur modulin e hyrjes së Divi. Ndërtimi kërkon pak kod të personalizuar CSS, por pasi të jetë vendosur gjithçka, do të jetë e lehtë të personalizohet formulari i hyrjes në internet për të përshtatur lehtësisht çdo dizajn të kokës duke përdorur opsionet e dizajnit, shërbimet e integruara të Divi.
Pasqyrë e rezultateve
Këtu është një përmbledhje e shpejtë e titullit të personalizuar me formularin e hyrjes në internet që do të krijojmë në këtë manual.
Dhe këtu është forma e hyrjes në internet në ekranin e tabletës dhe telefonit.
Këtu është mesazhi dhe lidhja e daljes që do të shfaqet kur përdoruesit të jenë të regjistruar.
Çfarë duhet të filloni
Nëse nuk e keni bërë tashmë, instaloni dhe aktivizoni temën Divi . Kjo është pak a shumë gjithçka që ju nevojitet për të filluar. Ne do të krijojmë një paraqitje të re të modelit të kokës nga e para me Ndërtuesin e Temave Divi.
Shtimi i një titulli të ri global
Për t'i nisur gjërat, ne duhet të krijojmë një titull të ri global për tonën Site Web. Për ta bërë këtë, shkoni te pulti i WordPress dhe lundroni te Divi > Theme Builder.
Në shabllonin e faqes në internet sipas parazgjedhjes, klikoni "Shto kokën globale" dhe më pas "Krijo kokën globale".
Pastaj zgjidhni opsionin Ndërto nga e para.
Hartoni kokën globale Divi me një formë hyrjeje në internet
Përshtatja e seksionit
Nga Redaktori Global i Layout Header, ju do të jeni në gjendje të krijoni plotësisht header-in e personalizuar të faqes tuaj. Për të filluar, hapni cilësimet e rregullta të seksionit dhe azhurnoni sa vijon:
- Gradienti i sfondit me ngjyrën e majtë:
- Gradienti i sfondit të djathtë:
- Drejtimi i gradientit: 48 gradë
- Padding: 10 pixel në krye, 10 pixel në fund, 20 pixel në të majtë, 20 pixel në të djathtë
Në mënyrë që të bëjmë titullin tonë të personalizuar më të përgjegjshëm, ne do të shtojmë CSS-në e mëposhtme të personalizuar në elementin kryesor të seksionit.
display:flex;justify-content:center;align-items:center;
Shtimi i logos së kokës në rreshtin e parë
Tani që seksioni është gati, ne mund të shtojmë rreshtin e parë.
Shtoni një rresht
Shtoni një rresht në një kolonë në seksion.
Shtoni një modul imazhi me një imazh logo
Në rreshtin me kolonë të vetme, shtoni një modul të figurës. Kjo do të jetë vendi ku ne do të shtojmë logon për titullin.
Azhurnoni Marzhin e Modulit të Imazhit dhe Imazhit
Përditësoni cilësimet e imazhit si më poshtë:
- Imazhi: [shtoni logon (afërsisht 64 pixel me 64 pixel)]
- Margjina: 20px drejtë
Përditësoni parametrat e linjës
Para se të vazhdoni më tej, hapni cilësimet e rreshtit dhe azhurnoni sa vijon:
- Përdorni një gjerësi hekuri me porosi: PO
- Gjerësia e zorrës së trashë: 1
- Gjerësia: 25%
- Rreshtimi i rreshtit: majtas
- Mbushje: 0px e lartë, e ulët 0px
Shtimi i formës së hyrjes në internet në rreshtin e dytë
Shtoni një rresht
Tani që rreshti i parë është gati, do të vini re në redaktues që rreshti i parë do të zërë 25% të pjesës së majtë. Kjo në thelb do të jetë linja e caktuar për logon tonë të kokës. Ne kemi nevojë për të krijuar një linjë seksioni për formën dhe menunë e hyrjes në internet në anën e djathtë.
Shtoni një rresht të dytë me strukturë në një kolonë në seksion.
Shtoni një formë hyrjeje
Në rreshtin e një kolone, shtoni një modul hyrjeje.
Hiq përmbajtjen e paracaktuar
Nën cilësimet e hyrjes, fshini titullin e rremë dhe përmbajtjen e trupit.
Shtoni një formë hyrje dhe një klasë të personalizuar CSS
Para se të shkojmë shumë larg në hartimin e formës së hyrjes në internet, le të shtojmë së pari klasat e personalizuara CSS dhe CSS në modulin e hyrjes. Kjo do të na lejojë të vendosim strukturën bazë online të formularit përpara se të vendosim prekjen përfundimtare të formularit me opsionet e integruara të Divi.
Në skedën Advanced, shtoni klasën vijuese CSS:
- Klasa CSS: formë-hyrje-hyrje
Shtoni CSS-në e mëposhtme me porosi në zonën e përshkrimit të lidhjes:
margin-bottom: 0px !important
Pastaj shtoni CSS-in e mëposhtëm të personalizuar në zonën CSS të formës së hyrjes:
width: 100%;
Shtoni CSS-in e mëposhtëm të personalizuar në kutinë CSS Fields:
padding: 5px 4% !important
Shtoni CSS të personalizuar në cilësimet e paraqitjes së kokës
Meqenëse kemi shtuar klasën tonë CSS të shtuar në modulin e formës së hyrjes, mund të shtojmë CSS-në tonë të personalizuar e cila vetëm do të synojë këtë formë të veçantë të hyrjes.
Hapni cilësimin e paraqitjes së kokës dhe shtoni CSS-në e mëposhtme të personalizuar:
.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;}
Kjo CSS do të shkaktojë fushat e hyrjes dhe butonin për të shfaqur brenda (horizontalisht), fshehni lidhjen "Keni harruar fjalëkalimin tuaj?" »Dhe shtoni një diferencë të vogël midis fushave.
Cilësimet e linjës
Para se të vendosni prekjet e mbarimit në formën e hyrjes në internet, le të azhurnojmë parametrat e linjës si më poshtë:
- Përdorni një gjerësi hekuri me porosi: PO
- Gjerësia e zorrës së trashë: 1
- Rreshtimi i vijës: drejt
- Mbushje: 0px e lartë, e ulët 0px
Paraqitni cilësimet për formularin e hyrjes
Tani jemi gati të azhurnojmë cilësimet e formularit të hyrjes. Hapni cilësimet e modulit të formës së hyrjes dhe azhurnoni sa vijon:
- Përdorni ngjyrën e sfondit: JO
Fusha dhe teksti i lidhjes
- Sfondi fushor: Ngjyra: rgba (255,255,255,0.2)
- Ngjyra e tekstit në terren: #ffffff
- Policia në terren: Lato
- Madhësia e tekstit në terren: 14px
- Rreshtimi i tekstit: e drejtë
- Shkronja e lidhjes: Lato
- Stili i shkronjave të lidhjes: Theksuar
- Ngjyra e tekstit të lidhjes: # ff3190
Dizajni i butonit
- Madhësia e tekstit të butonit: 15px
- Ngjyra e sfondit të butonit: # ff3190
- Gjerësia e kufirit të butonave: 0px
- Tipi i butonit: Lato
- Mbushja e butonave: 2px në krye, 2px në fund
- Margjina: e ulët 15px
- Mbushja: 0px në krye, 0px në fund, 0px në të majtë, 0px në të djathtë
Shtimi i menusë në rreshtin e dytë
Moduli i menusë
Me formën tonë të hyrjes në internet, mund të shtojmë menunë direkt më poshtë.
Shtoni një modul menu nën modulin e formës së hyrjes.
Cilësimet e modulit të menusë
Përditësoni cilësimet e menusë si më poshtë:
- Ngjyra e sfondit: rgba (0,0,0,0)
- Shkronja e menusë: Lato
- Pesha e fontit të menusë: e guximshme
- Ngjyra e tekstit të menusë: #ffffff
- Madhësia e tekstit të menusë: 16px
- Rreshtimi i tekstit: e drejtë
- Ngjyra e sfondit të menusë zbritëse: #ffffff
- Ngjyra e rreshtit në menunë rënëse: rgba (0,0,0,0)
- Ngjyra e tekstit të menusë që lëshohet: # 000000
- Ngjyra e sfondit të menusë mobile: #ffffff
- Ngjyra e tekstit të menusë celulare: # 000000
- Ngjyra e ikonës së karrocës: #ffffff
- Ngjyra e ikonës së kërkimit: #ffffff
- Ngjyra e ikonës së menusë Hamburger: #ffffff
Ruajtja e titullit të formularit të hyrjes
Sigurohuni që të ruani paraqitjen përpara se të dilni nga Redaktori i Layout i Header.
Pastaj ruani edhe cilësimet e gjeneratorit të temës.
Rezultatet përfundimtare
Kjo eshte!
Tani le të shohim rezultatin përfundimtar. Për të parë rezultatin përfundimtar, thjesht vizitoni një faqe tuajën Site Web.
Këtu është titulli në ekranin e desktopit.
Këtu është kryefjala e formularit të hyrjes në internet në ekranin e tabletës.
Dhe këtu është forma e hyrjes në internet në ekranin e telefonit. Gjithashtu shënoni menunë e lëvizshme.
Dhe kjo është ajo që përdoruesi do të shohë kur të identifikohet.
Mendimet e fundit
Ky titull global i personalizuar me një formë hyrjeje në internet do të jetë patjetër i dobishëm për çdo faqe anëtarësimi ose dyqan online. Me vetëm pak CSS të personalizuar, ne ishim në gjendje të konvertonim modulin e hyrjes së Divi në një formë elegante hyrjeje në internet që do të dukej mirë në kokën e çdo Site Web. Shpresoj që kjo të jetë e dobishme për projektin tuaj të ardhshëm.
Unë pres që të dëgjoj nga ju në komente.
Për shëndetin tuaj!
