Gå till innehållet

Hur man blandar kopia vid rullning med Divis positionsinställningar och rullningseffekter

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]

Hur du kreativt använder Divis inbyggda funktioner kan göra skillnad i din siddesign. Med Divis rullningseffekter kan du till exempel skapa vackra rullningsinteraktioner. Idag lägger vi till ytterligare en handledning till din lista över saker du kan göra med Divis inbyggda rullningseffekter. Specifikt visar vi dig hur du slår samman rullningskopia. Vid första anblicken placeras kopian under den medföljande bilden. Så snart du bläddrar till en viss punkt visas kopian ovanför produktbilden och börjar smälta in i bilden. Detta leder till en iögonfallande effekt som verkar enkelt. Du kommer också att kunna ladda ner layouten JSON -fil gratis!

Låt oss gå.

undersökningen

Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.

office

Mobil

Bläddra blandningskopia

Ladda ner layouten GRATIS

För att få tag på den kostnadsfria layouten måste du först ladda ner dem med knappen nedan. För att komma åt nedladdningen måste du prenumerera på vår Divi Daily -e -postlista med hjälp av formuläret nedan. Som ny prenumerant får du ännu fler Divi -förmåner varje måndag och ett gratis Divi -layoutpaket! Om du redan finns på listan anger du bara din e -postadress nedan och klickar på nedladdning. Du kommer inte att ”omregistreras” eller få ytterligare e-postmeddelanden.

Låt oss börja återskapa!

Lägg till 2x platshållarsektioner

Lägg till en ny sektion

Börja med att lägga till en platshållarsektion på sidan du arbetar med.

Bläddra blandningskopia

dimensionering

Öppna sektionsinställningarna och ändra höjden i storleksinställningarna.

Bläddra blandningskopia

Klonsektion

Klona avsnittet en gång. Detta ger dig två platshållarsektioner på din sida. Dessa platshållarsektioner hjälper dig att se den slutliga effekten efter att ha gått igenom handledningen. På en levande webbplats kommer platshållarsektioner att ersättas med normala avsnitt som du använder på hela sidan.

Bläddra blandningskopia

Lägg till nytt avsnitt mellan platshållarsektioner

När platshållarsektionerna är på plats lägger du till ett nytt avsnitt mellan platshållarsektionerna.

Bläddra blandningskopia

Bakgrundsfärg

Öppna sektionsinställningarna och använd en vit bakgrundsfärg.

  • Bakgrundsfärg: #ffffff

Bläddra blandningskopia

avstånd

Byt till sektionsdesignfliken och ändra de övre och nedre stoppningsvärdena i enlighet med detta:

  • Övre vaddering: 10vh
  • Nedre vaddering: 10vh

Bläddra blandningskopia

Lägg till rad # 1

Kolumnstruktur

Fortsätt genom att lägga till en ny rad i sektionen med följande kolumnstruktur:

Bläddra blandningskopia

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]

dimensionering

Utan att lägga till några moduler ännu, öppna radinställningarna, gå till storleksinställningarna och ändra de maximala bredd- och breddvärdena.

  • Bredd: 100%
  • Maximal bredd: 100%

Bläddra blandningskopia

Lägg till en textmodul i kolumnen

Lägg till en kopia

Den enda modulen vi behöver för den här raden är en textmodul. Lägg till en kopia av ditt val.

Bläddra blandningskopia

Textinställningar

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

  • Textsnitt: Montserrat
  • Text Font Vikt: Ultra fet
  • Text typsnitt: versaler
  • Textfärg: # fff2ea
  • Textstorlek: 11vw
  • Textradshöjd: 1 em
  • Textjustering: Mitt

Bläddra blandningskopia

Lägg till rad # 2

Kolumnstruktur

Lägg till ytterligare en rad i sektionen med följande kolumnstruktur:

Bläddra blandningskopia

dimensionering

Utan att lägga till några moduler än, öppna radinställningarna och ändra storleksinställningarna enligt följande:

  • Använd anpassad rännviddsbredd: Ja
  • Rännviddsbredd: 2
  • Bredd: 90%
  • Linjelinjering: Mitt

