Mega menuer er et populært designelement, der kan give din Websted et udbrud af elegance, mens du tilbyder besøgende et ekstra navigationslag. Der er flere måder at tilføje mega-menuer til Divi. En af de nemmeste metoder, jeg har brugt, er atet tredjeparts plug-in kaldet Divi Mega Pro .
Divi Mega Pro gør det nemt at oprette mega-menuer ved hjælp af Divi Builder. Hver menu kan føjes til ethvert element ved hjælp af en CSS-klasse. Dette betyder, at du kan tilføje et Divi-layout til ethvert link i menuen, men du kan gå endnu længere og tilføje dem til ethvert element i et Divi-layout bare ved at tilføje en CSS-klasse.
Det er ideelt til at oprette menuer og pop op-vinduer med butiksmoduler, billeder, skydere, porteføljer, ikoner, blurb, videoer, blogs osv. Det fungerer også med Extra.
Opret en Mega Pro Mega Menu
Divi Mega Pro-menuen føjes til dashboardmenuen. Her kan du indtaste din licensnøgle, se de menuer, du har oprettet, og oprette en ny menu. Når du klikker for at tilføje en ny menu, vil du se en editor til menuposttypen. Skærmen er enkel, men der foregår meget her.
Publisher - du kan oprette mega-menuen eller et værktøjstip ved hjælp af Divi Builder.
Mega Pro Baggrund - du kan vælge baggrunds- og skrifttypefarver.
Se steder - vælg alle sider eller navngiv specifikke sider, og indtast derefter undtagelser.
Mega Pro Animation - vælg en animation. Vælg mellem offset, offset, perspektiv, fade eller skala.
Mega Pro Triggers - tilføj en trigger som en CSS-vælger. Når du har gemt det, vil du se den CSS-klasse, som du skal indsætte i CSS-klassefeltet i et menupunkt, modul, række eller sektion. Dette er hvad der klikkes eller holdes over for at få vist menuen. Alt kan bruges som udløser og ikke kun som et menupunkt. Dette betyder, at du også kan bruge Divi Mega Pro til at oprette pop op-vinduer eller værktøjstip.
Mega Pro skærmindstillinger : vælg visningsretningen (øverst eller nederst), indtast top- og bundmargenerne i pixels, vælg en procentdel af bredden og aktiver en pil. Aktivering af pilen afslører flere tilpasninger, hvor du kan vælge piletype (trekant eller rund), vælge farve, indstille bredde og højde og få vist pilen.
tilpasninger luk-knappen: aktiver luk-knappen på skrivebordet eller på mobilen og tilpas luk-knappen. Hvis du aktiverer det, vises der tilpasninger til tekstfarve, baggrundsfarve, skriftstørrelse, kantradius, udfyldning og visning.
Yderligere parametre Mega Pro - vælg typen af trigger (svævet eller klikket), typen af output (svævet eller klikket) og indtast udgangsforsinkelsen.
Divi Mega Pro-modeller
Udvikleren har leveret flere modeller til Divi Mega Pro. Når du køber pluginet, er disse skabeloner tilgængelige på din konto i fanen Plugin Layout Templates. Disse er gode til at hjælpe dig med at begynde at designe dine mega-menuer. Jeg vil bruge nogle få i mine eksempler.
Divi Mega Pro Menu
Når du opretter en mega-menu, vises den på listen. Her kan du redigere, hurtigt redigere eller slette menuerne. Du kan også søge, filtrere efter dato, se efter status osv. Det giver også den unikke Mega Pro-klasse, så du kan kopiere dem herfra i stedet for at åbne hver enkelt for at få klassen.
Når du kopierer klassen, skal du huske at indsætte den uden yderligere mellemrum. Ellers fungerer alle mega-menuerne på siden ikke mere.
Jeg er sikker på, at det ikke ville være let at tilføje, men en kopierings- og redigeringsfunktion ville være praktisk. Du kan gemme Divi-layoutene i dit bibliotek til genbrug, men dette inkluderer ikke de omgivende indstillinger.
Tilføjelse af en trigger
I feltet Mega Pro Triggers vil du se en enkelt Mega Pro-klasse. Kopier og indsæt det i CSS-klasse-feltet på det element, du vil bruge som udløser.
For at føje CSS-klasse-feltet til et menupunkt, skal du aktivere CSS-klasser. Fra menuskærmen skal du vælge Skærmindstillinger og aktiver CSS klasser.
Indsæt CSS-klassen i menufeltet. Nu viser dette menupunkt mega-menuen, når du holder markøren, og fører dig til siden ved klik.
Du vil bemærke, at Divi Mega Pro også er en mulighed i menulinkindstillingerne. De er gode til at tilføje et menupunkt til menuen, der faktisk ikke går nogen steder. Tilføj CSS-klassen som ethvert andet menupunkt.
Kontakt sektion på mega menuen
Menuen åbnes svævende. Jeg kan altid klikke på linket Kontakt for at åbne kontaktsiden, hvis jeg vil. Hvis jeg bare ville have mega-menuen vist, kunne jeg bare bruge linket Kontakt hovedmenu og omdøbe det (som i eksemplet ovenfor).
I denne ændrede jeg farverne lidt ved hjælp af baggrunds- og skærmindstillingerne i stedet for at bruge Divi Builder. Det tilføjer en bjælke nederst i menuen.
Enkel opfordring til handling med menukolonner
Dette er en af de modeller, der tilføjer flere kolonner. Jeg foretager justeringer af baggrunds- og skrifttypefarver. Jeg tilføjede også en pil og lavede bredden 75%.
Baggrundsfarven og skrifttypemulighederne tilføjer lidt mere for at få det til at skille sig ud. Jeg forlod standardjusteringen, som placerer menuen til højre for skærmen. Du kan justere placeringen i indstillingerne.
faner
Faneskabelonen indeholder et kodemodul med jQuery for at skabe svæveeffekten.
Jeg tilføjede indhold til fanerne og tilpassede dem til webstedet. Hvert af linkene til venstre viser en anden fane i det meste af menuen.
Info Bubbles konfigurationer
Til denne tilføjede jeg CSS-klassen til en eller anden blurb, så den åbner en lille pop-up-svæver. Pop-up er kun et billede med en skygge nedenfor.
På billedet ovenfor svæver min mus over ordene LIVE WEBSITE. Jeg har ikke justeret placeringen endnu, men det er let at få det til at vises hvor som helst du vil.
Til denne oprettede jeg en popup for at vise et billede med lidt tekst. Jeg har indstillet skærmretningen til Lav, og for at få den til at vises ud for det billede, jeg vil tilføje, har jeg tilføjet en margen på -300.
Pop op vises nu til venstre og øverst på billedet, når jeg holder markøren over det. Jeg tilføjede en gennemsigtig baggrundsfarve, kantfarve, udfyldning og afrundet omrids.
Licens og dokumentation
Du har valget mellem fire licenser:
- Enkelt websted - $ 15 pr. År
- Tre steder - $ 29 om året
- Ubegrænsede websteder - $ 59 pr. År
- Ubegrænset levetid - $ 129 én gang
Dokumentationen leveres af en videodemonstration, og en artikel på websitet forklarer funktionerne og trin for trin forklarer, hvordan man bruger plugin.
[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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column" /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 THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
Hej:
Hvor kan jeg se, hvordan et pop-up vindue er lavet?
Jeg har ingen måde at få det på. Jeg var kun i stand til at oprette en megamenu, men pop op-vinduerne, jeg linkede, åbnes ikke.
Jeg stødte på et par e-mails med Divi Life, men de afklarede ikke noget for mig.
Merci beaucoup.
Optin Monster: https://optinmonster.com