Det er ingen hemmelighed, at "Om os"-sider er gode til at generere klik til din websted. Det er også denne type side, der vil understrege den menneskelige del af forretningen bag Websted. Når vi ved dette, indser vi, at det er vigtigt at være opmærksom på, hvordan vi strukturerer sider, hvilken slags information vi deler, og hvordan vi skaber interaktioner.

En af de ting, du kan gøre for at forbedre sideoplevelsen, er at give en teammedlemssektion, der sætter dine medarbejdere i rampelyset. Derudover kan du tilføje en biologisk svæveeffekt til fotos af teammedlemmer, der kun bruger Divis indbyggede muligheder.

Dette vil give dig mulighed for at spare plads på den side, du arbejder på, og skabe en svævende interaktion mellem dig og din besøgende.

I denne vejledning viser vi dig trin for trin, hvordan du kommer derhen. Når du har fået tilgangen, vil du være i stand til at tilpasse designstilen, så den passer til dine egne behov.

Lad os gå!

undersøgelse

Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.

kontor

Mobil

Lad os begynde at genskabe

Tilføj en ny sektion

afstand

Opret en ny side, eller åbn en eksisterende, og tilføj en ny sektion ved hjælp af følgende tilpassede udfyldningsværdier:

• Bedste polstring: 100px
• Bundpolstring: 100px

Tilføj række 1

Kolonne struktur

Når du er færdig med at tilføje den tilpassede udfyldning til din sektion, kan du lukke sektionsindstillingerne og tilføje en ny række ved hjælp af en enkelt kolonne.

Tilføj et tekstmodul

Tilføj H2 indhold

Tilføj en tekstmodultitel til kolonnen med en valgfri H2-størrelse.

H2 tekstindstillinger

Gå derefter til H2-tekstindstillingerne, og foretag nogle ændringer i kopiens udseende.

• Tekst 2 Skrifttype: Cinzel
• Titel 2 Skrifttype: små hætter
• Titel 2 Tekstjustering: Center
• Titel 2 Tekststørrelse: 70px

Tilføj et divisionsmodul

synlighed

Fortsæt med at tilføje et nyt separationsmodul lige under Tekstmodulets titel.

• Vis divider: Ja

Separatorens farve

Gå til fanen Design, åbn farveindstillingerne, og skift din skillefarve i overensstemmelse hermed:

• Separatorens farve: # 333333

dimensionering

Derefter reducerer vi dividerens størrelse og centrerer den.

• Bredde: 26%
• Justering af modulet: center

Tilføj 2-linjen

Kolonne struktur

Lige under den forrige linje, du tilføjede, skal du fortsætte og tilføje en ny række ved hjælp af tre kolonner med samme størrelse.

dimensionering

Uden at tilføje flere moduler skal du åbne linjeparametrene og foretage nogle ændringer i størrelsesparametrene.

• Brug en brugerdefineret bredde: Ja
• Enhed: PX
• Brugerdefineret bredde: 2000px
• Brug en brugerdefineret tagrendebredde: Ja
• Tagrendebredde: 1
• Udligne kolonnehøjder: Ja

afstand

Gå derefter til afstandsindstillingerne, og tilføj brugerdefinerede margen- og polstringsværdier.

• Øvre margen: 50px
• Nederste margin: 50px
• Top polstring: 10px
• Bundpolstring: 10px
• Venstre polstring: 5px
• Polstring højre: 5px
• Kolonne 1, 2 og 3 Polstring til venstre: 5px
• Kolonne 1, 2 og 3 Polstring til højre: 5px

Skyggeæske

Vi giver også vores linje en lille dybde ved at tilføje en boksskygge med følgende parametre:

• Box Shadow Blur Force: 80px
• Boksskyggeudbredelseskraft: -14px
• Skygge farve: rgba (0,0,0,0,3)

Føj et billedmodul til kolonne 1

Læg et billede i et billedmodul

Det er tid til at begynde at tilføje moduler! For at opnå den biologiske svæveeffekt har vi brug for to moduler i alt. et billedmodul og et sløret modul. Billedmodulet indeholder billedet af det teammedlem, du vil præsentere.

Blurb mod vil i mellemtiden blive brugt til at tilføje ikonet i nederste venstre hjørne og svævebiografien. Føj et billedmodul til den første kolonne ved hjælp af et billede i firkantet størrelse.

