Vil du legge til en responsiv logo til din Fullwidth Menu-modul på Divi slik at den tilpasser seg visningen på mobil?
Visste du at mer enn 50 % av trafikk Kommer Internett fra mobile enheter? Dette betyr at mobilversjonen av din nettstedet Web er ekstremt viktig og kan til og med være den viktigste måten noen vil besøke siden din på.
Sørg for at din nettstedet Web er responsiv og mobilvennlig er et viktig skritt i utformingen av en nettstedet Web.
I denne opplæringen vil vi vise deg hvordan du legger til en responsiv logo til din Fullwidth Menu-modul ved å bruke de innebygde responsive alternativene til Divi.
Dette vil tillate deg å legge til en større eller mer kompleks logo som vises på større skjermer og en mindre eller enklere logo som vises på mindre skjermer.
La oss starte!
undersøkelsen
Her er en forhåndsvisning av hva vi skal designe. Desktop-versjonen av nettsiden vil ha en utvidet logo med tilleggstekst, og mobilversjonen av logoen vil kun ha den grunnleggende logomerkingen.
Hva du trenger for å komme i gang
Alle først, installer og aktiver Divi-temaet og sørg for at du har den nyeste versjonen av Divi på nettstedet ditt. Deretter må du sørge for at du har minst to versjoner av logoen din: én for skrivebordsvisningen av nettstedet og én for mobilvisningen. Last ned malen til slutt Topp- og bunntekstmaler for Divi's High School Layout Pack.
Nå er du klar til å begynne!
Slik legger du til en responsiv logo til overskriftsmodulen i full bredde i Divi
Opprett Fullwidth Header-modulen
Les også: Divi: Hvordan vise Fullwidth Header-modulen i fullskjerm
Legg til en seksjon i full bredde
Siden den opprinnelige menyen er bygget med en standard menymodul, må vi endre oppsettet for å legge til en Fullwidth Header-modul.
Først legger du til en seksjon i full bredde (Full bredde) til den globale overskriften under den eksisterende menyen.
I innstillingene for fullbredde-seksjonen, naviger til AvansertOg så Rulleeffekter.
- Sticky Posisjon: Hold deg til toppen
Deretter legger du til bakgrunnsfargen.
- Bakgrunn: #f5f0eb
Legg til en annen farge for bakgrunnen i klebrig tilstand.
- Bakgrunn (klebrig): #ffffff
Legg til en Fullwidth Header-modul
La oss nå legge til Fullwidth Header-modulen.
Åpne modulinnstillingene og fjern bakgrunnen.
For enkelt å gjenskape utseendet til den originale menyen, kan vi bruke funksjonen Kopier stiler til å kopiere noen av de egendefinerte innstillingene.
Se også: Divi: Hvordan endre gradienten til en bakgrunn ved sveving
Åpne startmenyen, og høyreklikk deretter på Menytekst og velg Kopier menytekststiler.
Når du har kopiert, klikker du på de tre prikkene i Fullwidth Header-modulen, og velger deretter Tidligere menytekststiler.
Nå vil vi gjenta de samme trinnene med innstillingene for rullegardinmenyen.
Gjenta en gang til for ikonene.
Sett tekstjustering til høyre.
- Tekstjustering: høyre
Still inn maksimal høyde på logoen under utformingDeretter Størrelse.
- Logo Maks høyde: 50px
Legg til følgende CSS til seksjonen Link-menyen under Custom CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Til slutt justerer du topp- og bunnpolstringen.
- Polstring-Topp: 10px
- Polstring-bunn: 10px
Slett nå den opprinnelige menydelen.
Legg til responsiv logo
Nå vil vi legge til den responsive logoen. Heldigvis gjør Divi dette enkelt med innebygde responsive alternativer.
Sous Innhold, åpne logoinnstillingene og last opp skrivebordsversjonen av logoen din.
Velg mobilmodusikonet for å bruke responsive alternativer, og erstatt deretter mobillogoen med din responsive logo.
Opprett en ny side med et forhåndsdefinert oppsett
For å se menyen i full bredde med den responsive logoen i aksjon, la oss lage en ny side med et forhåndsdefinert oppsett fra Divi-biblioteket.
For dette designet vil vi bruke hjemmesiden til videregående skole Layoutpakke for videregående skole for å matche topptekst og bunntekst.
Legg til en ny side på nettstedet ditt og gi den en tittel, og velg deretter alternativet Bruk Divi Builder. Siden vi importerte topptekst- og bunntekstoppsettet som global topp- og bunntekst, bruk standardoppsettet for denne siden.
Vi vil bruke en forhåndsdefinert layout fra Divi-biblioteket for dette eksemplet, så velg Bla gjennom layouter.
Finn og velg oppsettet Hjemmeside for videregående skole.
Velg Bruk denne layouten for å legge til oppsettet på siden din.
Endelig resultat
La oss nå ta en titt på vårt endelige design.
Last ned DIVI nå!!!
konklusjonen
Å ha en mobilvennlig og responsiv nettside er viktigere enn noen gang. Og takket være Divis innebygde responsive alternativer er det enklere enn noensinne å bygge en!
Med en responsiv logo vil merkeidentiteten din alltid være tydelig, uavhengig av skjermstørrelse.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
