Att slå ihop flera bilder kan vara användbart för att skapa professionella bakgrunder för din webbplats. Tanken är att ta två eller tre separata bilder och lägga dem ovanpå. Använd sedan ett blandningsläge för att blanda ihop lagren för att skapa en sömlös, enhetlig design.

Varje element i Divi Builder har ett inbyggt sammanslagningsläge och filteralternativ som gör det enkelt att slå samman element i Divi-byggaren. Självklart kan du blanda bilder i Photoshop (eller en annan fotoredigerare), men för dem som letar efter en praktisk Divi-lösning bör den här guiden hjälpa dig, för med Divi är det ganska enkelt. När du har bilderna på rätt plats kan du blanda dem med bara några få klick. Och naturligtvis har du en arsenal av Divi-alternativ för att få sista handen och ge designen en ny kreativ dimension.

Låt oss börja.

undersökningen

Här är en översikt över designen vi ska bygga tillsammans.

Vad du behöver för att komma igång

För att börja måste du göra följande:

1. Om du inte redan har gjort det, installera och aktivera Divi-tema installerat (eller Divi Builder-plugin om du inte använder Divi-tema).
2. Skapa en ny sida i WordPress och använd Divi Builder för att redigera sidan i front-enden (visuell konstruktör).
3. Ladda upp några dummybilder till mediebiblioteket för att använda för självstudien. Jag använder bilder från Eye Doctor Layout Pack .

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

Hur man blandar flera bilder för att skapa en anpassad bakgrundsdesign i Divi

Låt oss börja med avsnittet och raden

För att göra saker, lägg till en rad i en kolumn i det vanliga avsnittet.

Lägga till bilder med bildmodulen

Bild n ° 1

När raden och kolumnen har definierats lägger du till en bildmodul till raden.

Ladda upp en bild som är cirka 500 och 700 pixlar. Jag använder en från Eye Doctor Layout Pack.

När bilden har laddats upp, gör bilden maximal bredd med hjälp av vw-längdenheten så att den passar bra med de andra bilderna som vi ska slå ihop och rikta sedan in den åt vänster enligt följande :

• Maximal bredd: 33vw
• Justering av modulen: vänster

Vi vill att nästa bild vi lägger till ska anpassas till höger om bilden. Så vi måste flyta bilden till vänster. För att göra detta, lägg till följande CSS i huvudelementet:

float: left;

Bild n ° 2

Lägg sedan till en ny bildmodul under den aktuella bilden.

Ladda sedan ner en ny bild vars dimensioner ligger nära 1000 pixlar med 667 pixlar.

Ge sedan bilden en ny bredd och en ny maximal inriktning.

• Maximal bredd: 40vw
• Modulens inriktning: höger

Eftersom den första bilden flyter till vänster måste den andra bilden nu ligga intill höger.

Vi kommer tillbaka för att lägga lite prick på dessa bilder, men nu går vi vidare till inställningsavsnittet.

Avsnitt inställningar

Öppna sektionsinställningarna och lägg till en bakgrundsbild och lutning enligt följande:

• Bakgrundsbild: [ladda ner bild ca 1920px vid 1280px]
  

• Vänster bakgrundsgradient Färg: rgba (1,16,63,0.64)
• Höger bakgrundsgradient Färg: rgba (12,113,195,0.82)
• Placera övertoningen ovanför bakgrundsbilden: YES

Justera sedan stoppningen lite.

• Klädsel (kontor): 0px längst upp, 0px längst ner
• Polstring (telefon): 0px överst, 10vw längst ner

Linjeinställningar

När avsnittet är klart öppnar du radinställningarna och uppdaterar följande objekt:

• Bredd: 100%;
• Maximal bredd: 100%;
• Klädsel: 0px längst upp, 0px längst ner

Lägg till fusionsläget på raden

