I denne vejledning viser vi dig, hvordan du opretter en rullemenu-knap ved hjælp af Divis menu i fuld bredde. For at gøre dette opretter vi først en menu i WordPress. Vi bruger derefter Divis menu i fuld bredde til at vise denne menu med brugerdefinerede stilarter ved hjælp af Divi-builder og lidt tilpasset CSS. Resultatet er en praktisk og stilfuld drop-down menuknap.
Lad os starte.
undersøgelse
Her er en oversigt over rullemenu-knappen, som vi integrerer i denne tutorial.
Hvad du behøver for at komme i gang
For at komme i gang, hvis du ikke allerede har gjort det, skal du installere og aktivere Divi-tema installeret (eller Divi Builder-pluginnet, hvis du ikke bruger Divi-tema). Vi vil bruge Divi-byggeren i begyndelsen til at designe rullemenuknappen.
Det er det !
Opret en menu i WordPress
Før vi begynder at oprette rullemenuen med Divi Builder, skal vi først oprette en WordPress-menu, som vi gerne vil bruge til menuen i fuld bredde. For at gøre dette skal du gå til WordPress-dashboardet og gå til Udseende> Menuer. Opret derefter en ny menu ved at klikke på Opret et nyt menulink, indtaste et menunavn og klikke på knappen "Opret menu".
Indtil videre kan du oprette brugerdefinerede links med "#" som pladsholder for URL'en sammen med linkteksten.
Strukturér menupunkterne, så topmenupunktet har linket "Lær mere" med tre undermenupunkter.
Efter dette skal du huske at gemme menuen.
Sådan oprettes en rullemenu med Menu-modulet i fuld bredde
Når menuen er oprettet, kan vi begynde at designe rullemenu-knappen med Divi. For at starte projektet skal du oprette en ny side i WordPress og bruge Divi Builder til at redigere siden i frontend (visual builder).
Derefter har du et tomt lærred til at begynde at designe i Divi.
Opret falskt indhold
Først skal du tilføje en kolonnerække til standardstandardsektionen.
Tilføj et tekstmodul
Føj derefter et tekstmodul til linjen med følgende indhold:
Divi Menu Dit indhold kommer her. Rediger eller fjern denne tekst indbygget eller i modulets indholdsindstillinger. Du kan også style alle aspekter af dette indhold i modulets designindstillinger og endda anvende brugerdefineret CSS til denne tekst i modulet Avancerede indstillinger.
Opdater derefter designparametrene som følger:
Polstring sektion
Opdater derefter sektionsindstillingen med følgende elementer:
- Polstring: 0px nedad
Linjeafstand og kant
Når sektionens udfyldning er opdateret, skal du åbne linjeindstillingerne og tildele den en udfyldning og en lille kant.
- Polstring: 10vw øverst, 10vw i bunden, 5vw til venstre, 5vw til højre
- Bredde på grænsen: 1px
Oprettelse af rullemenu-knappen
For at oprette rullemenu-knappen bruger vi et menu-modul i fuld bredde. Dette giver os mulighed for at tilføje den tidligere oprettede menu.
Tilføjelse af menuen i fuld bredde
For at oprette menumodulet i fuld bredde skal du tilføje et nyt afsnit i fuld bredde under det aktuelle standardsektion.
Føj derefter et menumodul i fuld bredde til linjen.
I pop op-vinduet til menuindstillinger i fuld bredde (under Indhold) skal du bruge rullemenuen til at vælge den menu, du vil have vist. Dette skal være den samme menu, som vi oprettede tidligere med navnet "drop down button menu".
Fjern derefter standard hvid baggrundsfarve for menuen.
Når du har tilføjet menuen med fuldbreddemenu-modulet, skal du gemme indstillingerne. Vi kommer lidt tilbage til dette modul for at afslutte designet. Men for nu vil vi tilføje en baggrund til sektionen i fuld bredde.
Opdater designet til afsnittet med fuld bredde
Åbn indstillingerne for sektionen i fuld bredde, og opdater følgende:
- Gradient i venstre baggrund: # 0047d6
- Højre baggrundsgradient Farve: # 45b2ff
- Maksimal bredde: 240px
- Afsnit Justering: centrum
Jeg indstiller den maksimale sektionsbredde til 240 px, da dette er bredden på standard rullemenu bredde i Divi. Det er også en god størrelse til en knap på desktop og mobil.
- Rundede hjørner: 5px
På fanen Avanceret skal du tilføje følgende CSS-klasse, overløb og Z-indeks.
- CSS-klasse: dropdown-knap
- Vandret overløb: synlig
- Lodret overløb: synlig
- Z indeks: 14
CSS-klassen er nødvendig, så vi senere kan målrette vores eksterne CSS til dette afsnit. Overløbet skal indstilles til synligt, så vi kan se rullemenuen. Og Z-indekset hjælper dig med at holde drop down over alt andet indhold på siden.
Design menuen Fulwidth
Vi er nu klar til at designe Fulwidth-menu-modulet. Åbn indstillingerne for fuldbreddemenu-modulet, og opdater følgende:
- Opret menulink i fuld bredde: JA
- Dropdown-tekstfarve: #ffffff
- Farve på den mobile menytekst: #ffffff
- Justering af teksten: center
- Baggrundsfarve i rullemenuen: # 45b2ff
- Farve på rullemenuen: #ffffff
- Menu baggrundsfarve: #45b2ff
- Fontmenu: Kode uden semi-kondenseret
- Skriftmenu Vægt: Semi fed
- Menutekstfarve: #ffffff
- Menustekststørrelse: 16px
- Menuafstand: 2px
- Animation af rullemenuen: Udvid
Placer rullemenuen
For at knappen overlapper den nederste kant, er vi nødt til at tilføje en negativ øverste margen, der er nøjagtigt halvdelen af knappen.
- Marginal: -40.5px høj
Som du kan se, optager svæveområdet endnu ikke hele knapområdet, og rullemenuen er stadig til højre. For at løse dette problem kan vi tilføje tilpasset CSS.
Tilføjelse af tilpasset CSS
Inden du tilføjer den brugerdefinerede CSS, skal du sørge for at tilføje CSS ID "dropdown" til sektionen med fuld bredde (ikke modulet).
Uden CSS-ID fungerer nedenstående CSS ikke.
For at tilføje den tilpassede CSS skal du åbne sideindstillingerne og indsætte følgende kode i det brugerdefinerede CSS-indtastningsfelt.
.nedbrydningsknap .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! vigtigt; }. nedbrydningsknap. fuldbreddemenu li> en {polstring-bund: 0 pixel; linjehøjde: 81px; }. nedbrydningsknap. fuldbreddemenu li li a {padding: 6px 0px; linjehøjde: 1.6 em; }. dropdown-knap .et_mobile_menu li a: svæver, .nav ul li a: svæver,. dropdown-knap. fuld bredde-menu a: svæver {opacitet: 1; }. dropdown-knap .et_pb_fullwidth_menu_fullwidth .et_pb_row {polstring: 0 0! vigtigt; }. nedbrydningsknap. fuldbreddemenu li {display: blok; }. dropdown-knap .fullbreddemenu .menu-element-har-børn> a: første barn: efter {højre: 20px; }
Her er det endelige resultat
endelige tanker
Oprettelse af en rullemenu-knap ved hjælp af Divis menu i fuld bredde involverer nogle få vigtige trin. Først opretter vi den menu i WordPress, som vi vil integrere i modulet. Derefter bruger vi Divi-bygherren til og indstiller menuen i fuld bredde efter vores smag. Derefter tilføjer vi tilpasset CSS for at polere designet både på skrivebordet og på mobilen. Resultatet er en smuk (og nyttig) rullemenu rullet ud til desktop-svæver og mobilklik. Håber du finder dette et nyttigt supplement til dit designværktøjssæt.
