Divis modul med fuld bredde-menu giver dig mulighed for at placere en navigationsmenu hvor som helst på siden. Dette kan bruges til at tilføje en anden sidemenu til siden, eller den kan bruges sammen med funktionen Blank Page til at flytte din hovednavigation til bunden af siden. For eksempel kan du flytte din menu under dit første afsnit for at rumme mennesker med et stort startbillede. Dette tillader grundlæggende din headernavigation at bevæge sig rundt på siden ved hjælp af bygherren!
Sådan tilføjes et fuldskærmsmenumodul til din side
Før du kan tilføje et menumodul i fuld bredde til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din Websted, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Aktivér Visual Builder når du gennemser din Websted i forgrunden, hvis du er logget ind på dit WordPress-dashboard.
Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye fuldbreddemoduler kan kun tilføjes i fuldbreddesektioner. Hvis du starter en ny side, skal du først glemme at tilføje en fuldbreddesektion til din side. Vi har nogle gode tutorials om, hvordan du bruger Divi-sektionselementer.
Find menumodulet i fuld bredde på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler kan søges, hvilket betyder, at du også kan skrive ordet "Fullwith menu" eller "full-wide menu" (afhængigt af din version) og derefter klikke på enter for automatisk at søge og tilføje menuen i fuld bredde ! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Eksempel på brugssag: Tilføjelse af en menu med fuld bredde under sideoverskriften
I dette eksempel viser jeg dig, hvordan du tilføjer en menu med fuld bredde under overskriften på en side.
Her er et eksempel:
Da denne nye helsidesmenu erstatter standardnavigationsmenuen, er det nødvendigt at vælge den tomme sideskabelon, så standardnavigationsmenuen ikke vises øverst på siden ud over menuen i fuld bredde. som jeg vil tilføje.
For at redigere din sideskabelon skal du gå til din sideditor og vælge skabelonen "tom side" i området Sideattributter i højre sidepanel.
Da dette modul viser en menu, der allerede findes, er det vigtigt, at du allerede har oprettet menuen, før du tilføjer den til menuen i fuld bredde.
Når du har oprettet din menu, skal du bruge den visuelle builder til at tilføje en sektion med fuld bredde lige under sideoverskriften på siden. Derefter tilføjes et menu-modul i fuld bredde til sektionen.
Opdater menuindstillingerne for fuldbredde som følger:
Indholdsindstillinger
Menu: [vælg den menu, der skal bruges i modulet] Kontekst: # 333333
Design muligheder
Tekstfarve: Lys Tekstorientering: Centermenuskrifttype: Roboto-menu Skriftstørrelse: 20px
Det er alt!
Trick : Du kan bruge visningsindstillingerne under fanen Avanceret til at skjule denne menu på mobilen og vise en anden menu over overskriften, så mobilbrugere kan se menuen uden at skulle rulle ned på siden .
Indstillinger for fuldindholdsmenuindhold
I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.
Menu
Vælg en menu, der skal bruges i modulet. Du kan oprette nye menuer ved hjælp af siden Udseende> Menuer fra dit WordPress-dashboard. Hver gang du opretter en ny menu, kan menuen vælges fra denne rullemenu.
Baggrundsfarve
Som standard har menumodulet en hvid baggrundsfarve. Hvis du vil bruge en anden farve til din menubaggrund, kan du vælge den her ved hjælp af farvevælgeren.
Drop-down menu baggrundsfarve
Som standard arver rullemenuerne i dit menumodul baggrundsfarven, der er defineret i den foregående indstilling. Hvis du ønsker, at dine rullemenuer skal have deres egen farve, kan du vælge en brugerdefineret farve ved hjælp af denne indstilling.
Mobil menu baggrundsfarve
På mobil omdannes menumodulet til et andet design og mere tilpasset til mobil. Du kan styre baggrundsfarven på rullemenuen til mobilen uafhængig af dens desktop-modstykke.
Administration etiket
Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Fuld bredde menu design muligheder
Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.
Åbn undermenuer
Som standard åbner alle undermenuer som en rullemenu under hovedmenulinjen. Hvis du placerer din menu nær bunden af siden, og din menu indeholder lange rullemenuer, kan du åbne disse menuer over menuen, så menuen ikke strækker sig ud over browservinduet.
Lav menuer med fuld bredde
Som standard placeres topniveau-links med menu-modulet inden for din standardindholdsbredde. Hvis du vil fjerne denne begrænsning og få dine links til at køre hele sidens bredde, startende længst til venstre på skærmen, kan du aktivere denne mulighed.
Farve på rullemenuen
I rullemenuer er links adskilt af en 1 pixel linje. Hvis du vil tilpasse farven på denne række, kan du vælge en brugerdefineret farve ved hjælp af farvevælgeren i denne indstilling.
Tekstfarve
Her kan du vælge værdien af din tekst. Hvis du arbejder på en mørk baggrund, skal din tekst være tændt. Hvis du arbejder med en lys baggrund, skal din tekst være mørk.
Tekstorientering
Dette styrer, hvordan din tekst er justeret i modulet. Du kan vælge mellem Venstre, Højre og Center.
Aktiv link farve
Farverne på de aktive links er fremhævet i menumodulet for at vise brugeren deres aktuelle placering. Du kan ændre den fremhævningsfarve, der bruges til disse aktive links ved hjælp af denne indstilling.
Farve på teksten i rullemenuen
Som standard arver teksten i modulets rullemenuer farven på hovedmenuteksten. Du kan dog ændre denne farve, hvis du har defineret en brugerdefineret rullemenu baggrundsfarve.
Farve på den mobile menutekst
Som standard arver teksten i modulets rullemenuer farven på hovedmenuteksten. Det kan dog være en god idé at ændre denne farve, hvis du har indstillet en brugerdefineret baggrundsfarve til mobilmenuen.
Menu skrifttype
Du kan ændre skrifttypen på din menuskrifttype ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Skriftstørrelsesmenu
Her kan du justere størrelsen på din menuskrifttype. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Farve på menuteksten
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din digitale tekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Mellemrum i menubogstaver
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge afstanden mellem hvert bogstav i din numeriske tekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højde på menulinjen
Linjehøjde påvirker mellemrummet mellem hver linje i din numeriske tekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Avancerede menuindstillinger for fuldbredde
På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at skabe brugerdefineret CSS-styling. Du kan tilføje flere klasser, adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-barnetema eller i det tilpassede CSS-stylesheet, du tilføjer til din side eller hjemmeside. Websted ved at bruge Divi-temaindstillinger eller Divi Builder-sideindstillinger.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.
Animation af rullemenuen
Du kan vælge mellem forskellige animationer, der skal bruges, når en rullemenu er aktiveret. Som standard er animationen indstillet til at falme, men du ændrer den til: udvid, træk eller vip.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne visse elementer fra siden.
[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