Divi: 5 överlägg av masker och mönster som är applicerbara på en bakgrundsbild

ens Gaetan | Divi, Divi Tutorials

Vill du använda Divis mask och bakgrundsmönsteröverlägg?

Med det sista version av bakgrundsmask och bakgrundsmönster av Divi kan du skapa unika Hero-sektioner för din webbplats. En hjältesektion är den första delen av din webbplats och det är det första du besökare se innan du rullar din webbplats, så det är viktigt att vara iögonfallande!

Den här artikeln visar dig hur du skapar fem unika bakgrundsmasker och mönsteröverlägg som du kan applicera på en bakgrundsbild för att skapa verkligt fantastiska hjältesektioner. 

Den här handledningen kommer att täcka de väsentliga stegen som behövs för att skapa varje hjältesektion och ger dig de verktyg du behöver för att skapa en slående hjältesektion för din webbplats på några minuter.

Låt oss börja!

undersökningen

Här är en snabb översikt över de fem hjältesektionerna vi kommer att skapa i den här artikeln idag.

Ladda ner DIVI nu!!!

Designen är subtil, enkel och ändå effektfull.

Läs också: Divi: Hur man använder "Gradient Builder" för att försköna dina bilder

Skapa en ny sida med Divi Builder

För att komma igång måste du göra följande:

Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.

Divi-linjer konverterade till flikar

Ge den en titel som är vettig för dig och klicka Använd Divi Builder

klicka sedan på Börja bygga (Bygg från grunden)

Divi-linjer konverterade till flikar

Efter det har du en tom duk för att börja designa i Divi.

Fem exempel på bakgrundsmasker och mönsteröverlägg att applicera på en bakgrundsbild

Låt oss först skapa hjältesektionen

Alla våra exempeldesigner använder samma sektions-, rad- och kolumnstruktur, så låt oss ställa in dem nu.

1. Skapa en layoutstruktur

Lägg till en rad på din sida, klicka sedan på den gröna "+"-ikonen för att visa kolumnstrukturen och välj den första kolumnen, kolumnen i full bredd.

2. Lägg till sektionsavstånd

Nu när vi har definierat vår rad och kolumn är det dags att lägga till lite avstånd till avsnittet.

På fliken Avstånd uppdaterar du följande:

  • Desktop: 400 pixlar (överst och neder)
  • Surfplatta: 200 pixlar (överst och nedre); 25px (vänster och höger)
  • Telefon: 50 pixlar (överst och nedre); 25px (vänster och höger)

Hero Section Design #1

Låt oss designa den första Hero-sektionen.

överlägg av masker och bakgrundsmönster av Divi

Ladda ner DIVI nu!!!

1. Lägg till rubriktext

Klicka på den grå "+"-ikonen för att ta fram modulbiblioteket. Bläddra till text och klicka för att ladda.

Ange titeltexten och sedan under fliken Rubrik Text, konfigurera dessa inställningar:

  • Rubrik Teckensnitt: Work Sans
  • Textfärg: Vit #ffffff
  • Rubriktextstorlek:
    • Desktop: 3 em
    • Tablett: 2,2 em
    • Telefon: 1.4em

2. Lägg till knappmodul

Lägg till en knapp och konfigurera dessa inställningar:

  • Under fliken Innehålls: Ta reda på mer
  • Under fliken Justering, välj: Center
  • Klicka på Använd anpassade stilar för knapp konfigurera sedan:
    • Knapptextstorlek:
      • Desktop: 20px
      • Surfplatta: 16px
      • Telefon: 14px
    • Knappens textfärg: #ffffff
    • Bakgrund: #1d1d1d
    • Knappkantsbredd: 0
    • Kantradie: 0
    • Bokstavsavstånd: 3 poäng
    • Button Font: Work Sans
    • Typsnittsstil: TT

3. Lägg till en bakgrundsbild

Nu när vår innehåll är konfigurerad, är det dags att börja designa bakgrunden för avsnittet.

  • Gå till bakgrundsväljaren och klicka på den tredje fliken, bildfliken, klicka sedan på "Lägg till bakgrundsbild".
  • Detta kommer att ta fram ditt mediebibliotek, där du kan välja ett foto eller ladda upp ett nytt.
  • När du har valt ditt foto klickar du på knappen "Ladda upp en bild" i det nedre högra hörnet.

4. Lägg till ett bakgrundsmönster

