Divis Fullwidth Header Module innehåller massor av bildstilsalternativ, som låter Divi-användare skapa vackra bilder och layouter för sina rubriker. Rubrikbilden kan utformas på många sätt för att skapa intressanta layouter och design. Det blir ännu mer intressant när det kombineras med olika text- och knappdesigner. I det här inlägget kommer vi att se hur du stilar en bild i din Divi Fullwidth Header Module och delar tre exempel som hjälper dig att designa din Fullwidth Header Module.
Låt oss börja!
Förhandsvisning
Desktop Fullwidth Header Image Exempel ett
Telefonhuvudbild i full bredd Exempel ett
Desktop Fullwidth Header Image Exempel två
Telefonhuvudbild i full bredd Exempel två
Desktop Fullwidth Header Image Exempel tre
Telefonhuvudbild i full bredd Exempel tre
Lägg till en bild i din fullbreddshuvud
Här är rubriken i full bredd som vi kommer att använda i det här exemplet. Låt oss först se hur man bygger den. Vi använder bilder och designköer från gratis Flower Farm Layout Pack som är tillgängligt inom Divi.
För att lägga till Divi Fullwidth Header-modulen på din sida behöver du en ny sektionsbehållare med en rad med en kolumn. När du har det, lägg till Fullwidth Header Module i din rads kolumn.
Helbreddshuvudtext
Lägg sedan till din titel, underrubrik, text för knapp ett, text för knapp två och innehåll.
- Titel: Välkommen till Divi Flower Farm
- Undertitel: Om oss
- Knapp ett: Mer information
- Knapp två: Handla
- Innehåll: din text
Header Bild
Scrolla ner till Bildervälj Rubrikbild och lägg till din bild.
Bakgrund
Scrolla sedan ner till Bakgrundvälj fliken Gradient och lägg till fyra gradientstopp:
- Gradientstopp 1: 0 %, #000000
- Stopp 2: 25 %, rgba(0,0,0,0.8)
- Gradient 3: 75 %, rgba(0,0,0,0,8)
- Gradient 4: 100 %, #000000
Nästa, aktivera Placera övertoning ovanför bakgrundsbilden. Lämna de andra inställningarna på sina standardinställningar.
- Placera övertoning ovanför bakgrundsbild: Ja
Välj Bakgrundsbild fliken och lägg till din bild. Därefter utformar vi fullbreddshuvudmodulen.
Titeltext
Välj fliken Design och scrolla ner till Titeltext. Välj H1 och välj Italiana som teckensnitt. Ställ in justering till vänster och välj vit som färg.
- Rubriknivå: H1
- Typsnitt: Italiana
- Inriktning: Vänster
- Färg: #ffffff
Ställ in skrivbordsstorleken till 80px, surfplattans storlek till 40px och telefonens storlek till 32px.
- Storlek: 80px Desktop, 40px surfplatta, 32px telefon
Kropp text
Scrolla sedan ner till Kropp text. Ställ in justeringen till vänster, välj Roboto som teckensnitt och ändra färgen till vit.
- Inriktning: Vänster
- Typsnitt: Roboto
- Färg: #ffffff
Ändra skrivbordsstorleken till 18px, surfplattans storlek till 16px och telefonens storlek till 14px.
- Textstorlek: 18px skrivbord, 16px surfplatta, 14px telefon
Undertext
Scrolla sedan ner till Undertext. Välj Roboto för typsnittet och ställ in vikten på tung. Välj TT för stilen, ställ in justeringen till vänster och ändra färgen till #b5a68f.
- Typsnitt: Roboto
- Vikt: Tung
- Stil: TT
- Inriktning: Vänster
- Färg: #b5a68f
Ändra sedan Mellanrum till 0,2 em, och linjehöjden till 1,7 em. Lämna teckenstorleken som standard, 18px.
- Avstånd: 0,2em
- Linjehöjd: 1,7 em
Knapp ett
Scrolla ner till Knapp ett och välj Använd anpassade stilar för knapp ett. Ställ in teckenstorleken till 14px, textfärgen till #aa6a3c och bakgrundsfärgen till #f5f3ef.
- Använd anpassade stilar för knapp ett: Ja
- Teckenstorlek: 14px
- Textfärg: #aa6a3c
- Bakgrundsfärg: #f5f3ef
Ställ in kantfärgen till #aa6a3c, bokstavsavståndet till 0,15 em, teckensnittet till Roboto, vikten till fetstil och stilen till TT.
- Kantfärg: #aa6a3c
- Bokstavsavstånd: 0,15 em
- Typsnitt: Roboto
- Vikt: Fet
- Stil: TT
Scrolla ner till Knapp En stoppning. Ändra topp- och bottenstoppningen till 20px och vänster- och högerstoppningen till 30px.
- Utfyllnad: Topp, Botten 20px, Vänster, Höger 30px
Knapp två
Scrolla sedan ner till Knapp två. Välj Använd anpassade stilar för knapp två. Ställ in teckensnittsstorleken till 14px, textfärgen till vit och bakgrundsfärgen till rgba(255,255,255,0).
- Använd anpassade stilar för knapp två: Ja
- Teckenstorlek: 14px
- Textfärg: #ffffff
- Bakgrundsfärg: rgba(255,255,255,0)
Ställ in kantfärgen på vit, bokstavsavståndet till 0,15 em, teckensnittet till Roboto, vikten till fetstil och stilen på TT.
- Kantfärg: #ffffff
- Bokstavsavstånd: 0,15 em
- Typsnitt: Roboto
- Vikt: Fet
- Stil: TT
Scrolla ner till Knapp två Vaddering och ställ in topp- och bottenstoppningen till 20px, och vänster- och högerutfyllnaden till 30px. Det var allt för stilen med fullbreddshuvudmodulen. Nu kommer vi att se tre sätt att styla bilden.
- Utfyllnad: Topp, Botten 20px, Vänster, Höger 30px
Helbreddshuvudbildstilsexempel
Här är en titt på tre exempel med vår layout som utgångspunkt. Vi ska göra några justeringar av layouten för vart och ett av exemplen.
Helbreddshuvudbild Exempel ett
För vårt första Fullwidth Header Image-exempel skapar vi en rundad topp med en kant. Gå till fliken Design och scrolla ner till Bild. Avsynkronisera värdena och ändra den övre kanten till 400px.
- Upptill höger och vänster kant: 400px
- Nedre höger och vänster kant: 0px
Ändra kantbredden till 2px och kantfärgen till vit.
- Bredd: 2px
- Färg: #ffffff
Därefter kommer vi att justera Inriktning av texten och bilden för att justera deras placering på skärmen. I det här exemplet lämnar vi bilden och texten i deras nuvarande positioner, men vi kommer att ändra den vertikala justeringen för texten och knapparna. Väljer Fullskärm öppnar ett alternativ för vertikal textjustering i textalternativen.
Gå först till fliken Design. Under Layout ställer du in textjusteringen till höger och aktiverar Gör helskärm.
Till sist, scrolla ner till Text. Du kommer nu att se ett alternativ märkt Text vertikal justering. Ställ den till Botten. Stäng modulen och spara dina inställningar.
- Text Vertikal justering: Botten
Helbreddshuvudbild Exempel två
För det här exemplet använder vi en annan knapptext och bild. Ändra först Knapp En text till information.
- Button One Text: Information
Scrolla sedan ner till Bakgrund och välj en annan bild. Den här bilden tar cirka 1/3 av skärmens bredd. Vi använder samma bild som bakgrunden.
- Header Image: Stor bild
Gå sedan till Fliken Avancerat och scrolla ner till fältet Header Image. Lägg till CSS för att ställa in bredden till 150 % och höjden till auto. Stäng modulen och spara dina inställningar.
Header Image CSS:
max-width: 150%; height: auto;
Nu med bilden och knapptexten på plats kommer vi att göra våra justeringar. Vi kan justera Inriktning av texten och bilden för att justera deras placering på skärmen. Gå först till Design flik. Under Layout lämnar du textjusteringen till vänster och aktiverar Gör helskärm.
Bläddra sedan till Titeltext och ställ in Alignment to Center.
- Titel Textjustering: Center
Scrolla sedan ner till Kropp text. Ändra textjusteringen till mitten.
Bläddra sedan till Undertext och ställ in Alignment to Center.
- Textjustering: Center
Scrolla ner till Knapp En marginal och ändra vänstermarginalen till 29 % för stationära datorer, 18 % för surfplattor och 19 % för telefoner.
- Knapp en vänstermarginal: 29 % dator, 18 % surfplatta, 19 % telefon
Scrolla ner till Knapp två Marginal och ändra vänstermarginalen till 30 % för surfplattor och 31 % för telefoner.
- Knapp två vänstermarginal: 30 % surfplatta, 31 % telefon
Scrolla ner till Dimensionering och ställ in bredden på 104 % för telefoner. Detta centrerar innehållet korrekt för smala skärmar.
Helbreddshuvudbild Exempel tre
Gå först till Design flik. Under Layout, ställ in textjusteringen till höger. I mitt fall är texten vänsterjusterad, men din kan vara centrerad om du inte har angett justeringen.
- Text & logotypjustering: Center
Scrolla ner till Bild. Ändra kantbredden till 4px och kantfärgen till #b5a68f.
- Kantbredd: 4px
- Kantfärg: #b5a68f
Bläddra sedan till Titeltext och ändra justeringen till centrerad.
- Titel Textjustering: Centrerad
Bläddra till Kropp text och ändra justeringen till centrerad.
- Brödtextjustering: Centrerad
Bläddra sedan till Undertext och ändra justeringen till centrerad.
- Textjustering: Centrerad
Gå sedan till Innehåll fliken och ändra Knapp En text till Information bara för telefoner.
- Button One Innehåll för telefoner: Information
Gå tillbaka till Design fliken och lägg till 5 % Höger marginal till knapp tvås telefonflik.
Till sist, scrolla ner till Dimensionering och ställ in Content Width till 52 % för stationära datorer och 100 % för surfplattor och telefoner. Stäng modulen och spara dina inställningar.
- Innehållsbredd: 52 % dator, 100 % surfplatta och telefon
Resultat
Desktop Fullwidth Header Image Exempel ett
Telefonhuvudbild i full bredd Exempel ett
Desktop Fullwidth Header Image Exempel två
Telefonhuvudbild i full bredd Exempel två
Desktop Fullwidth Header Image Exempel tre
Telefonhuvudbild i full bredd Exempel tre
Avslutande tankar
Det är vår titt på hur du stylar din Divi Fullwidth Header Module. Bilden är lätt att styla, och den kan placeras på flera platser i modulen. Modulens olika layoutalternativ ger dig massor av designmöjligheter. Se till att testa dina mönster på alla skärmstorlekar för att säkerställa den bästa användarupplevelsen.