Vill du skapa bakgrundsövergångar mellan element Divi ?
Skapa sömlösa bakgrundsdesignövergångar mellan element Divi är ett bra sätt att förbättra designen av din webbplats Divi.
Detta gör att du sömlöst kan flytta över en gradient, ett mönster och en bakgrundsmask mellan en linje och en sektion på ett kreativt sätt.
Du kan till exempel ha ett mönster eller en maskövergång i olika färger utan att förlora designens övergripande anpassning och symmetriska utseende.
I den här handledningen kommer vi att använda Divis inbyggda bakgrundsdesignalternativ för att skapa en sömlös bakgrundsdesignövergång mellan en Divi-sektion och en linje. Tillämpningen och mångsidigheten hos denna design är obegränsad, vilket tar Divis bakgrundsdesignalternativ till en helt ny nivå!
Låt oss börja.
undersökningen
Här är en snabb titt på designen vi kommer att bygga i den här handledningen.
Här är några andra exempeldesigner som är möjliga med bara några enkla ändringar av masker och bakgrundsmönster.
Skapa en ny sida med Divi Builder
För att komma igång måste du göra följande:
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änd Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk för att börja designa i Divi.
Skapa en sömlös övergång i bakgrunden mellan en Divi-sektion och en linje
Skapa en rubrik som platshållarinnehåll
Läs också: Divi: Hur man skapar flikar med svävningseffekt från linjer
Innan vi hoppar in måste vi lägga till en rubrik som innehåll fiktiv. För att komma igång lägger du till en rad med en kolumn i standardavsnittet på sidan.
Lägg sedan till en textmodul på raden.
Lägg till text i storlek H1.
Under fliken Designa, uppdatera rubriktextdesignen efter önskemål.
- Typsnitt: Roboto Condensed
- Teckensnittsvikt: Fet
- Stil: TT
- Textjustering: Centrerad
- Textfärg: #000000
- Rubrik Textstorlek: 4vw
- Bokstavsavstånd: 0.1em
- Linjehöjd: 1.3 em
Avsnitt bakgrundsdesign
Lagt till stoppning i avsnittet
När den falska rubriken är på plats öppnar du avsnittsinställningarna och uppdaterar avståndet enligt följande:
- Stoppning (topp och botten): 15vw
Lade till bakgrundsgradienten i avsnittet
Nu när vi har mer utrymme att arbeta med är vi redo att lägga till vår bakgrundsdesign i avsnittet. Under fliken Bakgrundsgradient, lägg till följande gradientpunkter:
- Gradientstopp:
- 0%: #4f0f75 (vid 0%)
- 25 %: #2843c9 (vid 25 %)
- 50 %: #4ae2e0 (vid 50 %)
- 75 %: #3881ff (vid 75 %)
- 100%: #4f0f75 (vid 100%)
Lägga till ett bakgrundsmönster till avsnittet
Under fliken Bakgrundsmönster, uppdatera följande:
- Mönster: Diagonala ränder
- Mönsterfärg: rgba(79,15,117,0.23)
- Transformera: Rotera
- Mönsterstorlek: Anpassad storlek
- Bredd: 7vw
- Höjd: 5vw
- Mönster Upprepa Ursprung: Center
Notera: Se till att använda VW-längdenheten för mönstrets bredd och höjd. Och se också till att ställa in det upprepade ursprunget till "center". Detta kommer att hålla bakgrundsmönstret på samma plats som bakgrundsmönstret som vi lägger till i raden senare.
Lägga till en bakgrundsmask till avsnittet
Under fliken Bakgrundsmask, lägg till följande:
- Bakgrundsmask: Layer Blob
- Maskfärg: rgba(0,0,0,0.7)
- Maskbredd: 100vw
- Position: Center
Notera: Precis som med mönstret måste vi dimensionera masken med hjälp av VW-längdenheten. Vi måste också ge masken en central position.
Linje bakgrundsdesign
Kopiera och klistra in avsnittsbakgrund till radbakgrund
För att påskynda designprocessen för linjebakgrunden, kopiera avsnittets bakgrundsinställningar.
Klistra sedan in bakgrunden på den befintliga raden.
Vid det här laget kan du redan se hur bakgrundsmönstret och masken på linjen gör en sömlös övergång till sektionens bakgrund.
Det ser ut som att linjen har en genomskinlig bakgrund, men det är faktiskt samma mönster och mask som används i avsnittet med samma storlek och position.
Justera radstorlek och stoppning med VW
Därefter måste vi ge vår rad en anpassad bredd med hjälp av VW-längdenheten. Uppdatera följande:
- Bredd: 75vw
- Max bredd: 75vw
- Stoppning (topp, botten, vänster och höger): 10vw
Justera gradientstopp på linjen
Därefter måste vi justera gradientstoppen på linjebakgrunden för en sömlös övergång till sektionsbakgrundsgradienten.
Under fliken Bakgrundsgradient, behåller vi de tre mittersta gradientpunkterna som ärvts från avsnittsbakgrunden) och tar bort de första och sista gradientstoppen.
Ställ sedan in det första stoppet på 0% och det tredje stoppet till 100%. När du är klar bör du ha följande gradienter.
- Gradient stannar
- 0 %: #2843c9
- 50 %: #4ae2e0
- 100 %: #3881ff
Lägg till boxskugga på linjen
För att ge designen ett litet lyft och betona den sömlösa övergången av bakgrunden kan vi lägga till en boxskugga i raden.
- Box Shadow: se skärmdump
- Vertikal position: 0px
- Box Shadow Blur Styrka: 4vw
- Skuggfärg: rgba(0,0,0,0.5)
Justera linjebakgrundsmönsterfärgen
Nu när vi har alla bakgrundselement på plats kan vi börja justera färgerna för en mer kreativ design.
Under alternativet Bakgrundsmönster rad, uppdatera följande:
- Mönsterfärg: rgba(255,255,255,0.23)
Justera linjebakgrundsmaskens färg
Vi kan också uppdatera maskens färg för linjen för att verkligen få designen att sticka ut.
Under fliken Bakgrundsmask, uppdatera följande:
- Maskfärg: #ffffff
- Mask Transform: inverterad
Slutresultat
Låt oss se det slutliga resultatet.
Ladda ner DIVI nu!!!
Fler möjligheter
Här är några andra exempeldesigner som är möjliga med bara några enkla ändringar av masker och bakgrundsmönster.
Se även: Divi: Hur man använder "Gradient Builder" för att försköna dina bilder
Ladda ner DIVI nu!!!
Slutsats
Nyckeln till att skapa sömlösa bakgrundsdesignövergångar i Divi är att använda dessa VW-längdenheter klokt.
Först måste vi skapa en sektionsbakgrundsdesign som passar bredden på webbläsarens vyport (från en centrerad position på sidan). När det är klart kan vi använda samma enradiga bakgrundsdesign. Efter det har vi bara några justeringar av gradienten och färgerna för en fantastisk design.
Förhoppningsvis kommer denna teknik att lägga till ytterligare en användbar designfärdighet för framtida projekt.
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.
Tveka inte att också 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.
.
