Divi: 5 překrytí masek a vzorů použitelných na obrázek na pozadí

Chtěli byste použít Diviho masku a překrytí vzorem pozadí?

S posledním verze funkce masky pozadí a vzoru pozadí of Divi, můžete si vytvořit jedinečné sekce Hero pro vaše Webové stránky. Sekce hrdiny je první vaší sekcí Webové stránky a to je tvoje první věc Návštěvníci zobrazit před posouváním Webové stránky, takže je důležité být poutavý!

Tento článek vám ukáže, jak vytvořit pět jedinečných masek na pozadí a překryvných vzorů, které můžete použít na obrázek na pozadí a vytvořit tak skutečně úžasné sekce hrdinů. 

Tento tutoriál pokryje základní kroky potřebné k vytvoření každé sekce Hrdina a poskytne vám nástroje, které potřebujete k vytvoření působivé sekce Hrdina pro váš web během několika minut.

Začněme!

přehled

Zde je rychlý přehled pěti hrdinských sekcí, které dnes vytvoříme v tomto článku.

Stáhněte si DIVI hned teď!!!

Designy jsou jemné, jednoduché a přesto působivé.

Čtěte také: Divi: Jak používat "Gradient Builder" ke zkrášlení vašich obrázků

Vytvořte novou stránku pomocí Divi Builder

Chcete-li začít, budete muset provést následující:

Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.

Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder

poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Pět příkladů překrytí masky pozadí a vzoru pro použití na obrázek pozadí

Nejprve si vytvoříme sekci Hrdina

Všechny naše ukázkové návrhy používají stejnou strukturu sekcí, řádků a sloupců, pojďme je tedy nyní nastavit.

1. Vytvořte strukturu rozložení

Přidejte na stránku řádek, poté klikněte na zelenou ikonu „+“, aby se zobrazila struktura sloupců, a vyberte první sloupec, sloupec s plnou šířkou.

2. Přidejte mezery mezi sekcemi

Nyní, když jsme definovali náš řádek a sloupec, je čas přidat do sekce nějaké mezery.

Na kartě Mezery aktualizujte následující:

• Plocha: 400 pixelů (nahoře a dole)
• Tablet: 200 pixelů (nahoře a dole); 25 pixelů (levý a pravý)
• Telefon: 50 pixelů (nahoře a dole); 25 pixelů (levý a pravý)

Hero Section Design #1

Pojďme navrhnout první sekci Hrdina.

Stáhněte si DIVI hned teď!!!

1. Přidejte text záhlaví

Kliknutím na šedou ikonu „+“ vyvoláte knihovnu modulů. Přejděte na text a kliknutím jej načtěte.

Zadejte text nadpisu a poté pod záložku Nadpis textu, nakonfigurujte tato nastavení:

• Písmo nadpisu: Work Sans
• Barva textu: Bílá #ffffff
• Velikost textu nadpisu:
  • Plocha: 3 em
  • Tablet: 2,2 em
  • Telefon: 1.4 em

2. Přidejte modul tlačítka

Přidejte tlačítko a nakonfigurujte tato nastavení:

• Na kartě Contens: Zjistěte více
• Na kartě SMĚR, vyberte: Střed
• Klepněte na tlačítko Použít vlastní styly pro tlačítko poté nakonfigurujte:
  • Velikost textu tlačítka:
    • Plocha: 20 pixelů
    • Tablet: 16px
    • Telefon: 14px
  • Barva textu tlačítka: #ffffff
  • Pozadí: #1d1d1d
  • Šířka okraje tlačítka: 0
  • Poloměr okraje: 0
  • Mezera mezi písmeny: 3 body
  • Písmo tlačítka: Work Sans
  • Styl písma: TT

3. Přidejte obrázek na pozadí

Teď, když naše obsah je nakonfigurován, je čas začít navrhovat pozadí sekce.

• Přejděte na přepínač pozadí a klikněte na 3. kartu, záložku obrázek, poté klikněte na „Přidat obrázek na pozadí“.
• Zobrazí se vaše knihovna médií, kde můžete vybrat fotografii nebo nahrát novou.
• Po výběru fotografie klikněte na tlačítko "Nahrát obrázek" v pravém dolním rohu.

