Dëshironi të krijoni një meny navigimi vertikal në mënyrë që të prezantojë më shumë artikuj në plan të parë në DIVI?
Menytë e navigimit vertikal mund të jenë të dobishme për disa faqe interneti që kanë nevojë për më shumë artikuj të menysë në plan të parë. Menytë horizontale mund të jenë të vështira për t'u shkallëzuar në të gjitha lidhjet e nevojshme të menysë, veçanërisht në gjerësi më të vogla të shfletuesit.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një menu vertikale navigimi duke përdorur Divi Theme Builder.
Kjo do t'ju japë më shumë hapësirë për të shfaqur artikujt e menusë tuaj të WordPress.
Le të fillojmë!
studim
Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.
Le të shkojmë në tutorial.
Krijimi i një titulli të ri global
Për këtë tutorial, ne do të krijojmë menunë e navigimit vertikal në një kokë globale duke përdorur ndërtuesin e temave të Divi
Për të filluar, shkoni te pulti i WordPress dhe lundroni te Divi > Theme Builder.
Pastaj klikoni në zonën "Shto kokën globale" të shabllonin e faqes në internet default dhe zgjidhni "Build Global Header" nga lista rënëse.
Lexo gjithashtu: Si të krijoni një titull global me ndërtuesin e temave në DIVI
Dizajni i paraqitjes së seksionit vertikal
Në redaktuesin e paraqitjes së kokës globale, hapni cilësimet e seksionit të rregullt tashmë atje dhe përditësoni sa vijon.
- Gjerësia maksimale: 300 px
- Lartësia: 100 Vh
- Marzhi i brendshëm: 4vh sipër, 0px poshtë
Vazhdoni personalizimin duke shtuar një kuti hije si më poshtë:
- Kutia e hijes: shikoni pamjen e ekranit
- Pozicioni vertikal i hijes së kutisë: 0 px
- Forca e turbullimit të hijes së kutisë: 20 px
- Forca e përhapjes së hijes së kutisë: -10 px
- Ngjyra e hijes: rgba (0,0,0,0.3)
Për të siguruar që menyja e navigimit vertikal të mbetet e dukshme në të majtë ndërsa përdoruesi lëviz, përditësoni skedën Advanced në pozicionin fiks dhe përditësoni indeksin z si më poshtë:
- Stacion fiks
- Z-indeksi: 9999
Për të siguruar që ne mund të shohim navigimin e nënmenusë që do të shtrihet jashtë seksionit, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:
overflow: visible !important;
Seksioni juaj tani do të jetë në një plan urbanistik vertikal në anën e majtë të shabllonit.
Dizajnoni menunë vertikale
Me seksionin në vend, ne jemi gati të dizajnojmë menunë vertikale. Për ta bërë këtë, ne do të përdorim një modul menuje me CSS të personalizuar për të personalizuar navigimin që të shfaqet vertikalisht.
Ne do të përdorim gjithashtu njësinë e gjatësisë vh në mënyrë që menyja të përshtatet mirë me lartësi të ndryshme të shfletuesit.
Shtimi i rreshtit
Për të filluar, shtoni një rresht në një kolonë në seksion.
Më pas, përditësoni parametrat e linjës si më poshtë:
Përmasat dhe hapësirat
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Hapësira e kolonave: 1
- Gjerësia maksimale: 100%
- Gjerësia maksimale: 80%
- Marzhi i brendshëm: 3vh sipër, 3vh poshtë
kufi
- Gjerësia e kufirit: 1 px
- Ngjyra e kufirit: #eeeeee
Moduli i menusë i shtuar
Brenda rreshtit me një kolonë, shtoni një modul të ri të Menysë.
Zgjidhni një menu për të shfaqur në skedën Përmbajtje.
Pastaj shtoni logon tuaj Faqja e internetit për aq sa përmbajtje dinamik nën butonin Logo.
Nën skedën "Style" përditësoni sa vijon:
- Stili: në qendër
- Menuja e shkronjave: Nunito Sans
- Ngjyra e tekstit të menysë: #535b7c
- Menyja e madhësisë së tekstit: 18 px (desktop), 14 px (tableti dhe telefoni)
- Lartësia e rreshtit të menysë: 2 em
- Ngjyra e rreshtit me zbritje: #535b7c
- Menyja rënëse e ngjyrave të lidhjes aktive: #535b7c
- Ngjyra e ikonës së karrocës: #535b7c
- Ngjyra e ikonës së kërkimit: #535b7c
- Ngjyra e ikonës së menusë së Hamburgerit: #535b7c
- Marzhi i brendshëm: 2vh sipër, 2vh poshtë
U shtua CSS e personalizuar për menunë
Menuja ka nevojë për CSS të personalizuar për të arritur navigimin vertikal që po kërkojmë të arrijmë. Për të filluar, shkoni te skedari i avancuar dhe shtoni CSS-në e mëposhtme të personalizuar në lidhjen e menysë dhe logon e menysë.
Lidhja e menysë CSS (desktop):
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;
Lidhja e menusë CSS (tableti):
width: auto;
border:none;
Logoja e menysë CSS:
margin-bottom: 20px;
Më pas, shtoni një klasë të personalizuar CSS në modulin e Menysë si më poshtë:
Klasa CSS: et-vert-menu
Kjo klasë do të përdoret për të synuar këtë meny të veçantë në CSS-në tonë të jashtme të personalizuar që do të shtojmë duke përdorur një modul Kodi.
Shtimi i CSS i personalizuar me modulin e kodit
Në modulin Meny, shtoni një modul Kodi.
Pastaj ngjisni kodin e mëposhtëm në zonën e kodit (sigurohuni që ta vendosni midis etiketave të stilit):
/* MenudeNavigation Style Vertical*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
flex-direction: column;
margin-left: 0px!important;
margin-right: 0px!important;
width: 100%;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
margin: 10px0!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
display:block!important;
padding: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul ul {
padding: 0px!important;
top: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
left:calc(100%- 1px) !important;
top:0px!important;
}
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
content: "5"!important; /*change arrow icon for submenu*/
right: 20px!important;
}
.et-vert-menu .nav li ul {
left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/
}
@media alland (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
width: 100%; /*width of the vertical navigation menu*/
}
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
width: calc(100%- 300px);
margin-left: 300px;
}
}
Dizajnoni butonin dhe ikonat e ndjekjes së mediave sociale
Tani që menyja ka përfunduar, ne mund të shtojmë një buton dhe disa media sociale ndjekin lidhjet për të përfunduar kokën vertikale.
Shtimi i rreshtit
Shtoni një rresht të ri një kolonë poshtë rreshtit aktual.
Shto një buton
Pastaj shtoni një modul Button në rresht.
Përditësoni cilësimet e butonit si më poshtë:
- Shtrirja e butonave: në qendër
- Përdorni stile të personalizuara për butonin: PO
- Madhësia e tekstit të butonit: 18 px (desktop), 14 px (tableti dhe telefoni)
- Ngjyra e tekstit të butonit: #ffffff
- Ngjyra e sfondit të butonit: #535b7c
- Gjerësia e kufirit të butonit: 0 piksel
Tjetra, shkoni te skedari i avancuar dhe ngjisni CSS-në e mëposhtme të personalizuar në elementin kryesor:
Elementi kryesor CSS (desktop)
display:block;
width: 100%;
Elementi kryesor CSS (tableti)
display:inherit;
Ikonat e ndjekjes së mediave sociale u shtuan
Nën butonin, shtoni një modul Na ndiqni në mediat sociale.
Shtoni rrjetet sociale që dëshironi nën skedën përmbajtje.
Në skedën Stil, përditësoni sa vijon:
- Rreshtimi i modulit: Qendër
- Ngjyra e ikonës: #535b7c
Pastaj hapni cilësimet për secilin prej rrjeteve sociale dhe hiqni ngjyrën e sfondit.
Pastaj shtoni një diferencë të vogël të sipërme si më poshtë:
- Marzhi: 3vh Maja
Përditësoni parametrat e linjës
Pasi të kenë përfunduar ikonat e ndjekjes së mediave sociale, hapni Cilësimet e linjës dhe rregulloni sa vijon:
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Hapësira e kolonave: 1
- Marzhi i brendshëm: 3vh sipër, 0px poshtë
Ruani paraqitjen dhe shabllonin
Pasi të keni përfunduar, ruani paraqitjen dhe shabllonin.
Rezultati përfundimtar
Këtu është rezultati përfundimtar në një faqe të drejtpërdrejtë.
Shkarkoni DIVI Tani!!!
Përfundim
Menysë vertikale të navigimit të paraqitur këtu i është dhënë një pozicion fiks. Megjithatë, nëse keni nevojë për më shumë hapësirë për artikuj ose përmbajtje shtesë të menysë, mund ta ndryshoni pozicionin e seksionit në absolut
Konfigurimi i seksionit vertikal gjithashtu hap derën për krijimin e shiritave anësor të personalizuar.
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.
...
