Gå till innehållet

Hur man skapar en rullgardinsmenyknapp med hjälp av Divi-menymodulen i full bredd

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

En rullgardinsmenyknapp kan vara mycket användbar när du utformar en webbplats. Förutom huvudmenyn kan vissa områden på en webbplats kräva en rullgardinsmeny som består av underobjekt. Vi ser att de används för saker som blogginläggskategorier, listor och formulärposter. Men de kan till och med användas för en uppmaning till handling.

I den här handledningen visar vi dig hur du skapar en rullgardinsmenyknapp med Divis menymodul i full bredd. För att göra detta skapar vi först en meny i WordPress. Vi kommer sedan att använda Divis menymodul i full bredd för att visa den här menyn med anpassade stilar med Divi-byggaren och lite anpassad CSS. Resultatet är en praktisk och elegant rullgardinsmenyknapp.

Låt oss börja.

undersökningen

Här är en översikt över den nedrullningsbara menyknappen som vi kommer att integrera i denna handledning.

Listrutan Översikt

Vad du behöver för att komma igång

Till att börja med, om du inte redan har gjort det, installera och aktivera det installerade Divi-temat (eller Divi Builder-tillägget om du inte använder Divi-temat). Vi använder Divi-byggaren i början för att utforma rullgardinsmenyknappen.

Det är allt !

Skapa en meny i WordPress

Innan vi börjar skapa rullgardinsmenyn med Divi Builder, måste vi först skapa en WordPress-meny som vi vill använda för menymodulen i full bredd. För att göra detta, gå till WordPress-instrumentpanelen och gå till Utseende> Menyer. Skapa sedan en ny meny genom att klicka på skapa en ny menylänk, ange ett menynamn och klicka på knappen "Skapa meny".

Skapa en meny på wordpress

För tillfället kan du skapa anpassade länkar med "#" som platshållare för webbadressen tillsammans med länktexten.

Strukturera menyalternativen så att toppmenyalternativet har länken "Läs mer" med tre undermenyposter.

Wordpress menyorganisation

Efter det ska du spara menyn.

Hur man skapar en rullgardinsmenyknapp med Divi-menymodulen i full bredd

När menyn har skapats kan vi börja designa rullgardinsmenyknappen med Divi. För att starta projektet skapar du en ny sida i WordPress och använder Divi Builder för att redigera sidan i frontend (visual builder).

Efter det har du en tom duk för att börja designa i Divi.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Skapa falskt innehåll

Lägg först till en rad med en kolumn i standardstandardavsnittet.

Lägg till en textmodul

Lägg sedan till en textmodul till raden med följande innehåll:

Divi-meny Ditt innehåll går här. Redigera eller ta bort denna text inbyggd eller i modulen Innehållsinställningar. Du kan också utforma alla aspekter av detta innehåll i modulen Designinställningar och till och med tillämpa anpassad CSS på denna text i modulen Avancerade inställningar.

Uppdatera sedan designparametrarna enligt följande:

Stoppningssektion

Uppdatera sedan avsnittinställningen med följande objekt:

  • Polstring: 0px nedåt

Divi-sektion med låg marginal

Linjeavstånd och kant

När sektionsfyllningen har uppdaterats öppnar du radinställningarna och tilldelar den en fyllning och en liten kant.

  • Klädsel: 10vw längst upp, 10vw längst ner, 5vw till vänster, 5vw till höger
  • Breddens bredd: 1px

Divi-modul sektionskonfiguration

Skapa rullgardinsmenyknappen

För att skapa rullgardinsmenyknappen använder vi en menymodul i full bredd. Detta gör att vi kan lägga till menyn som skapats tidigare.

Lägga till menyn i full bredd

För att skapa menymodulen i full bredd lägger du till ett nytt avsnitt med full bredd under det aktuella standardsnittet.

Skapa en divi-byggare-sektion i full bredd

Lägg sedan till en menymodul i full bredd på raden.

Divi-meny i helskärm

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

I popup-fönstret för hela menyinställningar (under Innehåll) använder du rullgardinsmenyn för att välja menyn du vill visa. Detta borde vara samma meny som vi skapade tidigare med namnet "rullgardinsmeny".

Ta sedan bort den vita vita bakgrundsfärgen för menyn.

Helskärmsmeny bakgrundsfärgkonfigurationNär du har lagt till menyn med menyn med fullbredd sparar du inställningarna. Vi kommer tillbaka till den här modulen för att avsluta designen. Men för tillfället lägger vi till en bakgrund till hela bredden.

