Nie je žiadnym tajomstvom, že stránky „O nás“ sú skvelé pri získavaní kliknutí na vaše stránky webové stránky. Je to tiež tento typ stránky, ktorý bude zdôrazňovať ľudskú časť podnikania webové stránky. Keď to vieme, uvedomujeme si, že je dôležité venovať pozornosť tomu, ako štruktúrujeme stránky, aký druh informácií zdieľame a ako vytvárame interakcie.

Jednou z vecí, ktoré môžete urobiť pre zlepšenie zážitku zo stránky, je poskytnúť sekciu členov tímu, ktorá umiestni vašich zamestnancov do centra pozornosti. Navyše môžete na fotografie členov tímu pridať efekt biologického vznášania iba pomocou zabudovaných možností Divi.

To vám umožní ušetriť miesto na stránke, na ktorej pracujete, a vytvoriť interakciu medzi vami a vašou myšou Návštevníci.

V tejto príručke vám krok za krokom ukážeme, ako sa tam dostať. Len čo získate prístup, budete môcť prispôsobiť štýl dizajnu tak, aby vyhovoval vašim potrebám.

Poďme!

prehľad

Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.

kancelária

Mobilné

Začnime znova

Pridajte novú sekciu

vzdialenosť

Vytvorte novú stránku alebo otvorte existujúcu a pridajte novú sekciu pomocou nasledujúcich vlastných hodnôt výplne:

• Najlepšie polstrovanie: 100px
• Spodné čalúnenie: 100px

Pridajte riadok 1

Štruktúra stĺpcov

Po dokončení pridávania vlastnej výplne do sekcie môžete zavrieť nastavenia sekcie a pridať nový riadok pomocou jedného stĺpca.

Pridajte textový modul

Pridajte obsah H2

Do stĺpca pridajte názov textového modulu s veľkosťou H2.

Nastavenia textu H2

Potom prejdite do nastavení textu H2 a urobte nejaké zmeny vo vzhľade kópie.

• Rubriky 2 Font: Cinzel
• Názov písma 2 Štýl písma: Malé čiapky
• Názov 2 Zarovnanie textu: Stred
• Názov 2 Veľkosť textu: 70px

Pridať modul delenia

viditeľnosť

Pokračujte v pridávaní nového oddeľovacieho modulu tesne pod nadpisom Textový modul.

• Zobraziť oddeľovač: Áno

Farba oddeľovača

Prejdite na kartu Dizajn, otvorte nastavenia farieb a podľa toho zmeňte farbu oddeľovača:

• Farba oddeľovača: # 333333

dimenzovanie

Potom znížime veľkosť deliča a vycentrujeme ho.

• Šírka: 26%
• Zarovnanie modulu: stred

Pridajte riadok 2

Štruktúra stĺpcov

Hneď pod predchádzajúcim riadkom, ktorý ste pridali, pokračujte a pridajte nový riadok pomocou troch stĺpcov rovnakej veľkosti.

dimenzovanie

Bez pridania ďalších modulov otvorte parametre linky a vykonajte niektoré zmeny parametrov dimenzovania.

• Použite vlastnú šírku: Áno
• Jednotka: PX
• Vlastná šírka: 2000px
• Použite vlastnú šírku odkvapov: Áno
• Šírka odkvapov: 1
• Vyrovnajte výšky stĺpcov: Áno

vzdialenosť

Potom prejdite na nastavenie medzery a pridajte vlastné hodnoty okrajov a výplne.

• Horný okraj: 50px
• Dolný okraj: 50px
• Najlepšie padding: 10px
• Spodné čalúnenie: 10px
• Ľavá vložka: 5px
• Čalúnenie vpravo: 5px
• Stĺpec 1, 2 a 3 Výplň vľavo: 5px
• Stĺpec 1, 2 a 3 Výplň vpravo: 5px

Tieňová skrinka

Taktiež dávame nášmu riadku malú hĺbku pridaním tieňového poľa s nasledujúcimi parametrami:

• Box Force Blur Force: 80px
• Šírka tieňa na šírenie: -14px
• Farba tieňa: rgba (0,0,0,0,3)

Pridajte modul obrázkov do stĺpca 1

Vložte obrázok do modulu obrázkov

Je čas začať pridávať moduly! Na dosiahnutie biologického vznášacieho efektu budeme celkovo potrebovať dva moduly. obrazový modul a reklamný modul. Modul Obrázok bude obsahovať obrázok člena tímu, ktorého chcete predstaviť.

Blurb mod sa medzitým použije na pridanie ikony v ľavom dolnom rohu a biografie vznášadla. Pridajte obrázkový modul do prvého stĺpca pomocou obrázka štvorcového rozmeru.

