Vil du vide, hvordan du tilpasser kurven og søgeikonerne i Divi Fullwidth Menu-modulet?
Menuen på din Websted er en af de vigtigste dele af din Websted på grund af den direkte indflydelse, det kan have på, hvordan brugere navigerer i din indhold.
En veldesignet menulinje kan gøre en stor forskel ved at forenkle navigationen, fremhæve nøglesider og forbedre den overordnede brugeroplevelse.
Divis "Fullwidth Menu"-modul tilbyder stor fleksibilitet ved at give dig mulighed for at tilpasse indkøbskurven og søgeikonerne, som du synes passer.
I denne tutorial vil vi vise dig tre forskellige designs til modulet "Fuldbreddemenu" med forskellig stil til indkøbskurv og søgeikoner.
Lad os starte!
undersøgelse
Her er en forhåndsvisning af, hvad vi skal designe.
Første design
Til det første design placerer vi et af ikonerne til venstre og det andet til højre ved at vælge en centreret menustruktur. Vi vil også ændre farven ved at svæve.
Andet design
For det andet design placerer vi de to ikoner på højre side og ændrer farven, når vi svæver.
Tredje design
Til det tredje design bruger vi yderligere CSS til at tilpasse ikonerne.
Læs også: Divi: Sådan tilpasser du "Countdown Timer"-modulet med en GIF
Tilpasning af indkøbskurv og søgeikoner af Divis "Fuldbredde Menu" modul
Opret den globale header
For hvert af de tre menudesigns starter vi med at åbne builder af temaer af Divi.
For at gøre dette skal du fra WordPress-dashboardet gå til Divi > Theme Builder
klik derefter på Tilføj Global Header
Vælg derefter Byg global header
Indsæt en ny sektion i fuld bredde.
Slet derefter det forrige afsnit.
Indsæt modulet Fuldbreddemenu.
Upload dit logo fra menuen.
Vi er nu klar til at fortsætte.
Første design
Vores første design vil inkorporere Divi's indbyggede hover-effekter for at ændre farven på tekst og ikoner, når du svæver. Lad os begynde.
Se også: Divi: Sådan tilføjer du et hamburgerikon til menumodulet
Start med at åbne modulindstillingerne og tilføje en baggrund.
- Baggrund: #fbf9f4
Gå til fanen Design og vælg logolayout.
- Stil: Inline centreret logo
Lad os nu ændre nogle af menutekstindstillingerne.
- Aktivt link farve: #09148c
- Menuskrifttype: Ruby
- Menu Skrifttypevægt: Fed
- Skrifttype: TT og U (Met stort og understreget)
Indstil derefter menuens tekstfarve, tekststørrelse og bogstavafstand.
- Menutekstfarve: #000000
- Menutekststørrelse: 21px
- Bogstavafstand: 1px
Vi ønsker at tilføje svæveeffekter til denne menu, så skift farven på menuteksten ved svævning. Indstil en anden menutekstfarve, når du svæver.
- Menutekstfarve (Hover): #b70018
Gå derefter til indstillinger Drop down menu under fanen Design.
- Rullemenu Baggrundsfarve: #fbf9f4
- Rullemenulinjefarve: #b70018
- Menutekstfarve: #000000
Vi ønsker, at tekstfarven i rullemenuen også ændres ved svævning, så vælg svæveindstillingerne for denne indstilling og indstil en anden tekstfarve.
- Rullemenu Tekstfarve (svæver): #b70018
- Rullemenu Farve på aktivt link: #b70018
- Mobilmenu baggrundsfarve: #fbf9f4
- Mobilmenu Tekstfarve: #000000
Igen ønsker vi, at tekstfarven på mobilmenuen skal ændres ved svævning. Vælg svæveindstillinger for denne indstilling, og indstil derefter en anden tekstfarve ved svæv.
- Mobilmenu Tekstfarve (svæver): #b70018
Tilpasning af indkøbskurv og søgeikon
Lad os nu tilføje og tilpasse indkøbskurv og søgeikoner. Under fanen Indhold, gå til Elements og aktiver indkøbskurvikon og søgeikon.
- Vis indkøbskurvikon: JA
- Vis søgeikon: JA
Gå tilbage til fanen Design og åbn ikonindstillinger. Hvert af vores ikoner vil være sorte og røde, når de svæver. Indstil først farven sort.
- Indkøbskurv Ikon Farve: #000000
- Søgeikon farve: #000000
- Hamburger Menu Ikon Farve: #000000
Vælg derefter svæveikonet og tilføj farven, når du svæver.
- Indkøbskurvsikonfarve (svæver): #b70018
- Søgeikonfarve (hover): #b70018
- Hamburger Menu Ikon Farve (Hover): #b70018
Indstil ikonstørrelse.
- Indkøbskurv Ikon Skriftstørrelse: 25 px
- Søgeikon Skriftstørrelse: 25 px
Gå til afsnittet Mellemrum, og sæt derefter top- og bundpolstringen.
- Polstring (top og bund): 5px
Til sidst tilføjer vi en kant til toppen og bunden af menumodulet. Åbn grænseindstillinger.
- Øverste kantbredde: 3px
- Nederste kantbredde: 3px
Endelig design
Og her er vores endelige design.
Andet design
Vores andet design vil bruge Divi's indbyggede hover-effekter til at ændre størrelsen på menuikoner og tekst, når du svæver. Lad os begynde.
Først tilføjer vi en baggrundsgradient til menumodulet. Gradienten har tre stop, indstillingerne er som følger:
- Gradientstop:
- 0 %: rgba(255,255,255,0)
- 23 %: rgba(252,199,76,0.65)
- 82 %: rgba(232,119,255,0.32)
Indstil gradueringstype og gradueringsposition.
- Gradient Type: Konisk
- Gradientposition: Bund
Gå derefter til fanen Design og sæt layoutet (Layout).
- Stil: Centreret
Gå til afsnittet Menutekst for at tilpasse menutekstdesign.
- Aktivt link farve: #FFFFFF
- Skrifttypemenu: Syne
- Skrifttypevægt: Fed
- Menuskrifttype: TT (store bogstaver)
- Tekstfarvemenu: #FFFFFF
Indstil nu menuens tekststørrelse og bogstavafstand.
- Menutekststørrelse: 20px
- Menubogstavafstand: 2px
Da vi ønsker, at vores menutekststørrelse skal øges ved svævning, skal du vælge svæveindstillingen.
- Menutekststørrelse: 22px
Derefter skal du ændre designindstillingerne fra rullemenuen.
- Rullemenu Baggrundsfarve: #fcda90
- Rullemenulinjefarve: #FFFFFF
- Tekstfarvemenu: #FFFFFF
- Rullemenu Aktivt linkfarve: #FFFFFF
Indstil mobilmenuens baggrund og tekstfarve.
- Mobilmenu baggrundsfarve: #fcda90
- Mobilmenu Tekstfarve: #FFFFFF
Tilpasning af indkøbskurv og søgeikon
Lad os nu begynde at tilpasse vores menuikoner. Gå til Elements under fanen Indhold og aktiver indkøbskurvikon og søgeikon.
- So Indkøbskurv Ikon: JA
- Vis søgeikon: JA
Gå tilbage til fanen Design og åbn ikonindstillinger.
- Indkøbskurv Ikon Farve: #ffffff
- Søgeikon Farve: #ffffff
- Hamburger Menu Ikon Farve: #ffffff
Ikonerne vil have en mørk orange farve, når de svæver. Vælg omslagsindstillingen og indstil farven.
- Indkøbskurvsikonfarve (svæver): #fcac00
- Søgeikonfarve (hover): #fcac00
- Hamburger Menu Ikon Farve (Hover): #fcac00
Indstil derefter skriftstørrelsen for indkøbskurven og søgeikonerne.
- Shoppin Cart Icon Skriftstørrelse: 25 px
- Søgeikon Skriftstørrelse: 25 px
For at få ikonstørrelsen til at stige ved svævning, skal du vælge svæveindstillingen.
- Indkøbskurvikon Skriftstørrelse (svæver): 30 px
- Søgeikon Skriftstørrelse (hover): 30 px
Gå til sidst til afsnittet Mellemrum og sæt den øverste og nederste polstring.
- Polstring (top og bund): 5px
Endelig design
Her er det endelige design af vores andet menulayout.
Tredje design
Til vores endelige design tilføjer vi en baggrundscirkel bag kurvikonerne ved hjælp af tilpasset CSS.
Læs også: Divi: Sådan opretter du en klæbrig og udvidelig hover-menu
Lad os starte.
Først skal du tilføje en baggrundsfarve til modulet.
- Baggrund: #efb6ac
Gå derefter til fanen Design og åbn indstillingen Menutekst.
- Farve på aktivt link: #e84322
- Menuskrifttype: Cinzel
- Skrifttypevægtmenu: Ultra fed
Vi ønsker, at menutekstfarven ændres ved svævning. Indstil først menutekstfarven.
- Tekstfarvemenu (skrivebord): #e7644a
Klik på svæveikonet og indstil svævetekstfarven.
- Menutekstfarve (Hover): #e84322
Indstil derefter menuens tekststørrelse og bogstavafstand.
- Menutekststørrelse: 21px
- Menubogstavafstand: 1px
Vi ønsker også, at bogstavafstanden skal udvides ved svævning, så vælg svæveindstillingen for indstillinger.
- Menubogstavafstand: 2px
Indstil tekstjusteringen til venstre.
- Tekstjustering: venstre
Derefter skal du ændre følgende indstillinger fra rullemenuen.
- Rullemenu Baggrundsfarve: #efb6ac
- Rullemenulinjefarve: #e7644a
Læs også: Divi: Sådan opretter du en Testimonials-sektion i form af et gitter
- Rullemenu Tekstfarve
- Desktop: #e7644a
- Hover: #e84322
- Rullemenu Farve på aktivt link: #e84322
Indstil mobilmenuens baggrund og tekstfarve.
- Mobilmenu baggrundsfarve: #efb6ac
- Mobilmenu Tekstfarve:
- Desktop: #e7644a
- Hover: #e84322
Tilpasning af indkøbskurv og søgeikon
Gå først til Elements under fanen Indhold og aktiver indkøbskurvikon og søgeikon.
- Vis indkøbskurvikon: JA
- Vis Shopping-ikon: JA
Gå derefter tilbage til fanen Design og åbn ikonindstillinger. Indstil ikonets farve.
- Indkøbskurv Ikon Farve: #e7644a
- Søgeikon farve: #e7644a
- Hamburger Menu Ikon Farve: #e7644a
Farven på disse ikoner ændres, når du svæver. Aktiver svæveindstillinger og indstil farven.
- Indkøbskurvsikonfarve (svæver): #e84322
- Søgeikonfarve (hover): #e84322
- Hamburger Menu Ikon Farve (Hover): #e84322
Vi ønsker også, at ikonstørrelsen skal øges ved svævning. Indstil først ikonets skriftstørrelse.
- Indkøbskurv Ikon Skriftstørrelse: 22 px
- Søgeikon Skriftstørrelse: 22 px
Indstil derefter skriftstørrelsen på ikonet, når du svæver.
- Indkøbskurvikon Skriftstørrelse (svæver): 26 px
- Søgeikon Skriftstørrelse (hover): 26 px
Gå derefter til sektionen Mellemrum og tilføj top og bund polstring.
- Polstring (top og bund): 5px
Endelig kan vi tilføje tilpasset CSS til den globale header for at tilføje cirklerne bag indkøbskurven og søgeikonet.
Du kan tilpasse denne CSS, som du ønsker, så den matcher dit menumoduldesign.
Åbn indstillingerne for overskriftsskabelonen, og gå derefter til fanen Avanceret og indsæt følgende brugerdefinerede CSS.
.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%;
}
Endelig design
Dette fuldender designet af vores tredje og sidste menulayout.
Endelig resultat
Lad os nu tage et kig på det endelige design af de tre forskellige menuer.
Første design
Download DIVI nu!!!
Andet design
Tredje design
Download DIVI nu!!!
Konklusion
Divis menumodul og kurv og søgeikoner er nemme at tilpasse for at skabe unikke layout og design til din Websted.
Du kan nemt forbedre udseendet af dine menumoduler ved hjælp af indbyggede Divi-indstillinger såsom hover-effekter og tilpasset CSS.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også 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.
...
