Vill du veta hur man anpassar kundvagnen och sökikonerna för Divi Fullwidth Menu-modulen?
Menyn för din webbplats är en av de viktigaste delarna av din webbplats på grund av den direkta inverkan det kan ha på hur användare navigerar i ditt innehåll.
En väldesignad menyrad kan göra stor skillnad genom att förenkla navigeringen, markera nyckelsidor och förbättra den övergripande användarupplevelsen.
Divis "Fullwidth Menu"-modul erbjuder stor flexibilitet genom att du kan anpassa kundvagnen och sökikonerna som du vill.
I den här handledningen kommer vi att visa dig tre olika designs för modulen "Fullwidth Menu" med olika stil för kundvagn och sökikoner.
Låt oss börja!
undersökningen
Här är en förhandstitt på vad vi kommer att designa.
Första designen
För den första designen placerar vi en av ikonerna till vänster och den andra till höger genom att välja en centrerad menystruktur. Vi kommer också att ändra färgen när vi svävar.
Andra designen
För den andra designen placerar vi de två ikonerna på höger sida och ändrar färgen när vi svävar.
Tredje designen
För den tredje designen använder vi ytterligare CSS för att anpassa ikonerna.
Läs också: Divi: Hur man anpassar modulen "Countdown Timer" med en GIF
Anpassning av kundvagn och sökikoner i Divis "Fullwidth Menu"-modul
Skapa den globala rubriken
För var och en av de tre menydesignerna börjar vi med att öppna byggaren av teman av Divi.
För att göra detta, från WordPress-instrumentpanelen, gå till Divi > Theme Builder
klicka sedan på Lägg till Global Header
Sedan Välj Bygg Global Header
Infoga en ny sektion i full bredd.
Ta sedan bort föregående avsnitt.
Sätt i modulen Fullbreddsmeny.
Ladda upp din logotyp från menyn.
Vi är nu redo att fortsätta.
Första designen
Vår första design kommer att införliva Divis inbyggda hovringseffekter för att ändra färgen på text och ikoner när du svävar. Låt oss börja.
Se även: Divi: Hur man lägger till en hamburgerikon till menymodulen
Börja med att öppna modulinställningarna och lägga till en bakgrund.
- Bakgrund: #fbf9f4
Gå till fliken Designa och välj logotyplayout.
- Stil: Inline-centrerad logotyp
Låt oss nu ändra några av menytextinställningarna.
- Aktiv länkfärg: #09148c
- Menyteckensnitt: Ruby
- Meny Teckensnittsvikt: Fet
- Teckensnitt: TT och U (versal och understruken)
Ställ sedan in menyns textfärg, textstorlek och bokstavsavstånd.
- Menytextfärg: #000000
- Menytextstorlek: 21px
- Bokstavsavstånd: 1px
Vi vill lägga till hovringseffekter till den här menyn, så ändra färgen på menytexten när du håller muspekaren. Ställ in en annan menytextfärg när du håller muspekaren.
- Menytextfärg (hovra): #b70018
Gå sedan till inställningar Rullgardinsmenyn under fliken Designa.
- Dropdown-menyn Bakgrundsfärg: #fbf9f4
- Färg på rullgardinsmenyn: #b70018
- Menytextfärg: #000000
Vi vill att textfärgen på rullgardinsmenyn också ska ändras vid hovring, så välj hovringsalternativen för den här inställningen och ställ in en annan textfärg.
- Rullgardinsmeny Textfärg (Hover): #b70018
- Rullgardinsmeny Aktiv länkfärg: #b70018
- Mobilmeny Bakgrundsfärg: #fbf9f4
- Mobilmeny Textfärg: #000000
Återigen vill vi att textfärgen på mobilmenyn ska ändras när du håller muspekaren. Välj hovringsalternativen för den här inställningen och ställ sedan in en annan textfärg vid hovring.
- Mobilmenytextfärg (svävare): #b70018
Kundvagn och sökikon anpassning
Låt oss nu lägga till och anpassa kundvagns- och sökikoner. Under fliken Innehåll, gå till Elements och aktivera kundvagnsikon och sökikon.
- Visa kundvagnsikon: JA
- Visa sökikon: JA
Gå tillbaka till fliken Designa och öppna ikoninställningar. Var och en av våra ikoner kommer att vara svarta och röda när de svävar. Ställ först in färgen svart.
- Varukorgsikon Färg: #000000
- Sökikonens färg: #000000
- Hamburgermenyikon Färg: #000000
Välj sedan svävningsikonen och lägg till färgen på svävaren.
- Varukorgsikonens färg (sveva): #b70018
- Sökikonens färg (svävare): #b70018
- Hamburgermenyikon Färg (Hover): #b70018
Ställ in ikonstorlek.
- Shopping Cart Icon Teckenstorlek: 25 px
- Sökikon Teckenstorlek: 25 px
Gå till avsnittet Förband, ställ sedan in topp- och bottenstoppningen.
- Utfyllnad (topp och botten): 5px
Slutligen lägger vi till en ram längst upp och längst ned i menymodulen. Öppna gränsinställningar.
- Övre kantbredd: 3px
- Nedre kantbredd: 3px
Slutlig design
Och här är vår slutliga design.
Andra designen
Vår andra design kommer att använda Divis inbyggda hovringseffekter för att ändra storleken på menyikoner och text vid hovring. Låt oss börja.
Först lägger vi till en bakgrundsgradient till menymodulen. Gradienten har tre stopp, inställningarna är som följer:
- Gradientstopp:
- 0 %: rgba(255,255,255,0)
- 23 %: rgba(252,199,76,0.65)
- 82 %: rgba(232,119,255,0.32)
Ställ in gradienttyp och gradientposition.
- Gradienttyp: konisk
- Gradient Position: Botten
Gå sedan till fliken Designa och ställ in layouten (Layout).
- Stil: Centrerad
Gå till avsnittet Menytekst för att anpassa menytextdesign.
- Aktiv länkfärg: #FFFFFF
- Teckensnittsmeny: Syne
- Teckensnittsvikt: Fet
- Menyteckensnittsstil: TT (versaler)
- Textfärgmeny: #FFFFFF
Ställ nu in menyns textstorlek och bokstavsavstånd.
- Menytextstorlek: 20px
- Meny Bokstavsavstånd: 2px
Eftersom vi vill att storleken på vår menytext ska öka vid hovring, välj alternativet hovra.
- Menytextstorlek: 22px
Ändra sedan designinställningarna från rullgardinsmenyn.
- Rullgardinsmeny Bakgrundsfärg: #fcda90
- Färg på rullgardinsmenyn: #FFFFFF
- Textfärgmeny: #FFFFFF
- Rullgardinsmeny Aktiv länkfärg: #FFFFFF
Ställ in mobilmenyns bakgrund och textfärg.
- Mobilmeny Bakgrundsfärg: #fcda90
- Mobilmeny Textfärg: #FFFFFF
Kundvagn och sökikon anpassning
Låt oss nu börja anpassa våra menyikoner. Gå till Elements under fliken Innehåll och aktivera kundvagnsikon och sökikon.
- Sow Shopping Cart Ikon : JA
- Visa sökikon: JA
Gå tillbaka till fliken Designa och öppna ikoninställningar.
- Varukorgsikon Färg: #ffffff
- Sökikon Färg: #ffffff
- Hamburgermenyikon Färg: #ffffff
Ikonerna kommer att ha en mörk orange färg när de svävar. Välj omslagsalternativet och ställ in färgen.
- Varukorgsikonens färg (sveva): #fcac00
- Sökikonens färg (svävare): #fcac00
- Hamburgermenyikon Färg (Hover): #fcac00
Ställ sedan in teckenstorleken för kundvagnen och sökikonerna.
- Shoppin Cart Icon Teckenstorlek: 25 px
- Sökikon Teckenstorlek: 25 px
För att få ikonstorleken att öka vid hovring, välj alternativet för hovring.
- Varukorgsikon Teckensnittsstorlek (svävare): 30 px
- Sökikon Teckensnittsstorlek (hovra): 30 px
Slutligen, gå till avsnittet Förband och ställ in topp- och bottenstoppningen.
- Utfyllnad (topp och botten): 5px
Slutlig design
Här är den slutliga designen av vår andra menylayout.
Tredje designen
För vår slutliga design lägger vi till en bakgrundscirkel bakom kundvagnsikonerna med hjälp av anpassad CSS.
Läs också: Divi: Hur man skapar en klibbig och expanderbar hovmeny
Låt oss börja.
Lägg först till en bakgrundsfärg till modulen.
- Bakgrund: #efb6ac
Gå sedan till fliken Designa och öppna alternativet Menytekst.
- Aktiv länkfärg: #e84322
- Menyteckensnitt: Cinzel
- Meny för teckensnittsvikt: Ultra fet
Vi vill att menyns textfärg ska ändras vid hovring. Ställ först in menyns textfärg.
- Textfärgmeny (skrivbord): #e7644a
Klicka på svävningsikonen och ställ in hovringstextfärgen.
- Menytextfärg (hovra): #e84322
Ställ sedan in menyns textstorlek och bokstavsavstånd.
- Menytextstorlek: 21px
- Meny Bokstavsavstånd: 1px
Vi vill också att bokstavsavståndet ska utökas vid hovring, så välj alternativet hovra för inställningar.
- Meny Bokstavsavstånd: 2px
Ställ in textjusteringen till vänster.
- Textjustering: vänster
Ändra sedan följande inställningar från rullgardinsmenyn.
- Rullgardinsmeny Bakgrundsfärg: #efb6ac
- Färg på rullgardinsmenyn: #e7644a
Läs också: Divi: Hur man skapar en vittnesmålssektion i form av ett rutnät
- Rullgardinsmeny Textfärg
- Desktop: #e7644a
- Hover: #e84322
- Rullgardinsmeny Aktiv länkfärg: #e84322
Ställ in mobilmenyns bakgrund och textfärg.
- Mobilmeny Bakgrundsfärg: #efb6ac
- Mobilmeny Textfärg:
- Desktop: #e7644a
- Hover: #e84322
Kundvagn och sökikon anpassning
Gå först till Elements under fliken Innehåll och aktivera kundvagnsikon och sökikon.
- Visa kundvagnsikon: JA
- Visa shoppingikon: JA
Gå sedan tillbaka till fliken Designa och öppna ikoninställningar. Ställ in ikonens färg.
- Varukorgsikon Färg: #e7644a
- Sökikonens färg: #e7644a
- Hamburgermenyikon Färg: #e7644a
Färgen på dessa ikoner ändras när du håller muspekaren. Aktivera hovringsalternativ och ställ in färgen.
- Varukorgsikonens färg (sveva): #e84322
- Sökikonens färg (svävare): #e84322
- Hamburgermenyikon Färg (Hover): #e84322
Vi vill också att ikonstorleken ska öka vid hovring. Ställ först in ikonens teckensnittsstorlek.
- Shopping Cart Icon Teckenstorlek: 22 px
- Sökikon Teckenstorlek: 22 px
Ställ sedan in teckenstorleken på ikonen när du håller muspekaren.
- Varukorgsikon Teckensnittsstorlek (svävare): 26 px
- Sökikon Teckensnittsstorlek (hovra): 26 px
Gå sedan till avsnittet Förband och lägg till topp- och bottenstoppning.
- Utfyllnad (topp och botten): 5px
Slutligen kan vi lägga till anpassad CSS i den globala rubriken för att lägga till cirklarna bakom kundvagnen och sökikonen.
Du kan anpassa denna CSS som du vill för att matcha din menymoduldesign.
Öppna inställningarna för rubrikmall och gå sedan till fliken Advanced Open water och infoga följande anpassade 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%;
}
Slutlig design
Detta fullbordar designen av vår tredje och sista menylayout.
Slutresultat
Låt oss nu ta en titt på den slutliga designen av de tre olika menyerna.
Första designen
Ladda ner DIVI nu!!!
Andra designen
Tredje designen
Ladda ner DIVI nu!!!
Slutsats
Divis menymodul och kundvagn och sökikoner är lätta att anpassa för att skapa unika layouter och design för din webbplats.
Du kan enkelt förbättra utseendet på dina menymoduler med inbyggda Divi-inställningar som hovringseffekter och anpassad CSS.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