filtre

Det design, vi skaber, er helt i gråtoner. For at tilføje denne gråtoneskygge til vores billede skal du gå til filtreindstillingerne og fjerne al mætning.

• Mætning: 0%

Føj Blurb-modulet til 1-kolonnen

Tilføj indhold

Fortsæt med at tilføje et nyt Blurb-modul lige under billedmodulet i kolonne 1. Tilføj teammedlemmets navn til titelfeltet og indtast yderligere oplysninger om teammedlemmet i boksen. indhold.

Vælg et ikon

Den næste ting, vi skal gøre, er at vælge et valgikon, der vises besøgende at der er mere end blot et foto.

Standard baggrundsfarve

Dernæst vælger vi en fuld gennemsigtig baggrundsfarve.

• Baggrundsfarve: rgba (255,255,255,0)

Baggrundsfarve på flyover

Og vi vil ændre denne farve svævende.

• Baggrundsfarve: rgba (255,255,255,0.88)

Standardikonindstillinger

Vi vil have et synligt ikon, der vil hjælpe besøgende at forstå, at de kan flyve over det. Skift ikonindstillingerne for at få et sådant ikon.

• Ikonfarve: #ffffff
• Cirkelikon: ja
• Cirkelfarve: # 000000
• Ikonplacering: venstre
• Brug ikonets skriftstørrelse: Ja
• Ikon skrifttypestørrelse: 50 px

Hold musen over ikonindstillingen

Vi ønsker imidlertid ikke, at ikonet skal vises på markøren. Derfor bruger vi i stedet en helt gennemsigtig farve.

• Ikonfarve: rgba (255,255,255,0)
• Cirkelfarve: rgba (255,255,255,0)

Standard titelindstillinger

Gå derefter til titelens tekstindstillinger og foretag nogle ændringer.

• Titel Politi: Cinzel
• Titel Politi: Fed
• Titel skrifttype: små hætter
• Farve tekst titel: # 000000
• Tekst Titel Størrelse: 0px

Hold markøren over tekstindstillingerne for titlen

Ændre størrelsen af ​​teksten ved at svinge.

• Tekst Titel Størrelse: 30px

Standardindstillinger for kropstekst

Skift også indstillinger for kropstekst.

• Kropspoliti: Åben Sans
• Kropsfarve på tekst: # 000000
• Krops tekststørrelse: 0px
• Kropshøjde: 1.8em

Parameter af kroppen på overflyt

Og igen ændrer du tekststørrelsenes kroppsstørrelse.

• Krops tekststørrelse: 14px

Standardafstand

Sidst, men ikke mindst, bliver vi nødt til at oprette en overlapning mellem Blurb-modulet og billedmodulet ved hjælp af en negativ øvre margen.

• Øvre margen: -3.7vw (desktop), -9vw (tablet og telefon)
• Nederste margen: 1.5vw (tablet), 2vw (telefon)

Stationær afstand

Skift den tilpassede margen og udfyld værdier i rollover.

• Øvre margen: -11,38vw
• Top polstring: 20px
• Bundpolstring: 20px
• Polstring højre: 50px

Klon de to moduler to gange, og læg duplikaterne i de resterende kolonner.

Vi er færdige med at skabe vores første biologiske svæveeffekt. For at spare tid kan vi simpelthen klone de to moduler i kolonne 1 to gange og placere duplikaterne i de resterende to kolonner.

Rediger billedet og indholdet af Blurb-modulet

Glem ikke at ændre billedet i billedmodulet og kopiere det i Blurb-modulet for at fuldføre teammedlemmersektionen!

undersøgelse

Nu hvor vi har gennemgået alle trin, lad os tage et sidste kig på, hvordan vi så på forskellige skærmstørrelser.

kontor

Mobil

endelige tanker

I denne artikel har vi vist dig, hvordan du opretter en biologisk svæveeffekt til fotos af teammedlemmer, der kun bruger Divis indbyggede muligheder. Vi har understreget, hvor vigtigt det er at oprette gode sider, fordi de er et af de mest besøgte websteder.

Brug af bio-hover-effekter til fotos af teammedlemmer forbedrer ikke kun kvaliteten af ​​din side, men skaber også interaktion med dine besøgende. Hvis du har spørgsmål eller forslag, skal du sørge for at efterlade en kommentar i kommentarfeltet nedenfor!