Není žádným tajemstvím, že stránky „O nás“ velmi dobře přivádějí kliknutí na vaše stránky webové stránky. Je to také tento typ stránky, který bude zdůrazňovat lidskou část podnikání Webové stránky. Když to víme, uvědomujeme si, že je důležité věnovat pozornost tomu, jak strukturujeme stránky, jaké informace sdílíme a jak vytváříme interakce.

Jednou z věcí, kterou můžete udělat pro vylepšení zážitku ze stránky, je poskytnout sekci členů týmu, která staví vaše zaměstnance do centra pozornosti. Kromě toho můžete přidat biologický efekt vznášení na fotografie členů týmu pouze pomocí vestavěných možností Divi.

To vám umožní ušetřit místo na stránce, na které pracujete, a vytvořit interakci mezi vámi a vámi Návštěvníci.

V tomto tutoriálu vám krok za krokem ukážeme, jak se tam dostat. Jakmile získáte přístup, budete moci přizpůsobit styl designu tak, aby vyhovoval vašim vlastním potřebám.

Pojďme!

přehled

Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.

Kancelář

Mobilní aplikace

Začněme znovu

Přidejte novou sekci

vzdálenost

Vytvořte novou stránku nebo otevřete existující a přidejte novou sekci pomocí následujících vlastních hodnot výplně:

• Nejlepší polstrování: 100px
• Spodní výplň: 100px

Přidejte řádek 1

Struktura sloupců

Jakmile dokončíte přidávání vlastní výplně do sekce, můžete zavřít nastavení sekce a přidat nový řádek pomocí jednoho sloupce.

Přidat textový modul

Přidat obsah H2

Do sloupce přidejte název textového modulu s volbou velikosti H2.

Nastavení textu H2

Poté přejděte do nastavení textu H2 a proveďte několik změn ve vzhledu kopie.

• Rubrika 2 Písmo: Cinzel
• Název 2 Styl písma: Malé čepice
• Název 2 Zarovnání textu: Střed
• Název 2 Velikost textu: 70px

Přidejte modul rozdělení

viditelnost

Pokračujte v přidávání nového separačního modulu těsně pod nadpisem Textový modul.

• Zobrazit oddělovač: Ano

Barva odlučovače

Přejděte na kartu Návrh, otevřete nastavení barev a podle toho změňte barvu děliče:

• Barva oddělovače: # 333333

dimenzování

Potom zmenšíme velikost děliče a vystředíme jej.

• Šířka: 26%
• Zarovnání modulu: střed

Přidejte řádek 2

Struktura sloupců

Těsně pod předchozí řádek, který jste přidali, pokračujte a přidejte nový řádek pomocí tří sloupců stejné velikosti.

dimenzování

Bez přidání dalších modulů otevřete parametry linky a proveďte některé změny parametrů velikosti.

• Použít vlastní šířku: Ano
• Jednotka: PX
• Vlastní šířka: 2000px
• Použít vlastní šířku okapu: Ano
• Šířka okapu: 1
• Vyrovnání výšek sloupců: Ano

vzdálenost

Poté přejděte na nastavení mezer a přidejte vlastní hodnoty okrajů a odsazení.

• Horní okraj: 50px
• Dolní okraj: 50px
• Vrchní polstrování: 10px
• Spodní výplň: 10px
• Levá výplň: 5px
• Čalounění vpravo: 5px
• Sloupec 1, 2 a 3 Výplň vlevo: 5px
• Sloupec 1, 2 a 3 Výplň vpravo: 5px

Stínová krabička

Rovněž přidáme stín do pole s následujícími parametry:

• Box Stín Rozostření Síla: 80px
• Síla šíření stínu rámečku: -14px
• Barva stínu: rgba (0,0,0,0,3)

Přidejte modul obrázku do sloupce 1

Načtěte obrázek do modulu obrazu

Je čas začít přidávat moduly! K dosažení efektu biologického přechodu budeme potřebovat celkem dva moduly. modul obrazu a modul blurdu. Modul Obrázek bude obsahovat obrázek člena týmu, kterého chcete prezentovat.

Blurb mod se mezitím použije k přidání ikony v levém dolním rohu a biografie přechodu. Přidejte modul obrázku do prvního sloupce pomocí obrázku čtvercového formátu.

