Mega-menu's zijn een populair ontwerpelement dat uw Site web een uitbarsting van elegantie tijdens het aanbieden bezoekers een extra navigatielaag. Er zijn verschillende manieren om megamenu's aan Divi toe te voegen. Een van de gemakkelijkste methoden die ik heb gebruikt, is omeen plug-in van derden genaamd Divi Mega Pro .

Divi Mega Pro maakt het gemakkelijk om megamenu's te maken met Divi Builder. Elk menu kan aan elk element worden toegevoegd met behulp van een CSS-klasse. Dit betekent dat u een Divi-lay-out aan elke link in het menu kunt toevoegen, maar u kunt zelfs nog verder gaan en ze aan elk element van een Divi-lay-out toevoegen door gewoon een CSS-klasse toe te voegen.

Het is ideaal voor het maken van menu's en pop-ups met winkelmodules, afbeeldingen, schuifregelaars, portfolio's, pictogrammen, blurb, video's, blogs, enz. Het werkt ook met Extra.

Maak een Mega Pro Mega Menu

Het Divi Mega Pro-menu wordt toegevoegd aan het dashboardmenu. Hier kunt u uw licentiesleutel invoeren, de menu's bekijken die u heeft gemaakt en een nieuw menu aanmaken. Wanneer u klikt om een ​​nieuw menu toe te voegen, ziet u een editor voor het type menupost. Het scherm is eenvoudig, maar er gebeurt hier veel.

uitgever - u kunt het megamenu of een tooltip maken met Divi Builder.

Mega Pro achtergrond - u kunt de achtergrond- en lettertypekleuren selecteren.

Bekijk locaties - kies alle pagina's of geef specifieke pagina's een naam en voer vervolgens uitzonderingen in.

Mega Pro-animatie - selecteer een animatie. Kies uit offset, offset, perspectief, vervaging of schaal.

Mega Pro-triggers - voeg een trigger toe als een CSS-selector. Als je het eenmaal hebt opgeslagen, zie je de CSS-klasse die je in het CSS-klasseveld van een menu-item, module, rij of sectie gaat plakken. Hierop wordt geklikt of de muisaanwijzer bewogen om het menu weer te geven. Alles kan als trigger worden gebruikt en niet alleen als menu-item. Dit betekent dat u Divi Mega Pro ook kunt gebruiken om pop-ups of tooltips te maken.

Mega Pro-weergave-instellingen : kies de weergaverichting (boven of onder), voer de boven- en ondermarges in pixels in, kies een percentage van de breedte en activeer een pijl. Als u de pijl activeert, worden meer aanpassingen weergegeven waarbij u het type pijl (driehoek of rond) kunt kiezen, de kleur kunt kiezen, de breedte en hoogte kunt instellen en een voorbeeld van de pijl kunt bekijken.

aanpassingen de knop Sluiten: activeer de knop Sluiten op het bureaublad of op de mobiele telefoon en pas de knop Sluiten aan. Als u dit inschakelt, worden aanpassingen voor tekstkleur, achtergrondkleur, lettergrootte, randradius, opvulling en weergave vooraf bekeken.

Aanvullende parameters Mega Pro - kies het type trigger (zweefde of klikte), het type output (zweefde of klikte) en voer de uitloopvertraging in.

Divi Mega Pro-modellen

De ontwikkelaar heeft verschillende modellen voor Divi Mega Pro geleverd. Wanneer u de plug-in koopt, zijn deze sjablonen beschikbaar in uw account, op het tabblad Layoutsjablonen voor plug-ins. Deze zijn geweldig om u te helpen bij het ontwerpen van uw megamenu's. Ik zal er een paar gebruiken in mijn voorbeelden.

Divi Mega Pro-menu

Zodra u een megamenu heeft gemaakt, verschijnt het in de lijst. Hier kunt u de menu's bewerken, snel bewerken of verwijderen. U kunt ook zoeken, filteren op datum, bekijken op status, enz. Het biedt ook de unieke Mega Pro-klasse, zodat je ze vanaf hier kunt kopiëren in plaats van ze allemaal te openen om de klas te krijgen.

Wanneer u de klasse kopieert, moet u deze zonder extra spaties plakken. Anders werken niet alle megamenu's op de pagina.

Ik weet zeker dat het niet gemakkelijk zou zijn om toe te voegen, maar een kopieer- en bewerkingsfunctie zou handig zijn. U kunt de Divi-lay-outs in uw bibliotheek opslaan voor hergebruik, maar dit omvat niet de omringende instellingen.

Een trigger toevoegen

In het veld Mega Pro Triggers zie je een enkele Mega Pro-klasse. Kopieer en plak het in het CSS Class-veld van het item dat u als trigger wilt gebruiken.

Om het veld CSS-klasse aan een menu-item toe te voegen, moet u CSS-klassen inschakelen. Selecteer in het menuscherm Scherm opties en CSS-klassen inschakelen.

Plak de CSS-klasse in het menuveld. Dit menu-item geeft nu het megamenu weer bij het zweven en brengt u bij het klikken naar de pagina.

