De Divi Volle Breedte Menu Module

Met de Fullwidth Menu-module kunt u een navigatiemenu overal op de pagina plaatsen. Dit kan worden gebruikt om een ​​tweede menu onderaan de pagina toe te voegen, of het kan worden gebruikt in combinatie met de functie Lege pagina om uw hoofdnavigatie omlaag te verplaatsen. U kunt bijvoorbeeld uw menu naar beneden verplaatsen onder uw eerste sectie om mensen te begroeten met een grote plonsafbeelding. Dit zorgt ervoor dat uw koptekstnavigatie over de pagina kan worden verplaatst om de bouwer te gebruiken!

volledige breedte menumodule

Hoe u een fullwidth-menumodule aan uw pagina toevoegt

Voordat u een volledige-breedmenumodule aan uw pagina kunt toevoegen, moet u eerst in Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder inschakelen tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

volledige breedte menumodule

Nadat u Visual Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe fullwidth-modules kunnen alleen binnen fullwidth-secties worden toegevoegd. Als u een nieuwe pagina start, vergeet dan niet eerst een sectie met volledige breedte aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s sectie- elementen.

volledige breedte menumodule

Zoek de volledige menumodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst is doorzoekbaar, wat betekent dat u ook het woord “fullwidth menu” kunt typen en vervolgens op enter kunt klikken om de fullwidth menumodule automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Gebruiksvoorbeeld: een menu met volledige breedte toevoegen onder de paginakoptekst

Voor dit voorbeeld ga ik je laten zien hoe je een menu met volledige breedte onder het kopgedeelte van een pagina kunt toevoegen.

Hier is een voorbeeld:

volledige breedte menumodule

Aangezien dit nieuwe volledige-breedtemenu het standaard primaire navigatiemenu zal vervangen, is het noodzakelijk om de lege paginasjabloon te selecteren, zodat het standaard-navigatiemenu niet boven aan de pagina wordt weergegeven naast het volledige-breedtemenu dat ik ga gebruiken toevoegen.

Om uw paginasjabloon te wijzigen, gaat u naar uw pagina-editor en selecteert u de sjabloon ‘lege pagina’ in het vak Paginakenmerken in de rechterzijbalk.

volledige breedte menumodule

Aangezien deze module een menu weergeeft dat al bestaat, is het belangrijk dat u het menu al hebt gemaakt voordat u het toevoegt aan de Fullwidth-menumodule.

volledige breedte menumodule

Nadat u uw menu hebt gemaakt, gebruikt u de visuele builder om een ​​sectie met volledige breedte toe te voegen net onder het kopgedeelte van de pagina. Voeg vervolgens een Fullwidth-menumodule toe aan de sectie.

volledige breedte menumodule

Werk de Fullwidth Menu-instellingen als volgt bij:

Inhoud opties

Menu: [selecteer het menu dat in de module moet worden gebruikt]
Achtergrond: # 333333

Ontwerpopties

Tekstkleur: Licht Tekstoriëntatie
: Center
Menu Font: Roboto
Menu Fontgrootte: 20 px

Dat is het!

Tip : misschien wilt u profiteren van de weergaveopties op het tabblad Geavanceerd om dit menu op mobiel te verbergen en een ander menu boven de koptekst weer te geven zodat mobiele gebruikers het menu kunnen zien zonder naar beneden te hoeven scrollen.

volledige breedte menumodule

Opties voor menu met volledige breedte

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

volledige breedte menumodule

Menu

Selecteer een menu dat in de module moet worden gebruikt. U kunt nieuwe menu’s maken met behulp van de pagina Uiterlijk> Menu ‘s in uw WordPress-dashboard. Elke keer dat u een nieuw menu maakt, kan het menu worden geselecteerd in dit vervolgkeuzemenu.

Achtergrond kleur

Standaard heeft de menumodule een witte achtergrondkleur. Als u een andere kleur voor uw menuachtergrond wilt gebruiken, kunt u deze hier kiezen met de kleurenkiezer.

Vervolgkeuzemenu Achtergrondkleur

Standaard nemen de vervolgkeuzemenu’s in uw menumodule de achtergrondkleur over die in de vorige instelling is gedefinieerd. Als u wilt dat uw vervolgkeuzemenu’s hun eigen unieke kleur hebben, kunt u een aangepaste kleur kiezen met deze instelling.

Achtergrondkleur mobiel menu

Op mobiel verandert de menumodule in een ander en mobielvriendelijker ontwerp. U kunt de achtergrondkleur van het vervolgkeuzemenu voor mobiele apparaten onafhankelijk van de tegenhanger op het bureaublad regelen.

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Fullwidth Menu-ontwerpopties

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

volledige breedte menumodule

Sub-Menus Open

Standaard worden alle submenu’s geopend in een vervolgkeuzemenu onder de hoofdmenubalk. Als u uw menu onder aan de pagina plaatst en uw menu lange vervolgkeuzemenu’s bevat, wilt u misschien dat die menu’s in plaats daarvan boven de menumodule worden geopend, zodat het menu zich niet buiten het browservenster uitstrekt.

Maak menulinks volbreedte

Standaard worden de koppelingen op het hoogste niveau met de menumodule binnen de grenzen van uw standaard inhoudsbreedte geplaatst. Als u deze beperking wilt verwijderen en wilt dat uw links de volledige paginabreedte uitbreiden, te beginnen vanaf uiterst links op het scherm, kunt u deze optie inschakelen.

Vervolgkeuzemenu Lijnkleur

In vervolgkeuzemenu’s worden links gescheiden door een regel van 1 pixel. Als u de kleur van deze lijn wilt aanpassen, kunt u een aangepaste kleur kiezen met de kleurenkiezer in deze instelling.

Tekst kleur

Hier kunt u de waarde van uw tekst kiezen. Als u met een donkere achtergrond werkt, moet uw tekst licht zijn. Als u met een lichte achtergrond werkt, moet uw tekst donker zijn.

Tekstrichting

Dit bepaalt hoe uw tekst wordt uitgelijnd binnen de module. U kunt kiezen tussen Links, Rechts en Gecentreerd.

Actieve verbindingskleur

Actieve linkkleuren worden gemarkeerd in de menumodule om de gebruiker hun huidige locatie te tonen. Met deze instelling kunt u de kleur van de markeringen wijzigen die voor deze actieve koppelingen wordt gebruikt.

Kleur vervolgkeuzemenu

Standaard neemt tekst in de vervolgkeuzemenu’s van de module de tekstkleur van het hoofdmenu over. Mogelijk wilt u deze kleur echter wijzigen als u een aangepaste achtergrondkleur voor het vervolgkeuzemenu hebt gedefinieerd.

Tekstkleur mobiel menu

Standaard neemt tekst in de vervolgkeuzemenu’s van de module de tekstkleur van het hoofdmenu over. Het is echter mogelijk dat u deze kleur wilt wijzigen als u een aangepaste achtergrondkleur voor het mobiele menu hebt gedefinieerd.

Lettertypemenu

U kunt het lettertype van uw lettertype wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Menu lettergrootte

Hier kunt u de grootte van uw lettertype aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Menu Tekst Kleur

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw cijfertekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Menu Letter Spacing <

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw cijfertekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Menuregelhoogte

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw getaltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Fullwidth Menu Geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

volledige breedte menumodule

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child-thema of in de aangepaste CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Vervolgkeuzemenu-animatie

U kunt kiezen uit verschillende animaties die worden gebruikt wanneer een vervolgkeuzemenu wordt geactiveerd. De animatie is standaard ingesteld op vervagen, maar u wijzigt dat in: uitvouwen, schuiven of omdraaien.

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.