Nevoja për të krijuar kokën globale me formë lidhje në DIVI?
Krijimi i një formë identifikimi në kokën tuaj mund të jetë një nxitje e madhe përvoja e përdoruesit.
Ato janë ideale për faqet e internetit të abonimit dhe dyqanet online pasi lejojnë përdoruesit të identifikohen në çdo kohë në çdo faqe të Faqja e internetit.
Në këtë tutorial, ne do t'ju tregojmë se si të dizajnoni një formë hyrje në internet për përdoruesit në një kokë të personalizuar. Le të fillojmë!
studim
Këtu është një pamje paraprake e shpejtë e kokës së personalizuar me formën e hyrjes që do të krijojmë në këtë tutorial.
Këtu është mesazhi "logout" dhe lidhja që do të shfaqet kur përdoruesit të jenë të kyçur.
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 Kreun Global", më pas kliko "Build Global Header".
Divi global header design me një formë horizontale të hyrjes
Personalizojeni seksionin
Nga redaktori Global Header Layout, mund të krijoni kokën e personalizuar të tuajën Faqja e internetit Duke u nisur nga asgjëja. Për të filluar, hapni cilësimet në seksionin normal dhe përditësoni sa vijon:
- Ngjyra e gradientit të sfondit të majtë:
- Ngjyra e gradientit të sfondit të djathtë:
- Drejtimi i gradientit: 48 gradë
- Marzhi i brendshëm: 10 px lart, 10 px poshtë, 20 px majtas, 20 px djathtas
Për ta bërë kokën tonë më të përgjegjshme, ne do të shtojmë CSS-në e mëposhtme të personalizuar në elementin e seksionit kryesor.
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ë.
Shto rresht
Shtoni një rresht në një kolonë në seksion.
Shtoni një modul imazhi me një imazh logo
Në rreshtin me një kolonë, shtoni një modul Image. Këtu do të shtojmë logon e kokës.
Azhurnoni Marzhin e Modulit të Imazhit dhe Imazhit
Përditësoni cilësimet e imazhit si më poshtë:
- Imazhi: [shto logon (rreth 64 x 64 px)]
- Margjina: 20 px djathtas
Përditësoni parametrat e rreshtit
Përpara se të shkoni më tej, hapni cilësimet e linjës dhe përditësoni sa vijon:
- Përdorni gjerësinë e personalizuar të ulluqit: PO
- Hapësira e kolonave: 1
- Gjerësia maksimale: 25%
- Shtrirja: majtas
- Marzhi i brendshëm: 0px sipër, 0px poshtë
U shtua forma horizontale e hyrjes në rreshtin e dytë
Shto rresht
Tani që rreshti i parë është gati, do të vini re në redaktues se rreshti i parë do të zërë 25% të seksionit të majtë. Kjo në thelb do të jetë linja e caktuar për logon tonë të kokës. Duhet të krijojmë një rresht seksioni për formën e hyrjes dhe menunë në anën e djathtë.
Shtoni një rresht të dytë me strukturë në një kolonë në seksion.
Shtoni një formë hyrjeje
Brenda rreshtit me një kolonë, shtoni një modul 'Lidhu'.
Hiq përmbajtjen e paracaktuar
Nën cilësimet e modulit Login, hiqni titullin e rremë dhe përmbajtjen e trupit.
Shtoni klasën e personalizuar për formën e hyrjes dhe CSS
Përpara se të shkojmë shumë larg në hartimin e formularit të hyrjes, së pari le të shtojmë klasën CSS dhe CSS të personalizuar në modulin Login. Kjo do të vendosë strukturën bazë në internet të formularit përpara se të vendosni prekjet e fundit në dizajnin e formularit me opsionet e integruara të Divi.
Shikoni gjithashtu udhëzuesin tonë Si të krijoni një menu anësore rrëshqitëse dhe të përgjegjshme në DIVI
Nën skedën Advanced, shtoni klasën e mëposhtme CSS:
- Klasa CSS: header-login-form
Shtoni CSS-në e mëposhtme të personalizuar në kutinë e përshkrimit të lidhjes CSS:
margin-bottom: 0px !important
Pastaj shtoni CSS-në e mëposhtme të personalizuar në zonën CSS të formularit të hyrjes:
width: 100%;Shtoni CSS-në e mëposhtme të personalizuar në zonën CSS të Fushat e hyrjes:
padding: 5px 4% !important
Shtoni CSS të personalizuar në cilësimet e paraqitjes së kokës
Meqenëse kemi shtuar klasën tonë të personalizuar CSS në modulin e formularit të hyrjes, ne mund të shtojmë CSS-në tonë të personalizuar që do të synojë vetëm atë formë të veçantë të hyrjes.
Lexoni gjithashtu mësimin tonë në Si të krijoni faqen e blogut me modulin Blog me DIVI
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ë bëjë që fushat e hyrjes dhe butoni të shfaqin inline (horizontalisht), mesazhin "Harruat fjalëkalimin tuaj?" do të fshihet dhe do të shtohet një diferencë e vogël midis fushave.
Cilësimet e linjës
Përpara se të vendosim prekjet e fundit në formularin e hyrjes, le të përditësojmë parametrat e linjës si më poshtë:
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Hapësira e kolonave: 1
- Rreshtimi: djathtas
- Marzhi i brendshëm: 0px sipër, 0px poshtë
Paraqitni cilësimet për formularin e hyrjes
Tani jemi gati të përditësojmë cilësimet e formularit të hyrjes. Hapni cilësimet e modulit Connect dhe përditësoni sa vijon:
- Përdorni ngjyrën e sfondit: JO
Fusha dhe teksti i lidhjes
- Fushat e ngjyrave të sfondit: rgba (255,255,255,0.2)
- Fushat e ngjyrave të tekstit: #ffffff
- Fields Font: Lato
- Fushat e madhësisë së tekstit: 14 px
- Rreshtimi i tekstit: djathtas
Dizajni i butonit
- Përdorni stile të personalizuara për Butonin: JO
- Madhësia e tekstit të butonit: 15 px
- Butoni i sfondit: #ff3190
- Butoni i gjerësisë së kufirit: 0 piksel
- Fonti i butonit: Lato
- Butoni i margjinës: 2px sipër, 2px poshtë
- Butoni i mbushjes: 15 px në fund
- Marzhi i brendshëm: 0 px lart, 0 px poshtë, 0 px majtas, 0 px djathtas
Shtimi i menusë në rreshtin e dytë
Moduli i menysë
Me formularin tonë të hyrjes në vend, ne mund të shtojmë menunë direkt më poshtë.
Shtoni një modul Menu nën modulin Login.
Cilësimet e modulit të menusë
Përditësoni cilësimet e menusë si më poshtë:
- Sfondi: rgba (0,0,0,0)
- Menuja e shkronjave: Lato
- Menyja e dritës së butë: Bold
- Ngjyra e tekstit të menysë: #ffffff
- Madhësia e tekstit të menysë: 16 px
- Rreshtimi i tekstit: djathtas
- Ngjyra e sfondit të menysë rënëse: #ffffff
- Ngjyra e rreshtit me zbritje: rgba (0,0,0,0)
- Ngjyra e tekstit të menysë rënëse: #000000
- Ngjyra e sfondit të menysë celulare: #ffffff
- Ngjyra e tekstit të menysë celulare: #000000
- Ngjyra e ikonës së karrocës: #ffffff
- Ngjyra e ikonës së kërkimit: #ffffff
- Ngjyra e ikonës së menysë së Hamburgerit: #ffffff
Ruajtja e titullit të formularit të hyrjes
Sigurohuni që ta ruani paraqitjen përpara se të dilni nga redaktori i kokës.
Më pas, ruani edhe cilësimet e Ndërtuesit të Temave.
Rezultatet përfundimtare
Ajo është bërë !
Tani le të shohim rezultatin përfundimtar. Për të parë rezultatin përfundimtar, gjithçka që duhet të bëni është të vizitoni një faqe në faqen tuaj të internetit.
Dhe kjo është ajo që përdoruesi do të shohë kur të identifikohet.
Shkarkoni DIVI Tani!!!
Përfundim
Ky titull global i personalizuar me një formë identifikimi do të jetë patjetër i dobishëm për çdo faqe interneti të abonimit 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 identifikimi që do të përshtatet në mënyrë të përkryer në kokën e çdo faqe interneti.
Shpresoj se kjo do të jetë e dobishme për projektin tuaj të ardhshëm. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar 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.
...
