Helskärmsmenymodulen på Divi gör det enkelt att lägga till vackra färgade rubriker överst på dina sidor (eller var som helst på din webbplats, om du vill). Dessa moduler kan endast placeras i sektioner med full bredd.

Hur man lägger till Divi Full Screen Menu-modulen

Innan du kan lägga till en helskärmsmenymodul 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 helskärmsmenymoduler kan bara läggas till i fullbreddssektionerna. Om du börjar en ny sida, glöm inte att lägga till ett avsnitt med full bredd på din sida först.

Leta reda på helskärmsmodulen 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 ordet "helskärmsrubrik" och sedan klicka på "Enter" för att automatiskt hitta och lägga till helskärmsrubriksmodulen! 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 helskärmsrubrik på en Om-sida

I det här exemplet visar jag dig hur du använder Fullwidth-rubrikmodulen för att lägga till en rubrik med anpassad text och en bakgrundsbild.

Alla helskärmsmoduler är endast tillgängliga när du använder helskärmsavsnitt. Använd Visual Builder för att infoga ett nytt avsnitt i helskärm. Lägg sedan till en personmodul i avsnittet.

Uppdatera helskärmens rubrikinställningar enligt följande:

Innehållsalternativ

Titel: Om oss Textning: Vi gör saker annorlunda ... Bakgrundsbild URL: [infoga 1920 x 800 bild] Överlagringsbakgrund Färg: rgba (0,0,0,0.2 , XNUMX)

Designalternativ

Text- och logotyporientering: Mittknapp Bläddra ner Knapp: JA Ikon: [välj ikon] Bläddra ned ikon Färg: # fcbf00 Bläddringsikon: 50 pixlar Textfärg: Ljus Textfärg: # fcbf00 Teckensnitt Titel: Öppna utan, fetstil, versaler Titel Teckenstorlek: 60 pixlar (skrivbord), 40 pixlar (surfplatta), 30 pixlar (telefon) Undertexter Teckenstorlek: 25 pixlar

Avancerade alternativ (anpassad CSS)

Huvudelement:
klädsel: 100px 0;

Det är allt!

Alternativ för helskärmens innehå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.

Titel

Ange titel på din sida här.

Textningstext

Om du vill använda en undertext, lägg till den här. Bildtexten visas under din titel i ett litet teckensnitt.

Knapp # 1 Text

Ange texten för knappen.

Knapp # 2 Text

Ange texten för knappen.

Innehåll

Här kan du definiera innehållet som kommer att placeras under rubriken och titeltexten.

Knapp URL 1

Ange webbadressen till knappen.

Knapp URL 2

Ange webbadressen till knappen.

URL för logotypbild

Ladda upp önskad bild eller skriv in webbadressen till bilden du vill se.

Rubrikbild URL

Ladda upp önskad bild eller skriv in webbadressen till bilden du vill se.

URL för bakgrundsbild

Om den är inställd kommer den här bilden att användas som bakgrund för denna modul. För att ta bort en bakgrundsbild tar du bara bort webbadressen från inställningsfältet. Bakgrundsbilderna visas ovanpå bakgrundsfärgerna, vilket innebär att bakgrundsfärgen inte kommer att synas när en bakgrundsbild appliceras.

Bakgrundsfärg

Definiera en anpassad bakgrundsfärg för din modul eller lämna tom för att använda standardfärgen.

Bakgrundsöverlagringsfärg

Välj en bakgrundsfärg som läggs ovanför bakgrundsbilden. Halvtransparenta överläggsbilder kan skapa coola effekter när de placeras ovanpå bakgrundsbilder.

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.

Alternativ för huvudbreddshuvuddesign

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.

Text- och logotyporientering

Det här styr hur din text justeras i modulen.

Skapa en fullskärm

Här kan du välja om rubriken ska expanderas till helskärmsstorlek.

Använd Parallax-effekten

Om det är aktiverat har dina bakgrundsbilder en fast position som din rullning, vilket skapar en rolig parallaxeffekt.

Parallaxmetod

Definiera metoden som används för parallaxeffekten.

Visa rulla ner-knappen

Här kan du välja om rullningsknappen ska visas.

icon

Välj en ikon som ska visas för att bläddra ner-knappen.

Rulla ner Färgikonen

Som standard ärver rullgardinsmenyn färgen på rubriktexten (vit eller grå). Du kan ändra den här färgen genom att justera färgen i det här alternativet med hjälp av färgväljaren.

Rulla ner Ikonstorlek

Använd den här inställningen för att öka eller minska storleken på nedrullningsikonen som visas längst ner i rubriken.

Vertikal bildjustering

Detta styr bildens orientering i modulen.

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.

Vertikal inriktning av texten

Den här inställningen avgör den vertikala justeringen av ditt innehåll. Ditt innehåll kan centreras vertikalt eller justeras längst ner.

Titel typsnitt

Du kan ändra typsnittet i titeltexten genom att välja önskat typsnitt i 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.

Titel teckenstorlek

Här kan du justera storleken på din titeltext. 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.

Titeltextfärg

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

Spacing av titelbokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i titeltexten, använd skjutreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. 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å titellinjen

Radhöjd påverkar utrymmet mellan varje rad i titeltexten. Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet 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.

Innehållstypsnitt

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

Skriftstorlek för innehållet

Här kan du justera storleken på din innehållstext. Du kan dra områdesreglaget 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 storlek för att ändra enhetstyp.

Innehållstextfärg

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

Spacing innehålls bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i innehållstexten, 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 storlek för att ändra enhetstyp.

Höjd för innehållslinjen

Linjehöjd påverkar utrymmet mellan varje rad i innehållstexten Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet 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 storlek för att ändra enhetstyp.

Textningstext

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

Storleken på undertextsteget

