Vill du använda maskerna och mönstren för din hjältesektion i Divi ?
Divis nya masker och bakgrundsmönster är en av våra coolaste nya designfunktioner hittills. Var och en av maskerna och mönstren kan kombineras med andra bakgrundselement (som färger, bilder och övertoningar) för otaliga unika kombinationer med bara några få klick.
Idag ska vi visa dig hur du använder Divi och dess nya masker och bakgrundsmönster för att designa en hjältesektion.
I den här handledningen kommer vi att täcka de viktiga stegen som behövs för att skapa masker och bakgrundsmönster.
Vi kommer till och med att visa hur man placerar bakgrundsbilder för att passa en maskdesign. Detta bör ge dig outils du måste skapa den perfekta hjältesektionen för din webbplats på några minuter.
undersökningen
Här är en snabb titt på designen vi kommer att skapa i den här handledningen.
Läs också: Divi: Hur man skapar ett responsivt bildrutnät med länkar och svävningseffekter
Exempelavsnitt av Hero med vit mask och mönster.
Här är en mörk version av samma Hero-sektion med en svart mask och mönster.
Med denna design på plats kan du enkelt byta masker och maskpositioner med bara några klick!
Skapa en ny sida med Divi Builder
Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
Ge den en titel som är vettig för dig och klicka Använda Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk att börja designa i Divi.
Hur man använder Divis masker och bakgrundsmönster på din hjältesektion
1. Skapa layoutstrukturen
För det här hjälteavsnittet kommer vi med en klassisk layoutstruktur med titeln och uppmaningen till vänster och en bild (eller visuell design) till höger.
För det här exemplet kommer vår visuella design att skapas med hjälp av Divis bakgrundsalternativ. Men innan vi kommer till det nitty-gritty måste vi skapa en rad med två kolumner för att spara utrymme på höger sida av sidan för att visa upp våra avsnitts bakgrundsmasker och mönsterdesign.
2. Lägg till titeln och uppmaningen
I den vänstra kolumnen (kolumn 1), lägg till en textmodul för din huvudtitel, en textmodul för din undertext och en knappmodul för din knapp.
3. Lägg till vertikalt avstånd till sektionen
För att få vår bakgrundsdesign att se lång och vacker ut måste vi lägga till vertikal höjd till sektionen. Ett enkelt sätt att göra detta är att lägga till stoppning i toppen och botten av sektionen. Tänk på att vi måste justera stoppningen på surfplattan och telefonens skärm för att göra plats för vår bakgrundsdesign när kolumnerna är staplade vertikalt.
Öppna avsnittsinställningar. Under designfliken uppdaterar du stoppningen enligt följande:
- Stoppning:
- Desktop: Top 20vw, Bottom 20vw
- Surfplatta: Top 8vw, Bottom 48vw
- Telefon: Top 8vw, Bottom 70vw
4. Lägg till bakgrundsbild och gradient
Därefter kan vi lägga till en bakgrundsbild och gradient till avsnittet. Tänk på att huvudfokuspunkten för bakgrundsbilden kommer att avslöjas på höger sida av avsnittet, så använd en bild som har det du vill se på höger sida.
I det här exemplet använder vi en bild med en stadssilhuett. Den högra sidan av bilden har närmare och snyggare byggnader, så det fungerar riktigt bra.
Under fliken Bakgrundsbild, ladda upp bilden i avsnittets bakgrund.
I Divi kan du enkelt lägga till en färggradient på bakgrundsbilden. Under fliken Bakgrundsgradient, lägg till följande gradient i bakgrunden till avsnittet:
- Gradientstopp:
- 0%: #3e22ff
- 100 %: klar
- Fyrkantig gradient ovanför bakgrundsbild : JA
5. Skapa ett bakgrundsmönster för avsnittet
Nu när vi har vår bakgrundsbild och gradient redo kan vi lägga till ett bakgrundsmönster för att slutföra designen.
I det här exemplet kommer vi att använda ett subtilt mönster som bara lägger till lite textur för att ge det ett mer unikt utseende.
Under fliken Bakgrundsmönster, uppdatera följande:
- Bakgrundsmönster: Tuftad
TRICK: Med bakgrundsmönster är det vanligtvis bäst att hålla det subtilt. Försök att använda anpassade storlekar för mindre mönster och sänk sedan färgopaciteten.
6. Skapa en bakgrundsmask för avsnittet
Med vårt bakgrundsmönster på plats är vi äntligen redo att testa en helt ny bakgrundsmask för vår design. Det finns ett gäng alternativ och varianter att välja mellan. För det här exemplet kommer vi att använda honeycomb-masken.
Under fliken Bakgrundsmask, uppdatera följande:
- Mask: Honeycomb
- Maskfärg: #ffffff
- Storlek: Omslag
7. Justera bakgrundsbildens position
Eftersom vi använder en bakgrundsmask är en del av vår bakgrundsbild maskerad (eller "maskerad").
I det här exemplet ser vi till att bilden längst ner till höger är mest synlig, och vi flyttar den en bit åt höger för att visa fler byggnader.
Uppdatera följande under fliken Bild:
- Bakgrundsbild Position: Nederst till höger
- Bakgrundsbild horisontell offset: -4vw
8. Använd ett blandningsläge
Ett sätt att bli kreativ med alla dessa bakgrundselement är att lägga till ett blandningsläge. Blandningslägen kan läggas till vilket som helst av bakgrundsalternativen och de kan användas för att blanda flera bakgrundslager (bild, gradient, mask, etc.) på kreativa sätt.
I det här exemplet blandar vi bakgrundsbilden med gradientfärgen. För att göra detta, klicka på fliken Bakgrundsbild och lägg till ett blandningsläge för att blanda övertoningsfärgen med bakgrundsbilden enligt följande:
- Bakgrundsbildsblandning: Multiplicera
9. Justera bakgrundsmask för mobil
Det är viktigt att se till att bakgrundsmaskdesignen också ser bra ut på mobila enheter. Lyckligtvis gör de inbyggda alternativen denna process enklare.
Kom ihåg att vi redan har lagt till den extra stoppningen på surfplattan och telefonen för att göra plats för vår bakgrundsdesign.
Nu behöver vi bara använda alternativen för bakgrundsomvandling och bildförhållande för att justera masken för mobilen.
Under fliken Bakgrundsmask, aktivera responsiva alternativ och uppdatera följande:
Tablettversion
- Mask Transform: Vänd vertikalt, Vänd horisontellt, Rotera
- Mask bildförhållande: kvadratisk
Telefonversion
- Mask Transform: Vänd vertikalt, Vänd horisontellt, Rotera
- Mask bildförhållande: Porträtt
Resultatet
Kolla in designen vi har skapat hittills.
Stationär dator
Tablettversion
Telefonupplaga
10. Skapa en mörk version
Om du vill ha en mörk version av denna design, ändra bara bakgrundsmaskens färg till en mörk färg (som svart).
Ändra sedan färgen på mönstret till svart.
Ändra sedan titeln och undertexten till vit. Och du kanske vill uppdatera knappfärgen också.
Så här ser den mörka versionen ut.
Slutresultat
Se även: Divi: Hur man anpassar länken "Läs mer" för en blogg
Här är en ny titt på våra slutresultat.
Ladda ner DIVI nu!!!
Slutsats
Designa en hjältesektion för din webbplats är jättekul med masker och bakgrundsmönster av Divi. Bakgrundsalternativ är lätta att ändra för att få den perfekta designen. Och det finns många andra alternativ du kan använda (som blandningslägen) för att skapa ännu mer unika bakgrunder.
Dessutom kan du lägga till masker och mönster till alla Divi-element, inte bara sektioner. Så kul att experimentera!
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, genom att 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.
.
