Chcete skombinovať masky pozadia a oddeľovač divi mať vznešené a jedinečné pozadie?
Kombinácia masiek pozadia s rozdeľovačmi sekcií v divi pridáva ďalšiu vrstvu kreativity do už tak silného arzenálu možností dizajnu pozadia.
Okrem možností pozadia umožňujú oddeľovače sekcií používateľom vylepšiť ich návrhy pozadia.
V tomto návode vám ukážeme, ako kombinovať masky pozadia s rozdeľovačmi sekcií divi. Poskytneme vám podrobné pokyny, ako pomocou tejto techniky vytvoriť dizajn pozadia pre sekciu Divi.
Navyše vám dokonca vysvetlíme, ako vytvoriť alternatívne návrhy pomocou niekoľkých jednoduchých vylepšení.
Začnime!
prehľad
Tu je náhľad kresieb v tomto návode.
Koncept
Základným konceptom tohto návodu je skombinovať masku pozadia a oddeľovače sekcií, aby ste vytvorili ešte jedinečnejšie tvary masky.
Najprv pridáme masku pozadia.
Ďalej pridáme oddeľovače sekcií na kreatívne dotvorenie tvaru masky.
Vytvorte novú stránku pomocou Divi Builder
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Kombinujte masky pozadia a rozdeľovače v Divi
Pridajte veľkosť sekcie a medzery
Na začiatok pridáme veľkosť a medzery do existujúcej sekcie v konštruktore. Pozastavíme pridávanie riadku alebo všetkých obsah aby sme sa mohli sústrediť na návrh pozadia sekcie.
Otvorte nastavenia sekcie. Pod záložkou dizajn, aktualizujte veľkosť a medzery takto:
- Minimálna výška: 50 vw
- Výplň (horná a dolná časť): 0 pixelov
Vytvorte gradient pozadia
Keď má sekcia určitú výšku, sme pripravení pridať do sekcie gradient pozadia.
Pod záložkou obsah, kliknite na kartu Prechod pozadia pod možnosťami pozadia. Potom pridajte gradient takto:
- Prechodové zarážky
- 20%: #1a2a6c
- 60 %: #b21f1f
- 100 %: #fdbb2d
Vytvorte masku pozadia
Teraz, keď máme farebný gradient, sme pripravení vytvoriť masku pozadia.
Pod záložkou Maska pozadia, aktualizujte nasledovné:
- Maska: Rybia kosť
- Farba masky: #000000
- Transformácia: Obrátená
- Pomer strán masky: pozri snímku obrazovky
Pridať oddeľovače sekcií (oddeľovače)
S našou maskou na mieste môžeme ďalej upravovať tvar masky pomocou oddeľovačov sekcií.
V tomto príklade pridáme polkruhový oddeľovač sekcií hore a dole. Tým sa stlačí maska pozadia, aby vyzerala skôr ako ozdobný dizajn šípky.
Ak to chcete urobiť, kliknite na kartu dizajn a pridajte nasledujúce oddeľovače:
Najprv pridajte horný oddeľovač pod záložku top.
- Štýl oddeľovača: Pozrite si snímku obrazovky
- Farba: #000
- Výška rozdeľovača: 10 vw
Potom pridajte spodný oddeľovač pod kartu dno.
- Štýl oddeľovača: Pozrite si snímku obrazovky
- Farba: #000
- Výška rozdeľovača: 10 vw
- Preklopenie rozdeľovača: Vertikálne prevrátenie
Výsledok
Tu je zatiaľ výsledok.
Upravte možnosti pozadia a oddeľovače pre lepší dizajn
Teraz, keď máte základnú myšlienku na mieste, môžeme sa ľahko pohrať s rozdeľovačmi sekcií a vytvoriť ďalšie vzory.
Pozri tiež: Divi: Ako používať "Gradient Builder" na skrášlenie vašich obrázkov
Alternatívny dizajn #1
Pre náš prvý alternatívny dizajn otočíme existujúcu masku pozadia. Ďalej nahradíme deliče polkruhových sekcií trojuholníkmi.
Ak to chcete urobiť, otvorte existujúce nastavenia sekcie a kliknite na kartu Maska pozadia a aktualizujte nasledovné:
- Transformácia masky: vertikálne prevrátenie, rotácia
- Pomer strán masky: pozri snímku obrazovky
Potom aktualizujte oddeľovače sekcií takto:
Horný rozdeľovač
- Štýl oddeľovača: Pozrite si snímku obrazovky
- Výška rozdeľovača: 13 vw
Spodný rozdeľovač
- Štýl oddeľovača: Pozrite si snímku obrazovky
- Výška: 13 vw
- Preklopenie rozdeľovača: deaktivácia
Výsledok
Tu je výsledok.
Alternatívny dizajn #2
Pre náš druhý a posledný alternatívny dizajn nahradíme masku krokvy podľa masky Diagonálne tyče 2 a tiež mu dať nový oddeľovač hornej časti.
Ak to chcete urobiť, otvorte existujúce nastavenia sekcie a kliknite na kartu Maska pozadia a aktualizujte nasledovné:
- Maska: Diagonálne tyče 2
- Transformácia masky: horizontálne prevrátenie
- Pomer strán: pozri snímku obrazovky
Potom aktualizujte oddeľovače sekcií takto:
Horný rozdeľovač
- Štýl oddeľovača: Pozrite si snímku obrazovky
- Preklopenie rozdeľovača: Horizontálne preklopenie
Spodný rozdeľovač
- Štýl oddeľovača: Žiadny
Výsledok
Tu je výsledok.
Konečné výsledky
Aby ste mali lepšiu predstavu o tom, ako budú tieto pozadia vyzerať obsah, pridali sme riadok do stĺpca s nadpisom.
Čítajte tiež: Divi: Ako vytvoriť lepkavú masku na pozadie
Stiahnite si DIVI teraz!!!
záver
Kombinácia masiek a oddeľovačov sekcií pre návrhy pozadia otvára viac možností na vytváranie jedinečných tvarov pre tieto vstavané masky.
Neváhajte a preskúmajte rôzne kombinácie sami.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
