Wilt u weten hoe u de winkelwagen- en zoekpictogrammen van de Divi Fullwidth Menu-module kunt aanpassen?
Het menu van je Site web is een van de belangrijkste onderdelen van uw Site web vanwege de directe impact die dit kan hebben op de manier waarop gebruikers door uw website navigeren inhoud.
Een goed ontworpen menubalk kan een groot verschil maken door de navigatie te vereenvoudigen, belangrijke pagina's te markeren en de algehele gebruikerservaring te verbeteren.
Divi's "Fullwidth Menu"-module biedt grote flexibiliteit doordat u het winkelwagentje en de zoekpictogrammen naar eigen inzicht kunt aanpassen.
In deze zelfstudie laten we u drie verschillende ontwerpen zien voor de module "Volledige menu" met verschillende stijlen voor winkelwagentjes en zoekpictogrammen.
Laten we beginnen!
overzicht
Hier is een voorproefje van wat we gaan ontwerpen.
Eerste ontwerp
Voor het eerste ontwerp plaatsen we een van de pictogrammen aan de linkerkant en de andere aan de rechterkant door een gecentreerde menustructuur te selecteren. We zullen ook de kleur veranderen bij het aanwijzen.
Tweede ontwerp
Voor het tweede ontwerp plaatsen we de twee pictogrammen aan de rechterkant en veranderen de kleur bij de muisaanwijzer.
derde ontwerp
Voor het derde ontwerp gebruiken we extra CSS om de pictogrammen aan te passen.
Lees ook: Divi: de module "Countdown Timer" aanpassen met een GIF
Aanpassing van winkelwagentje en zoekpictogrammen van Divi's "Fullwidth Menu"-module
De globale kop maken
Voor elk van de drie menu-ontwerpen beginnen we met het openen van de bouwer van thema's van Divi.
Ga hiervoor vanuit het WordPress-dashboard naar Divi > Themabouwer
klik vervolgens op Algemene koptekst toevoegen
Kies dan Bouw globale koptekst
Voeg een nieuwe sectie over de volledige breedte in.
Verwijder vervolgens het vorige gedeelte.
Plaats de module Menu met volledige breedte.
Upload uw logo vanuit het menu.
We zijn nu klaar om verder te gaan.
Eerste ontwerp
Ons eerste ontwerp zal Divi's ingebouwde zweefeffecten bevatten om de kleur van tekst en pictogrammen tijdens het zweven te veranderen. Laten we beginnen.
Zie ook: Divi: Hoe voeg ik een hamburger icoon toe aan de Menu module
Begin met het openen van de module-instellingen en het toevoegen van een achtergrond.
- Achtergrond: #fbf9f4
Ga naar het tabblad Design en selecteer de logo-indeling.
- Stijl: inline gecentreerd logo
Laten we nu enkele instellingen voor menutekst wijzigen.
- Actieve linkkleur: #09148c
- Menu Lettertype: Ruby
- Menu Lettergewicht: Vet
- Lettertype: TT en U (met hoofdletters en onderstreept)
Stel vervolgens de menutekstkleur, tekstgrootte en letterafstand in.
- Menutekst Kleur: #000000
- Grootte menutekst: 21px
- Letterafstand: 1px
We willen zweefeffecten aan dit menu toevoegen, dus verander de kleur van de menutekst bij het zweven. Stel een andere menutekstkleur in bij zweven.
- Menutekstkleur (zweven): #b70018
Ga dan naar instellingen Drop-down menu onder het tabblad Design.
- Achtergrondkleur vervolgkeuzemenu: #fbf9f4
- Kleur dropdownmenu: #b70018
- Menutekst Kleur: #000000
We willen dat de tekstkleur van het vervolgkeuzemenu ook verandert bij zweven, dus selecteer de zweefopties voor deze instelling en stel een andere tekstkleur in.
- Vervolgkeuzemenu Tekstkleur (zweven): #b70018
- Vervolgkeuzemenu Actieve linkkleur: #b70018
- Achtergrondkleur mobiel menu: #fbf9f4
- Tekstkleur mobiel menu: #000000
Nogmaals, we willen dat de tekstkleur van het mobiele menu verandert bij de muisaanwijzer. Selecteer de hover-opties voor deze instelling en stel vervolgens een andere tekstkleur in voor de hover.
- Tekstkleur mobiel menu (zweven): #b70018
Aanpassing van winkelwagentje en zoekpictogram
Laten we nu winkelwagen- en zoekpictogrammen toevoegen en aanpassen. Onder het tabblad Contentga naar Elementen en schakel het winkelwagenpictogram en het zoekpictogram in.
- Toon winkelwagenpictogram: JA
- Toon zoekpictogram: JA
Ga terug naar het tabblad Design en open pictograminstellingen. Elk van onze pictogrammen zal zwart en rood zijn bij de muisaanwijzer. Stel eerst de kleur zwart in.
- Kleur winkelwagenpictogram: #000000
- Kleur van zoekpictogram: #000000
- Hamburger Menu Pictogram Kleur: #000000
Selecteer vervolgens het zweefpictogram en voeg de kleur toe bij het zweven.
- Kleur winkelwagenpictogram (zweven): #b70018
- Kleur van zoekpictogram (zweven): #b70018
- Hamburger Menu Pictogram Kleur (Hover): #b70018
Pictogramgrootte instellen.
- Lettertypegrootte van het pictogram van het winkelwagentje: 25 px
- Lettergrootte voor zoekpictogram: 25 px
Ga naar sectie Spacingen stel vervolgens de bovenste en onderste opvulling in.
- Opvulling (boven en onder): 5px
Ten slotte voegen we een rand toe aan de boven- en onderkant van de menumodule. Randinstellingen openen.
- Breedte bovenrand: 3px
- Breedte onderste rand: 3px
Definitief ontwerp
En hier is ons definitieve ontwerp.
Tweede ontwerp
Ons tweede ontwerp maakt gebruik van Divi's ingebouwde zweefeffecten om de grootte van menupictogrammen en tekst bij zweven te wijzigen. Laten we beginnen.
Eerst voegen we een achtergrondverloop toe aan de menumodule. Het verloop heeft drie stops, de instellingen zijn als volgt:
- Gradiëntstops:
- 0%: rgba(255,255,255,0)
- 23%: rgba(252,199,76,0.65)
- 82%: rgba(232,119,255,0.32)
Stel het verlooptype en de verlooppositie in.
- Gradiënttype: conisch
- Gradiëntpositie: Bodem
Ga dan naar het tabblad Design en stel de lay-out in (Layout).
- Stijl: Gecentreerd
Ga naar sectie Menutekst om het ontwerp van de menutekst aan te passen.
- Actieve linkkleur: #FFFFFF
- Lettertypemenu: Syne
- Lettergewicht: Vet
- Lettertypestijl menu: TT (hoofdletters)
- Tekstkleurmenu: #FFFFFF
Stel nu de menutekstgrootte en letterafstand in.
- Grootte menutekst: 20px
- Menu Letterafstand: 2px
Omdat we willen dat de tekstgrootte van ons menu groter wordt bij het zweven, selecteert u de zweefoptie.
- Grootte menutekst: 22px
Wijzig vervolgens de ontwerpinstellingen in het vervolgkeuzemenu.
- Achtergrondkleur vervolgkeuzemenu: #fcda90
- Kleur dropdownmenu: #FFFFFF
- Tekst Kleur Menu: #FFFFFF
- Vervolgkeuzemenu Actieve linkkleur: #FFFFFF
Stel de achtergrond van het mobiele menu en de tekstkleur in.
- Achtergrondkleur mobiel menu: #fcda90
- Tekstkleur mobiel menu: #FFFFFF
Aanpassing van winkelwagentje en zoekpictogram
Laten we nu beginnen met het aanpassen van onze menupictogrammen. Ga naar Elementen onder het tabblad Content en schakel het winkelwagenpictogram en het zoekpictogram in.
- Pictogram winkelwagen zaaien: JA
- Toon zoekpictogram: JA
Ga terug naar het tabblad Design en open pictograminstellingen.
- Kleur winkelwagenpictogram: #ffffff
- Kleur van zoekpictogram: #ffffff
- Hamburger Menu Pictogram Kleur: #ffffff
De pictogrammen hebben een donkeroranje kleur bij de muisaanwijzer. Selecteer de omslagoptie en stel de kleur in.
- Kleur winkelwagenpictogram (zweven): #fcac00
- Kleur van zoekpictogram (zweven): #fcac00
- Hamburger Menu Pictogram Kleur (Hover): #fcac00
Stel vervolgens de lettergrootte in voor de winkelwagen en zoekpictogrammen.
- Winkelmandje Pictogram Lettergrootte: 25 px
- Lettergrootte voor zoekpictogram: 25 px
Om de pictogramgrootte bij het zweven te vergroten, selecteert u de zweefoptie.
- Lettertypegrootte winkelwagenpictogram (zweven): 30 px
- Lettergrootte van zoekpictogram (zweven): 30 px
Ga ten slotte naar de sectie Spacing en stel de boven- en ondervulling in.
- Opvulling (boven en onder): 5px
Definitief ontwerp
Hier is het definitieve ontwerp van onze tweede menu-indeling.
derde ontwerp
Voor ons definitieve ontwerp voegen we een achtergrondcirkel toe achter de winkelwagenpictogrammen met behulp van aangepaste CSS.
Lees ook: Divi: een plakkerig en uitbreidbaar zweefmenu maken
Laten we beginnen.
Voeg eerst een achtergrondkleur toe aan de module.
- Achtergrond: #efb6ac
Ga dan naar het tabblad Design en open de optie Menutekst.
- Actieve linkkleur: #e84322
- Menulettertype: Cinzel
- Menu Lettergewicht: Ultra Bold
We willen dat de kleur van de menutekst verandert bij het aanwijzen. Stel eerst de menutekstkleur in.
- Tekstkleurmenu (bureaublad): #e7644a
Klik op het zweefpictogram en stel de kleur van de zweeftekst in.
- Menutekstkleur (zweven): #e84322
Stel vervolgens de menutekstgrootte en letterafstand in.
- Grootte menutekst: 21px
- Menu Letterafstand: 1px
We willen ook dat de letterafstand groter wordt bij zweven, dus selecteer de zweefoptie voor instellingen.
- Menu Letterafstand: 2px
Stel de tekstuitlijning naar links in.
- Tekstuitlijning: links
Wijzig vervolgens de volgende instellingen in het vervolgkeuzemenu.
- Achtergrondkleur vervolgkeuzemenu: #efb6ac
- Kleur dropdownmenu: #e7644a
Lees ook: Divi: Hoe maak je een Testimonials-sectie in de vorm van een raster
- Vervolgkeuzemenu Tekstkleur
- Bureaublad: #e7644a
- Zweef: #e84322
- Vervolgkeuzemenu Actieve linkkleur: #e84322
Stel de achtergrond van het mobiele menu en de tekstkleur in.
- Achtergrondkleur mobiel menu: #efb6ac
- Tekstkleur mobiel menu:
- Bureaublad: #e7644a
- Zweef: #e84322
Aanpassing van winkelwagentje en zoekpictogram
Ga eerst naar Elementen onder het tabblad Content en schakel het winkelwagenpictogram en het zoekpictogram in.
- Toon winkelwagenpictogram: JA
- Winkelpictogram weergeven: JA
Ga dan terug naar het tabblad Design en open pictograminstellingen. Stel de pictogramkleur in.
- Kleur winkelwagenpictogram: #e7644a
- Kleur van zoekpictogram: #e7644a
- Hamburger Menu Pictogram Kleur: #e7644a
De kleur van deze pictogrammen verandert bij de muisaanwijzer. Schakel hover-opties in en stel de kleur in.
- Kleur winkelwagenpictogram (zweven): #e84322
- Kleur van zoekpictogram (zweven): #e84322
- Hamburger Menu Pictogram Kleur (Hover): #e84322
We willen ook dat de pictogramgrootte toeneemt bij het zweven. Stel eerst de lettergrootte van het pictogram in.
- Lettertypegrootte van het pictogram van het winkelwagentje: 22 px
- Lettergrootte voor zoekpictogram: 22 px
Stel vervolgens de lettergrootte van het pictogram in op hover.
- Lettertypegrootte winkelwagenpictogram (zweven): 26 px
- Lettergrootte van zoekpictogram (zweven): 26 px
Ga dan naar de sectie Spacing en voeg boven- en ondervulling toe.
- Opvulling (boven en onder): 5px
Ten slotte kunnen we aangepaste CSS toevoegen aan de algemene koptekst om de cirkels achter het winkelwagentje en het zoekpictogram toe te voegen.
U kunt deze CSS naar wens aanpassen aan het ontwerp van uw menumodule.
Open de instellingen van de kopsjabloon en ga naar het tabblad Geavanceerd en voeg de volgende aangepaste CSS in.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
Definitief ontwerp
Hiermee is het ontwerp van onze derde en laatste menu-indeling voltooid.
Eindresultaat
Laten we nu eens kijken naar het uiteindelijke ontwerp van de drie verschillende menu's.
Eerste ontwerp
Download DIVI nu!!!
Tweede ontwerp
derde ontwerp
Download DIVI nu!!!
Conclusie
Divi's menumodule en winkelwagen- en zoekpictogrammen zijn eenvoudig aan te passen om unieke lay-outs en ontwerpen voor uw te creëren Site web.
U kunt het uiterlijk van uw Menu-modules eenvoudig verbeteren met behulp van ingebouwde Divi-instellingen, zoals zweefeffecten en aangepaste CSS.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
