Pokud jde o masky na pozadí, uživatelé mají tendenci používat software pro úpravu obrázků divia poté nahrajte obrázek do Webové stránky že vytvářejí. I když je to docela šikovný způsob, jak si přizpůsobit svůj Webové stránky, není to nutně jediné řešení. Můžete také vytvořit masky pozadí uvnitř divi, kreativním způsobem kombinující různé prvky návrhu a možnosti filtrů. To je přesně to, co se chystáme udělat v tomto příspěvku! Přeměňujeme příliš velké postavy na masky na pozadí, které vypadají skvěle na jakékoli velikosti obrazovky. Doufáme, že vás tento tutoriál inspiruje k vytváření vlastních návrhů pomocí nadrozměrných postav a vestavěných možností divi.
Pojďme!
Ukázkový náhled
Než se ponoříme do tutoriálu, zde jsou typy pozadí, kterých můžete touto technikou dosáhnout.
Design
Návrh začneme vytvořením černého pozadí s písmenem, které má obrázek jako pozadí.
Přidejte novou sekci
Barva pozadí
Začněme prvním příkladem! Přidejte novou pravidelnou sekci na novou nebo existující stránku a do této sekce přidejte pozadí:
- Barva pozadí: #000000
vzdálenost
Poté přejděte na nastavení mezer a odstraňte všechny výchozí horní a dolní polstrování.
- Vrchní polstrování: 0px
- Spodní výplň: 0px
přetékat
Přepněte na kartu Upřesnit a skryjte přetečení sekce. To se stane důležitým později v tomto kurzu, když přemístíme textový modul obsahující nadměrný znak.
- Horizontální přetečení: skryté
- Vertikální přetečení: skryté
Přidejte řádek 1
Struktura sloupců
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
Sloupec 1 Barva pozadí
Bez přidání jakýchkoli modulů ještě otevřete nastavení řádku a přidejte barvu pozadí do prvního sloupce.
- Sloupec 1 Barva pozadí: #848484
Sloupec 1 obrázek na pozadí
Přidejte také barvu pozadí. Abychom spojili barvu pozadí a obrázek, použijeme režim prolnutí.
- Směs obrázku pozadí sloupce: Násobení
dimenzování
Přepněte na kartu Návrh a nechte řádek vyplnit celou šířku obrazovky pomocí následujícího nastavení velikosti:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Šířka: 100%
- Maximální šířka: 100%
vzdálenost
Zbavíme se také všech vlastních výplní nahoru a dolů v řadě.
- Vrchní polstrování: 0px
- Spodní výplň: 0px
Přidejte textový sloupec do sloupce
Přidejte znak do oblasti obsahu
Je čas přidat textový modul obsahující příliš velký znak. Přidejte do rámečku písmeno „o“. obsah.
Barva pozadí
Pokračujte přechodem do nastavení pozadí a přidejte barvu černého pozadí.
- Barva pozadí: #000000
Nastavení textu
Přejděte na kartu Návrh a změňte nastavení textu. Všimněte si, jak používáme vysokou hodnotu velikosti textu.
- Písmo textu: Poppins
- Velikost textu: 100vw
- Orientace textu: Střed
vzdálenost
Poté přejděte na nastavení mezer a přidejte vlastní hodnoty okrajů a odsazení.
- Horní okraj: -6vw
- Nejlepší polstrování: 15vw
- Spodní výplň: 49vw
Filtry
Je čas dělat magii! Otevřete nastavení filtru modulu a podle toho změňte režim slučování:
- Režim prolnutí: Násobení
- Jas: Tuto hodnotu můžete změnit podle svých představ
Přidejte řádek 2
Struktura sloupců
Jakmile bude váš nadměrný znak přidán do návrhu, můžete pokračovat přidáním zbývajících modulů, které chcete zobrazit v sekci, nejlépe přidáním nového řádku:
dimenzování
Bez přidání jakýchkoli modulů ještě otevřete nastavení řádku a nechte jej zabírat celou šířku obrazovky.
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Šířka: 100%
- Maximální šířka: 100%
vzdálenost
Odstraňte také všechny výchozí výplně nahoru a dolů
- Vrchní polstrování: 0px
- Spodní výplň: 0px
Do sloupce přidejte textový modul # 1
Přidat obsah H1
V tomto novém řádku můžete přidat moduly dle vlastního výběru. Chcete-li znovu vytvořit přesný příklad sdílený v náhledu tohoto příspěvku, začněte přidáním textového modulu obsahujícího obsah H1.
H1 Nastavení textu
Přejděte na kartu Návrh a změňte nastavení textu H1.
- Název písma: Playfair Display
- Hmotnost písma: tučné
- Zarovnání textu nadpisu: Střed
- Barva názvu textu: #ffffff
- Velikost nadpisu textu: 6vw
vzdálenost
Pokračujte přechodem na nastavení mezer a nechte textový modul překrývat nadměrně velký znak přidáním záporného horního okraje. Rovněž se ujistíme, že nalevo a napravo od modulu je místo, aby byla zajištěna reakce.
- Horní okraj: -47vw
- Levý okraj: 1vw
- Pravý okraj: 1vw
Přidejte do sloupce dělicí modul
viditelnost
Další modul, který potřebujeme, je modul dělení. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.
- Zobrazit oddělovač: Ano
Barva
Dále přejděte na kartu design a změňte barvu rozdělovače.
- Barva: #ffffff
dimenzování
Změňte také parametry velikosti.
- Hmotnost děliče: 13px
- Šířka: 16%
- Zarovnání modulu: střed
vzdálenost
Také přidejte horní okraj a vytvořte mezeru mezi textovým modulem a modulem dělení.
- Horní okraj: 16vw
Do sloupce přidejte textový modul # 2
Přidat obsah
Dalším modulem, který potřebujeme, je textový modul s a obsah odstavce.
Nastavení textu
Otevřete nastavení textu a proveďte následující změny:
- Textové písmo: Otevřít Sans
- Barva textu: #ffffff
- Velikost textu: 1vw (stolní), 2vw (tablet), 2.5vw (telefon)
- Výška řádku textu: 1.9em
- Orientace textu: Střed
vzdálenost
Přidejte také vlastní hodnoty mezer.
- Horní okraj: 3vw
- Dolní okraj: 3vw (stolní počítač), 10vw (tablet a telefon)
- Levý okraj: 27vw (stolní), 10vw (tablet), 8vw (telefon)
- Pravý okraj: 27vw (stolní), 10vw (tablet), 8vw (telefon)
Přidejte do sloupce modul tlačítek
Přidat kopii
Na dalším a posledním modulu, který je tlačítkovým modulem. Zadejte kopii podle vašeho výběru.
zarovnání
Pokračujte změnou zarovnání tlačítek na kartě Návrh.
- Zarovnání tlačítek: střed
Nastavení tlačítek
Přepněte na nastavení tlačítka a upravte tlačítko podle potřeby.
- Pro tlačítko použijte vlastní styly: Ano
- Velikost textu tlačítka: 1vw (stolní), 2.5vw (tablet), 3vw (telefon)
- Barva textu tlačítka: #ffffff
- Šířka okraje tlačítka: 1px
- Poloměr ohraničení tlačítka: 0px
- Tlačítko Písmo: Otevřít Sans
- Hmotnost písma: Ultra Bold
- Styl písma: velká písmena
vzdálenost
Nakonec také přidáme hodnoty vlastního okraje a výplně, abychom získali požadovaný výsledek.
- Dolní okraj: 10vw
- Výplň: 15px
- Spodní výplň: 15px
- Levá výplň: 50px
- Čalounění vpravo: 50px
Konečný výsledek
Takto vypadá to, co jsme dosud vybudovali.
Závěrečné myšlenky
V tomto článku jsme vám ukázali, jak pomocí nadměrných znaků vytvořit úžasné masky na pozadí s Divi. Je to skvělý způsob, jak vytvořit vlastní webový design, aniž byste museli používat software pro úpravy obrázků. Pokud máte nějaké dotazy nebo návrhy, nezapomeňte zanechat komentář v sekci komentáře níže!