U zult merken dat Divi Mega Pro ook een optie is in de menukoppelingsopties. Ze zijn geweldig om een ​​menu-item aan het menu toe te voegen dat eigenlijk nergens heen gaat. Voeg de CSS-klasse toe zoals elk ander menu-item.

Contactgedeelte over het mega-menu

Het menu wordt geopend met de muisaanwijzer. Ik kan altijd op de link Contact klikken om de contactpagina te openen als ik dat wil. Als ik gewoon het megamenu wilde laten zien, zou ik gewoon de link Contact hoofdmenu kunnen gebruiken en het een andere naam geven (zoals in het bovenstaande voorbeeld).

In deze heb ik de kleuren enigszins gewijzigd met behulp van de achtergrond- en weergave-instellingen in plaats van Divi Builder te gebruiken. Het voegt een balk toe onderaan het menu.

Eenvoudige oproep tot actie met menukolommen

Dit is een van de modellen die meerdere kolommen toevoegen. Ik pas de achtergrond- en lettertypekleuren aan. Ik heb ook een pijl toegevoegd en de breedte 75% gemaakt.

De achtergrondkleur en lettertype-opties voegen iets meer toe om het op te laten vallen. Ik heb de standaard uitlijning verlaten, waardoor het menu aan de rechterkant van het scherm wordt geplaatst. U kunt de positionering aanpassen in de instellingen.

tabs

De tabsjabloon bevat een codemodule met jQuery om het hover-effect te creëren.

Ik heb inhoud aan de tabbladen toegevoegd en deze aan de site aangepast. Elk van de links aan de linkerkant toont een ander tabblad in het grootste deel van het menu.

Informatie Bubbels-configuraties

Voor deze heb ik de CSS-klasse aan een of andere blurb toegevoegd, zodat er een kleine pop-up wordt geopend bij zweven. De pop-up is slechts een afbeelding met een schaduw eronder.

In de afbeelding hierboven zweeft mijn muis over de woorden LIVE WEBSITE. Ik heb de positionering nog niet aangepast, maar je kunt hem gemakkelijk overal laten verschijnen waar je maar wilt.

Voor deze heb ik een pop-up gemaakt om een ​​afbeelding met wat tekst te laten zien. Ik heb de weergaverichting ingesteld op Laag en om het naast de afbeelding die ik wil toevoegen te laten verschijnen, heb ik een marge van -300 toegevoegd.

De pop-up verschijnt nu aan de linker- en bovenkant van de afbeelding als ik erover zweef. Ik heb een transparante achtergrondkleur, randkleur, opvulling en afgeronde omtrek toegevoegd.

Licentie en documentatie

U hebt de keuze tussen vier licenties:

• Enkele site - $ 15 per jaar
• Drie locaties - $ 29 per jaar
• Onbeperkte sites - $ 59 per jaar
• Onbeperkte levensduur - $ 129 een keer

De documentatie wordt verzorgd door een videodemonstratie en een artikel op de site legt de functies uit en legt stap voor stap uit hoe de plug-in te gebruiken.

[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]

Andere Divi-zelfstudies

• 5 websites voor restaurant gebruik Divi thema
• Tekst toevoegen aan een Divi WooCommerce-product
• Hoe de menukleur tussen Divi-pagina's te veranderen
• Hoe de rasters van een blog personaliseren met Divi
• Hoe de rol Divi editor op WordPress
• Een Divi-schuifregelaar op volledig scherm maken
• Hoe de kleur van menu's tussen Divi-pagina's te veranderen
• Functies die u waarschijnlijk niet kent over Divi
• Divi Builder gebruiken op WordPress
• Hoe de Divi-scrolmodule video te gebruiken
• Hoe de Divi Builder Flip-module te gebruiken
• Hoe een getuigenismodule op Divi Builder toe te voegen
• Hoe de Divi-tekstmodule te gebruiken
• Hoe maak je een schuifregelaar op Divi
• Hoe u een Divi-gebruikersrol kunt bewerken
• Hoe de Divi Social Media-module te gebruiken
• Hoe de shopmodule te gebruiken met het thema WordPress Divi
• Hoe de Divi zijbalkmodule te gebruiken
• Hoe de Divi Price Table-module te gebruiken
• Hoe de titelmodule van Divi-publicaties te gebruiken
• Hoe een videomodule van Divi toe te voegen
• Hoe de artikelnavigatiemodule te gebruiken
• Hoe de Divi-zoekmodule te gebruiken
• Hoe de Divi wallet-module te gebruiken
• Hoe de persoonsmodule op Divi Builder te gebruiken
• De walletmodule gebruiken met Divi-filter
• De schuifregelaarmodule op de volledige breedte gebruiken
• Hoe de Divi Builder-beeldmodule te gebruiken
• De navigatiemodule op de volledige breedte van Divi Builder gebruiken
• Hoe de afbeeldingengalerij-module te gebruiken
• Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
• Hoe de Divi Full Width Portfolio Module te gebruiken
• Hoe de Divi header-module over de volle breedte te gebruiken
• Hoe de Divi Counter-module te gebruiken
• De schuifregelaar voor artikelen gebruiken in Divi Builder
• Hoe de Divi Email Optin-module te gebruiken