Filtry

Návrh, který vytváříme, je zcela ve stupních šedi. Chcete-li do našeho obrazu přidat tento odstín šedé, přejděte do nastavení filtrů a odstraňte veškerou sytost.

• Sytost: 0%

Přidejte modul Blurb do sloupce 1

Přidat obsah

Pokračujte přidáním nového modulu Blurb těsně pod obrázkový modul ve sloupci 1. Do pole názvu přidejte jméno člena týmu a do pole zadejte další informace o členovi týmu. obsah.

Vyberte ikonu

Další věc, kterou uděláme, je vybrat ikonu volby, která se zobrazí Návštěvníci že existuje více než jen fotografie.

Výchozí barva pozadí

Dále zvolíme plnou průhlednou barvu pozadí.

• Barva pozadí: rgba (255,255,255,0)

Barva pozadí na nadjezdu

Změníme tuto barvu vznášející se.

• Barva pozadí: rgba (255,255,255,0.88)

Výchozí nastavení ikon

Chceme viditelnou ikonu, která pomůže Návštěvníci aby pochopili, že nad tím mohou létat. Změňte nastavení ikony, abyste takovou ikonu získali.

• Barva ikony: #ffffff
• Ikona kruhu: ano
• Barva kruhu: # 000000
• Umístění ikony: vlevo
• Použijte velikost písma ikony: Ano
• Velikost písma ikony: 50px

Nastavení ikony kurzoru

Nechceme však, aby se ikona objevila při najetí myší. Proto místo toho používáme zcela průhlednou barvu.

• Barva ikony: rgba (255,255,255,0 XNUMX XNUMX)
• Barva kruhu: rgba (255,255,255,0)

Výchozí nastavení názvu

Poté přejděte k nastavení textu titulu a proveďte některé změny.

• Název Policie: Cinzel
• Název Police: Bold
• Název Styl písma: Malé čepice
• Název barevného textu: # 000000
• Velikost názvu textu: 0px

Umístěte kurzor na textová nastavení titulu

Změňte velikost textu vznášením.

• Velikost názvu textu: 30px

Výchozí nastavení textu těla

Změňte také nastavení textu těla.

• Body Police: Otevřete Sans
• Barva těla textu: # 000000
• Velikost textu těla: 0px
• Výška těla: 1.8em

Parametr těla při přeletu

A opět změňte velikost těla vznášejícího se textu.

• Velikost textu těla: 14px

Výchozí mezery

V neposlední řadě budeme muset vytvořit překrývání mezi modulem Blurb a obrazovým modulem pomocí záporného horního okraje.

• Horní okraj: -3.7vw (stolní), -9vw (tablet a telefon)
• Dolní okraj: 1.5vw (tablet), 2vw (telefon)

Stacionární odstup

Změňte hodnoty vlastního okraje a výplně v rolloveru.

• Horní okraj: -11,38vw
• Vrchní polstrování: 20px
• Spodní výplň: 20px
• Čalounění vpravo: 50px

Klonujte dva moduly dvakrát a duplikáty umístěte do zbývajících sloupců.

Dokončili jsme vytváření našeho prvního biologického vznášejícího se efektu. Abychom ušetřili čas, můžeme oba moduly ve sloupci 1 dvakrát naklonovat a duplikáty umístit do zbývajících dvou sloupců.

Upravte obrázek a obsah modulu Blurb

Nezapomeňte změnit obrázek v modulu Image a zkopírovat jej do modulu Blurb, abyste dokončili sekci členů týmu!

přehled

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat na to, jak jsme se dívali na různé velikosti obrazovky.

Kancelář

Mobilní aplikace

Závěrečné myšlenky

V tomto článku jsme vám ukázali, jak vytvořit biologický efekt vznášení pro fotografie členů týmu pouze pomocí integrovaných možností Divi. Zdůraznili jsme, jak důležité je vytvářet dobré stránky, protože jsou jedním z nejnavštěvovanějších webů.

Použití efektů biologického přechodu pro fotografie členů týmu nejen zlepší kvalitu vaší stránky, ale také vytvoří interakci s vašimi návštěvníky. Pokud máte nějaké dotazy nebo návrhy, nezapomeňte zanechat komentář v sekci komentáře níže!