Divi: Hur man skapar anpassade bildöverlägg

Vill du lära dig hur man designar anpassade bildöverlägg med Divi ?

Bildöverlägg har funnits länge inom webbdesign. De är perfekta för att engagera besökare genom att avslöja innehåll Ytterligare och designelement när du håller muspekaren över bilden. 

I den här handledningen kommer vi att visa dig hur du designar anpassade bildöverlägg i Divi. Dessa överlägg kommer att ändras och avslöja element när du håller muspekaren över bilden. 

Inga plugins behövs.

Låt oss börja!

undersökningen

Här är en snabb titt på designen vi kommer att skapa i den här handledningen.

Skapa en ny sida med Divi Builder

Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.

Ge den en titel som är vettig för dig och klicka Använda Divi Builder

klicka sedan på Börja bygga (Bygg från grunden)

Efter det har du en tom duk för att börja designa i Divi.

Skapa anpassade bildöverlägg i Divi

Designa avsnittet, raden och kolumnerna

Börja med att skapa en rad med tre kolumner i standardavsnittet.

Öppna avsnittsinställningar och lägg till följande bakgrundsfärg:

• Bakgrund: #3a0ca3

Öppna sedan kolumn 1-inställningarna och uppdatera följande:

• CSS-klass: et-overlay-container

• Horisontellt överflöde: Dold
• Vertikalt överflöde: Dold

Lägg till bild

Nu när avsnittet, raden och kolumnen är klara, lägg till en ny bildmodul i kolumn 1. Detta kommer att vara huvudbilden bakom våra överläggsdesigner.

Ladda upp en bild som ser mer ut som ett porträtt än ett landskap. Se till att den är tillräckligt bred för att täcka hela kolumnbredden på alla webbläsarstorlekar.

OBS: Du kan använda landskapsbilder, men du kan behöva justera placeringen av överlagringselementen så att de inte överlappar varandra.

Under fliken Designa, uppdatera följande:

• Marginal (botten): 0px

Under fliken Advanced Open water, lägg till följande CSS-klass:

• CSS-klass: et-overlay-image

Lägga till bildöverläggsfärg med hjälp av en "Divider"-modul

För att skapa bildöverläggsfärgen använder vi en Divider-modul.

Lägg först till en Divider-modul under bilden.

Placera sedan avgränsaren i absolut så att den placeras ovanför bilden:

• Position: Absolut

Under fliken Innehåll, uppdatera följande:

• Visa avdelare: NEJ

• Bakgrundsfärg: rgba(247,37,133,0.8)

Uppdatera sedan höjden och bredden på separatorn:

• Bredd: 100 %
• Höjd: 100%

Med designen på plats, lägg till följande CSS-klass till splittern:

• och-överlägg-objekt

OBS: Den här klassen bör läggas till alla överläggsdesignelement som du bara vill visa när du håller muspekaren. Om du inte vill att elementet ska döljas initialt, lämna det ute.

För att hjälpa dig hålla reda på designelement/moduler, öppna lagermodalen och märk modulen Divider ("Overlay Color").

Lade till överläggshuvudtext

Lägg till en ny textmodul under Divider-modulen. Detta kommer att fungera som överlagringshuvudtexten som kommer att visas ovanpå bilden när du håller muspekaren.

Uppdatera innehåll med en H2-titel:

<h2>Coaching</h2>

Uppdatera sedan textmoduletiketten för framtida referens.

Under fliken Designa, uppdatera följande:

• Textjustering: Centrerad
• Textfärg: Ljus

• Typsnitt: Skarv Garamond
• Teckensnittsvikt: Fet
• Textstorlek: 40px

• Bredd: 100 %
• Max bredd: 85 %

Under fliken Advanced Open water, uppdatera positionen enligt följande:

• Position: Absolut
• Plats: övre mitten
• Vertikal offset: 10 %

OBS: Den vertikala förskjutningen kan behöva justeras beroende på bildens bildförhållande. Till exempel kan en liggande bild kräva mindre offset

Lägg sedan till följande CSS-klasser i textmodulen:

• CSS-klass: nedflyttning av et-overlay-objekt

Förutom klass "och-överläggsobjekt", lägger vi till en extra klass "flytta ner" för att använda den anpassade CSS för att flytta rubriken ner något när du håller muspekaren.

Skapar den överlagrade brödtexten

För att skapa brödtextöverlägget kan vi duplicera textmodulen som används för rubriköverlägget. Innan du uppdaterar dubblettparametrarna, ändra etiketten till "Overlay Body".

Öppna textinställningarna för den nya textmodulen och uppdatera innehåll av kroppen med några meningar av stycketext.

Under fliken Advanced Open water, ändra den absoluta platsen för modulen till mitten.

Eftersom vi inte vill att den här ska flytta på svävaren (endast visas), uppdatera CSS-klassen så att den endast inkluderar följande:

• CSS-klass: et-overlay-objekt

Skapar överläggsknappen

Den sista överlagringen på denna bild kommer att vara knappen. För att skapa knappen, lägg till en ny knappmodul under den andra textmodulen.

Innan du ändrar designen, uppdatera knappens position enligt följande:

• Position: absolut
• Vertikal offset: 10 %

Nu ska knappen vara centrerad på den nedre delen av bilden.

På fliken Advanced Open water, uppdatera CSS-klassen och lägg till ett anpassat CSS-kodavsnitt till huvudelementet enligt följande:

