Fuldskærmsmenu-modulet på Divi gør det nemt at tilføje smukke farverige overskrifter til toppen af ​​dine sider (eller hvor som helst på dit websted, hvis du ønsker det). Disse moduler kan kun placeres i sektioner i fuld bredde.

fuld bredde header modul divi.png

Sådan tilføjes Divi Full Screen Menu-modulet

Før du kan tilføje et fuldskærmsmenumodul 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.

brug divi builder

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 moduler i fuld skærmmenu kan kun tilføjes i sektioner med fuld bredde. Hvis du starter en ny side, skal du først glemme at tilføje en fuldbreddesektion til din side.

fuld menu divi.png

Find header-modulet i fuld skærm på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler er søgbar, hvilket betyder at du også kan skrive ordet "fuldskærmsoverskrift" og derefter klikke på "Enter" for automatisk at finde og tilføje fuldskærmsoverskriften! 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 fuldskærmsoverskrift til en Om-side

I dette eksempel viser jeg dig, hvordan du bruger Fullwidth header-modulet til at tilføje en header med brugerdefineret tekst og et baggrundsbillede.

Alle moduler i fuld skærm er kun tilgængelige, når du bruger sektioner i fuld skærm. Brug Visual Builder til at indsætte en ny sektion i fuld skærm. Føj derefter et personmodul til sektionen.

Opdater header-indstillingerne i fuld skærm som følger:

Indholdsindstillinger

Titel: Om os Undertekst Tekst: Vi gør ting anderledes ... Baggrund Billede URL: [indsæt 1920 x 800 billede] Overlay baggrund Farve: rgba (0,0,0,0.2 , XNUMX)

Design muligheder

Orientering af tekst og logo: Midterste knap Rul ned Knap: JA Ikon: [vælg ikon] Rul ned ikon Farve: # fcbf00 Rul ikon: 50 pix Tekstfarve: Lys Tekstfarve: # fcbf00 Skrifttype Titel: Åben uden, fed, store bogstaver Titel Skriftstørrelse: 60 pixel (desktop), 40 pixel (tablet), 30 pixel (telefon) Undertekst Fontstørrelse: 25 pixel

Avancerede indstillinger (brugerdefineret CSS)

Hovedelement:
polstring: 100px 0;

sektion indhold divi modul fuld screen.png

Det er alt!

eksempel header divi.jpg

Indstillinger for fuld skærmhovedindhold

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.

indhold sektion divi.png

titel

Indtast titlen på din side her.

Teksttekst

Hvis du vil bruge en undertekst, skal du tilføje den her. Din billedtekst vises under din titel i en lille skrifttype.

Knap # 1 Tekst

Indtast teksten til knappen.

Knap # 2 Tekst

Indtast teksten til knappen.

Indhold

Her kan du definere det indhold, der placeres under overskriften og titelteksten.

Knappen URL 1

Indtast URL-adressen til knappen.

Knappen URL 2

Indtast URL-adressen til knappen.

Webadresse til logobillede

Upload dit ønskede billede, eller skriv URL-adressen til det billede, du vil se.

URL til sidehovedbillede

Upload dit ønskede billede, eller skriv URL-adressen til det billede, du vil se.

URL til baggrundsbillede

Hvis indstillet, bruges dette billede som baggrund for dette modul. For at fjerne et baggrundsbillede skal du bare fjerne URL'en fra indstillingsfeltet. Baggrundsbillederne vises oven på baggrundsfarverne, hvilket betyder, at baggrundsfarven ikke vil være synlig, når der anvendes et baggrundsbillede.

Baggrundsfarve

Definer en brugerdefineret baggrundsfarve til dit modul, eller lad den være tom for at bruge standardfarven.

Baggrundsoverlejringsfarve

Vælg en baggrundsoverlayfarve, der placeres over baggrundsbilledet. Halvtransparente overlaybilleder kan skabe nogle seje effekter, når de placeres oven på baggrundsbilleder.

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.

Muligheder for design med fuld breddehoved

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.

sektionsdesign modul fuld bredde divi.png

Orientering af tekst og logo

Dette styrer, hvordan din tekst justeres i modulet.

Lav en fuld skærm

Her kan du vælge, om overskriften skal udvides til fuld skærmstørrelse.

Brug Parallax-effekten

Hvis det er aktiveret, vil dine baggrundsbilleder have en fast position som din rulle, hvilket skaber en sjov parallax-effekt.

Parallax-metode

Definer metoden, der anvendes til parallakseffekten.

Vis rulle ned-knap

Her kan du vælge, om rul ned-knappen vises.

ikon

Vælg et ikon, der skal vises for rul ned-knappen.

Rul ned Farveikon

Som standard arver rullemenuen farven på din overskriftstekst (hvid eller grå). Du kan ændre denne farve ved at justere farven i denne indstilling ved hjælp af farvevælgeren.

Rul ned Ikonstørrelse

Brug denne indstilling til at øge eller formindske størrelsen på rulle ned-ikonet, der vises i bunden af ​​din overskrift.

justering divi modul fuld bredde i head.png

Lodret billedjustering

Dette styrer orienteringen af ​​billedet i modulet.

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.

Lodret justering af teksten

Denne indstilling bestemmer den lodrette justering af dit indhold. Dit indhold kan centreres lodret eller justeres i bunden.