Filtre

Dizajn, ktorý vytvárame, je úplne v odtieňoch sivej. Ak chcete do svojho obrázka pridať tento odtieň šedej, prejdite do nastavení filtra a odstráňte všetku sýtosť.

• Sýtosť: 0%

Pridajte modul Blurb do stĺpca 1

Pridajte obsah

Pokračujte pridaním nového modulu Blurb hneď pod obrázkový modul v stĺpci 1. Do poľa názvu pridajte meno člena tímu a do poľa zadajte ďalšie informácie o členovi tímu. obsah.

Vyberte ikonu

Ďalšia vec, ktorú urobíme, je vybrať ikonu voľby, ktorá sa zobrazí Návštevníci že existuje viac ako len fotografia.

Predvolená farba pozadia

Ďalej vyberieme úplnú priehľadnú farbu pozadia.

• Farba pozadia: rgba (255,255,255,0)

Farba pozadia na pretekanie

A my zmeníme túto farbu vznášajúcu sa.

• Farba pozadia: rgba (255,255,255,0.88)

Predvolené nastavenie ikony

Chceme viditeľnú ikonu, ktorá pomôže Návštevníci aby pochopili, že nad ním môžu preletieť. Ak chcete získať takúto ikonu, zmeňte nastavenia ikony.

• Farba ikony: #ffffff
• Ikona kruhu: áno
• Farba kruhu: # 000000
• Umiestnenie ikony: vľavo
• Použiť veľkosť písma ikony: Áno
• Ikona Veľkosť písma: 50px

Nastavenie ikony kurzora myši

Nechceme však, aby sa ikona zobrazovala pri umiestnení kurzora myši. Preto používame namiesto toho úplne priehľadnú farbu.

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

Predvolené nastavenie názvu

Potom prejdite na nastavenia textu názvu a vykonajte niektoré zmeny.

• Názov Polícia: Cinzel
• Názov Polícia: Bold
• Štýl písma titulu: Malé čiapky
• Názov farebného textu: # 000000
• Veľkosť textu textu: 0px

Umiestnite kurzor na textové nastavenia titulu

Zmeňte veľkosť textu vznášaním myši.

• Veľkosť textu textu: 30px

Predvolené nastavenia textu tela

Zmeňte tiež nastavenia textu tela.

• Telocvičňa: Open Sans
• Farba textu textu: # 000000
• Veľkosť textu tela: 0px
• Výška tela: 1.8em

Parameter tela pri prelete

A opäť zmeniť veľkosť tela textového vznášania.

• Veľkosť textu tela: 14px

Predvolené medzery

V neposlednom rade bude potrebné vytvoriť prekrývanie medzi modulom Blurb a modulom obrazu pomocou záporného horného okraja.

• Horný okraj: -3.7vw (stolný počítač), -9vw (tablet a telefón)
• Dolný okraj: 1.5vw (tablet), 2vw (telefón)

Pevné odstupy

Zmeňte hodnoty vlastného okraja a výplne v rolloveri.

• Horný okraj: -11,38vw
• Najlepšie padding: 20px
• Spodné čalúnenie: 20px
• Čalúnenie vpravo: 50px

Dvakrát klonujte dva moduly a umiestnite duplicity do zostávajúcich stĺpcov.

Dokončili sme vytváranie nášho prvého biologického vznášacieho efektu. Z dôvodu úspory času môžeme dva moduly do stĺpca 1 dvakrát naklonovať a duplikáty umiestniť do zvyšných dvoch stĺpcov.

Upravte obrázok a obsah modulu Blurb

Nezabudnite zmeniť obrázok v module Obrázok a skopírujte ho do modulu Blurb, aby ste dokončili sekciu členov tímu!

prehľad

Teraz, keď sme prešli všetkými krokmi, sa poďme konečne pozrieť na to, ako to vyzeralo na rôznych veľkostiach obrazovky.

kancelária

Mobilné

záverečné myšlienky

V tomto článku sme vám ukázali, ako vytvoriť biologický efekt vznášania fotografií členov tímu iba pomocou zabudovaných možností Divi. Zdôraznili sme, aké dôležité je vytvárať dobré stránky, pretože sú jedným z najnavštevovanejších webov.

Použitie efektov biologického vznášania na fotografie členov tímu zlepší nielen kvalitu vašej stránky, ale vytvorí aj interakciu s vašimi návštevníkmi. Ak máte akékoľvek otázky alebo návrhy, nezabudnite zanechať komentár v sekcii komentárov nižšie!