Eftersom de nya storleksalternativen för Divi har släppts finns det några handledningar som visar hur du skapar svävavslöjar. I dessa handledningar, innehåll maskerad placerades vertikalt. Men i vissa fall kanske du vill skapa en horisontell avslöja. I den här handledningen visar vi dig hur du avslöjar bilder med hjälp av svävrutorna och översvämningsalternativen. Divi. Att göra det här jobbet kräver ett lite annorlunda tillvägagångssätt. Vi kommer att använda en rad med en kolumn och placera alla moduler under varandra. När du håller muspekaren förvandlar vi kolumnen till ett horisontellt rutnät. Du kan också ladda ner JSON-filen gratis!
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på hur det ser ut på olika skärmstorlekar.
Låt oss börja återskapa!
Lägg till en ny sektion
Börja med att lägga till en ny vanlig sektion på sidan du arbetar med.
Lägg till en ny rad
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
Standard gradient bakgrund
Utan att lägga till några moduler ännu, öppna radinställningar och lägg till följande gradientbakgrund:
- Färg 1: #b1ffc4
- 2 färg: #ffffff
- Lutningstyp: Radial
- Radiell riktning: Centrum
- Startposition: 28%
- Slutposition: 28%
Gradient bakgrund sväva
Ändra gradientbakgrund när du håller muspekaren.
- Färg 1: #b1ffc4
- 2 färg: #ffffff
- Lutningstyp: Radial
- Radiell riktning: vänster
- Startposition: 5%
- Slutposition: 5%
avstånd
Gå till avståndsinställningarna och ändra sedan utfyllnads- och marginalvärdena.
- Toppad padding: 0px
- Botten stoppning: 0px
- Övre marginal: 50px
- Nedre marginal: 50px
Standardgräns
Lägg till en kantradie på 50px i det övre högra och nedre högra hörnet.
Hover Border
Ta tillbaka hörnen till "0px" medan du svävar.
Standardskugga
Lägg sedan till en subtil boxskugga med följande inställningar:
- Box Shadow Blur Force: 50px
- Skuggfärg: rgba (0,0,0,0.09)
Hover Box Shadow
Ta bort boxskuggan när du svävar genom att ändra skuggans färg till en helt transparent färg.
- Skuggfärg: rgba (0,0,0,0)
Lägg till en textmodul i en kolumn
Lägg till H2-innehåll
Det är dags att börja lägga till moduler, börja med en textmodul. Gå in i innehåll H2 efter eget val.
H2 textinställningar
Byt till fliken Design och ändra H2-textinställningarna i enlighet med detta:
- Title 2 Font: Acme
- Rubrik 2 Teckensnitt: understruken
- Titel 2 Understrykningsfärg: #00ff3f
- Titel 2 Textfärg: #000000
- Rubrik 2 Textstorlek: 3vw
avstånd
Lägg sedan till anpassade fyllningsvärden.
- Bästa vaddering: 6vw
- Botten stoppning: 7vw
- Vänster Padding: 2vw
Lägg till bildmodul i kolumnen
Ladda upp bild
Den andra modulen vi behöver i den här kolumnen är en bildmodul. Ladda upp en valfri landskapsbild.
ljuslåda
Aktivera lightbox-alternativet i länkinställningarna härnäst.
- Öppna i visningsprogrammet: ja
dimensionering
Och tvinga fram full bredd på bilden i storleksinställningarna. Detta kommer att säkerställa att bilden förblir lyhörd för alla skärmstorlekar.
- Full bredd Styrka: Ja
Klona bildmodulen två gånger
När du har slutfört den första bildmodulen kan du kopiera den två gånger.
Ändra bilder
Ändra bilderna i de två dubbletterna. Se till att bilderna du laddar upp har samma dimension som den första bilden.
Lägg till svävningseffekten på raden
dimensionering
Nu när vi har slutfört de grundläggande rad- och modulinställningarna är det dags att skapa hovringseffekten! Vi börjar med att ändra höjden och bredden på linjen och dölja brädden. Öppna inställningarna för linjestorlek och gör följande ändringar:
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Bredd: 20%
- Maximal bredd: 100%
- Höjd: 15.9vw
svävar
Ta tillbaka bredden till "100%" när du håller muspekaren. Detta kommer att tillåta bilder att visas när linjen hålls över.
- Bredd: 100%
synlighet
Byt till nästa avancerade flik och dölj översvämningarna. Detta kommer att säkerställa att bilderna maskeras innan besökare hovra (skrivbord) eller klicka (surfplatta/mobil) på textmodulen.
- Horisontellt överflöde: dold
- Vertikalt överflöde: dold
övergångar
Vi ändrar även övergångens varaktighet i övergångsinställningarna.
- Övergångsperiod: 0ms
Kolumn hover master
För att skapa ett svävrutnät öppnar vi kolumninställningarna, navigerar till fliken Avancerade alternativ och placerar följande rader med CSS-kod inuti huvudhoverelementet:
display: rutnät; rutnät-mall-kolumner: 20% 25% 25% 25%; rutnätsgap: 10px;
Klona linjen två gånger
När du har slutfört den första raden kan du klona den så många gånger du vill. För detta specifika designexempel klona vi raden två gånger.
Ändra gradientbakgrunden för rad #1
Ändra färgen på den första övertoningen av bakgrunden på den andra radens övertoning.
- Färg 1: #ffdc96
Ändra linje #2 Gradient bakgrund
Gör samma sak för tredje raden.
- Färg 1: #b7c7ff
Ändra kopia av textmodul och stryk under färg på två dubbletter
Fortsätt att ändra textmodulens understrykningsfärg med kopian och du är klar!
- Understrykning färg #1: #ffaa00
- Understrykningsfärg #2: #0037ff
Avslutande tankar
I den här handledningen visade vi dig hur du visar bilder i horisontella svävningsrutnät med hjälp av överflödesalternativen. Divi. Bilder avslöjades när de svävade på skrivbordet och klickade på surfplatta/telefon. Även om vi har avslöjat bilder, kan du avslöja innehåll du väljer genom att ändra parametrarna i generatorn. Vi hoppas att den här handledningen inspirerar dig att skapa dina egna alternativa svävrutnätsdesigner! Om du har några frågor eller förslag, var noga med att lämna en kommentar i kommentarsfältet nedan!
