Helskjermmenymodulen på Divi gjør det enkelt å legge til vakre fargede overskrifter øverst på sidene dine (eller hvor som helst på nettstedet ditt, hvis du ønsker det). Disse modulene kan bare plasseres i full bredde.
Slik legger du til Divi Full Screen Menu-modulen
Før du kan legge til en fullskjermmenymodul 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 moduler for fullskjermmeny kan bare legges til i fullbreddeseksjoner. Hvis du starter en ny side, må du huske å legge til en fullbreddeseksjon på siden din først.
Finn toppskjermmodulen i fullskjerm 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 "fullskjermoverskrift" og deretter klikke "Enter" for automatisk å finne og legge til fullskjermoverskriftsmodul! Når modulen er lagt til, vil du bli møtt av modulalternativlisten. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .
Eksempel på brukstilfelle: Legge til en fullskjermoverskrift på en Om-side
For dette eksemplet vil jeg vise deg hvordan du bruker Fullwidth header-modulen for å legge til en header med tilpasset tekst og et bakgrunnsbilde.
Alle fullskjermmoduler er bare tilgjengelige når du bruker seksjoner i fullskjerm. Bruk Visual Builder til å sette inn en ny fullskjermsdel. Deretter legger du til en personmodul i seksjonen.
Oppdater toppskjerminnstillingene for fullskjerm som følger:
Innholdsalternativer
Tittel: Om oss Tekst: We Do Things Different ... Bakgrunnsbilde URL: [sett inn 1920 x 800 bilde] Bakgrunnsfarge: rgba (0,0,0,0.2 , XNUMX)
Designalternativer
Tekst- og logoorientering: Midtknapp Rull ned-knapp: JA-ikon: [velg ikon] Rull ned-ikon Farge: # fcbf00 Rull-ikon: 50 piks Tekstfarge: Lys Tekstfarge: # fcbf00 Skrift Tittel: Åpen uten, fet skrift, store bokstaver Tittel Fontstørrelse: 60px (desktop), 40px (tablet), 30px (telefon) Undertittel Fontstørrelse: 25px
Avanserte alternativer (tilpasset CSS)
Hovedelement:
møbeltrekk: 100px 0;
Det er det!
Innholdsalternativer for fullskjermhode
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.
Tittel
Skriv inn tittelen på siden din her.
Teksttekst
Hvis du vil bruke en undertekst, kan du legge den til her. Teksten din vises under tittelen din med en liten skrift.
Knapp # 1 Tekst
Skriv inn teksten for knappen.
Knapp # 2 Tekst
Skriv inn teksten for knappen.
Innhold
Her kan du definere innholdet som skal plasseres under overskriften og tittelteksten.
Knapp URL 1
Skriv inn URL-adressen til knappen.
Knapp URL 2
Skriv inn URL-adressen til knappen.
URL for logobilde
Last opp ønsket bilde eller skriv inn URL-en til bildet du vil se.
URL til toppbilde
Last opp ønsket bilde eller skriv inn URL-en til bildet du vil se.
URL til bakgrunnsbilde
Hvis dette er angitt, vil dette bildet brukes som bakgrunn for denne modulen. For å fjerne et bakgrunnsbilde, bare fjern URL-en fra innstillingsfeltet. Bakgrunnsbilder vises øverst på bakgrunnsfargene, noe som betyr at bakgrunnsfargen ikke vil være synlig når et bakgrunnsbilde blir brukt.
Bakgrunnsfarge
Definer en egendefinert bakgrunnsfarge for modulen din, eller la den være tom for å bruke standardfargen.
Bakgrunnsoverleggsfarge
Velg en bakgrunnsoverleggsfarge som plasseres over bakgrunnsbildet. Halvtransparente overleggsbilder kan skape kule effekter når de plasseres på bakgrunnen.
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.
Alternativer for design for full breddehode
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.
Orientering av tekst og logo
Dette kontrollerer hvordan teksten din blir justert i modulen.
Lag en fullskjerm
Her kan du velge om overskriften skal utvides til fullskjermstørrelse.
Bruk Parallax-effekten
Hvis aktivert, vil bakgrunnsbildene dine ha en fast posisjon som bla, og skape en morsom parallakseffekt.
Parallax-metoden
Definer metoden som brukes for parallakseffekten.
Vis rull ned-knapp
Her kan du velge om rull ned-knappen vises.
icon
Velg et ikon som skal vises for rulle ned-knappen.
Bla ned Fargeikon
Som standard arver rullegardinikonet fargen på toppteksten (hvit eller grå). Du kan endre denne fargen ved å justere fargen i dette alternativet ved hjelp av fargevelgeren.
Rull ned Ikonstørrelse
Bruk denne innstillingen for å øke eller redusere størrelsen på rulle ned-ikonet som vises nederst i overskriften.
Vertikal bildejustering
Dette styrer orienteringen av bildet i modulen.
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.
Vertikal justering av teksten
Denne innstillingen bestemmer den vertikale justeringen av innholdet ditt. Innholdet ditt kan sentreres vertikalt eller justeres nederst.
Tittel skrifttype
Du kan endre fonten til tittelteksten 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.
Tittel skriftstørrelse
Her kan du justere størrelsen på tittelteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inndatafeltet 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.
Titteltekstfarge
Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre tekstfargen på tittelen din, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.
Spacing av tittel bokstaver
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i tittelteksten, bruker du glidebryteren for å justere mellomrommet eller angir ø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å tittellinjen
Linjehøyde påvirker mellomrommet mellom hver linje i tittelteksten. 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.
Innhold skrifttype
Du kan endre skrifttypen til innholdsteksten ved å velge ønsket skrift 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ørrelse på innholdet
Her kan du justere størrelsen på innholdsteksten. Du kan dra glidebryteren for å øke eller redusere størrelsen på teksten eller direkte angi verdien av ønsket tekststø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.
Innholds tekstfarge
Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på innholdsteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.
Spacing innholds bokstaver
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke avstanden mellom hver bokstav i innholdsteksten, bruker du skyvekontrollen for å justere mellomrommet eller angir ø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å innholdslinjen
Radhøyde påvirker mellomrommet mellom hver rad i innholdsteksten. Hvis du vil øke mellomrommet mellom hver rad, 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.
Subtitle Font
Du kan endre skrifttypen til underteksten ved å velge ønsket skrift 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.
Størrelsen på undertekstfonten
Her kan du justere størrelsen på tekstingen din. Du kan dra glidebryteren for å øke eller redusere størrelsen på teksten eller direkte angi verdien av ønsket tekststø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.
Tekst tekstfarge
Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre tekstfargen på bildeteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.
Spacing av tekst bokstaver
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i bildeteksten, kan du bruke skyveknappen for å justere mellomrom eller angi ønsket avstandsstørrelse i inndatafeltet til høyre for skyveknappen. 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å undertekstlinjen
Linjehøyde påvirker mellomrommet mellom hver linje i bildeteksten. Hvis du vil øke avstanden mellom hver rad, bruker du skyvekontrollen for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inndatafeltet til høyre for skyveknappen. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Maksimal tekstbredde
Bruk denne innstillingen for å redusere maksimal bredde på teksten i toppmodulen. For eksempel vil en verdi på 50% sikre at teksten aldri overstiger 50% av bredden på den samlede toppmodulen.
Bruk egendefinerte stiler for knappen
Aktivering av dette alternativet avslører forskjellige innstillinger for knappetilpasning som du kan bruke til å endre utseendet på modulens knapp.
Knapptekststørrelse
Denne innstillingen kan brukes til å øke eller redusere størrelsen på teksten i knappen. Knappen tilpasser seg når tekststørrelsen øker og avtar.
Knapptekstfarge
Som standard tar knappene aksentfargen på temaet ditt som definert i Theme Customizer. Dette alternativet lar deg tilordne en tilpasset tekstfarge til knappen i denne modulen. Velg din egendefinerte farge ved å bruke fargevelgeren for å endre knappens farge.
Knapp bakgrunnsfarge
Som standard har knappene en gjennomsiktig bakgrunnsfarge. Dette kan endres ved å velge ønsket bakgrunnsfarge fra fargevelgeren.
Border Width-knappen
Alle Divi-knapper har en 2px-kant som standard. Denne grensen kan økes eller reduseres ved hjelp av denne innstillingen. Kanter kan fjernes ved å angi verdien 0.
Knapp kantfarge
Som standard vedtar knappekanter temaets aksentfarge som definert i Theme Customizer. Dette alternativet lar deg tilordne en egendefinert kantfarge til knappen i denne modulen. Velg din egendefinerte farge ved å bruke fargevelgeren for å endre fargen på knappekanten.
Knappgrenseradius
Grenseradiusen påvirker runden på hjørnene på knappene dine. Som standard har knappene i Divi en liten kantradius som avrunder hjørnene med 3 piksler. Du kan redusere denne verdien til 0 for å lage en firkantet knapp, eller øke den betydelig for å lage knapper med sirkulære kanter.
Spacing av knapp bokstaver
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i knappeteksten, 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.
Knapp skrifttype
Du kan endre skrifttypen til knappeteksten ved å velge ønsket skrift 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.
Legg til et knappikon
Deaktivert, denne innstillingen fjerner ikoner fra knappen din. Som standard viser alle Divi-knappene et pilikon på sveveren.
Knappikon
Hvis ikoner er aktivert, kan du bruke denne innstillingen til å velge hvilket ikon du vil bruke i knappen din. Divi har forskjellige ikoner å velge mellom.
Fargeikon-knapp
Justering av denne parameteren vil endre fargen på ikonet som vises på knappen din. Som standard er ikonfargen den samme som knappetekstfargen din, men denne innstillingen lar deg justere fargen uavhengig.
Ikon plasseringsknapp
Du kan velge å vise ikonet til knappen til venstre eller høyre for knappen.
Vis bare ikonet når du holder markøren over knappen
Som standard vises knappikonene bare når du holder markøren. Hvis du vil at ikonet alltid skal vises, slå av denne innstillingen.
Knapphenger Tekstfarge
Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.
Hover-knappen bakgrunnsfarge (svingknappfarge)
Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.
Bøye kantfargeknapp (svinge kantfarge)
Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.
Hover Border Radius Button
Når knappen holdes over musen til en besøkende, vil denne verdien brukes. Verdien vil endres fra basisverdien som ble definert i de forrige innstillingene.
Pekende notatavstandsknapp
Når knappen holdes over musen til en besøkende, vil denne verdien brukes. Verdien vil endres fra basisverdien som ble definert i de forrige innstillingene.
Avanserte overskriftsalternativer i full bredde
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.
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]
Andre divisjoner
- 5 nettsteder for restaurant bruk Divi tema
- Slik legger du til tekst på et Divi WooCommerce-produkt
- Slik endrer du menyfargen mellom Divi-sider
- Hvordan tilpasse rutenettene til en blogg med Divi
- Hvordan bruke rollen Divi editor på WordPress
- Hvordan lage en Divi-glidebryter på fullskjerm
- Hvordan endre farge på menyer mellom Divi-sider
- Funksjoner du sannsynligvis ikke kjenner til Divi
- Slik bruker du Divi Builder på WordPress
- Slik bruker du Divi video-rullemodulen
- Slik bruker du Divi Builder Flip-modulen
- Hvordan legge til en attestmodul på Divi Builder
- Slik bruker du Divi-tekstmodulen
- Hvordan lage en glidebryter på Divi
- Hvordan redigere en Divi-brukerrolle
- Slik bruker du Divi Social Media-modulen
- Hvordan bruke butikkmodulen på temaet WordPress Divi
- Slik bruker du Divi sidebar-modulen
- Slik bruker du Divi Price Table Module
- Slik bruker du tittelmodulen til Divi-publikasjoner
- Hvordan legge til en videomodul av Divi
- Slik bruker du artikkelen navigasjonsmodulen
- Slik bruker du Divi-søkemodulen
- Slik bruker du Divi-lommebokmodulen
- Slik bruker du personmodulen på Divi Builder
- Slik bruker du lommebokmodulen med Divi filter
- Slik bruker du skyvemodulen med full bredde
- Slik bruker du Divi Builder Image Module
- Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
- Slik bruker du bildegalleriemodulen
- Slik bruker du Divi Builder Full-Width Card Module
- Slik bruker du Divi Full Width Portfolio Module
- Hvordan bruke Divi-modulen i full bredde
- Slik bruker du Divi-tellermodulen
- Slik bruker du glidebryteren for artikler på Divi Builder
- Slik bruker du Divi Email Optin-modulen
Takk for denne informasjonen, faktisk så jeg etter muligheten for å plassere en meny på et bilde uten å aktivere overskriftsområdet i Divi. Er det mulig?
Vi har ikke testet dette alternativet ennå.
Hallo
Takk for artikkelen, er det mulig å legge til en tredje knapp "Button # 3 Text" hvis ja, hvordan?
Cdt,
Tittelen snakker om meny, og innholdet er en blokk i full bredde ...