4. Přidejte vzor pozadí

Nyní, když jsme nastavili náš obrázek na pozadí, přidáme vzor.

• Na kartě Pozadípřejděte na 5. kartu, kartu Vzorek pozadía poté klikněte na „Přidat vzor pozadí“.
• vybrat Všívaná z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva vzoru – rgba (255,255,255,0.31)
  • Transformace vzoru: žádná
  • Velikost: Skutečná velikost
  • Počátek opakování vzoru: Nahoře Dolů
  • Opakování vzoru: Opakujte
  • Režim prolnutí: Normální

5. Přidejte masku pozadí

Nyní, když jsme nastavili obrázek na pozadí a vzor, ​​přidejte masku pozadí.

• Na kartě Pozadípřejděte na 6. kartu, kartu Pozadí maskya poté klikněte na „Přidat masku pozadí“.
• vybrat Fazole z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva masky: rgba (0,0,0,0.36)
  • Poměr stran masky: vodorovný obdélník
  • Velikost: Roztažením

Tak ! Nyní máte krásně navrženou sekci Hrdina.

Design sekce Hero #2

Nyní navrhneme druhou sekci hrdinů.

1. Přidejte obrázek na pozadí a nastavte režim prolnutí na Overlay

Vyberte obrázek na pozadí, nastavte režim prolnutí na Overlay a přidejte překryvnou barvu rgba (10,10,10,0.64).

2. Přidejte vzor pozadí

Nyní, když jsme nastavili obrázek na pozadí, přidáme vzor pozadí.

• Na kartě Pozadí přejděte na 5. kartu, kartu Vzorek pozadía poté klikněte na „Přidat vzor pozadí“.
• vybrat Všívaná z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva vzoru – rgba (255,255,255,0.09)
  • Transformace vzoru: žádná
  • Velikost: Kryt
  • Počátek opakování vzoru: Vlevo nahoře
  • Opakování vzoru: Opakujte
  • Režim prolnutí: Normální

3. Přidejte masku pozadí

Nyní, když jsme nastavili obrázek na pozadí a vzor, ​​přidejte masku pozadí.

• Na kartě Pozadípřejděte na 6. kartu, kartu Pozadí maskya poté klikněte na „Přidat masku pozadí“.
• vybrat Caret z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva masky: rgba (0,0,0,0.36)
  • Transformace masky: Žádná
  • Poměr stran: vodorovný obdélník
  • Velikost masky: Stretch To Fill
  • Režim prolnutí masky: Normální

Design sekce Hero #3

Nyní navrhneme třetí sekci Hero.

1. Přidejte obrázek na pozadí a nastavte režim prolnutí na Overlay

Vyberte obrázek na pozadí, nastavte režim prolnutí na Overlay a přidejte překryvnou barvu rgba (10,10,10,0.39).

2. Přidejte vzor pozadí

Nyní, když jsme nastavili náš obrázek na pozadí, přidejte vzorek pozadí.

• Na kartě Pozadípřejděte na 5. kartu, kartu Vzorek pozadía poté klikněte na „Přidat vzor pozadí“.
• vybrat Diagonální pruhy 2 z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva vzoru – rgba (0,0,0,0.06)
  • Transformace vzoru: žádná
  • Velikost: Skutečná velikost
  • Počátek opakování vzoru: Vlevo nahoře
  • Opakování vzoru: Opakujte
  • Režim prolnutí: Normální

3. Přidejte masku pozadí

Nyní, když jsme přidali obrázek na pozadí a vzor, ​​přidejte masku pozadí.

• Na kartě Pozadípřejděte na 6. kartu, kartu Pozadí maskya poté klikněte na „Přidat masku pozadí“.
• vybrat Trojúhelníky z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva masky: rgba (10, 10, 10, 0,61)
  • Transformace masky: žádná
  • Poměr stran: vodorovný obdélník
  • Velikost masky: Stretch To Fill
  • Režim prolnutí masky: Normální

Design sekce Hero #4

Nyní navrhneme čtvrtou sekci Hrdiny.

1. Přidejte obrázek na pozadí

