Vil du oprette en lodret navigationsmenu, så den præsenterer flere elementer i forgrunden i DIVI?
Lodrette navigationsmenuer kan være nyttige for nogle websteder, der har brug for flere menupunkter i forgrunden. Vandrette menuer kan være vanskelige at passe til alle de nødvendige menulinks, især på mindre browserbredder.
I denne tutorial viser vi dig, hvordan du opretter en lodret navigationsmenu ved hjælp af Divi Theme Builder.
Dette vil give dig mere plads til at fremvise dine WordPress-menupunkter.
Lad os starte!
undersøgelse
Her er et hurtigt kig på det design, vi vil skabe i denne tutorial.
Lad os gå til selvstudiet.
Oprettelse af en ny global header
Til denne vejledning vil vi oprette den lodrette navigationsmenu i en global header ved hjælp af Divis temabygger
For at komme i gang skal du gå til WordPress-dashboardet og navigere til Divi > Theme Builder.
Klik derefter på "Tilføj global overskrift"-området i hjemmeside skabelon standard og vælg "Byg global header" fra rullelisten.
Læs også: Sådan opretter du en global header med Theme Builder i DIVI
Lodret sektion layout design
I den globale header-layouteditor skal du åbne de almindelige sektionsindstillinger, der allerede er der, og opdatere følgende.
- Maksimal bredde: 300px
- Højde: 100vh
- Indre margin: 4vh Top, 0px Bund
Fortsæt tilpasningen ved at tilføje en skyggeboks som følger:
- Skyggeboks: se skærmbillede
- Box skygge lodret position: 0px
- Styrke af æskeskyggeslør: 20px
- Box Shadow Spread Styrke: -10px
- Skyggefarve: rgba(0,0,0,0.3)
For at sikre, at den lodrette navigationsmenu forbliver synlig til venstre, mens brugeren ruller, skal du opdatere fanen Avanceret til fast position og opdatere z-indekset som følger:
- Fast station
- Z-indeks: 9999
For at sikre, at vi kan se undermenunavigationen, der vil strække sig uden for sektionen, skal du tilføje følgende tilpassede CSS til hovedelementet:
overflow: visible !important;
Din sektion vil nu være i et lodret layout i venstre side af skabelonen.
Design den lodrette menu
Med sektionen på plads er vi klar til at designe den lodrette menu. For at gøre dette vil vi bruge et menumodul med tilpasset CSS til at tilpasse navigationen til at blive vist lodret.
Vi vil også bruge vh-længde-enheden, så menuen tilpasser sig godt til forskellige browserhøjder.
Tilføjelse af linjen
For at komme i gang skal du tilføje en række til en kolonne i sektionen.
Opdater derefter linjeparametrene som følger:
Dimensionering og afstand
- Brug tilpasset tagrendebredde: JA
- Kolonneafstand: 1
- Maksimal bredde: 100%
- Maksimal bredde: 80%
- Intern margin: 3vh Top, 3vh Bund
grænse
- Kantbredde: 1px
- Kantfarve: #eeeeee
Tilføjet menumodul
Tilføj et nyt menumodul inde i rækken med én kolonne.
Vælg en menu, der skal vises på fanen Indhold.
Tilføj derefter dit logo websted som indhold dynamisk under Logo-knappen.
Opdater følgende under fanen Stil:
- Stil: Centreret
- Skrifttypemenu: Nunito Sans
- Menutekstfarve: #535b7c
- Menutekststørrelse: 18px (desktop), 14px (tablet og telefon)
- Menu rækkehøjde: 2 em
- Farve på rullemenuen: #535b7c
- Active Link Color drop-down menu: #535b7c
- Farve på kurvens ikon: #535b7c
- Søg ikon farve: #535b7c
- Hamburger Menu ikon farve: #535b7c
- Intern margin: 2vh Top, 2vh Bund
Tilføjet brugerdefineret CSS til menuen
Menuen skal bruge tilpasset CSS for at opnå den vertikale navigation, vi ønsker at opnå. For at komme i gang skal du gå til fanen avanceret og tilføje følgende brugerdefinerede CSS til menulinket og menulogoet.
CSS-menulink (skrivebord):
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;
CSS-menulink (tablet):
width: auto;
border:none;
Menu CSS-logo:
margin-bottom: 20px;
Tilføj derefter en brugerdefineret CSS-klasse til menumodulet som følger:
CSS-klasse: et-vert-menu
Denne klasse vil blive brugt til at målrette mod denne særlige menu i vores eksterne brugerdefinerede CSS, som vi tilføjer ved hjælp af et kodemodul.
Tilføjelse af tilpasset CSS med kodemodulet
Tilføj et kodemodul under menumodulet.
Indsæt derefter følgende kode i kodeboksen (sørg for at sætte den mellem stiltagsene):
/* 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;
}
}
Design sociale medier, følg knap og ikoner
Nu hvor menuen er færdig, kan vi tilføje en knap, og nogle sociale medier følger links for at fuldføre den lodrette overskrift.
Tilføjelse af linjen
Tilføj en ny række én kolonne under den aktuelle række.
Tilføj en knap
Tilføj derefter et knapmodul til rækken.
Opdater knapindstillingerne som følger:
- Knapjustering: center
- Brug brugerdefinerede stilarter til knap: JA
- Knaptekststørrelse: 18px (desktop), 14px (tablet og telefon)
- Knaptekstfarve: #ffffff
- Knap baggrundsfarve: #535b7c
- Knapkantbredde: 0 pixels
Gå derefter til fanen avanceret og indsæt følgende tilpassede CSS i hovedelementet:
CSS hovedelement (desktop)
display:block;
width: 100%;
CSS hovedelement (tablet)
display:inherit;
Tilføjede sociale medier følger ikoner
Tilføj et Følg os på sociale medier-modul under knappen.
Tilføj de sociale netværk, du ønsker, under fanen indhold.
På fanen Stil skal du opdatere følgende:
- Moduljustering: Center
- Ikonfarve: #535b7c
Åbn derefter indstillingerne for hvert af de sociale netværk og fjern baggrundsfarven.
Tilføj derefter en lille topmargen som følger:
- Margin: 3vh Peak
Opdater linjeparametre
Når de sociale medier følger ikoner er færdige, skal du åbne linjeindstillinger og justere følgende:
- Brug tilpasset tagrendebredde: JA
- Kolonneafstand: 1
- Indre margin: 3vh Top, 0px Bund
Gem layout og skabelon
Når du er færdig, skal du gemme layoutet og skabelonen.
Endelig resultat
Her er slutresultatet på en live-side.
Download DIVI nu!!!
Konklusion
Den lodrette navigationsmenu, der vises her, har fået en fast position. Men hvis du har brug for mere plads til yderligere menupunkter eller indhold, kan du ændre sektionens placering til absolut
Den vertikale sektionsopsætning åbner også døren til at skabe brugerdefinerede sidebjælker.
Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
