Chceli by ste použiť Diviho masku a prekrytie vzorom pozadia?
S posledným verzia masky pozadia a funkcie vzoru pozadia z Divi, môžete si vytvoriť jedinečné sekcie pre svojich hrdinov webové stránky. Sekcia hrdinu je prvá vaša sekcia webové stránky a to je tvoja prvá vec Návštevníci pozrite si pred rolovaním webové stránky, takže je dôležité, aby ste upútali pozornosť!
Tento článok vám ukáže, ako vytvoriť päť jedinečných masiek na pozadí a prekryvných vzorov, ktoré môžete použiť na obrázok na pozadí, aby ste vytvorili skutočne úžasné sekcie hrdinov.
Tento tutoriál sa bude zaoberať základnými krokmi potrebnými na vytvorenie každej sekcie Hrdina a poskytne vám nástroje, ktoré potrebujete na vytvorenie pôsobivej sekcie Hrdina pre váš web za pár minút.
Začnime!
prehľad
Tu je rýchly prehľad piatich sekcií hrdinov, ktoré dnes vytvoríme v tomto článku.
Stiahnite si DIVI teraz!!!
Dizajn je jemný, jednoduchý a pritom pôsobivý.
Čítajte tiež: Divi: Ako používať "Gradient Builder" na skrášlenie vašich obrázkov
Vytvorte novú stránku pomocou Divi Builder
Ak chcete začať, budete musieť urobiť nasledovné:
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.
Päť príkladov prekrytí masky pozadia a vzoru, ktoré sa majú použiť na obrázok pozadia
Najprv si vytvoríme sekciu Hero
Všetky naše vzorové návrhy používajú rovnakú štruktúru sekcií, riadkov a stĺpcov, takže ich teraz nastavte.
1. Vytvorte štruktúru rozloženia
Pridajte na svoju stránku riadok, potom kliknite na zelenú ikonu „+“, čím zobrazíte štruktúru stĺpcov, a vyberte prvý stĺpec, stĺpec s plnou šírkou.
2. Pridajte rozstup sekcií
Teraz, keď sme definovali náš riadok a stĺpec, je čas pridať do sekcie nejaké medzery.
Na karte Medzery aktualizujte nasledovné:
- Pracovná plocha: 400 pixelov (horná a dolná časť)
- Tablet: 200 pixelov (hore a dole); 25 pixelov (vľavo a vpravo)
- Telefón: 50 pixelov (hore a dole); 25 pixelov (vľavo a vpravo)
Hero Section Design #1
Poďme navrhnúť prvú časť Hrdina.
Stiahnite si DIVI teraz!!!
1. Pridajte text hlavičky
Kliknutím na sivú ikonu „+“ zobrazíte knižnicu modulov. Prejdite na text a kliknutím ho načítajte.
Zadajte text nadpisu a potom pod kartu Nadpis textu, nakonfigurujte tieto nastavenia:
- Písmo nadpisu: Work Sans
- Farba textu: biela #ffffff
- Veľkosť textu nadpisu:
- Plocha: 3 em
- Tablet: 2,2 em
- Telefón: 1.4 em
2. Pridať modul tlačidiel
Pridajte tlačidlo a nakonfigurujte tieto nastavenia:
- Pod záložkou Obsahs: Zistite viac
- Pod záložkou zarovnanie, vyberte: Stred
- Kliknite na Použite vlastné štýly pre tlačidlo potom nakonfigurujte:
- Veľkosť textu tlačidla:
- Pracovná plocha: 20 pixelov
- Tablet: 16px
- Telefón: 14px
- Farba textu tlačidla: #ffffff
- Pozadie: #1d1d1d
- Šírka okraja tlačidla: 0
- Polomer okraja: 0
- Medzera medzi písmenami: 3 body
- Písmo tlačidla: Work Sans
- Štýl písma: TT
- Veľkosť textu tlačidla:
3. Pridajte obrázok na pozadí
Teraz, keď naše obsah je nakonfigurovaný, je čas začať navrhovať pozadie sekcie.
- Prejdite na prepínač pozadia a kliknite na 3. kartu, kartu obrázka, potom kliknite na „Pridať obrázok na pozadí“.
- Tým sa zobrazí vaša knižnica médií, kde si môžete vybrať fotografiu alebo nahrať novú.
- Po výbere fotografie kliknite na tlačidlo „Nahrať obrázok“ v pravom dolnom rohu.
4. Pridajte vzor pozadia
Teraz, keď sme nastavili obrázok na pozadí, pridajte vzor.
- Na karte pozadia, prejdite na 5. kartu, kartu Vzor pozadiaa potom kliknite na „Pridať vzor pozadia“.
- vybrať Všívané z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba vzoru – rgba (255,255,255,0.31)
- Transformácia vzoru: žiadna
- Veľkosť: Skutočná veľkosť
- Pôvod opakovania vzoru: Horný Dolný
- Opakovanie vzoru: Opakujte
- Režim miešania: normálny
5. Pridajte masku pozadia
Teraz, keď sme nastavili obrázok na pozadí a vzor, pridajte masku pozadia.
- Na karte pozadiaprejdite na 6. kartu, kartu Maska pozadiaa potom kliknite na „Pridať masku pozadia“.
- vybrať Bob z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba masky: rgba (0,0,0,0.36)
- Pomer strán masky: vodorovný obdĺžnik
- Veľkosť: Natiahnutím sa vyplní
Takže ! Teraz máte nádherne navrhnutú časť Hrdina.
Dizajn sekcie Hero #2
Teraz poďme navrhnúť druhú časť hrdinu.
1. Pridajte obrázok na pozadie a nastavte režim prelínania na Prekrytie
Vyberte obrázok na pozadí, nastavte režim prelínania na Overlay a pridajte farbu prekrytia rgba (10,10,10,0.64).
2. Pridajte vzor pozadia
Teraz, keď sme nastavili obrázok na pozadí, pridajte vzor pozadia.
- Na karte Pozadie prejdite na 5. kartu, kartu Vzor pozadiaa potom kliknite na „Pridať vzor pozadia“.
- vybrať Všívané z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba vzoru – rgba (255,255,255,0.09)
- Transformácia vzoru: žiadna
- Veľkosť: Obal
- Pôvod opakovania vzoru: Vľavo hore
- Opakovanie vzoru: Opakujte
- Režim miešania: normálny
3. Pridajte masku pozadia
Teraz, keď sme nastavili obrázok na pozadí a vzor, pridajte masku pozadia.
- Na karte pozadiaprejdite na 6. kartu, kartu Maska pozadiaa potom kliknite na „Pridať masku pozadia“.
- vybrať vynechaný v rukopise z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba masky: rgba (0,0,0,0.36)
- Transformácia masky: žiadna
- Pomer strán: vodorovný obdĺžnik
- Veľkosť masky: Natiahnutím sa vyplní
- Režim prelínania masky: Normálny
Dizajn sekcie Hero #3
Teraz poďme navrhnúť tretiu sekciu Hero.
1. Pridajte obrázok na pozadie a nastavte režim prelínania na Prekrytie
Vyberte obrázok na pozadí, nastavte režim prelínania na Overlay a pridajte farbu prekrytia rgba (10,10,10,0.39).
2. Pridajte vzor pozadia
Teraz, keď sme nastavili obrázok na pozadí, pridajte vzor pozadia.
- Na karte pozadiaprejdite na 5. kartu, kartu Vzor pozadiaa potom kliknite na „Pridať vzor pozadia“.
- vybrať Diagonálne pruhy 2 z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba vzoru – rgba (0,0,0,0.06)
- Transformácia vzoru: žiadna
- Veľkosť: Skutočná veľkosť
- Pôvod opakovania vzoru: Vľavo hore
- Opakovanie vzoru: Opakujte
- Režim miešania: Normálny
3. Pridajte masku pozadia
Teraz, keď sme pridali obrázok na pozadí a vzor, pridajte masku pozadia.
- Na karte pozadiaprejdite na 6. kartu, kartu Maska pozadiaa potom kliknite na „Pridať masku pozadia“.
- vybrať Trojuholníky z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba masky: rgba (10, 10, 10, 0,61)
- Transformácia masky: žiadna
- Pomer strán: vodorovný obdĺžnik
- Veľkosť masky: Natiahnutím sa vyplní
- Režim prelínania masky: Normálny
Dizajn sekcie Hero #4
Teraz poďme navrhnúť štvrtú sekciu Hero.
1. Pridajte obrázok na pozadí
Vyberte obrázok na pozadí.
2. Pridajte vzor pozadia
Teraz, keď sme pridali náš obrázok na pozadí, pridajte vzor pozadia.
- Na karte pozadiaprejdite na 5. kartu, kartu Vzor pozadiaa potom kliknite na „Pridať vzor pozadia“.
- vybrať Smiles z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba vzoru – rgba (0,0,0,0.2)
- Transformácia vzoru: žiadna
- Veľkosť: Obal
- Opakovať pôvod: vľavo hore
- Opakovanie vzoru: Opakujte
- Režim prelínania vzoru: Normálny
3. Pridajte masku pozadia
Teraz, keď máme aplikovaný náš obrázok na pozadí a vzor, pridajme masku pozadia.
- Na karte pozadiaprejdite na 6. kartu, kartu Maska pozadiaa potom kliknite na „Pridať masku pozadia“.
- vybrať Rohové jazero z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba masky: rgba (10, 10, 10, 0,61)
- Transformácia masky: horizontálna
- Pomer strán: Horizontálny obdĺžnik
- Veľkosť: Obal
- Pozícia masky: Stred vľavo
- Režim mixéra masky: Normálny
3. Nakonfigurujte parametre linky
Predtým, ako pôjdeme, táto sekcia Hero má jedinečné štýly čiar. Poďme to nastaviť.
- Veľkosť:
- Šírka: 80 %
- Maximálna šírka: 800 pixelov
- Zarovnanie riadkov:
- Pracovná plocha: Predvolené
- Tablet: Stred
- Telefón: Centrum
- Okraje:
- Vľavo: 20vw
Sekcia Hero #5 Design
Teraz poďme navrhnúť piatu časť Hero.
Stiahnite si DIVI teraz!!!
1. Pridajte obrázok na pozadí
Vyberte obrázok na pozadí.
2. Pridajte vzor
Teraz, keď sme nastavili obrázok na pozadí, použijeme vzor pozadia.
- Na karte pozadiaprejdite na 5. kartu, kartu Vzor pozadiaa potom kliknite na „Pridať vzor pozadia“.
- vybrať Krížiky z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba vzoru – #ffffff
- Transformácia vzoru: žiadna
- Veľkosť: Vlastná veľkosť
- Šírka vzoru: 10px
- Výška vzoru: 10px
- Opakovať pôvod: Horný Dolný
- Opakovanie vzoru: Opakujte
- Režim prelínania vzoru: Normálny
3. Pridajte masku pozadia
Teraz, keď máme aplikovaný obrázok na pozadí a vzor, pridajme masku pozadia.
- Na karte pozadiaprejdite na 6. kartu, kartu Maska pozadiaa potom kliknite na „Pridať masku pozadia“.
- vybrať Diagonálne pilulky z rozbaľovacej ponuky a nakonfigurujte tieto nastavenia:
- Farba masky: rgba (10, 10, 10, 0,61)
- Transformácia masky: horizontálna
- Pomer strán: Horizontálny obdĺžnik
- Veľkosť: Obal
- Poloha masky: v strede vľavo
- Režim prelínania masky: Normálny
3. Nakonfigurujte parametre linky
Predtým, ako pôjdeme, táto sekcia Hero má tiež jedinečné štýly čiar. Poďme to nastaviť.
- Veľkosť:
- Šírka: 80 %
- Maximálna šírka: 800 pixelov
- Zarovnanie riadkov:
- Pracovná plocha: Predvolené
- Tablet: Stred
- Telefón: Centrum
- Medzery:
- Okraj (vpravo): 18 vw
Pozri tiež: Divi: Ako pridať masky a vzory pozadia do hlavičky
záver
Navrhnutie jedinečnej a pútavej sekcie Hrdina pre váš web je s novými možnosťami jednoduché pozadie a maska vzoru od Divi. Každá funkcia má veľa možností, ktoré vám umožnia vytvoriť skutočne kreatívne pozadie.
Navyše môžete do ľubovoľnej položky Divi Builder pridať vzory a masky na pozadí! Možnosti dizajnu sú nekonečné.
Dúfajme, že táto technika pridá ďalšiu užitočnú dizajnérsku zručnosť pre budúce projekty.
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.
...