Här kan du justera storleken på din texttext. Du kan dra områdesreglaget 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 storlek för att ändra enhetstyp.

Texttextfärg

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

Spacing av undertext bokstäver

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

Höjd på underrubriken

Radhöjd påverkar utrymmet mellan varje rad i din texttext. Om du vill öka utrymmet mellan varje rad, 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 storlek för att ändra enhetstyp.

Maximal textbredd

Använd den här inställningen för att minska den maximala bredden på texten i rubrikmodulen. Till exempel kommer ett värde på 50% att säkerställa att texten aldrig överstiger 50% av bredden på den totala rubrikmodulen.

Använd anpassade stilar för knappen

Om du aktiverar detta alternativ visas olika inställningar för knappanpassning som du kan använda för att ändra utseendet på modulens knapp.

Knapptextstorlek

Denna inställning kan användas för att öka eller minska storleken på texten i knappen. Knappen anpassar sig när textstorleken ökar och minskar.

Knapptextfärg

Som standard antar knapparna accentfärgen för ditt tema som definierats i Theme Customizer. Med det här alternativet kan du tilldela en anpassad textfärg till knappen i den här modulen. Välj din anpassade färg med hjälp av färgväljaren för att ändra knappfärg.

Knapp bakgrundsfärg

Som standard har knapparna en transparent bakgrundsfärg. Detta kan ändras genom att välja önskad bakgrundsfärg från färgväljaren.

Border Width-knappen

Alla Divi-knappar har en två pixlar kant som standard. Denna gräns kan ökas eller minskas med den här inställningen. Gränser kan tas bort genom att ange värdet 2.

Knapp kantfärg

Som standard antar knappgränserna ditt temas accentfärg enligt definitionen i Theme Customizer. Med det här alternativet kan du tilldela en anpassad kantfärg till knappen i den här modulen. Välj din anpassade färg med hjälp av färgväljaren för att ändra färgen på knappramen.

Knappen gränsradie

Gränsens radie påverkar rundan på hörnen på dina knappar. Som standard har knapparna i Divi en liten kantradie som avrundar hörnen med 3 pixlar. Du kan minska detta värde till 0 för att skapa en fyrkantig knapp eller öka det avsevärt för att skapa knappar med cirkulära kanter.

Spacing av knapp bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din knapptext använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. 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.

Knapp typsnitt

Du kan ändra teckensnittet för din knapptext genom att välja önskat teckensnitt i 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.

Lägg till en knappikon

Inaktiverad, den här inställningen tar bort ikoner från din knapp. Som standard visar alla Divi-knappar en pilikon på svävaren.

Knappikon

Om ikoner är aktiverade kan du använda den här inställningen för att välja vilken ikon du vill använda i din knapp. Divi har olika ikoner att välja mellan.

Färgikonen knapp

Om du justerar den här inställningen ändras färgen på ikonen som visas på din knapp. Som standard är ikonfärgen densamma som knappens textfärg, men den här inställningen låter dig justera färgen oberoende av varandra.

Ikonplaceringsknapp

Du kan välja att visa ikonen för din knapp till vänster eller höger om din knapp.

Visa endast ikon när du svävar över knappen

Som standard visas knappikoner bara när du svävar. Om du vill att ikonen alltid ska visas stänger du av den här inställningen.

Knapphöjd Textfärg

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Hake-knappen bakgrundsfärg (svängknappsfärg)

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Höger kantfärgsknapp (svänggränsfärg)

När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.

Höger Border Radius Button

När knappen hålls över en besökares mus kommer detta värde att användas. Värdet ändras från basvärdet som definierats i tidigare inställningar.

Pekskärmknapp

När knappen hålls över en besökares mus kommer detta värde att användas. Värdet ändras från basvärdet som definierats i tidigare inställningar.

Avancerade rubrikalternativ i full bredd

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.

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]

Andra Divi tutorials

• 5 webbplatser för restaurang användning Divi tema
• Så här lägger du till text på en Divi WooCommerce-produkt
• Så här byter du menyfärg mellan Divi-sidor
• Hur du anpassar rutorna på en blogg med Divi
• Hur man använder roll Divi editor på Wordpress
• Hur man skapar en Divi-skjutreglage på full skärm
• Hur man ändrar menyens färg mellan Divi-sidor
• Funktioner du antagligen inte känner till Divi
• Så här använder du Divi Builder på WordPress
• Så här använder du Divi video-rullningsmodulen
• Så här använder du Divi Builder Flip-modulen
• Hur man lägger till en vittnesmodul om Divi Builder
• Så här använder du Divi-textmodulen
• Hur man skapar en reglage på Divi
• Hur man redigerar en Divi-användarroll
• Så här använder du Divi Social Media-modulen
• Hur man använder butikmodulen på temat WordPress Divi
• Så här använder du Divi sidebar-modulen
• Så här använder du Divi Price Table Module
• Hur man använder titelfodulen i Divi-publikationer
• Hur lägger jag till en videomodul av Divi
• Så här använder du artikelnavigationsmodulen
• Så här använder du Divi-sökmodulen
• Så här använder du Divi-plånboksmodulen
• Hur man använder personmodulen på Divi Builder
• Hur man använder plånboksmodulen med Divi-filter
• Hur man använder skjutreglaget med hela bredden
• Så här använder du Divi Builder Image Module
• Så här använder du Divi Builder med fullbredd navigationsmodul
• Hur man använder modulen för bildgalleri
• Så här använder du Divi Builder Full-Width Card Module
• Så här använder du Divi Full Width Portfolio Module
• Hur du använder Divi-modulen med full bredd
• Så här använder du Divi Counter Module
• Hur man använder artiklarna på Divi Builder
• Så här använder du Divi Email Optin-modulen