I tidigare versioner av Divi var det inte ett inbyggt alternativ att lägga till en gradientöverlagring till en parallaxbakgrundsbild. Men med Divis nya bakgrundsalternativ (och Gradient Builder), kan du enkelt skapa vackra parallaxbakgrunder med otaliga gradientöverläggsdesigner.
I den här handledningen kommer vi att visa dig hur du använder Divis bakgrundsalternativ för att lägga till en färgglad gradientöverlagring som blandas med en bakgrundsbild med både True och CSS Parallax-metoder.
Smygtitt
Här är en snabb titt på bakgrundsdesignerna vi kommer att bygga i den här handledningen.
Den här första har en övertoning med färgblandningsläget som används på bakgrundsbilden med metoden True Parallax.
Och här är samma design med CSS Parallax-metoden. Lägg märke till att gradienten förblir fixerad/fäst på bakgrundsbilden så att den verkar vara en del av den faktiska bilden och inte bara ett lager.
Och här är ett exempel på en övertoning som använder halvtransparenta färgstopp utan blandningsläge.
Konceptet
Grundidén med denna design innefattar två steg:
1. Skapa en bakgrundsgradient för ett avsnitt med hjälp av gradientbyggaren och se till att placera gradienten ovanför bakgrundsbilden.
2. Lägg till en bakgrundsbild i samma avsnitt som använder en av parallaxmetoderna och färgblandningsläget.
Detta kommer att tillåta den färgglada gradienten att överlappa parallaxbilden medan den rör sig när du rullar ner på sidan. Färgblandningsläget slår samman övertoningen med bilden för en vacker bild som ser bra ut med parallax.
Ladda ner layouten GRATIS
För att lägga händerna på designen från denna handledning måste du först ladda ner den med knappen nedan. Att öka
tillgång till nedladdningen måste du prenumerera på vår Divi Daily e-postlista genom att använda formuläret nedan. Som en ny
prenumerant kommer du att få ännu mer Divi-godhet och ett gratis Divi Layout-paket varje måndag! Om du redan är på
listan, skriv bara in din e-postadress nedan och klicka på ladda ner. Du kommer inte att ”prenumereras på nytt” eller få extra e-postmeddelanden.
För att importera sektionslayouten till ditt Divi-bibliotek gör du följande:
- Navigera till Divi-biblioteket.
- Klicka på knappen Importera högst upp på sidan.
- I portabilitets popup, välj fliken import
- Välj nedladdningsfilen från din dator (se till att packa upp filen först och använd JSON-filen).
- Klicka sedan på importknappen.
När det är klart kommer sektionslayouten att vara tillgänglig i Divi Builder.
Låt oss gå till handledningen, ska vi?
Vad du behöver för att komma igång
För att komma igång måste du göra följande:
- Om du inte har ännu, installera och aktivera Divi-temat.
- Skapa en ny sida i WordPress och använd Divi Builder för att redigera sidan i användargränssnittet (visuell byggare).
- Välj alternativet ”Bygg från grunden”.
- Ha nu en tom duk att börja designa i Divi!
Hur man skapar en parallaxbildbakgrund med en blandad gradientöverlagring i Divi
1. Skapa fyllningsraden och rubriktexten
Även om vi kommer att fokusera på avsnittets bakgrundsdesign för denna handledning, är det vettigt att lägga till en ifyllningsrad och rubrik för att få en bättre känsla för hur designen kommer att se ut i ett normalt användningsfall.
För att komma igång, lägg till en rad med en kolumn i det befintliga avsnittet i byggaren.
Lägg sedan till en textmodul i raden/kolumnen.
Textinställningar
Öppna inställningarna för textmodulen. Under fliken Innehåll lägger du till en H2-rubrik till brödtexten.
<h2>Say Hello to Divi</h2>
Under designfliken uppdaterar du rubrikalternativen och maxbredden enligt följande:
- Rubrik 2 Teckensnitt: Inter
- Rubrik 2 Teckensnittsvikt: Fet
- Rubrik 2 Textfärg: #fff
- Rubrik 2 Textstorlek: 8vw
- Rubrik 2 Linjehöjd: 1,2em
- Rubrik 2 Text Shadow: se skärmdump
- Rubrik 2 Text Shadow Blur Strength: 0,28em
- Rubrik 2 Textskuggfärg: #10076d
Radinställningar
Nu när rubriken är på plats, låt oss uppdatera radstorleken och avståndet för att göra det mer lyhört.
Öppna radinställningarna. Uppdatera följande under fliken Design:
- Bredd: 100 %
- Max bredd: 80vw
- Vaddering: 15vw topp, 15vw botten
2. Designa övertoningsbakgrunden för sektionen
Nu när ifyllningsinnehållet är klart är vi redo att börja designa vår sektionsgradientbakgrund.
Inställningar för bakgrundsgradient
Öppna inställningarna för avsnittet. Under fliken Innehåll väljer du fliken gradient under bakgrundsalternativen och uppdaterar gradientalternativen enligt följande:
- Gradientstopp 1: #0094ff (vid 0%)
- Gradientstopp 2: #ff00c7 (vid 25 %)
- Gradientstopp 3: #0094ff (vid 50 %)
- Gradientstopp 4: #ff00c7 (vid 75 %)
- Gradientstopp 5: #0094ff (vid 100 %)
- Gradienttyp: Cirkulär
- Gradientposition: Längst ner till vänster
- Placera övertoning ovanför bakgrundsbild: JA
3. Lägg till en parallaxbakgrundsbild med färgblandningsläge
När gradientdesignen är klar är vi redo att lägga till vår parallaxbakgrundsbild. Sedan kommer vi att tillämpa färgblandningsläget för att blanda gradientdesignen med bakgrundsbilden för en vacker parallaxbakgrundsdesign.
Inställningar för bakgrundsbild
När du är i bakgrundsalternativen i avsnittet väljer du fliken Bakgrundsbild och ladda upp en bakgrundsbild. Uppdateringen följande:
- Använd parallaxeffekt: JA
- Parallaxmetod: Sann Parallax
- Bakgrundsbildsblandning: Färg
Varför färgblandningsläget?
Färgblandningsläget blandar en gråskaleversion av bilden med färgerna (nyans och mättnad) i övertoningen. Detta bevarar bildens visuella kvalitet med ett helt nytt färgschema.
4. Lägg till en bakgrundsmask (varför inte?)
För att avsluta designen, låt oss lägga till en bakgrundsmask som kommer att sitta bakom vår rubrik för att få texten att poppa lite mer och framhäva parallaxeffekten.
Inställningar för bakgrundsmask
När du är i bakgrundsalternativen i avsnittet väljer du fliken Bakgrundsmask och uppdaterar följande:
- Mask: Blad
- Mask Transform: Vänd horisontellt, Invertera
- Maskstorlek: Anpassad storlek
- Maskbredd: 72vw
- Maskposition: Överst till höger
5. Lägg till ett tillfälligt rullningsutrymme för testning
Innan vi kollar in de slutliga resultaten måste vi lägga till lite utrymme ovanför och under vår sektion så att vi har tillräckligt med rullningsutrymme för att se parallaxeffekten i aktion. För att göra detta, lägg helt enkelt till följande marginal till avsnittet:
- Marginal: 80vh topp, 80vh botten
Glöm inte att ta bort detta mellanrum när du lägger till avsnittet på din egen sida.
Slutliga resultat
Låt oss ta en titt på det slutliga resultatet på en livesida.
Och här är samma design med CSS Parallax-metoden. Lägg märke till att gradienten förblir fixerad/fäst på bakgrundsbilden så att den verkar vara en del av den faktiska bilden och inte bara ett lager.
Använda en övertoning utan blandningsläge
Även om Vi älskar blandningsläget för den här designen, kanske du känner behovet av en mer traditionell gradientöverlagring för din parallaxbakgrundsbild.
Du kan till exempel välja att inte lägga till ett blandningsläge i designen och helt enkelt ge vart och ett av färgstoppen för gradientfärg en halvtransparent färg. Detta skulle tillåta dig att se en mer subtil representation av bakgrundsbilden bakom övertoningsöverlägget.
För att göra detta kan du sänka opaciteten för varje färg till något som 72 % och sedan ställa tillbaka blandningsalternativet för bakgrundsbild till Normal.
Här är ett exempel på hur detta skulle se ut.
Prova fler gradienter!
De Gradient Builder kan skapa så många fler färger och gradienttyper som du kan använda för att få dessa lagerbakgrundsdesigner att sticka ut. Du kan kolla in vår live demos med fler möjligheter för bakgrundsgradientdesign.
Slutgiltiga tankar
Att skapa en parallaxbakgrundsdesign med en blandad gradientöverlagring kan enkelt göras med Divis inbyggda bakgrundsalternativ. Det ger dig verkligen kraften i Photoshop i Divi som aldrig förr. Utforska gärna olika färgkombinationer med otaliga gradientfärgstopp och positioner. Dessutom kan du experimentera med olika blandningslägen också.
Förhoppningsvis kommer detta att vara användbart för din egen webbplats eller ditt nästa projekt.