Hvordan bruke navigasjonsmodulen i full bredde på Divi Builder

Divis Full Width Menu-modul lar deg plassere en navigasjonsmeny hvor som helst på siden. Dette kan brukes til å legge til en annen sidemeny på siden, eller den kan brukes sammen med funksjonen Tom side for å flytte din primære navigasjon til bunnen av siden. For eksempel kan du flytte menyen under den første delen for å imøtekomme personer med et stort oppstartsbilde. Dette gjør i utgangspunktet at headernavigasjonen din kan bevege seg rundt på siden ved hjelp av byggherren!

Slik legger du til en menymodul i fullskjerm på siden din

Før du kan legge til en menymodul i full bredde på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på din nettstedet Web, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Aktiver Visual Builder når du surfer på din nettstedet Web i forgrunnen hvis du er logget på WordPress-dashbordet.

Når du har angitt Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye fullbreddemoduler kan bare legges til i fullbreddeseksjoner. Hvis du starter en ny side, må du huske å legge til en fullbreddeseksjon på siden din først. Vi har noen gode veiledninger om hvordan du bruker Divi-seksjonselementer.

Finn menymodulen i full bredde i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "Fullwith menu" eller "full width menu" (avhengig av din versjon) og deretter klikke enter for automatisk å søke og legge til fullbreddemenymodulen ! Når modulen er lagt til, blir du møtt av listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Eksempel på brukstilfelle: Legge til en fullbreddemeny under sideoverskriften

For dette eksemplet vil jeg vise deg hvordan du legger til en fullbreddemeny under toppteksten på en side.

Her er et eksempel:

Siden denne nye helsidesmenyen erstatter standard hovednavigasjonsmeny, er det nødvendig å velge den tomme sidemalen slik at standardnavigasjonsmenyen ikke vises øverst på siden i tillegg til menyen med full bredde. som jeg vil legge til.

For å redigere sidemalen, gå til sideditoren og velg "blank side" -malen i området Sideattributter på høyre sidefelt.

Siden denne modulen viser en meny som allerede eksisterer, er det viktig at du allerede har opprettet menyen før du legger den til menymodulen i full bredde.

Når du har opprettet menyen, kan du bruke den visuelle byggeren til å legge til en fullbreddsdel rett under toppteksten på siden. Deretter legger du til en menymodul i full bredde i seksjonen.

Oppdater Fullwidth-menyinnstillingene som følger:

Innholdsalternativer

Meny: [velg menyen som skal brukes i modulen] Kontekst: # 333333

Designalternativer

Tekstfarge: Lys Tekstorientering: Sentermeny Font: Roboto-meny Fontstørrelse: 20px

Det er det!

Trick : Du kan bruke visningsalternativene under Avansert-fanen for å skjule denne menyen på mobilen og vise en annen meny over overskriften, slik at mobilbrukere kan se menyen uten å måtte bla nedover siden .

Fullverdig menyinnholdsalternativer

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

Meny

Velg en meny du vil bruke i modulen. Du kan opprette nye menyer ved hjelp av siden Utseende> Menyer fra WordPress-dashbordet. Hver gang du oppretter en ny meny, kan menyen velges fra denne rullegardinmenyen.

Bakgrunnsfarge

Som standard har menymodulen en hvit bakgrunnsfarge. Hvis du vil bruke en annen farge for menybakgrunnen din, kan du velge den her ved hjelp av fargevelgeren.

Rullegardinmenyens bakgrunnsfarge

Som standard arver rullegardinmenyene i menymodulen bakgrunnsfargen som ble definert i forrige innstilling. Hvis du vil at rullegardinmenyene skal ha sin egen farge, kan du velge en tilpasset farge ved hjelp av denne innstillingen.

Mobil meny bakgrunnsfarge

På mobil blir menymodulen forvandlet til et annet design og mer tilpasset mobil. Du kan kontrollere bakgrunnsfargen på rullegardinmenyen, uavhengig av den stasjonære datamaskinen.

Administrasjonsmerke

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Full bredde meny design alternativer

I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.

Åpne undermenyer

Som standard åpnes alle undermenyer som en rullegardinmeny under hovedmenylinjen. Hvis du plasserer menyen nederst på siden og menyen har lange rullegardinmenyer, vil du kanskje åpne disse menyene over menymodulen slik at menyen ikke strekker seg utenfor nettleservinduet.

Lag menykoblinger med full bredde

Som standard plasseres koblinger på toppnivå med menymodulen innenfor standard innholdsbredde. Hvis du vil fjerne denne begrensningen og få koblingene til å kjøre hele bredden på siden, helt til venstre på skjermen, kan du aktivere dette alternativet.

Farge på rullegardinmenyen

I rullegardinmenyer er koblinger atskilt med en 1-piksel linje. Hvis du vil tilpasse fargen på denne raden, kan du velge en tilpasset farge ved hjelp av fargevelgeren i denne innstillingen.

Tekstfarge

Her kan du velge verdien på teksten din. Hvis du jobber med en mørk bakgrunn, bør teksten være på. Hvis du jobber med en lys bakgrunn, bør teksten din være mørk.

Tekstorientering

Dette styrer hvordan teksten din er justert i modulen. Du kan velge mellom Venstre, Høyre og Senter.

Aktiv lenkefarge

Fargene på de aktive koblingene er uthevet i menymodulen for å vise brukeren deres nåværende posisjon. Du kan endre høydepunktfargen som brukes for disse aktive koblingene ved hjelp av denne innstillingen.

Farge på teksten i rullegardinmenyen

Som standard arver teksten i modulens rullegardinmenyer fargen på hovedmenyteksten. Det kan imidlertid være lurt å endre denne fargen hvis du har definert en egendefinert bakgrunnsfarge for rullegardinmenyen.

Farge på mobilmenyteksten

Som standard arver teksten i rullegardinmenyene til modulen fargen på hovedmenyteksten. Det kan imidlertid være lurt å endre denne fargen hvis du har angitt en tilpasset bakgrunnsfarge på mobilmenyen.

Meny skrifttype

Du kan endre fonten til menyfonten din ved å velge ønsket font fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Skriftstørrelsesmeny

Her kan du justere størrelsen på menyfonten. Du kan dra glidebryteren for å øke eller redusere størrelsen på teksten, eller angi verdien for ønsket tekststørrelse direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Farge på menyteksten

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på den digitale teksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Avstand mellom menybokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i den numeriske teksten, bruker du glidebryteren for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på menylinjen

Linjehøyde påvirker mellomrommet mellom hver linje i den numeriske teksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Avanserte menyalternativer for fullbredde

I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

CSS ID

Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Skriv inn de valgfrie CSS-klassene som skal brukes for denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet ditt eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt. nettstedet Web ved å bruke Divi-temaalternativer eller Divi Builder-sideinnstillinger.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.

Animasjon av rullegardinmenyen

Du kan velge mellom forskjellige animasjoner som skal brukes når en rullegardinmeny er aktivert. Som standard er animasjonen satt til å falme, men du endrer den til: utvide, dra eller vende.

synlighet

Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere 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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Slik bruker du Divi Builder Full-Width Navigation Module