Titel skrifttype

Du kan ændre skrifttypen på din titeltekst 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, stor bogstav og understregningsmuligheder.

Titel skriftstørrelse

Her kan du justere størrelsen på din titeltekst. Du kan trække skyderen for rækkevidde for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede tekststø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.

Titel tekst farve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre tekstfarven på din titel, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Spacing af titel breve

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din titeltekst, 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.

titel sektio design modul i hoved fuld skærm divi.png

Højde på titellinjen

Linjehøjde påvirker afstanden mellem hver linje i din titeltekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i afstanden 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.

Indhold skrifttype

Du kan ændre skrifttypen på din indholdstekst 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ørrelse af indholdet

Her kan du justere størrelsen på din indholdstekst. 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.

Indholds tekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din indholdstekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Spacing indholdsbreve

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din indholdstekst, 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å indholdslinjen

Linjehøjde påvirker mellemrummet mellem hver linje i din indholdstekst Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand 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.

Undertekst skrifttype

Du kan ændre skrifttypen på din billedtekst 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ørrelseens størrelse

Her kan du justere størrelsen på din billedtekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede tekststø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.

Teksttekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre tekstfarven på din billedtekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Spacing af undertekst bogstaver

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge afstanden mellem hvert bogstav i din billedtekst, 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å undertekstlinjen

Linjehøjde påvirker mellemrummet mellem hver linje i din billedtekst. Hvis du vil øge afstanden mellem hver række, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i afstanden 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.

Maksimal tekstbredde

Brug denne indstilling til at reducere den maksimale bredde på teksten i header-modulet. For eksempel vil en værdi på 50% sikre, at teksten aldrig overstiger 50% af bredden på det samlede overskriftsmodul.

sektionsdesign modul divi hoved fuld width.png

Brug tilpassede stilarter til knappen

Aktivering af denne mulighed afslører forskellige indstillinger for tilpasning af knapper, som du kan bruge til at ændre udseendet på dit moduls knap.

Knappen tekststørrelse

Denne indstilling kan bruges til at øge eller formindske størrelsen på teksten i knappen. Knappen tilpasser sig, når tekststørrelsen øges og formindskes.

Knappen tekst farve

Som standard anvender knapperne accentfarven på dit tema som defineret i Theme Customizer. Denne mulighed giver dig mulighed for at tildele en brugerdefineret tekstfarve til knappen i dette modul. Vælg din brugerdefinerede farve ved hjælp af farvevælgeren for at ændre knapfarven.

Button baggrundsfarve

Som standard har knapperne en gennemsigtig baggrundsfarve. Dette kan ændres ved at vælge den ønskede baggrundsfarve fra farvevælgeren.

Border Width-knap

Alle Divi-knapper har en 2 pixers kant som standard. Denne kant kan øges eller formindskes ved hjælp af denne indstilling. Kanter kan fjernes ved at indtaste en værdi på 0.

Knappen kantfarve

Som standard vedtager knapgrænser dit temas accentfarve som defineret i Theme Customizer. Denne mulighed giver dig mulighed for at tildele en brugerdefineret kantfarve til knappen på dette modul. Vælg din brugerdefinerede farve ved hjælp af farvevælgeren for at ændre farven på knapgrænsen.

Knappen grænsen radius

Grænsens radius påvirker runden af ​​hjørnerne på dine knapper. Som standard har knapperne i Divi en lille kantradius, der afrunder hjørnerne med 3 pixels. Du kan reducere denne værdi til 0 for at oprette en firkantet knap eller øge den markant for at oprette knapper med cirkulære kanter.

Afstand mellem knapbogstaver

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din knaptekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand 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.

Button skrifttype

Du kan ændre skrifttypen på din knaptekst 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.

Tilføj et knapikon

Deaktiveret, denne indstilling fjerner ikoner fra din knap. Som standard viser alle Divi-knapper et pilikon på svævningen.

Knapikon

Hvis ikoner er aktiveret, kan du bruge denne indstilling til at vælge hvilket ikon der skal bruges i din knap. Divi har forskellige ikoner at vælge imellem.

Farveikoneknap

Hvis du justerer denne parameter, ændres farven på ikonet, der vises på din knap. Som standard er ikonfarven den samme som din knaptekstfarve, men denne indstilling giver dig mulighed for at justere farven uafhængigt.

Ikonplaceringsknap

Du kan vælge at vise ikonet for din knap til venstre eller højre for din knap.

Vis kun ikon, når du holder markøren over knappen

Som standard vises knapikoner kun, når du svæver. Hvis du vil have, at ikonet altid skal vises, skal du slå denne indstilling fra.

Button Hover Text Color

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Hover knap baggrundsfarve (sving knap farve)

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Hover Border Color-knappen (sving grænsen farve)

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Hover Border Radius Button

Når knappen holdes over en besøgendes mus, bruges denne værdi. Værdien skifter fra basisværdien defineret i de tidligere indstillinger.

Pegefunktionsafstandsknap

Når knappen holdes over en besøgendes mus, bruges denne værdi. Værdien skifter fra basisværdien defineret i de tidligere indstillinger.

Avancerede muligheder for overskrift i fuld bredde

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.

modul overskrift divi section advance.png

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.

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