Nu när vi har ställt in vår bakgrundsbild, låt oss lägga till ett mönster.

  • På fliken Bakgrund, navigera till den 5:e fliken, fliken Bakgrundsmönster, klicka sedan på "Lägg till bakgrundsmönster".
  • Välj tuftade från rullgardinsmenyn och konfigurera dessa inställningar:
    • Mönsterfärg – rgba(255,255,255,0.31)
    • Mönsteromvandling: ingen
    • Storlek: Verklig storlek
    • Mönsterupprepning Ursprung: Topp Nederst
    • Mönsterupprepning: Upprepa
    • Blandningsläge: Normal

5. Lägg till bakgrundsmask

Nu när vi har ställt in vår bakgrundsbild och mönster, låt oss lägga till en bakgrundsmask.

  • På fliken Bakgrund, navigera till den sjätte fliken, fliken Bakgrundsmask, klicka sedan på "Lägg till en bakgrundsmask".
  • Välj Böna från rullgardinsmenyn och konfigurera dessa inställningar:
    • Maskfärg: rgba(0,0,0,0.36)
    • Mask Aspect Ratio: horisontell rektangel
    • Storlek: Stretch för att fylla

Så ! Du har nu en vackert designad hjältesektion.

Sektion Hero #2 design

Låt oss nu designa den andra hjältesektionen.

överlägg av masker och bakgrundsmönster av Divi

1. Lägg till en bakgrundsbild och ställ in blandningsläget på Överlägg

Välj din bakgrundsbild, ställ in blandningsläget på Overlay och lägg till en överlagringsfärg av rgba (10,10,10,0.64).

2. Lägg till ett bakgrundsmönster

Nu när vi har ställt in bakgrundsbilden, låt oss lägga till ett bakgrundsmönster.

  • På fliken Bakgrund, gå till den 5:e fliken, fliken Bakgrundsmönster, klicka sedan på "Lägg till bakgrundsmönster".
  • Välj tuftade från rullgardinsmenyn och konfigurera dessa inställningar:
    • Mönsterfärg – rgba(255,255,255,0.09)
    • Mönsteromvandling: ingen
    • Storlek: Omslag
    • Mönsterupprepning Ursprung: Överst till vänster
    • Mönsterupprepning: Upprepa
    • Blandningsläge: Normal

3. Lägg till bakgrundsmask

Nu när vi har ställt in vår bakgrundsbild och mönster, låt oss lägga till en bakgrundsmask.

  • På fliken Bakgrund, navigera till den sjätte fliken, fliken Bakgrundsmask, klicka sedan på "Lägg till bakgrundsmask".
  • Välj Markör från rullgardinsmenyn och konfigurera dessa inställningar:
    • Maskfärg: rgba(0,0,0,0.36)
    • Maskomvandling: Ingen
    • Bildförhållande: horisontell rektangel
    • Maskstorlek: Stretch för att fylla
    • Maskblandningsläge: Normal

Sektion Hero #3 design

Låt oss nu designa den tredje Hero-sektionen.

överlägg av masker och bakgrundsmönster av Divi

1. Lägg till en bakgrundsbild och ställ in blandningsläget på Överlägg

Välj din bakgrundsbild, ställ in blandningsläget på Overlay och lägg till en överlagringsfärg av rgba (10,10,10,0.39).

2. Lägg till ett bakgrundsmönster

Nu när vi har ställt in vår bakgrundsbild, låt oss lägga till ett bakgrundsmönster.

  • På fliken Bakgrund, navigera till den sjätte fliken, fliken Bakgrundsmönster, klicka sedan på "Lägg till bakgrundsmönster".
  • Välj Diagonala ränder 2 från rullgardinsmenyn och konfigurera dessa inställningar:
    • Mönsterfärg – rgba(0,0,0,0.06)
    • Mönsteromvandling: ingen
    • Storlek: Verklig storlek
    • Mönsterupprepning Ursprung: Överst till vänster
    • Mönsterupprepning: Upprepa
    • Blandningsläge: Normal

3. Lägg till bakgrundsmask

Nu när vi har lagt till en bakgrundsbild och ett mönster, låt oss lägga till en bakgrundsmask.

  • På fliken Bakgrund, navigera till den sjätte fliken, fliken Bakgrundsmask, klicka sedan på "Lägg till bakgrundsmask".
  • Välj Trianglar från rullgardinsmenyn och konfigurera dessa inställningar:
    • Maskfärg: rgba(10, 10, 10, 0,61)
    • Maskomvandling: ingen
    • Bildförhållande: horisontell rektangel
    • Maskstorlek: Stretch för att fylla
    • Maskblandningsläge: Normal

Sektion Hero #4 design

Låt oss nu designa den fjärde delen av Hero.

