Vill du lägga till en responsiv logotyp till din Fullwidth Menu-modul för Divi så att den anpassar sig efter synen på mobilen?
Visste du att mer än 50 % av trafik Kommer internet från mobila enheter? Detta innebär att mobilversionen av din webbplats är extremt viktigt och kan till och med vara det huvudsakliga sättet att besöka din sida.
Se till att din webbplats är lyhörd och mobilvänlig är ett viktigt steg i utformningen av en webbplats.
I den här handledningen kommer vi att visa dig hur du lägger till en responsiv logotyp till din Fullwidth Menu-modul med hjälp av de inbyggda responsiva alternativen i Divi.
Detta gör att du kan lägga till en större eller mer komplex logotyp som kommer att visas på större skärmar och en mindre eller enklare logotyp som kommer att visas på mindre skärmar.
Låt oss börja!
undersökningen
Här är en förhandstitt på vad vi kommer att designa. Desktopversionen av webbplatsen kommer att ha en utökad logotyp med ytterligare text, och mobilversionen av logotypen kommer endast att ha den grundläggande logotypen.
Vad du behöver för att komma igång
Alla först, installera och aktivera Divi-temat och se till att du har den senaste versionen av Divi på din webbplats. Se sedan till att du har minst två versioner av din logotyp: en för skrivbordsvyn på din webbplats och en för mobilvyn. Till sist, ladda ner mallen Sidhuvud och sidfotsmallar för Divi's High School Layout Pack.
Nu är du redo att börja!
Hur man lägger till en responsiv logotyp till din fullbreddshuvudmodul i Divi
Skapa modulen Fullwidth Header
Läs också: Divi: Hur man visar Fullwidth Header-modulen i helskärm
Lägg till ett avsnitt i full bredd
Eftersom den ursprungliga menyn är byggd med en standardmenymodul, måste vi ändra layouten för att lägga till en Fullwidth Header-modul.
Lägg först till en sektion i full bredd (Full bredd) till den globala rubriken under den befintliga menyn.
I inställningarna för fullbreddsavsnittet, navigera till Advanced Open water, Puis à Ruleffekter.
- Sticky Position: Håll dig till toppen
Lägg sedan till bakgrundsfärgen.
- Bakgrund: #f5f0eb
Lägg till en annan färg för bakgrunden i det klibbiga tillståndet.
- Bakgrund (klibbig): #ffffff
Lägg till en fullbreddshuvudmodul
Låt oss nu lägga till modulen Fullwidth Header.
Öppna modulinställningarna och ta bort bakgrunden.
För att enkelt replikera utseendet på originalmenyn kan vi använda funktionen Kopiera stilar för att kopiera några av de anpassade inställningarna.
Se även: Divi: Hur man ändrar gradienten för en bakgrund vid hovring
Öppna hemmenyinställningar och högerklicka sedan på Menytekst och välj Kopiera menytextstilar.
När du har kopierat klickar du på de tre prickarna i Fullwidth Header-modulen och väljer sedan Tidigare menytextstilar.
Nu kommer vi att upprepa samma steg med rullgardinsmenyns inställningar.
Upprepa en gång till för ikonerna.
Ställ in textjustering till höger.
- Textjustering: höger
Ställ in den maximala höjden på logotypen under DesignaDärefter Storlek.
- Logotyp Max höjd: 50px
Lägg till följande CSS till avsnittet Länkmeny under Anpassad CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Justera slutligen topp- och bottenstoppningen.
- Vaddering-Topp: 10px
- Vaddering-botten: 10px
Ta nu bort den ursprungliga menydelen.
Lägg till responsiv logotyp
Nu kommer vi att lägga till den responsiva logotypen. Lyckligtvis gör Divi detta enkelt med inbyggda responsiva alternativ.
Sous Innehåll, öppna logotypinställningarna och ladda upp skrivbordsversionen av din logotyp.
Välj mobillägesikonen för att använda responsiva alternativ och ersätt sedan mobillogotypen med din responsiva logotyp.
Skapa en ny sida med en fördefinierad layout
För att se menyn i full bredd med den responsiva logotypen i aktion, låt oss skapa en ny sida med en fördefinierad layout från Divi-biblioteket.
För denna design kommer vi att använda gymnasiets hemsida High School layoutpaket för att matcha sidhuvudet och sidfoten.
Lägg till en ny sida på din webbplats och ge den en titel och välj sedan alternativet Använd Divi Builder. Eftersom vi importerade sidhuvuds- och sidfotslayouten som global sidhuvud och sidfot, använd standardlayouten för den här sidan.
Vi kommer att använda en färdig layout från Divi-biblioteket för det här exemplet, så välj Bläddra i layouter.
Hitta och välj layout Gymnasiets hemsida.
Välj Använd den här layouten för att lägga till layouten på din sida.
Slutresultat
Låt oss nu ta en titt på vår slutliga design.
Ladda ner DIVI nu!!!
Slutsats
Att ha en mobilanpassad och responsiv hemsida är viktigare än någonsin. Och tack vare Divis inbyggda responsiva alternativ är det enklare än någonsin att bygga en!
Med en responsiv logotyp kommer din varumärkesidentitet alltid att vara tydlig, oavsett skärmstorlek.
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, genom att 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.
.
