Gå till innehållet

Hur man avslöjar bilder med hjälp av horisontella övergångsnät och doldt överflöd med 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]

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.

Förhandsgranskning av Divi-bildLå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.

Val av en divisektionLägg till en ny rad

Kolumnstruktur

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

Sätt in en divisektionStandardgradientbakgrund

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%

Divi line bakgrundskonfiguration

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%

Divi linje radiell justeringavstå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

Avståndsjustering av delningslinjeparameter

Standardgräns

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

Linje gräns deezer justering

Hover Border

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

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]

överströmningsgaller

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)

Skärminställningar för Divi Line

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)

Flytande skugglinjedivi

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.

Divi text modul artikel titel

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

Rubrik teckensnittskonfigurationsdel

avstånd

Lägg sedan till anpassade fyllningsvärden.

  • Bästa vaddering: 6vw
  • Botten stoppning: 7vw
  • Vänster Padding: 2vw

Divi marginal konfiguration

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.

Ladda en divi-bildLjuslåda

Aktivera sedan alternativet lightbox i länkinställningarna.

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]

  • Öppna i betraktaren: ja

Öppna i en divi-tittaredimensionering

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

Ändring av Divi-bildstorlekClone Image Module två gånger

När du har slutfört den första bildmodulen kan du kopiera den två gånger.

Klona bildmodulen 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.

Redigera divi-bildLä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

Inställningar för Divi Line-modulsvävar

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

  • Bredd: 100%

Ändra bredd medan du svävarsynlighet

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

Konfiguration av Divi-överflödeövergångar

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

  • Övergångsperiod: 0ms

Övergång mellan divi-animationer

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;

Divi kolumnjusteringöverströmningsgaller

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.

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]

Klonradmodul flera 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

Ändring av dupliceringslinjerÄ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!

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
2 aktier
del2
tweet
Enregistrer