När det kommer till bakgrundsmasker tenderar användare att använda bildredigeringsprogram förutom Divi, ladda sedan upp bilden till webbplats som de skapar. Även om det är ett ganska praktiskt sätt att anpassa din webbplats, det är inte nödvändigtvis den enda lösningen. Du kan också skapa bakgrundsmasker inom Divi, som kombinerar de olika designelementen och filteralternativen på kreativa sätt. Det är precis vad vi ska göra i det här inlägget! Vi förvandlar överdimensionerade karaktärer till bakgrundsmasker som ser bra ut oavsett skärmstorlek. Vi hoppas att den här handledningen inspirerar dig att skapa din egen design med hjälp av överdimensionerade karaktärer och de inbyggda alternativen för Divi.
Låt oss gå!
Exempel på förhandsvisning
Innan vi dyker in i handledningen, här är de typer av bakgrunder du kan uppnå med denna teknik.
Conception
Vi börjar designen genom att skapa en svart bakgrund med en bokstav som har en bild som bakgrund.
Lägg till en ny sektion
Bakgrundsfärg
Låt oss börja med det första exemplet! Lägg till ett nytt vanligt avsnitt till en ny eller befintlig sida och lägg till en bakgrund till detta avsnitt:
- Bakgrundsfärg: #000000
avstånd
Gå sedan till avståndsinställningarna och ta bort all standard vaddering för topp och botten.
- Toppad padding: 0px
- Botten stoppning: 0px
överflöde
Byt till fliken Avancerat och dölj avsnittets överflöd. Detta kommer att bli viktigt senare i denna handledning när vi placerar om textmodulen som innehåller den stora karaktären.
- Horisontellt överflöde: dold
- Vertikalt överflöde: dold
Lägg till rad 1
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
Kolumn 1 bakgrundsfärg
Utan att lägga till några moduler ännu, öppna radinställningarna och lägg till en bakgrundsfärg i den första kolumnen.
- Kolumn 1 Bakgrundsfärg: #848484
1-kolumnen Bakgrundsbild
Lägg också till en bakgrundsfärg. För att kombinera bakgrundsfärgen och bilden ska vi använda ett blandningsläge.
- Blandning av kolumnbakgrundsbild: Multiplicera
dimensionering
Byt till fliken Design och låt raden fylla hela skärmens bredd med följande storleksinställningar:
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Bredd: 100%
- Maximal bredd: 100%
avstånd
Vi blir också av med alla anpassade polstring i raden.
- Toppad padding: 0px
- Botten stoppning: 0px
Lägg till en textmodul i en kolumn
Lägg till ett tecken i innehållsområdet
Det är dags att lägga till textmodulen som innehåller en överdimensionerad karaktär. Lägg till bokstaven "o" i rutan innehåll.
Bakgrundsfärg
Fortsätt genom att gå in i bakgrundsinställningarna och lägg till en svart bakgrundsfärg.
- Bakgrundsfärg: #000000
Textinställningar
Gå till fliken Design och ändra textinställningarna. Lägg märke till hur vi använder ett högt värde för textstorleken.
- Text teckensnitt: Poppins
- Textstorlek: 100vw
- Textorientering: Center
avstånd
Gå sedan till avståndsinställningarna och lägg till anpassade marginal- och stoppningsvärden.
- Övre marginal: -6vw
- Bästa vaddering: 15vw
- Botten stoppning: 49vw
filter
Det är dags att göra magi! Öppna modulens filterinställningar och ändra sammanslagningsläget i enlighet därmed:
- Blandningsläge: Multiplicera
- Ljusstyrka: du kan ändra detta värde efter dina önskemål
Lägg till 2-raden
Kolumnstruktur
När ditt stora tecken har lagts till i designen kan du fortsätta genom att lägga till de återstående modulerna som du vill visa i avsnittet, helst genom att lägga till en ny rad:
dimensionering
Utan att lägga till några moduler ännu, öppna radinställningarna och låt den uppta hela skärmens bredd.
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Bredd: 100%
- Maximal bredd: 100%
avstånd
Ta också bort all standard upp och ner stoppning
- Toppad padding: 0px
- Botten stoppning: 0px
Lägg till textmodul # 1 i kolumnen
Lägg till H1-innehåll
I den här nya raden kan du lägga till de moduler du väljer. För att återskapa det exakta exemplet som delas i förhandsgranskningen av det här inlägget, börja med att lägga till en textmodul som innehåller innehåll H1.
H1 Textinställningar
Gå till fliken Design och ändra H1-textinställningarna.
- Titel typsnitt: Playfair Display
- Typsnittsvikt: fet
- Titel Textinriktning: Center
- Titeltextfärg: #ffffff
- Text Titel Storlek: 6vw
avstånd
Fortsätt genom att gå till avståndsinställningarna och låt textmodulen överlappa den stora karaktären genom att lägga till en negativ toppmarginal. Vi ser också till att det finns utrymme till vänster och höger om modulen för att säkerställa lyhördhet.
- Övre marginal: -47vw
- Vänster marginal: 1vw
- Höger marginal: 1vw
Lägg till en delningsmodul i kolumnen
synlighet
Nästa modul vi behöver är en delningsmodul. Se till att alternativet "Visa separator" är aktiverat.
- Visa Divider: Ja
Färg
Gå till designfliken nästa och ändra avdelarens färg.
- Färg: #ffffff
dimensionering
Ändra även dimensioneringsparametrarna.
- Divider vikt: 13px
- Bredd: 16%
- Justering av modulen: centrum
avstånd
Lägg också till en övre marginal för att skapa ett mellanrum mellan textmodulen och delningsmodulen.
- Övre marginal: 16vw
Lägg till textmodul # 2 i kolumnen
Lägg till innehåll
Nästa modul vi behöver är en textmodul med en innehåll av paragraf.
Textinställningar
Öppna textinställningarna och gör följande ändringar:
- Text teckensnitt: Open Sans
- Textfärg: #ffffff
- Textstorlek: 1vw (skrivbord), 2vw (surfplatta), 2.5vw (telefon)
- Höjd på textrad: 1.9em
- Textorientering: Center
avstånd
Lägg också till anpassade avståndsvärden.
- Övre marginal: 3vw
- Nedre marginal: 3vw (stationär dator), 10vw (surfplatta och telefon)
- Vänster marginal: 27vw (skrivbord), 10vw (surfplatta), 8vw (telefon)
- Höger marginal: 27vw (skrivbord), 10vw (surfplatta), 8vw (telefon)
Lägg till en knappmodul i kolumnen
Lägg till en kopia
På nästa och sista modul, som är en knappmodul. Ange en kopia efter eget val.
uppriktning
Fortsätt genom att ändra knappjustering på fliken Design.
- Justering av knapparna: mittpunkten
Knappinställningar
Byt till knappinställningarna och anpassa knappen efter önskemål.
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 1vw (skrivbord), 2.5vw (surfplatta), 3vw (telefon)
- Knapptextfärg: #ffffff
- Bredden på knappgränsen: 1px
- Radi av gränsen för knappen: 0px
- Knapp typsnitt: Öppna Sans
- Typsnittsvikt: Ultra fet
- Teckensnittstyp: versaler
avstånd
Slutligen lägger vi också till anpassade marginal- och fyllvärden för att få önskat resultat.
- Nedre marginal: 10vw
- Padding: 15px
- Botten stoppning: 15px
- Vänster padding: 50px
- Möjningstryck: 50px
Slutresultat
Det här ser ut som vi har byggt hittills.
Avslutande tankar
I den här artikeln har vi visat dig hur du använder stora tecken för att skapa fantastiska bakgrundsmasker med Divi. Detta är ett utmärkt sätt att skapa en anpassad webbdesign utan att behöva använda bildredigeringsprogram. Om du har några frågor eller förslag, var noga med att lämna en kommentar i kommentarfältet nedan!
