Gå till innehållet

Hur man slår samman bilder för att skapa en anpassad bakgrundsdesign i Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Att slå samman 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 över dem. Använd sedan ett blandningsläge för att blanda lagren för att skapa en enhetlig, harmonisk 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.

Exempel på modell för att bygga divi

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 har gjort det ännu, installera och aktivera det installerade Divi-temat (eller Divi Builder-plugin-programmet om du inte använder Divi-temat).
  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ägg till en divisektion

Lägga till bilder med bildmodulen

Bild n ° 1

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

Lägg till en divi-bildmodul

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

Divi-bildinställningarNä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

Ändring av divi-modulens bildjusteringVi 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;

Lägg till en divi css-kod

Bild n ° 2

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

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Lägg till en bild under divi

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

Sätt in en bild av divi 2-modulen

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.

Divi-bildändring

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] Lägg till en bakgrundsbild för divisektion
  • 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

Lägg till en försämrad effekt

Justera sedan stoppningen lite.

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

Konfigurera divi-stoppningLinjeinställningar

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

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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

Inställning av Divi Line-modul

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

Divi line merge mode

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;

Linjeparameterdivi

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
    Skuggkonfigurations divi bildmodul
  • Transformator Translate: 5vw (X-axel), 11vw (Y-axel)

Divi bildmodul axeltransformation

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

Modifiering av andra divi-bilden

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

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

Divi-bildmodulfilterkonfiguration

Lägg till textinnehåll

Nu när vår sektion är komplett med tre snyggt blandade bilder kan vi lägga till vårt 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 till ett nytt avsnitt om diviLägg sedan till en rad i en kolumn i det vanliga avsnittet.

Välj divi-layout

Lägg sedan till en textmodul till raden.

Infoga en textmodul andra avsnitt divi

Kroppsinnehåll

Uppdatera innehållet i textmodulen med följande kroppsinnehåll:

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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

Boka en divi-modul tentamen

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

Teckensnittsanpassning för divi-textmodul

Slutlig design

Här är den slutliga designen.

Slutlig designbok ett samråd

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!

Den här artikeln innehåller kommentarer 2

Lämna en kommentar

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.

Tillbaka till toppen
2 aktier
del2
tweet
Enregistrer