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!
Hej,
Tak for denne tutorial, det var meget nyttigt for mig.
Dog støder jeg på 2 små problemer:
- baggrunden i svævningen gælder ikke (jeg har indtryk af, at den ligger bag billedet ...)
- flyover åbner ikke på samme måde som i eksemplet (min tekst forbliver i samme højde som ikonet og åbner ikke opad), hvilket giver et flot udseende.
Har du en løsning? Tak.
Hav en god aften
Hej,
Kan du dele et screenshot?
Hej,
Tak for denne tutorial, det er meget godt forklaret.
Jeg har dog et problem, når musen over musen svæver, ryster og ikke flyder. Ved du, hvad dette skyldes?
Tak
Hej sal
Ingen anelse undskyld.