Sammenlægning af flere billeder kan være nyttigt til at skabe professionelle baggrunde til din Websted. Ideen er at tage to eller tre separate billeder og overlejre dem. Brug derefter en blandingstilstand til at blande lagene sammen for at skabe et sømløst, samlet design.

Hvert element i Divi Builder har en indbygget fletningstilstand og filterindstillinger, der gør det let at flette elementerne i Divi-builderen. Selvfølgelig kan du blande billeder i Photoshop (eller en anden fotoredigerer), men for dem, der leder efter en praktisk Divi-løsning, skal denne tutorial hjælpe dig, for med Divi er det ret nemt. Når du har billederne på det rigtige sted, kan du blande dem med blot et par klik. Og selvfølgelig har du et arsenal af Divi-muligheder for at få den sidste hånd og give en ny kreativ dimension til designet.

Lad os starte.

undersøgelse

Her er en oversigt over det design, vi skal bygge sammen.

Hvad du behøver for at komme i gang

For at begynde skal du gøre følgende:

1. Hvis du ikke allerede har gjort det, skal du installere og aktivere Divi-tema installeret (eller Divi Builder-pluginnet, hvis du ikke bruger Divi-tema).
2. Opret en ny side i WordPress og brug Divi Builder til at redigere siden i front-end (visuel konstruktør).
3. Upload et par dummy-billeder til mediebiblioteket, der skal bruges til vejledningen. Jeg bruger billeder fra Eye Doctor Layout Pack .

Derefter har du et tomt lærred til at begynde at designe i Divi.

Sådan blandes flere billeder for at skabe et brugerdefineret baggrundsdesign i Divi

Lad os starte med sektionen og linjen

For at få tingene gjort skal du tilføje en række af en kolonne til det almindelige afsnit.

Tilføjelse af billeder med billedmodulet

Billede n ° 1

Når rækken og søjlen er defineret, tilføj et billedmodul til linjen.

Upload et billede, der er ca. 500 x 700 pixels. Jeg bruger en fra Eye Doctor Layout Pack.

Når billedet er uploadet, skal du gøre billedet til den maksimale bredde ved hjælp af vw-længdeenheden, så det passer godt sammen med de andre billeder, som vi skal flette, og juster det derefter til venstre som følger :

• Maksimal bredde: 33vw
• Justering af modulet: venstre

Vi ønsker, at det næste billede, vi tilføjer, skal justeres til højre for det billede. Så vi er nødt til at flyde dette billede til venstre. For at gøre dette skal du tilføje følgende CSS til hovedelementet:

float: left;

Billede n ° 2

Tilføj derefter et nyt billedmodul under det aktuelle billede.

Download derefter et nyt billede, hvis dimensioner er tæt på 1000 pixels med 667 pixels.

Giv derefter billedet en ny bredde og en ny maksimal justering.

• Maksimal bredde: 40vw
• Modulets justering: højre

Da det første billede flyder til venstre, skal det andet billede nu være ved siden af ​​højre.

Vi kommer tilbage for at lægge sidste hånd på disse billeder, men lad os nu gå videre til indstillingerne i sektionen.

Sektionsindstillinger

Åbn sektionsindstillingerne, og tilføj et baggrundsbillede og gradient som følger:

• Baggrundsbillede: [download billede ca. 1920 px ved 1280 px]
  

• Venstre baggrundsgradient Farve: rgba (1,16,63,0.64)
• Højre baggrundsgradient Farve: rgba (12,113,195,0.82)
• Placer gradienten over baggrundsbilledet: YES

Justér derefter polstret lidt.

• Polstring (kontor): 0px øverst, 0px i bunden
• Polstring (telefon): 0px øverst, 10vw i bunden

Linieindstillinger

Når sektionen er færdig, skal du åbne linjeindstillingerne og opdatere følgende punkter:

• Bredde: 100%;
• Maksimal bredde: 100%;
• Polstring: 0px øverst, 0px i bunden

Føj fletningstilstand til linjen

