In deze zelfstudie laten we u zien hoe u een vervolgkeuzemenu-knop kunt maken met behulp van Divi's menumodule over de volledige breedte. Om dit te doen, maken we eerst een menu in WordPress. We zullen dan Divi's menumodule over de volledige breedte gebruiken om dit menu weer te geven met aangepaste stijlen met behulp van de Divi-builder en een beetje aangepaste CSS. Het resultaat is een praktische en stijlvolle vervolgkeuzemenu-knop.
Laten we beginnen.
overzicht
Hier is een overzicht van de vervolgkeuzemenu die we in deze zelfstudie zullen integreren.
Wat je nodig hebt om te beginnen
Installeer en activeer om te beginnen, als je dat nog niet hebt gedaan, de Divi-thema geïnstalleerd (of de Divi Builder-plug-in als u de Divi-thema). We zullen in het begin de Divi-builder gebruiken om de vervolgkeuzemenuknop te ontwerpen.
Dat is het !
Maak een menu in WordPress
Voordat we beginnen met het maken van het vervolgkeuzemenu met Divi Builder, moeten we eerst een WordPress-menu maken dat we willen gebruiken voor de menumodule over de volledige breedte. Ga hiervoor naar het WordPress-dashboard en ga naar Vormgeving> Menu's. Maak vervolgens een nieuw menu aan door op de link voor het maken van een nieuw menu te klikken, een menunaam in te voeren en op de knop "Menu maken" te klikken.
Voorlopig kunt u aangepaste links maken met "#" als tijdelijke aanduiding voor de URL samen met de linktekst.
Structureer de menu-items zodat het menu-item op het hoogste niveau de koppeling "Meer informatie" heeft met drie submenu-items.
Sla daarna het menu op.
Een vervolgkeuzemenu maken met de Divi-menumodule over de volledige breedte
Zodra het menu is gemaakt, kunnen we beginnen met het ontwerpen van de vervolgkeuzemenu-knop met Divi. Om het project te starten, maakt u een nieuwe pagina in WordPress en gebruikt u Divi Builder om de pagina op de front-end te bewerken (visuele builder).
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Maak nep-inhoud
Voeg eerst een rij van één kolom toe aan het standaard standaardgedeelte.
Voeg een tekstmodule toe
Voeg vervolgens een tekstmodule toe aan de regel met de volgende inhoud:
Divi-menu Uw inhoud komt hier. Bewerk of verwijder deze tekst inline of in de module Inhoudsinstellingen. U kunt ook elk aspect van deze inhoud opmaken in de module Ontwerpinstellingen en zelfs aangepaste CSS toepassen op deze tekst in de module Geavanceerde instellingen.
Werk vervolgens de ontwerpparameters als volgt bij:
Padding sectie
Werk vervolgens de sectie-instelling bij met de volgende items:
- Vulling: 0px omlaag
Regelafstand en rand
Nadat de sectievulling is bijgewerkt, opent u de lijninstellingen en wijst u deze een vulling en een lichte rand toe.
- Bekleding: 10vw bovenaan, 10vw onderaan, 5vw links, 5vw rechts
- Breedte van de rand: 1px
De vervolgkeuzelijst maken
Om de vervolgkeuzemenu-knop te maken, gebruiken we een menumodule over de volledige breedte. Hierdoor kunnen we het eerder gemaakte menu toevoegen.
Het menu met de volledige breedte toevoegen
Om een menumodule over de volledige breedte te maken, voegt u een nieuwe sectie over de volledige breedte toe onder de huidige standaardsectie.
Voeg vervolgens een volledige menumodule aan de regel toe.
Gebruik in het pop-upvenster met menu-instellingen over de volledige breedte (onder Inhoud) het vervolgkeuzemenu om het menu te selecteren dat u wilt weergeven. Dit zou hetzelfde menu moeten zijn dat we eerder hebben gemaakt, genaamd "drop down button menu".
Verwijder vervolgens de standaard witte achtergrondkleur voor het menu.
Sla de instellingen op nadat u het menu met de fullwidth menumodule heeft toegevoegd. We komen zo op deze module terug om het ontwerp af te maken. Maar voor nu voegen we een achtergrond toe aan het gedeelte over de volledige breedte.
Werk het ontwerp van de sectie over de volledige breedte bij
Open de instellingen voor de volledige breedte en update het volgende:
- Verloop achtergrond links: # 0047d6
- Rechter achtergrondverloop Kleur: # 45b2ff
- Maximale breedte: 240px
- Sectieuitlijning: midden
Ik heb de maximale sectiebreedte ingesteld op 240px, omdat dit de breedte is van de standaard dropdown-menubreedte in Divi. Het is ook een goede maat voor een knop op desktop en mobiel.
- Afgeronde hoeken: 5px
Voeg op het tabblad Geavanceerd de volgende CSS-klasse, overloop en Z-index toe.
- CSS-klasse: vervolgkeuzeknop
- Horizontale overloop: zichtbaar
- Verticale overloop: zichtbaar
- Z-index: 14
De CSS-klasse is nodig zodat we onze externe CSS later op deze sectie kunnen richten. De overloop moet worden ingesteld op zichtbaar zodat we het vervolgkeuzemenu kunnen zien. En de Z-index helpt u de vervolgkeuzelijst boven alle andere inhoud op de pagina te houden.
Ontwerp het Fulwidth-menu
We zijn nu klaar om de Fulwidth-menumodule te ontwerpen. Open de module-instellingen van het volledige menu en werk het volgende bij:
- Menu-koppelingen over de volledige breedte maken: JA
- Kleur vervolgkeuzelijst: #ffffff
- Kleur van de tekst van het mobiele menu: #ffffff
- Uitlijning van de tekst: midden
- Achtergrondkleur van het vervolgkeuzemenu: # 45b2ff
- Kleur van de vervolgkeuzelijst: #ffffff
- Achtergrondkleur menu: #45b2ff
- Lettertypemenu: coderen zonder semi-gecondenseerd
- Gewicht lettermenu: half vet
- Menutekstkleur: #ffffff
- Menutekstgrootte: 16px
- Menu-afstand: 2px
- Animatie van het vervolgkeuzemenu: uitvouwen
Plaats de vervolgkeuzeknop
Opdat de knop de onderrand overlapt, moeten we een negatieve bovenmarge toevoegen die exact de helft van de hoogte van de knop is.
- Marge: -40.5px hoog
Zoals u kunt zien, beslaat de hover-ruimte nog niet het volledige knopgebied en bevindt het vervolgkeuzemenu zich nog steeds aan de rechterkant. Om dit probleem op te lossen, kunnen we aangepaste CSS toevoegen.
Aangepaste CSS toevoegen
Voordat u de aangepaste CSS toevoegt, moet u de CSS-ID "vervolgkeuzelijst" toevoegen aan de sectie met volledige breedte (niet de module).
Zonder de CSS-ID werkt de onderstaande CSS niet.
Om de aangepaste CSS toe te voegen, opent u de pagina-instellingen en plakt u de volgende code in het aangepaste CSS-invoervak.
.dropdown-knop .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! belangrijk; }. dropdown-knop .fullwidth-menu li> a {padding-bottom: 0px; regelhoogte: 81px; }. dropdown-knop .fullwidth-menu li a {padding: 6px 0px; lijnhoogte: 1.6em; } .dropdown-knop .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-knop .fullwidth-menu a: hover {ondoorzichtigheid: 1; } .dropdown-knop .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! belangrijk; }. dropdown-knop .fullwidth-menu li {display: block; }. dropdown-knop .fullwidth-menu .menu-item-heeft-kinderen> a: eerste-kind: na {rechts: 20px; }
Hier is het eindresultaat
Final gedachten
Het maken van een vervolgkeuzemenu-knop met behulp van Divi's menumodule op volledige breedte omvat een paar belangrijke stappen. Eerst maken we het menu in WordPress dat we in de module willen integreren. Vervolgens gebruiken we de Divi-builder voor en stylen we de menumodule over de volledige breedte naar onze wens. Vervolgens voegen we aangepaste CSS toe om het ontwerp zowel op de desktop als op de mobiel te verfijnen. Het resultaat is een mooi (en handig) vervolgkeuzemenu dat is uitgerold voor desktop hover en mobile click. Ik hoop dat je dit een nuttige aanvulling op je ontwerptoolkit vindt.