Nu ska linjen täcka hela botten av sektionen. Detta gör att vi kan lägga till ett sammanslagningsläge på raden för att slå samman de två bilderna med bakgrunden i avsnittet. För att göra detta, lägg till följande blandningsläge.

• Fusionsläge: multiplicera

Varför multiplicera?

Multiplikera blandningsläge multiplicerar det aktuella lagret / raden (inklusive eventuella bilder i det) med lagret under det (sektionsbakgrunden). Ett enkelt sätt att tänka på effekten är att föreställa sig två bilder i en bildprojektor staplade varandra bakom varandra. Om du projicerar de två bilderna på en skärm får du en något mörkare blandning av de två.

Centrera bilder vertikalt

Detta är inte nödvändigt, men om du vill se till att båda bilderna i raden förblir centrerade vertikalt kan du lägga till ett CSS-kodavsnitt i kolumnen. För att göra detta, öppna radinställningar och klicka sedan på kolumninställningar. Lägg sedan till följande CSS-kod i huvudelementet.

display: flex; align-items: center;

Sista handen till de två bästa bilderna

Just nu parar våra två bästa bilder bra, men de kan använda några designändringar för att få det att se lite mer professionellt ut. Vi kan använda en vit rutaskugga för att mjuka upp kanterna på bilderna och använda kommandot Transform för att placera dem exakt där vi vill att de ska stanna.

Bild # 1 Slutknappar

Öppna bildmodulinställningarna till vänster och uppdatera följande:

• Box Shadow: se skärmdump
• Box Shadow Blur Force: 6vw
• Lådans skuggtjocklek: 6vw
• Skuggfärg: #ffffff
  

• Transformator Translate: 5vw (X-axel), 11vw (Y-axel)

Bild # 2 Slutknappar

När du är klar med att manipulera bild 1 till vänster öppnar du inställningarna för bild 2 till höger och gör följande ändringar:

• Box Shadow: se skärmdump
• Box Shadow Blur Force: 3vw
• Box Shadow Spread Force: 3vw
• Skuggfärg: #ffffff

Vi kan till och med lägga till några filter för att göra bilden skarpare.

• Mättnad: 30%
• Opacitet: 60%

Lägg till textinnehåll

Nu när vår sektion är komplett med tre snyggt blandade bilder kan vi lägga till vår innehåll högst upp i avsnittet. För att göra detta, lägg till ett nytt avsnitt under det aktuella avsnittet.

Lägg sedan till en rad i en kolumn i det vanliga avsnittet.

Lägg sedan till en textmodul till raden.

Kroppsinnehåll

Uppdatera innehåll av textmodulen med innehåll av följande organ:

Boka en synundersökning Ditt innehåll går här. Redigera eller ta bort texten inline eller i modulen Innehållsinställningar. Du kan också utforma alla aspekter av detta innehåll i modulen Designinställningar och till och med tillämpa anpassad CSS på denna text i modulen Avancerade inställningar

Formatera texten

När kroppsinnehållet är på plats uppdaterar du designparametrarna enligt följande:

• Texttextfärg: #ffffff
• Teckensnitt: Poppins
• Titeltextfärg: #ffffff
• Text Titel Storlek: 5vw
• Bredd: 60vw (skrivbord), 100% (telefon)
• Marginal (skrivbord): -35% upp, 35% ner
• Marginal (telefon): -70% upp, 70% ner

Slutlig design

Här är den slutliga designen.

Avslutande tankar

Divis blandningsläge och filteralternativ ger allt du behöver för att blanda bilder för att skapa professionella bakgrunder. Tricket är att placera bilderna med hjälp av vw-längdenheter så att bakgrundsdesignen också är lyhörd på mobilen. Men när bilderna är på plats kan vi experimentera med alla slags blandningslägen och otaliga andra designalternativ för att skapa extremt harmoniska mönster.

Hoppas att den här artikeln har gett dig inspiration och hoppas kunna höra från dig i kommentarerna.

Till din hälsa!