Hoe de volledige navigatiemodule op Divi Builder te gebruiken

Met de module Full Width Menu van Divi kunt u een navigatiemenu overal op de pagina plaatsen. Dit kan worden gebruikt om een tweede paginamenu aan de pagina toe te voegen, of het kan worden gebruikt in combinatie met de functie Lege pagina om uw hoofdnavigatie naar de onderkant van de pagina te verplaatsen. U kunt uw menu bijvoorbeeld onder uw eerste sectie plaatsen om plaats te bieden aan mensen met een grote startup-afbeelding. Hierdoor kan uw koptekstnavigatie in feite over de pagina bewegen met behulp van de builder!

Een menumodule op volledig scherm aan uw pagina toevoegen

Voordat u een menumodule over de volledige breedte aan uw pagina kunt toevoegen, moet u eerst naar Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Visual Builder inschakelen wanneer u door uw bladert Site web op de voorgrond als u bent ingelogd op uw WordPress-dashboard.

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

Zoek de menumodule met volledige breedte in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "Volledig met menu" of "menu met volledige breedte" (afhankelijk van uw versie) kunt typen en vervolgens op enter kunt klikken om automatisch te zoeken en de menumodule over de volledige breedte toe te voegen ! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

Voorbeeld use case: een Fullwidth-menu toevoegen onder de paginakop

Voor dit voorbeeld laat ik u zien hoe u een menu met volledige breedte toevoegt onder het kopgedeelte van een pagina.

Hier is een voorbeeld:

Aangezien dit nieuwe paginagrote menu het standaard hoofdnavigatiemenu zal vervangen, is het noodzakelijk om het lege paginasjabloon te selecteren zodat het standaard navigatiemenu niet boven aan de pagina verschijnt naast het volledige menu. dat zal ik toevoegen.

Om uw paginasjabloon te bewerken, gaat u naar uw pagina-editor en selecteert u de "lege pagina" -sjabloon in het gebied Paginakenmerken van de rechterzijbalk.

Aangezien deze module een reeds bestaand menu zal tonen, is het belangrijk dat u het menu al heeft aangemaakt voordat u het toevoegt aan de menumodule over de volledige breedte.

Nadat u uw menu heeft gemaakt, gebruikt u de visuele builder om een gedeelte over de volledige breedte toe te voegen, net onder het koptekstgedeelte van de pagina. Voeg vervolgens een menumodule over de volledige breedte toe aan de sectie.

Werk de instellingen van het Fullwidth-menu als volgt bij:

Inhoud opties

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

Ontwerpopties

Tekstkleur: Licht Tekstoriëntatie: Middenmenu Lettertype: Roboto-menu Lettergrootte: 20px

Dat is het!

truc : U kunt de weergaveopties op het tabblad Geavanceerd gebruiken 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 inhoudopties voor het menu

Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.

Achtergrondkleur

Standaard heeft de menumodule een witte achtergrondkleur. Als je een andere kleur voor je menu-achtergrond wilt gebruiken, kun je deze hier kiezen met de kleurenkiezer.

Achtergrondkleur vervolgkeuzemenu

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 kleur hebben, kunt u met deze instelling een aangepaste kleur kiezen.

Achtergrondkleur van mobiel menu

Op mobiel wordt de menumodule getransformeerd naar een ander ontwerp en meer aangepast aan mobiel. U kunt de achtergrondkleur van het vervolgkeuzemenu voor mobiel regelen, onafhankelijk van de desktop-tegenhanger.

Administratie label

Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.

Opties voor menu-opties op volledige breedte

Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.

Open submenu's

Standaard worden alle submenu's geopend als een vervolgkeuzemenu onder de hoofdmenubalk. Als u uw menu onder aan de pagina plaatst en uw menu lange vervolgkeuzemenu's heeft, wilt u die menu's misschien boven de menumodule openen, zodat het menu niet verder reikt dan het browservenster.

Maak volledige menulinks

Standaard worden koppelingen op het hoogste niveau met de menumodule binnen uw standaard inhoudsbreedte geplaatst. Als u deze beperking wilt verwijderen en uw links over de volledige breedte van de pagina wilt laten lopen, beginnend helemaal links op het scherm, kunt u deze optie inschakelen.

Kleur van de vervolgkeuzelijst

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

Tekstkleur

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

Tekstoriëntatie

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

Actieve verbindingskleur

De kleuren van de actieve links worden gemarkeerd in de menumodule om de gebruiker zijn huidige locatie te tonen. Met deze instelling kunt u de markeringskleur wijzigen die voor deze actieve koppelingen wordt gebruikt.

Kleur van de tekst in het vervolgkeuzemenu

Standaard neemt de tekst in de vervolgkeuzemenu's van de module de kleur van de hoofdmenutekst over. Het kan echter zijn dat u deze kleur wilt wijzigen als u een aangepaste achtergrondkleur in het vervolgkeuzemenu heeft gedefinieerd.

Kleur van de mobiele menutekst

Standaard neemt de tekst in de vervolgkeuzemenu's van de module de kleur van de hoofdmenutekst over. Het is echter mogelijk dat u deze kleur wilt wijzigen als u een aangepaste achtergrondkleur voor het mobiele menu heeft ingesteld.

Menu lettertype

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

Lettergrootte Menu

Hier kunt u de grootte van uw menu-lettertype aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de waarde van de gewenste tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Kleur van de menutekst

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

Afstand tussen de letters van het menu

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw numerieke tekst 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte van de menuregel

De regelhoogte is van invloed op de ruimte tussen elke regel van uw numerieke tekst.Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Geavanceerde menuopties voor de volledige breedte

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 elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

CSS ID

Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.

CSS-klasse

Voer de optionele CSS-klassen in die u voor deze module wilt gebruiken. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. Je kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi-kindthema of in de aangepaste CSS-stylesheet die u aan uw pagina of website toevoegt. Site web met behulp van Divi-themaopties of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.

Animatie van het vervolgkeuzemenu

U kunt kiezen uit verschillende animaties die u kunt gebruiken wanneer een vervolgkeuzemenu is ingeschakeld. Standaard is de animatie ingesteld op vervagen, maar u wijzigt dat in: uitbreiden, slepen of omdraaien.

zichtbaarheid

Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

De Divi Builder-navigatiemodule met volledige breedte gebruiken