Vyberte obrázek na pozadí.

2. Přidejte vzor pozadí

Nyní, když jsme přidali náš obrázek na pozadí, přidejte vzorek pozadí.

• Na kartě Pozadípřejděte na 5. kartu, kartu Vzorek pozadía poté klikněte na „Přidat vzor pozadí“.
• vybrat Smiles z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva vzoru – rgba (0,0,0,0.2)
  • Transformace vzoru: žádná
  • Velikost: Kryt
  • Opakujte počátek: vlevo nahoře
  • Opakování vzoru: Opakujte
  • Režim prolnutí vzoru: Normální

3. Přidejte masku pozadí

Nyní, když jsme použili náš obrázek na pozadí a vzor, ​​přidejte masku pozadí.

• Na kartě Pozadípřejděte na 6. kartu, kartu Pozadí maskya poté klikněte na „Přidat masku pozadí“.
• vybrat Rohové jezero  z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva masky: rgba (10, 10, 10, 0,61)
  • Transformace masky: horizontální
  • Poměr stran: Horizontální obdélník
  • Velikost: Kryt
  • Umístění masky: Střed vlevo
  • Režim mixéru masky: Normální

3. Nakonfigurujte parametry linky

Než půjdeme, tato sekce Hero má jedinečné styly čar. Pojďme to nastavit.

• Velikost:
  • Šířka: 80 %
  • Maximální šířka: 800 pixelů
• Zarovnání řádků:
  • Desktop: Výchozí
  • Tablet: Střed
  • Telefon: Centrum
• Okraje:
  • Vlevo: 20vw

Design sekce Hero #5

Nyní navrhneme pátou sekci Hero.

Stáhněte si DIVI hned teď!!!

1. Přidejte obrázek na pozadí

Vyberte obrázek na pozadí.

2. Přidejte vzor

Nyní, když jsme nastavili náš obrázek na pozadí, použijeme vzor pozadí.

• Na kartě Pozadípřejděte na 5. kartu, kartu Vzorek pozadía poté klikněte na „Přidat vzor pozadí“.
• vybrat Křížky z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva vzoru – #ffffff
  • Transformace vzoru: žádná
  • Velikost: Vlastní velikost
  • Šířka vzoru: 10px
  • Výška vzoru: 10px
  • Opakujte počátek: Nahoře Dolů
  • Opakování vzoru: Opakujte
  • Režim prolnutí vzoru: Normální

3. Přidejte masku pozadí

Nyní, když máme aplikovaný obrázek na pozadí a vzor, ​​přidáme masku pozadí.

• Na kartě Pozadípřejděte na 6. kartu, kartu Pozadí maskya poté klikněte na „Přidat masku pozadí“.
• vybrat Diagonální pilulky  z rozbalovací nabídky a nakonfigurujte tato nastavení:
  • Barva masky: rgba (10, 10, 10, 0,61)
  • Transformace masky: horizontální
  • Poměr stran: Horizontální obdélník
  • Velikost: Kryt
  • Umístění masky: uprostřed vlevo
  • Režim prolnutí masky: Normální

3. Nakonfigurujte parametry linky

Než půjdeme, tato sekce Hero má také jedinečné styly čar. Pojďme to nastavit.

• Velikost:
  • Šířka: 80 %
  • Maximální šířka: 800 pixelů
• Zarovnání řádků:
  • Desktop: Výchozí
  • Tablet: Střed
  • Telefon: Centrum
• Vzdálenost:
  • Marže (vpravo): 18vw

Viz také: Divi: Jak přidat masky a vzory pozadí do záhlaví

Proč investovat do čističky vzduchu?

Navrhnout pro váš web jedinečnou a poutavou sekci Hrdina je s novými možnostmi snadné pozadí a maska ​​vzoru od Divi. Každá funkce má mnoho možností, které vám umožní vytvořit skutečně kreativní pozadí. 

Navíc můžete ke každé položce Divi Builder přidat vzory a masky na pozadí! Možnosti designu jsou nekonečné.

Doufejme, že tato technika přidá další užitečnou designovou dovednost pro budoucí projekty.

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.

Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...