Att veta hur man ändrar en bild när man svävar kan vara användbart för alla typer av webbplats du jobbar på. Det hjälper dig också att lägga till subtil interaktion på sidor. Du kan till exempel använda den för att ge ytterligare perspektiv till vittnesmål, sidor och teamsidor.
Med de nya svävningsalternativen för Divi, kan du redigera en bild när du håller muspekaren med endast de inbyggda alternativen. Genom att kombinera kolumnbakgrunderna och opacitetsfiltret kommer du dit på nolltid.
Låt oss gå!
undersökningen
Innan vi studerar handboken, låt oss ta en titt på de fyra exemplen vi kommer att återskapa från grunden.
Allmänna steg
Lägg till en ny sektion
I den första delen av denna handledning tar vi några allmänna steg. Dessa allmänna steg hjälper oss att spara tid när vi fokuserar på de tre första exemplen. Öppna en ny eller befintlig sida och lägg till en vanlig sektion i den.
Lägg till en ny rad
Kolumnstruktur
Lägg sedan till en ny rad med följande kolumnstruktur:
1-kolumnen Bakgrundsbild
Utan att lägga till några moduler ännu, öppna radinställningarna och lägg till en bakgrundsbild i den första kolumnen. Välj den bild du vill flyga över.
- Kolumn 1 Bakgrundsbild Upprepa: Ingen upprepning
Lägg till en bild i 1-kolumnen
Ladda upp en bild
Fortsätt genom att lägga till en bildmodul i den första kolumnen och ladda bilden som du vill ska visas innan du svävar.
Lägg till en titeltextmodul i 2-kolumnen
Lägg till innehåll
I den andra kolumnen behöver vi först en textmodultitel. Varsågod och lägg till några innehåll H3.
Rubriktextinställningar
Gå sedan till titeltextinställningarna och gör några ändringar.
- Titel 3 Teckensnitt: Baloo Tamma
- Titel 3 Textfärg: # eda96a
- Titel 3 Textstorlek: 100 pixlar (skrivbord), 70 pixlar (surfplatta), 50 pixlar (telefon)
- Titelavstånd för 3-bokstäver: -4px
- Titel 3 Text Shadow Horisontell Längd: 0.04em
- Titel 3 Text Shadow Vertikal Längd: 0.04em
- Titel 3 Färg Skuggad text: rgba (0,0,0,0,6)
avstånd
Lägg till slut en övre marginal i avståndsinställningarna.
- Övre marginal: 50 (skrivbord), 50px (surfplatta och telefon)
Lägg till en delningsmodul i 2-kolumnen
Visa delare
Lägg till en separationsmodul precis under textmodulens titel i 2-kolumnen.
- Visa Divider: Ja
Separatorns färg
Ändra sedan divisorens färg.
- Separatorns färg: # e25300
lägen
Och välj en annan separationsstil i stilinställningarna.
- Separationsstil: prickad
dimensionering
Öka även delningsvikten i dimensioneringsparametrarna.
- Separatorvikt: 3px
Lägg till en texttextmodul i 2-kolumnen
Lägg till innehåll
Låt oss gå vidare till den sista modulen! Lägg till en textmodul i den andra kolumnen med en innehåll av val.
Textinställningar
Ändra textinställningarna senare.
- Textstorlek: 16px
- Höjd på textrad: 2.3em
- Textorientering: Rättfärdiga
Klona avsnittet två gånger
När du har slutfört alla allmänna steg dubbelklonar du det avsnitt du har byggt. Nu har vi ett separat avsnitt för vart och ett av de tre första exemplen.
Skapa exempel 1
Tillämpa ytterligare inställningar på bildmodulen
Standard opacitet
Låt oss börja skapa det första exemplet! Det enda vi ska göra här är att skapa svävarövergången utan ytterligare effekter. För att göra detta, öppna bildmodulen och gå till filterinställningarna. Se till att standardopacitetsvärdet är 100%.
- Opacitet: 100%
Håll muspekaren över opacitet
Ändra opacitet medan du svävar.
- Opacitet: 0%
övergångar
Slutligen, skapa en smidig övergång genom att öka övergången.
- Övergångsperiod: 1200ms
Skapa exempel 2
Tillämpa ytterligare inställningar på bildmodulen
Standardavstånd
Låt oss gå vidare till det andra exemplet! Öppna bildmodulen i kolumn 1 och se till att det inte finns någon anpassad standardfyllning.
Stationärt avstånd
Fortsätt genom att lägga till lite nedre svävmarginal så att svävarbilden ökar i storlek.
- Botten stoppning: 100px
Skugga låda
Vi lägger också till en standardboxskugga som kommer att försvinna vid övergång.
- Boxens skugga, horisontell position: -55px
- Box Shadow Vertikal Position: -50px
- Boxskuggans utbredningskraft: -10px
- Skuggfärg: # eda96a
Standard opacitet
Gå sedan till filterinställningarna och se till att standardomskinligheten är 100%.
- Opacitet: 100%
Håll muspekaren över opacitet
Ta bort opaciteten hos svävaren. Detta gör att kolumnens bakgrund kan visas och skapa "sväva bilden" -effekten.
- Opacitet: 0%
övergångar
Slutligen, öka längden på övergången i övergångsparametrarna för bildmodulen.
- Övergångsperiod: 1200ms
Skapa ett exempel 3
Lägg till en lutningsbakgrund till 1-kolumnen
För det tredje exemplet börjar vi med att öppna radinställningarna och lägga till en radiell gradientbakgrund i den första kolumnen. Detta ger den svävande bilden en cirkulär form.
- 1-färg: rgba (43,135,218,0)
- 2 färg: #ffffff
- 1-kolumn Gradienttyp: Radial
- Kolumn 1 Radial Riktning: Centrum
- Kolumn 1 Startposition: 60%
- Kolumn 1 Slutlig position: 60%
Tillämpa ytterligare inställningar på bildmodulen
Standard opacitet
Fortsätt genom att öppna bildmodulen i 1-kolumnen och se till att standardopaciteten är 100%.
- Opacitet: 100%
Håll muspekaren över opacitet
Avlägsna all flyktig opacitet för att avslöja kolonnens bakgrund.
- Opacitet: 0%
Skapa exempel 4
Lägg till en ny rad
Kolumnstruktur
På det sista exemplet! Här behöver vi en ny rad med 6 kolumner.
1-kolumnen Bakgrundsbild
Utan att lägga till några moduler ännu, öppna radinställningarna och lägg till den bakgrundsbild du vill sväva över som bakgrundsbild för kolumn 1.
- Kolumn 1 Bakgrundsbild Upprepa: Ingen upprepning
Upprepa för alla kolumner online
Upprepa föregående steg för var och en av kolumnerna i din rad.
dimensionering
Gå sedan till storleksparametrarna för raden och ta bort eventuella mellanrum mellan kolumnerna.
- Gör den här linjen full bredd: Ja
- Använd en anpassad rännbredd: 1
Lägg till en bildmodul i kolumn 1
Ladda upp en bild
Fortsätt genom att lägga till en bildmodul i den första kolumnen och ladda upp bilden du vill visas som standard.
Standard opacitet
Se till att standardopaciteten för denna modul är 100%.
- Opacitet: 100%
Håll muspekaren över opacitet
Och ta bort opaciteten på svävaren så att kolumnbakgrunden visas istället.
- Opacitet: 0%
övergångar
Öka övergångens varaktighet för en smidig övergång.
- Övergångsperiod: 800ms
Clone Image 3-modulen en gång och placera dubbletterna i de återstående kolumnerna
När du är klar med att redigera bildmodulen i kolumn 1 kan du klona den och placera dubbletterna i de återstående kolumnerna. Se till att du också byter bilder.
Avslutande tankar
Att ändra en svävningsbild kan hjälpa till att ge den extra interaktionen till avsnitt om vittnesmål, sidor och lagsidor.
I den här handledningen visade vi dig ett enkelt sätt att få olika typer av bilder när du svävar med bara de inbyggda alternativen för Divi ! Om du har några frågor eller förslag, vänligen lämna en kommentar i kommentarsfältet nedan!
