Wil je een responsive logo toevoegen aan je Fullwidth Menu module van Divi zodat het zich aanpast aan het zicht op mobiel?
Wist je dat meer dan 50% van verkeer Internet komt van mobiele apparaten? Dit betekent dat de mobiele versie van uw Site web is uiterst belangrijk en kan zelfs de belangrijkste manier zijn waarop iemand uw pagina zal bezoeken.
Zorg ervoor dat uw Site web responsief en mobielvriendelijk is, is een essentiële stap bij het ontwerpen van een Site web.
In deze zelfstudie laten we u zien hoe u een responsief logo toevoegt aan uw Fullwidth Menu-module met behulp van de ingebouwde responsieve opties van Divi.
Hiermee kunt u een groter of complexer logo toevoegen dat op grotere schermen zal verschijnen en een kleiner of eenvoudiger logo dat op kleinere schermen zal verschijnen.
Laten we beginnen!
overzicht
Hier is een voorproefje van wat we gaan ontwerpen. De desktopversie van de website heeft een uitgebreid logo met extra tekst en de mobiele versie van het logo heeft alleen de basislogo-branding.
Wat je nodig hebt om te beginnen
Alle installeer en activeer eerst het Divi-thema en zorg ervoor dat u de nieuwste versie van Divi op uw website. Zorg er vervolgens voor dat u ten minste twee versies van uw logo heeft: één voor de desktopweergave van uw site en één voor de mobiele weergave. Download ten slotte het sjabloon Kop- en voettekstsjablonen voor Divi's High School Layout Pack.
Nu ben je klaar om te beginnen!
Een responsief logo toevoegen aan uw fullwidth-headermodule in Divi
De module Fullwidth Header maken
Lees ook: Divi: de Fullwidth Header-module op volledig scherm weergeven
Voeg een sectie met volledige breedte toe
Aangezien het originele menu is gebouwd met een standaard menumodule, moeten we de lay-out wijzigen om een Fullwidth Header-module toe te voegen.
Voeg eerst een sectie over de volledige breedte toe (Volle breedte) naar de globale kop onder het bestaande menu.
Navigeer in de instellingen voor de volledige breedte naar: Geavanceerd, Puis à Scroll effecten.
- Kleverige positie: blijf bij boven
Voeg vervolgens de achtergrondkleur toe.
- Achtergrond: #f5f0eb
Voeg een andere kleur toe voor de achtergrond in de plakkerige staat.
- Achtergrond (kleverig): #ffffff
Een Fullwidth Header-module toevoegen
Laten we nu de Fullwidth Header-module toevoegen.
Open de module-instellingen en verwijder de achtergrond.
Om het uiterlijk van het originele menu gemakkelijk te repliceren, kunnen we de functie Kopieerstijlen gebruiken om enkele aangepaste instellingen te kopiëren.
Zie ook: Divi: Hoe verander je het verloop van een achtergrond bij zweven
Open de instellingen van het startmenu en klik met de rechtermuisknop op Menutekst en selecteer Menutekststijlen kopiëren.
Eenmaal gekopieerd, klik op de drie puntjes van de Fullwidth Header-module en selecteer vervolgens Eerdere menutekststijlen.
Nu zullen we dezelfde stappen herhalen met de vervolgkeuzemenu-instellingen.
Herhaal dit nog een keer voor de pictogrammen.
Zet tekstuitlijning naar rechts.
- Tekstuitlijning: rechts
Stel de maximale hoogte van het logo in onder Designen Afmetingen.
- Logo Max Hoogte: 50px
Voeg de volgende CSS toe aan de sectie: Menulink onder Aangepaste CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Pas ten slotte de vulling aan de boven- en onderkant aan.
- Opvulling-Top: 10px
- Padding-bodem: 10px
Verwijder nu het oorspronkelijke menugedeelte.
Responsief logo toevoegen
Nu gaan we het responsieve logo toevoegen. Gelukkig maakt Divi dit gemakkelijk met ingebouwde responsieve opties.
Sous Content, open de logo-instellingen en upload de desktopversie van uw logo.
Selecteer het pictogram voor de mobiele modus om responsieve opties te gebruiken en vervang vervolgens het mobiele logo door uw responsieve logo.
Een nieuwe pagina maken met een vooraf gedefinieerde lay-out
Laten we een nieuwe pagina maken met een vooraf gedefinieerde lay-out uit de Divi-bibliotheek om het menu over de volledige breedte met het responsieve logo in actie te zien.
Voor dit ontwerp gebruiken we de homepage van de middelbare school van de Indelingspakket middelbare school overeenkomen met de kop- en voettekst.
Voeg een nieuwe pagina toe aan uw website, geef deze een titel en selecteer vervolgens de optie Gebruik Divi Builder. Aangezien we de kop- en voettekstlay-out hebben geïmporteerd als globale kop- en voettekst, gebruikt u de standaardlay-out voor deze pagina.
We gebruiken voor dit voorbeeld een vooraf gemaakte lay-out uit de Divi-bibliotheek, dus selecteer Door lay-outs bladeren.
Zoek en selecteer de lay-out Startpagina van de middelbare school.
Selecteer Gebruik deze lay-out om de lay-out aan uw pagina toe te voegen.
Eindresultaat
Laten we nu eens kijken naar ons definitieve ontwerp.
Download DIVI nu!!!
Conclusie
Het hebben van een mobielvriendelijke en responsieve website is belangrijker dan ooit. En dankzij de ingebouwde responsieve opties van Divi is het bouwen van een optie eenvoudiger dan ooit!
Met een responsive logo is je merkidentiteit altijd duidelijk, ongeacht de schermgrootte.
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, raadpleeg onze gids op 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.
...