överlägg av masker och bakgrundsmönster av Divi

1. Lägg till en bakgrundsbild

Välj din bakgrundsbild.

2. Lägg till ett bakgrundsmönster

Nu när vi har lagt till vår bakgrundsbild, låt oss lägga till ett bakgrundsmönster.

  • På fliken Bakgrund, navigera till den sjätte fliken, fliken Bakgrundsmönster, klicka sedan på "Lägg till bakgrundsmönster".
  • Välj Smiles från rullgardinsmenyn och konfigurera dessa inställningar:
    • Mönsterfärg – rgba(0,0,0,0.2)
    • Mönsteromvandling: ingen
    • Storlek: Omslag
    • Upprepa Ursprung: uppe till vänster
    • Mönsterupprepning: Upprepa
    • Mönsterblandningsläge: Normal

3. Lägg till bakgrundsmask

Nu när vi har vår bakgrundsbild och mönster applicerat, låt oss lägga till en bakgrundsmask.

  • På fliken Bakgrund, navigera till den sjätte fliken, fliken Bakgrundsmask, klicka sedan på "Lägg till bakgrundsmask".
  • Välj Hörnsjön  från rullgardinsmenyn och konfigurera dessa inställningar:
    • Maskfärg: rgba(10, 10, 10, 0,61)
    • Mask Transform: horisontell
    • Bildförhållande: Horisontell rektangel
    • Storlek: Omslag
    • Maskposition: Mitt till vänster
    • Mask Blender Mode: Normal

3. Konfigurera linjeparametrar

Innan vi går, har denna Hero-sektion unika linjestilar. Låt oss ställa in det här.

  • Storlek:
    • Bredd: 80 %
    • Max bredd: 800px
  • Radjustering:
    • Desktop: Standard
    • Surfplatta: Center
    • Telefon: Center
  • Marginaler:
    • Vänster: 20vw

Sektion Hero #5 design

Låt oss nu designa den femte Hero-sektionen.

överlägg av masker och bakgrundsmönster av Divi

Ladda ner DIVI nu!!!

1. Lägg till en bakgrundsbild

Välj din bakgrundsbild.

2. Lägg till ett mönster

Nu när vi har ställt in vår bakgrundsbild, låt oss tillämpa ett bakgrundsmönster.

  • På fliken Bakgrund, navigera till den sjätte fliken, fliken Bakgrundsmönster, klicka sedan på "Lägg till bakgrundsmönster".
  • Välj Crosses från rullgardinsmenyn och konfigurera dessa inställningar:
    • Mönsterfärg – #ffffff
    • Mönsteromvandling: ingen
    • Storlek: Anpassad storlek
    • Mönsterbredd: 10px
    • Mönsterhöjd: 10px
    • Upprepa Ursprung: Topp Nederst
    • Mönsterupprepning: Upprepa
    • Mönsterblandningsläge: Normal

3. Lägg till bakgrundsmask

Nu när vi har en bakgrundsbild och ett mönster applicerat, låt oss lägga till en bakgrundsmask.

  • På fliken Bakgrund, navigera till den sjätte fliken, fliken Bakgrundsmask, klicka sedan på "Lägg till bakgrundsmask".
  • Välj Diagonala piller  från rullgardinsmenyn och konfigurera dessa inställningar:
    • Maskfärg: rgba(10, 10, 10, 0,61)
    • Mask Transform: horisontell
    • Bildförhållande: Horisontell rektangel
    • Storlek: Omslag
    • Mask Position: mitten vänster
    • Maskblandningsläge: Normal

3. Konfigurera linjeparametrar

Innan vi går, har denna Hero-sektion också unika linjestilar. Låt oss ställa in det här.

  • Storlek:
    • Bredd: 80 %
    • Max bredd: 800px
  • Radjustering:
    • Desktop: Standard
    • Surfplatta: Center
    • Telefon: Center
  • Mellanrum:
    • Marginal (höger): 18vw

Se även: Divi: Hur man lägger till masker och bakgrundsmönster i en rubrik

Slutsats

Att designa en unik och iögonfallande Hero-sektion för din webbplats är enkelt med de nya alternativen bakgrund och mönster mask av Divi. Varje funktion har många alternativ som låter dig skapa verkligt kreativa bakgrunder. 

Dessutom kan du lägga till bakgrundsmönster och masker till alla Divi Builder-objekt! Designalternativen är oändliga.

Förhoppningsvis kommer denna teknik att lägga till ytterligare en användbar designfärdighet för framtida projekt.

Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.

Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.

Poster le commentaire

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.