Bläddra blandningskopia

Lägg till bildmodul i kolumnen

Ladda upp en bild

Lägg till en bildmodul i radkolumnen. Ladda upp en bild efter eget val.

Bläddra blandningskopia

uppriktning

Byt till fliken moduldesign och ändra bildjusteringen i enlighet därmed:

Bläddra blandningskopia

dimensionering

Gå sedan till storleksinställningar och tvinga modulen full bredd.

Bläddra blandningskopia

Lägg till en knappmodul i kolumnen

Lägg till en kopia

Nästa och sista modul som vi lägger till i kolumnen är en knappmodul. Använd en kopia av ditt val.

Bläddra blandningskopia

Knappjustering

Gå till fliken Design och ändra knappjusteringen.

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]

Bläddra blandningskopia

Knappinställningar

Styla sedan knappen så här:

  • Använd anpassade stilar för knappen: Ja
  • Knapptextstorlek: 16px
  • Knapptextfärg: # 000000
  • Knappens bakgrundsfärg: #ffffff
  • Knappens kantbredd: 0px
  • Knappbokstavsavstånd: 2px
  • Knappteckensnitt: Montserrat
  • Knapptypvikt: fetstil
  • Knappteckensnitt: versaler

Bläddra blandningskopia

avstånd

Använd också anpassade stoppningsvärden i avståndsinställningarna.

  • Övre vaddering: 20px
  • Nedre vaddering: 20px
  • Vänster vaddering: 5%
  • Höger vaddering: 5%

Bläddra blandningskopia

Lägg till absolut positionering till rad 1

När du har slutfört den andra raden, återgå till rad # 1. Öppna radinställningarna, gå till fliken avancerat och gör avsnittet absolut. Genom att göra detta kommer raden och textmodulen inuti att placeras under raden som innehåller bildmodulen.

  • Position: Absolut
  • Plats: Center

Bläddra blandningskopia

Klona rad nr 1 och placera duplikatet under rad nr 2

För att textmodulen ska kunna visas ovanför bilden behöver vi ytterligare en rad med ett högre z-indexvärde. Klona den första raden och placera duplikatet under den andra raden.

Bläddra blandningskopia

Tillämpa effekter på rad 3

Öka Z -index

Öppna duplikatraden och ändra z -indexet på fliken avancerat.

Bläddra blandningskopia

Ändra textfärg

Öppna textmodulen i raden och ändra textfärgen.

Bläddra blandningskopia

Använd blandningsläge på rad

Öppna sedan radinställningarna och ändra blandningsläget i filterinställningarna.

Bläddra blandningskopia

Använd rullningseffekten på textmodulen i rad # 3

Lägg till en fade in och fade out -effekt

Slutför handledningen genom att öppna textpodden igen, gå till rullningseffekterna och slå på fade in och fade out -effekten. Det är allt!

  • Aktivera fade in och fade out: Ja
    • Startopacitet: 0%
    • Medium opacitet: 0% (till 26%)
    • Slutlig opacitet: 100% (vid 28%)
  • Motion Effect Trigger: Middle of Element

Bläddra blandningskopia

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

office

Bläddra blandningskopia

Mobil

Bläddra blandningskopia

Avslutande tankar

I den här artikeln har vi visat dig hur du blir kreativ med Divis inbyggda rullningseffekter. Specifikt visade vi dig hur du blandar rullningskopian. Till en början verkar kopian ligga under bilden. Efter rullning avslöjas kopian ovanför bilden och går samman med bilden. Du kunde också ladda ner JSON -filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

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]

Om du vill lära dig mer om Divi och få fler Divi -giveaways, var noga med att prenumerera på vårt nyhetsbrev via e -post och vår YouTube -kanal så att du alltid är en av de första som känner till och har nytta av detta gratisinnehåll.



Källlänk

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
0 aktier
del
tweet
Enregistrer