Gå till innehållet

Så här lägger du till en övergångseffekt med detaljer för Divi-bilder

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Det är ingen hemlighet att "Vem vi är" -sidor är bra för att få klick till din webbplats. Det är också denna typ av sida som kommer att fokusera på den mänskliga delen av verksamheten bakom webbplatsen. Att veta detta inser vi att det är viktigt att vara uppmärksam på hur vi strukturerar sidor, vilken typ av information vi delar och hur vi skapar interaktioner.

En av de saker du kan göra för att förbättra sidupplevelsen är att tillhandahålla ett teammedlemsavsnitt som sätter dina anställda i rampljuset. Utöver det kan du lägga till en biologisk svävareffekt på foton av teammedlemmar med endast Divis inbyggda alternativ.

Detta sparar utrymme på sidan du arbetar med och skapar en svävande interaktion mellan dig och dina besökare.

I den här handledningen visar vi steg för steg hur du kommer dit. När du väl har kommit tillvägagångssättet kommer du att kunna anpassa designstilen efter dina egna behov.

Låt oss gå!

undersökningen

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

office

divi-bio-hover-effekt-desktop-gif.gif

Mobil

divi-bio-hover-effekt-mobile-gif.gif

Låt oss börja återskapa

Lägg till en ny sektion

avstånd

Skapa en ny sida eller öppna en befintlig sida och lägg till ett nytt avsnitt med följande anpassade fyllningsvärden:

  • Bästa vaddering: 100px
  • Botten stoppning: 100px

biohuver effekt

Lägg till rad 1

Kolumnstruktur

När du är klar med att lägga till den anpassade fyllningen i ditt avsnitt kan du stänga sektionsinställningarna och lägga till en ny rad med en enda kolumn.

biohuver effekt

Lägg till en textmodul

Lägg till H2-innehåll

Lägg till en textmodultitel i kolumnen med en valfri H2-storlek.

biohuver effekt

H2 textinställningar

Gå sedan till H2-textinställningarna och gör några ändringar i utseendet på kopian.

  • Rubrik 2 Teckensnitt: Cinzel
  • Titel 2 Teckensnittstyp: Små kepsar
  • Titel 2 Textjustering: Center
  • Titel 2 Textstorlek: 70px

biohuver effekt

Lägg till en divisionsmodul

synlighet

Fortsätt att lägga till en ny separationsmodul precis under textmodulens titel.

  • Visa Divider: Ja

biohuver effekt

Separatorns färg

Gå till fliken Design, öppna färginställningarna och ändra avdelningsfärgen därefter:

  • Separatorns färg: # 333333

biohuver effekt

dimensionering

Då kommer vi att minska storleken på delaren och centrera den.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • Bredd: 26%
  • Justering av modulen: centrum

biohuver effekt

Lägg till 2-raden

Kolumnstruktur

Strax under den föregående raden som du har lagt till, fortsätt och lägg till en ny rad med tre kolumner av samma storlek.

biohuver effekt

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna och gör några ändringar i måttparametrarna.

  • Använd en anpassad bredd: Ja
  • Enhet: PX
  • Anpassad bredd: 2000px
  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja

biohuver effekt

avstånd

Gå sedan till avståndsinställningarna och lägg till anpassade marginal- och stoppningsvärden.

  • Övre marginal: 50px
  • Nedre marginal: 50px
  • Toppad padding: 10px
  • Botten stoppning: 10px
  • Vänster Padding: 5px
  • Möjningstryck: 5px
  • Kolumn 1, 2 och 3 Polstring till vänster: 5px
  • Kolumn 1, 2 och 3 Polstring till höger: 5px

biohuver effekt

Skugga låda

Vi ger också vår linje ett lite djup genom att lägga till en ruta skugga med följande parametrar:

  • Box Shadow Blur Force: 80px
  • Boxskuggans utbredningskraft: -14px
  • Skuggfärg: rgba (0,0,0,0,3)

biohuver effekt

Lägg till en bildmodul i kolumn 1

Ladda en bild i en bildmodul

Det är dags att börja lägga till moduler! För att uppnå den biologiska svävareffekten behöver vi totalt två moduler. en bildmodul och en blurb-modul. Bildmodulen innehåller bilden av den lagmedlem du vill presentera.

Blurb-moden kommer under tiden att användas för att lägga till ikonen i det nedre vänstra hörnet och sväva biografin. Lägg till en bildmodul i den första kolumnen med en kvadratisk bild.

biohuver effekt

filter

Designen vi skapar är helt i gråskala. För att lägga till denna gråton i vår bild, gå till filterinställningarna och ta bort all mättnad.

  • Mättnad: 0%

biohuver effekt

Lägg till Blurb-modulen i 1-kolumnen

Lägg till innehåll