• CSS-klass: et-overlay-item move-up

• Huvud CSS-element:

min-width: 15em;

Observera att en extra klass har lagts till knappen för att flytta den något uppåt när du håller muspekaren. Detta för att komplettera den nedåtgående rörelsen av rubriktexten när du håller muspekaren.

Uppdatera sedan följande designinställningar:

• Knappinriktning: centrerad
• Använd anpassade stilar för knapp: JA
• Knapptextstorlek: 14px
• Bakgrundsfärg: #4361ee

• Knappkantsbredd: 0 pixlar
• Knappbokstavsavstånd: 0,1 em
• Teckensnittsvikt: Fet
• Knapp teckensnitt: TT
• Vaddering: 0,8em (överst och neder), 0px (vänster och höger)

Lägger till anpassad CSS med kodmodulen

Lägg till en kodmodul under knappen.

Klistra sedan in följande CSS i kodinnehållet. Glöm inte att linda in koden i de nödvändiga skripttaggarna.

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

Koden kommenteras så att du kan förstå var du kan justera CSS för att passa dina behov.

Duplicera kolumnen för mer design

Öppna det modala lagret, ta först bort de två tomma kolumnerna.

Duplicera sedan kolumnen som innehåller bildöverläggsdesignen två gånger. Du bör ha totalt tre kolumner med identisk design.

Skapa bildöverläggsdesign #2

För nästa design placerar vi knappen i mitten av bilden (alltid synlig). Därefter flyttar vi rubriken och brödtexten från toppen och botten av bilden.

Justera brödtextplacering och CSS-klass

Öppna inställningarna för överläggsbrödtextmodulen i kolumn 2 och uppdatera positionen:

• Plats: nedre mitten
• Vertikal offset: 5 %

Uppdatera sedan CSS-klassen med följande:

• CSS-klass: et-overlay-objekt flytta upp

Justera knappplacering och CSS-klass

Öppna sedan knappinställningarna i kolumn 2 och uppdatera följande positionsplats:

• Plats: Centrum

Ta sedan bort CSS-klassen eftersom vi vill att knappen alltid ska vara synlig.

Öppna modulinställningarna för Divider (överläggsfärg) och ändra bakgrunden enligt följande:

• Bakgrund: rgba(67,97,238,0.8)

Öppna sedan knappinställningarna och ändra bakgrundsfärgen:

• Bakgrundsfärg: #f72585

Justera bild och CSS-klass

Öppna sedan bildinställningarna och ladda upp en ny bild (om så önskas).

Lägg sedan till följande CSS-klass till bilden:

• CSS-klass: et-overlay-image et-scale

Observera att förutom klassen "et-overlay-image" finns det en extra klass som heter "et-scale" som kommer att öka storleken på bilden och skapa en inzoomningseffekt vid hovring.

Skapa bildöverläggsdesign #3

Nu är det dags att skapa den tredje bildöverläggsdesignen i kolumn 3.

Justera överläggets brödtextinnehåll och CSS-klass

Börja med att öppna inställningarna för överläggsbrödtextmodulen i kolumn 3. Lägg sedan till H2-rubriken ovanför stycketexten. Nu kommer båda att finnas i en modul.

Ta sedan bort CSS-klassen så att texten förblir synlig ovanför bilden.

Justera knappoffset och CSS-klass

Öppna knappmodulens inställningar och uppdatera den vertikala positionsförskjutningen:

• Vertikal offset: 5 %

Ta bort överläggshuvud

Ta sedan bort modulen Overlay Header Text.

Justera överläggsfärg och CSS-klass

Öppna modulinställningarna för Divider (överläggsfärg) och uppdatera bakgrunden till följande:

• Vänster bakgrundsgradientfärg: rgba(67,97,238,0.8)
• Höger bakgrundsgradientfärg: rgba(247,37,133,0.8)
• Startposition: 25%
• Slutposition: 75 %

Och eftersom vi vill hålla övertoningsöverlägget synligt hela tiden, ta bort CSS-klassen.

Justera bildens CSS-klass

Slutligen kommer vi att lägga till en extra CSS-klass ("et-rotate") till huvudbilden som kommer att ändra storlek och rotera bilden vid hovring.

• CSS-klass: et-overlay-image et-rotate

Sista handen

Innan vi kontrollerar våra slutliga resultat måste vi göra några justeringar.

Ta bort standard bottenmarginal för alla moduler

Eftersom vi redan har uppdaterat marginalen med en bottenmarginal på 0px kan vi utöka denna marginal till alla moduler.

Högerklicka på marginalinställningen och välj "Utöka marginalerna".

Välj sedan att utöka marginalen till Alla moduler på sidan.

Ta bort dubbletter av kodmoduler

Se till att ta bort de extra kodmodulerna som överfördes från den första kolumndupliceringen. Du ska bara ha en. Du kan göra detta enkelt från de modala lagren.

Slutresultat

Nu när våra tre mönster är färdiga, låt oss ta en titt på de slutliga resultaten av våra bildöverläggsdesigner.

Ladda ner DIVI nu!!!

Och här är designen på mobilen. Överlagringseffekter för hovring gäller endast på skrivbordet. Därför kommer överlägg fortfarande att vara synliga på mobilen.

Ladda ner DIVI nu!!!

Slutsats

Att skapa anpassade bildöverlägg är faktiskt väldigt roligt. Det finns otaliga mönster du kan testa visuellt med Divi Builder. 

Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.