Hur du använder navigationsmodulen i full bredd på Divi Builder

Divis menymodul för full bredd låter dig placera en navigeringsmeny var som helst på sidan. Detta kan användas för att lägga till en andra sidmeny på sidan, eller den kan användas tillsammans med funktionen Tom sida för att flytta din huvudnavigering till botten av sidan. Du kan till exempel flytta din meny under ditt första avsnitt för att rymma personer med en stor startbild. Detta gör det i princip möjligt för din rubriknavigering att flytta runt på sidan med hjälp av byggaren!

Så här lägger du till en menymodul på hela skärmen på din sida

Innan du kan lägga till en menymodul i full bredd på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats, kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Aktivera Visual Builder när du bläddrar i din webbplats i förgrunden om du är inloggad på din WordPress-instrumentpanel.

När du har angett Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya fullbreddsmoduler kan bara läggas till i fullbreddssektioner. Om du börjar en ny sida, glöm inte att lägga till ett avsnitt med full bredd på din sida först. Vi har några bra handledning om hur du använder Divi-avsnittselement.

Leta reda på menymodulen i full bredd i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva in ordet "Fullwith-meny" eller "fullbreddsmeny" (beroende på din version) och sedan klicka på enter för att automatiskt söka och lägga till hela breddmenymodulen ! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Exempel på användningsfall: Lägga till en fullbreddsmeny under sidhuvudet

I det här exemplet visar jag dig hur du lägger till en fullbreddsmeny under rubriken på en sida.

Här är ett exempel:

Eftersom den här nya helsidesmenyn kommer att ersätta standardnavigeringsmenyn är det nödvändigt att välja den tomma sidmallen så att standardnavigeringsmenyn inte visas högst upp på sidan förutom hela breddmenyn. som jag ska lägga till.

För att redigera din sidmall, gå till din sidredigerare och välj "tom sida" -mallen i området Sidattribut i högra sidofältet.

Eftersom den här modulen visar en meny som redan finns är det viktigt att du redan har skapat menyn innan du lägger till den i menymodulen i full bredd.

När du har skapat din meny använder du den visuella byggaren för att lägga till en fullbreddsavsnitt precis under rubriken på sidan. Lägg sedan till en menymodul i full bredd i avsnittet.

Uppdatera inställningarna för Fullwidth-menyn enligt följande:

Innehållsalternativ

Meny: [välj menyn som ska användas i modulen] Kontext: # 333333

Designalternativ

Textfärg: Ljus Textorientering: Centrummeny Typsnitt: Roboto-meny Teckenstorlek: 20 pixlar

Det är allt!

trick : Du kan använda visningsalternativen under fliken Avancerat för att dölja den här menyn på mobilen och visa en annan meny ovanför rubriken så att mobilanvändare kan se menyn utan att behöva rulla ner på sidan .

Alternativ för fullständig menyinnehåll

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.

Meny

Välj en meny som ska användas i modulen. Du kan skapa nya menyer med hjälp av sidan Utseenden> Menyer från din WordPress-instrumentpanel. Varje gång du skapar en ny meny kan menyn väljas från den här rullgardinsmenyn.

Bakgrundsfärg

Som standard har menymodulen en vit bakgrundsfärg. Om du vill använda en annan färg för din menybakgrund kan du välja den här med färgväljaren.

Listrutans bakgrundsfärg

Som standard ärver du rullgardinsmenyerna i din menymodul bakgrundsfärgen som definierades i föregående inställning. Om du vill att dina rullgardinsmenyer ska ha sin egen färg kan du välja en anpassad färg med den här inställningen.

Mobil meny bakgrundsfärg

På mobilen omvandlas menymodulen till en annan design och mer anpassad för mobil. Du kan styra bakgrundsfärgen på rullgardinsmenyn för mobil oberoende av dess motsvarighet på skrivbordet.

Administrationsetikett

Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Full-width meny design alternativ

På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.

Öppna undermenyer

Som standard öppnas alla undermenyer som en rullgardinsmeny under huvudmenyraden. Om du placerar din meny längst ner på sidan och din meny har långa rullgardinsmenyer, kanske du vill öppna dessa menyer ovanför menymodulen så att menyn inte sträcker sig utanför webbläsarfönstret.

Gör menyer med full bredd

Som standard placeras topplänkar med menymodulen inom din standardinnehållsbredd. Om du vill ta bort denna begränsning och låta dina länkar köra hela sidans bredd, med början längst till vänster på skärmen, kan du aktivera det här alternativet.

Färg på rullgardinsmenyn

I rullgardinsmenyer är länkarna åtskilda av en 1 pixel linje. Om du vill anpassa färgen på den här raden kan du välja en anpassad färg med hjälp av färgväljaren i den här inställningen.

Textfärg

Här kan du välja värdet på din text. Om du arbetar med en mörk bakgrund bör din text vara på. Om du arbetar med en ljus bakgrund bör din text vara mörk.

Textorientering

Detta styr hur din text är anpassad i modulen. Du kan välja mellan vänster, höger och centrerad.

Aktiv länkfärg

Färgerna på de aktiva länkarna är markerade i menymodulen för att visa användaren deras aktuella plats. Du kan ändra markeringsfärgen som används för dessa aktiva länkar med den här inställningen.

Färg på texten på rullgardinsmenyn

Som standard ärver texten i modulens rullgardinsmenyer färgen på huvudmenytexten. Du kanske vill ändra den här färgen om du har definierat en anpassad bakgrundsfärg för rullgardinsmenyn.

Färg på mobilmenytexten

Som standard ärver texten i modulens rullgardinsmenyer färgen på huvudmenytexten. Du kanske dock vill ändra den här färgen om du har ställt in en anpassad bakgrundsfärg för mobilmeny.

Meny typsnitt

Du kan ändra teckensnittet för ditt menyfont genom att välja önskat teckensnitt från rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrykningsalternativ.

Teckensnittsmeny

Här kan du justera storleken på ditt menyteckensnitt. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Färg på menytexten

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din digitala text väljer du önskad färg från färgväljaren med det här alternativet.

Avstånd mellan menybokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din digitala text, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Höjd på menyn

Linjehöjd påverkar utrymmet mellan varje rad i din numeriska text Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfält till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Avancerade menyalternativ för fullbredd

På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

CSS klass

Ange de valfria CSS-klasser som ska användas för denna modul. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-barntema eller i den anpassade CSS-stilmall som du lägger till på din sida eller webbplats. webbplats med Divi-temaalternativ eller Divi Builder sidinställningar.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.

Animering av rullgardinsmenyn

Du kan välja mellan olika animationer som ska användas när en rullgardinsmeny är aktiverad. Som standard är animationen inställd på att blekna, men du ändrar den till: expandera, dra eller vända.

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.

[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=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED 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”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Så här använder du Divi Builder Full-Width Navigation Module