Fortsätt genom att lägga till en ny Blurb-mod strax under bildmod i kolumn 1. Lägg till teammedlemmens namn i titelfältet och ange ytterligare information om teammedlemmen i innehållsområdet.

biohuver effekt

Välj en ikon

Nästa sak vi kommer att göra är att välja en valfri ikon som visar besökarna att det finns mer än bara en bild.

biohuver effekt

Standardbakgrundsfärg

Därefter väljer vi en fullständig transparent bakgrundsfärg.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Bakgrundsfärg: rgba (255,255,255,0)

biohuver effekt

Bakgrundsfärg på flyover

Och vi kommer att ändra den här färgen svävar.

  • Bakgrundsfärg: rgba (255,255,255,0.88)

biohuver effekt

Standardikoninställningar

Vi vill ha en synlig ikon som hjälper besökarna att förstå att de kan sväva över den. Ändra ikoninställningarna för att få en sådan ikon.

  • Ikonfärg: #ffffff
  • Cirkelikon: ja
  • Cirkelfärg: # 000000
  • Ikonplats: vänster
  • Använd ikonstorlek: Ja
  • Ikonstorlek: 50 pixlar

biohuver effekt

Håll muspekaren inställning

Vi vill dock inte att ikonen ska visas på svävaren. Därför använder vi istället en helt transparent färg.

  • Ikonfärg: rgba (255,255,255,0)
  • Färg på cirkel: rgba (255,255,255,0)

biohuver effekt

Standard titelinställningar

Gå sedan till titelens textinställningar och gör några ändringar.

  • Titel Polis: Cinzel
  • Titel Polis: Bold
  • Titel Typsnitt: Små kepsar
  • Färgtexttitel: # 000000
  • Textstitelstorlek: 0px

biohuver effekt

Håll muspekaren över textinställningarna för titeln

Ändra textens storlek genom att sväva.

  • Textstitelstorlek: 30px

biohuver effekt

Standardinställningar för huvudtext

Ändra också inställningarna för kroppstext.

  • Kroppspolis: Open Sans
  • Kroppsfärgad text: # 000000
  • Kroppstextstorlek: 0px
  • Kroppshöjd: 1.8em

biohuver effekt

Parameter för kroppen på överflöd

Och, ändra på textstorlekens kroppsstorlek.

  • Kroppstextstorlek: 14px

biohuver effekt

Standardavstånd

Sist men inte minst måste vi skapa en överlappning mellan Blurb-modulen och bildmodulen med en negativ övre marginal.

  • Övre marginal: -3.7vw (skrivbord), -9vw (surfplatta och telefon)
  • Nedre marginal: 1.5vw (surfplatta), 2vw (telefon)

biohuver effekt

Stationärt avstånd

Ändra den anpassade marginalen och fylla värdena i rollover.

  • Övre marginal: -11,38vw
  • Toppad padding: 20px
  • Botten stoppning: 20px
  • Möjningstryck: 50px

biohuver effekt

Klona de två modulerna två gånger och placera dubbletterna i de återstående kolumnerna.

Vi har skapat vår första biologiska svävareffekt. För att spara tid kan vi bara dubbelklona de två modulerna i kolumn 1 två gånger och placera dubbletterna i de återstående två kolumnerna.

biohuver effekt

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Redigera bilden och innehållet i Blurb-modulen

Glöm inte att ändra bilden i Bildmodulen och kopiera den till Blurb-modulen för att slutföra teammedlemmarsektionen!

biohuver effekt

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur vi såg på olika skärmstorlekar.

office

biohuver effekt

Mobil

biohuver effekt

Avslutande tankar

I den här artikeln har vi visat dig hur du skapar en biologisk svävareffekt för foton av lagmedlemmar som endast använder Divis inbyggda alternativ. Vi har betonat hur viktigt det är att skapa bra sidor eftersom de är en av de mest besökta webbplatserna.

Att använda bio-svävareffekter för foton av teammedlemmar kommer inte bara att förbättra kvaliteten på din sida utan också skapa interaktion med dina besökare. Om du har några frågor eller förslag, var noga med att lämna en kommentar i kommentarfältet nedan!

Den här artikeln innehåller kommentarer 4

  1. Hej!

    Tack för den här handledningen, den var väldigt användbar för mig.
    Men jag stöter på två små problem:
    - svävarbakgrunden gäller inte (jag har intrycket att den ligger bakom bilden ...)
    - Flyover öppnas inte på samma sätt som i exemplet (min text förblir i samma höjd som ikonen och öppnas inte uppåt) vilket ger ett snyggt utseende.

    Har du en lösning? Tack.

    Ha en trevlig kväll

  2. Hej!
    Tack för denna handledning, det är mycket väl förklarat.
    Men jag har problem när jag svävar över musen och skakar och inte flyter. Vet du vad det beror på?

    tack

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
2 aktier
del2
tweet
Enregistrer