Uppdatera designen för hela breddssektionen

Öppna inställningarna för hela breddssektionen och uppdatera följande:

  • Vänster bakgrundsgradient: # 0047d6
  • Höger bakgrundsgradient Färg: # 45b2ff

Divi bakgrundssektion

  • Maximal bredd: 240px
  • Avsnitt Justering: centrum

Jag ställde in den maximala sektionsbredden till 240 pixlar, eftersom det matchar bredden på standardmenybredden i Divi. Det är också en bra storlek för en knapp på skrivbordet och mobilen.

Inställningar för Divi-avsnitt

  • Rundade hörn: 5px

Konfiguration av divi-gränsinställningar

På fliken Avancerat lägger du till följande CSS-klass, överflöd och Z-index.

  • CSS-klass: rullgardins-knapp
  • Horisontellt överflöde: synligt
  • Vertikalt överflöde: synligt
  • Z-index: 14

CSS-klassen behövs så att vi kan rikta in vår externa CSS i det här avsnittet senare. Överflödet måste ställas in på synligt så att vi kan se rullgardinsmenyn. Och Z-indexet hjälper dig att hålla rullgardinsmenyn över allt annat innehåll på sidan.

Inställningssektionens parameterdiviDesigna Fulwidth-menyn

Vi är nu redo att utforma menymodulen Fulwidth. Öppna modulens inställningar för fullbredd och uppdatera följande:

  • Skapa menylänkar i full bredd: JA
  • Textfärg på dropdown: #ffffff
  • Färg på mobilmenyteksten: #ffffff
  • Justering av texten: centrum
  • Bakgrundsfärg på rullgardinsmenyn: # 45b2ff
  • Färg på rullgardinsmenyn: #ffffff
  • Bakgrundsfärg på menyn: #45b2ff

Parameterinställningar för helskärmsmenymodulstil

  • Teckensnittmeny: Koda utan halvkondenserad
  • Typ av teckensnitt: Halv fet
  • Meny textfärg: #ffffff
  • Menytekststorlek: 16px
  • Menyavstånd: 2px
  • Animering av rullgardinsmenyn: Expandera

Teckensnitt helskärmsmeny modul divi

Placera rullgardinsmenyn

För att knappen ska överlappa den undre kanten måste vi lägga till en negativ övre marginal som är exakt halva höjden på knappen.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Marginal: -40.5px hög

Menyavsnitt för hela bredd divi

Som du kan se upptar svävarutrymmet ännu inte hela knappområdet och rullgardinsmenyn är fortfarande till höger. För att lösa detta problem kan vi lägga till anpassad CSS.

Lägga till anpassad CSS

Innan du lägger till den anpassade CSS, se till att lägga till CSS-ID "rullgardinsmenyn" i hela breddssektionen (inte modulen).

Avsnitt klassjusteringsmodul diviUtan CSS-ID fungerar CSS nedan inte.

För att lägga till det anpassade CSS, öppna sidinställningarna och klistra in följande kod i den anpassade CSS-inmatningsrutan.

.dropdown-knapp .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; }. dropdown-knapp .fullbredd-meny li> a {padding-bottom: 0px; linjehöjd: 81px; }. dropdown-knapp .fullbredd-meny li li a {padding: 6px 0px; linjehöjd: 1.6 em; }. dropdown-knapp .et_mobile_menu li a: sväva, .nav ul li a: sväva,. dropdown-knapp .fullbredd-meny a: sväva {opacitet: 1; }. nedgångsknapp .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! viktigt; }. nedgångsknapp. fullbredd-meny li {display: block; }. dropdown-knapp .fullbredd-meny .meny-objekt-har-barn> a: första barn: efter {höger: 20px; }

CSS anpassa divisidan

Här är det slutliga resultatet

Divi rullgardinsmeny animering

Avslutande tankar

Att skapa en rullgardinsmenyknapp med Divis menymodul i full bredd innebär några viktiga steg. Först skapar vi menyn i WordPress som vi vill integrera i modulen. Sedan använder vi Divi-byggaren för och utformar menymodulen i full bredd efter eget tycke. Sedan lägger vi till anpassad CSS för att polera designen både på skrivbordet och på mobilen. Resultatet är en vacker (och användbar) rullgardinsmeny rullad ut för skrivbordssväng och mobilklick. Hoppas att du tycker att det här är ett användbart komplement till din designverktygssats.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer