Hur man avslöjar bilder med hjälp av horisontella övergångsnät och doldt överflöd med Divi

Sedan de nya Divi-dimensioneringsalternativen släpptes finns det några självstudier som visar hur du skapar svävar avslöjar. I dessa självstudier placerades det dolda innehållet vertikalt. I vissa fall kanske du vill skapa en horisontell avslöjning. I den här handledningen visar vi dig hur du avslöjar bilder med Divis svävarnät och alternativ för överflöd. Att göra det här jobbet kräver en något annan inställning. Vi kommer att använda en rad med en kolumn och placera alla modulerna under varandra. I svävaren förvandlar vi kolumnen till ett horisontellt rutnät. Du kommer också att kunna 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 ett nytt vanligt avsnitt på sidan du arbetar med.

Lägg till en ny rad

Kolumnstruktur

Fortsätt lägga till en ny rad med följande kolumnstruktur:

Standardgradientbakgrund

Utan att lägga till fler moduler, öppna radparametrarna och lägg till följande gradientbakgrund:

• 1 färg: #b1ffc4
• 2 färg: #ffffff
• Lutningstyp: Radial
• Radiell riktning: centrum
• Startposition: 28%
• Slutposition: 28%

Flyga över lutningsbakgrunden

Ändra gradientbakgrunden genom att hålla muspekaren.

• 1 färg: #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ärden.

• Toppad padding: 0px
• Botten stoppning: 0px
• Övre marginal: 50px
• Nedre marginal: 50px

Standardgräns

Lägg till en kantradie med 50 pixlar i det övre högra och nedre högra hörnet.

Hover Border

Ta med hörnen till "0px" svävande.

Standardskugga

Lägg sedan till en subtil rutskugga med följande parametrar:

• Box Shadow Blur Force: 50px
• Skuggfärg: rgba (0,0,0,0.09)

Hover Box Shadow

Ta bort skuggan från lådan när du flyger över och ersätt skuggfärgen med 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. Ange det H2-innehåll du väljer.

H2 textinställningar

Byt till fliken Design och ändra H2-textinställningarna i enlighet med detta:

• Titel 2 Typsnitt: Acme
• Titel 2 Teckensnittstil: Understrykning
• Titel 2 Understrukningsfärg: #00ff3f
• Titel 2 Textfärg: #000000
• Titel 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 landskapsbild efter eget val.

Ljuslåda

Aktivera sedan alternativet lightbox i länkinställningarna.

• Öppna i betraktaren: ja

dimensionering

Och tvinga bilden i full storlek i storleksinställningarna. Detta säkerställer att bilden förblir känslig vid alla skärmstorlekar.

• Tvinga fullbredd: Ja

Clone Image Module 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 storlek som den första bilden.

Lägg till rollover-effekten i raden

dimensionering

Nu när vi har slutfört de grundläggande rad- och pod-inställningarna är det dags att skapa svävareffekten! Vi börjar med att ändra höjd och bredd på raden och dölja överflödet. Öppna radstorleksinställningarna 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

Minska bredden till "100%" medan du svävar. Detta gör att bilderna kan visas efter att raden har svävats.

• Bredd: 100%

synlighet

Gå till nästa avancerade flik och dölj överflödet. Detta säkerställer att bilder döljs innan besökare svävar över (skrivbord) eller klickar på (surfplatta / mobil) på textmodulen.

• Horisontellt överflöde: dold
• Vertikalt överflöde: dold

övergångar

Vi ändrar också övergångens varaktighet i övergångsparametrarna.

• Övergångsperiod: 0ms

Huvudkolumnens övergångselement

För att skapa ett svävarnät öppnar vi kolumninställningarna, går till fliken Avancerade alternativ och placerar följande rader med CSS-kod i huvudflygelementet:

display: rutnät; rutmall-kolumner: 20% 25% 25% 25%; grid-gap: 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 speciella designexempel klonar vi raden två gånger.

Ändra gradientbakgrunden för rad 1

Ändra färgen på den första lutningen i gradientbakgrunden på den andra raden.

• 1 färg: # ffdc96

Ändra gradientbakgrunden för rad 2

Gör samma sak för den tredje raden.

• 1 färg: # b7c7ff

Ändra kopian av textmodulen och understrukningsfärgen på de två duplikaten

Fortsätt genom att ändra understrykningsfärgen på kopiorna i textmodulen med kopian så är du klar!

• Understrukad färg # 1: # ffaa00
• Understrukad färg # 2: # 0037ff

Avslutande tankar

I den här guiden har vi visat dig hur du visar bilder i horisontella övergångsnät med Divis överflödesalternativ. Bilderna avslöjades när de flög över skrivbordet och klickade på en surfplatta / telefon. Även om vi har avslöjat bilder kan du avslöja innehållet du väljer genom att ändra inställningarna i byggaren. Vi hoppas att denna självstudie kommer att uppmuntra dig att skapa dina egna alternativa flyover rutnätdesign! Om du har frågor eller förslag, vänligen lämna en kommentar i kommentaravsnittet nedan!