Gå till innehållet

Så här byter du en rollover bild på Divi

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]

Att veta hur man ändrar en bild i svävaren kan vara användbart för alla typer av webbplatser du arbetar med. Det hjälper dig också att lägga till subtil interaktion på sidorna. Du kan till exempel använda den för att ge ytterligare perspektiv på vittnesmål, sidor och lagsidor.

Med Divis nya svävaralternativ kan du ändra en svävarbild med endast de inbyggda alternativen. Genom att kombinera kolumnbakgrund och opacitetsfiltret får du det gjort 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.

svävande bild

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.

val av en sektion divi.jpg

Lägg till en ny rad

Kolumnstruktur

Lägg sedan till en ny rad med följande kolumnstruktur:

välj en layout divi.jpg

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

bakre bild divi.jpg

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 bild divi.jpg

Lägg till en titeltextmodul i 2-kolumnen

Lägg till innehåll

I den andra kolumnen behöver vi först en textmodulstitel. Fortsätt och lägg till lite H3-innehåll.

bild och text divi.jpg

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

jaden elian bild divi.jpg

  • 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)

Anpassnings font divi image.jpg

avstånd

Lägg till slut en övre marginal i avståndsinställningarna.

  • Övre marginal: 50 (skrivbord), 50px (surfplatta och telefon)

marginal bild divi.jpg

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

separator divi imge module.jpg

Separatorns färg

Ändra sedan divisorens färg.

  • Separatorns färg: # e25300

bild divi separateur color.jpg

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]

lägen

Och välj en annan separationsstil i stilinställningarna.

  • Separationsstil: prickad

split separator divi.jpg

dimensionering

Öka även delningsvikten i dimensioneringsparametrarna.

  • Separatorvikt: 3px

taile separator divi image.jpg

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 valfritt innehåll.

ny del av text divi.jpg

Textinställningar

Ändra textinställningarna senare.

  • Textstorlek: 16px
  • Höjd på textrad: 2.3em
  • Textorientering: Rättfärdiga

ändra storlek och höjd på divi.jpg-raden

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.

duplicera en sektion divi.jpg

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%

image.jpg flyover konfiguration

Håll muspekaren över opacitet

Ändra opacitet medan du svävar.

  • Opacitet: 0%

ändra opaciteten på flyover.jpg

övergångar

Slutligen, skapa en smidig övergång genom att öka övergången.

  • Övergångsperiod: 1200ms

animation varaktighet divi modul image.jpg

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.

kolla standard fill.jpg

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

definiera lägre marginal.jpg

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

definiera en skugga divi.jpg

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]

Standard opacitet

Gå sedan till filterinställningarna och se till att standardomskinligheten är 100%.

  • Opacitet: 100%

svävande bild

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%

flyover opacitet divi.jpg

övergångar

Slutligen, öka längden på övergången i övergångsparametrarna för bildmodulen.

  • Övergångsperiod: 1200ms

animationen divi.jpg varaktighet

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%

divi.jpg radinställningar

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%

konfiguration av opacitet vid flyover bild på divi.jpg

Håll muspekaren över opacitet

Avlägsna all flyktig opacitet för att avslöja kolonnens bakgrund.

  • Opacitet: 0%

definiera lopacity divi.jpg

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.

exempel 4 layout divi.jpg

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

bild utan repetition.jpg

Upprepa för alla kolumner online

Upprepa föregående steg för var och en av kolumnerna i din rad.

reproducera bilderna på de andra kolumnerna.jpg

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

dimensionering divi.jpg

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.

nu bildmodulen i kolumnen 1 divi.jpg

Standard opacitet

Se till att standardopaciteten för denna modul är 100%.

  • Opacitet: 100%

konfigurera opacitet på divi.jpg

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]

Håll muspekaren över opacitet

Och ta bort opaciteten på svävaren så att kolumnbakgrunden visas istället.

  • Opacitet: 0%

flyover opacity modul image divi.jpg

övergångar

Öka övergångens varaktighet för en smidig övergång.

  • Övergångsperiod: 800ms

varaktighet för en övergång divi.jpg

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.

att klona modulerna.jpg

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 har vi visat dig ett enkelt sätt att få olika typer av svävarbilder med endast Divis inbyggda alternativ! Om du har några frågor eller förslag, vänligen lämna en kommentar i kommentarfältet nedan!

Den här artikeln innehåller kommentarer 0

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
4 aktier
del4
tweet
Enregistrer