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!