Nu skal linjen dække hele bunden af ​​sektionen. Dette giver os mulighed for at tilføje en fletningstilstand til linjen for at flette de to billeder med baggrunden for sektionen. For at gøre dette skal du tilføje følgende blandingstilstand.

• Fusionsfunktion: formere sig

Hvorfor formere sig?

Multiply blend mode multiplicerer det aktuelle lag / række (inklusive eventuelle billeder i det) med laget under det (sektionens baggrund). En nem måde at tænke over effekten på er at forestille sig to dias i en diaprojektor stablet bag hinanden. Hvis du projicerer de to billeder på en skærm, får du en lidt mørkere blanding af de to.

Centerbilleder lodret

Dette er ikke nødvendigt, men hvis du vil sikre dig, at begge billeder i rækken forbliver centreret lodret, kan du tilføje et CSS-uddrag til kolonnen. For at gøre dette skal du åbne rækkeindstillinger og derefter klikke på kolonneindstillinger. Føj derefter følgende CSS-kode til hovedelementet.

display: flex; align-items: center;

Sidste berøring til de to bedste billeder

Lige nu parrer vores to øverste billeder godt, men de kan bruge et par designændringer for at få det til at se lidt mere professionelt ud. Vi kan bruge en hvid boksskygge til at blødgøre billedets kanter og bruge kommandoen Transform til at placere dem nøjagtigt, hvor vi vil have dem.

Image # 1 Final Taster

Åbn billedmodulindstillingerne til venstre, og opdater følgende:

• Box Shadow: se skærmbillede
• Box Shadow Blur Force: 6vw
• Kasseskærmtykkelse: 6vw
• Skygge farve: #ffffff
  

• Transformator Oversæt: 5vw (X akse), 11vw (Y akse)

Image # 2 Final Taster

Når du er færdig med at manipulere billede # 1 til venstre, skal du åbne indstillingerne for billede # 2 til højre og foretage følgende ændringer:

• Box Shadow: se skærmbillede
• Box Shadow Blur Force: 3vw
• Box Shadow Spread Force: 3vw
• Skygge farve: #ffffff

Vi kan endda tilføje nogle filtre for at gøre billedet skarpere.

• Mætning: 30%
• Opacitet: 60%

Tilføj tekstindhold

Nu hvor vores sektion er komplet med tre pænt blandede billeder, kan vi tilføje vores indhold øverst i afsnittet. For at gøre dette skal du tilføje en ny sektion under den nuværende sektion.

Føj derefter en række af en kolonne til det regulære afsnit.

Føj derefter et tekstmodul til linjen.

Kropsindhold

Opdater indhold af tekstmodulet med indhold af følgende organ:

Book en øjenundersøgelse Dit indhold kommer her. Rediger eller fjern denne tekst indbygget eller i modulets indholdsindstillinger. Du kan også style alle aspekter af dette indhold i modulets designindstillinger og endda anvende brugerdefineret CSS til denne tekst i modulet Avancerede indstillinger

Formatering af teksten

Når kropsindholdet er på plads, skal du opdatere designparametrene som følger:

• Tekst tekst farve: #ffffff
• Skrifttype: Poppins
• Titel tekst farve: #ffffff
• Tekst Titel Størrelse: 5vw
• Bredde: 60vw (desktop), 100% (telefon)
• Margen (desktop): -35% op, 35% nede
• Marginal (telefon): -70% op, 70% nede

Endelig design

Her er det endelige design.

endelige tanker

Divis blandingstilstand og filterindstillinger giver alt hvad du behøver for at blande billeder for at skabe professionel baggrund. Tricket er at placere billederne ved hjælp af vw-længdeenheder, så baggrundsdesignet også er lydhørt på mobilen. Men når billederne er på plads, kan vi eksperimentere med alle slags blandingstilstande og utallige andre designmuligheder for at skabe ekstremt harmoniske designs.

Håber, at denne artikel har givet dig inspiration og håber at høre fra dig i kommentarerne.

Til dit helbred!