Gå till innehållet

Hur man skapar ett vackert kolumnavsnitt på 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]

Divis rullningseffekter ger massor av nya designmöjligheter till de webbplatser du bygger. De subtila interaktioner som du väljer att lägga till kan verkligen hjälpa till att förbättra webbplatsens övergripande utseende. Allt blir ännu bättre så snart du synkroniserar rullningseffekterna. I den här handledningen kommer vi specifikt att hantera skapandet av en vacker del av hjältar som kolliderar med kolumner på rullningen. Utformningen av hjältesektionen slår samman två olika kolumner på rullningen, vilket i sin tur hjälper till att betona kopian. 

Möjligt resultat

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

Divi avsnitt kollision

Återskapa layouten för hjälteavsnittet

Lägg till en ny sektion

Anpassa bakgrundsfärgen

Börja med att lägga till ett nytt avsnitt på sidan du arbetar med. Öppna sektionsinställningarna och ändra bakgrundsfärgen.

  • Bakgrundsfärg: # f4f2f7
Divi-sektionskonfiguration

avstånd

Ta också bort den övre och nedre polstringen från alla sektioner.

  • Övre stoppning: 0px
  • Botten stoppning: 0px
Konfiguration av divi-avstånd

Lägg till en ny rad

Kolumnstruktur

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

Layout av divikolumner

dimensionering

Utan att lägga till moduler ännu, öppnar du linjeparametrarna och ändrar dimensioneringsparametrarna i enlighet därmed:

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja
  • Bredd: 100%
  • Max bredd: 100%
Konfiguration av divi-linjeavstånd

avstånd

Ta sedan bort all standard övre och nedre stoppning.

  • Övre stoppning: 0px
  • Botten stoppning: 0px
Divi linjeavstånd

överflöden

Och dölja överflödet på raden.

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
Divi-synlighetslinjekonfiguration

Inställningar för kolumn 1

avstånd

Öppna sedan inställningarna i kolumn 1 och lägg till anpassade fyllningsvärden.

  • Övre stoppning: 15vw
  • Botten stoppning: 10vw
  • Vänster stoppning: 5vw
  • Höger stoppning: 5vw
Divi rad kolumnavstånd konfiguration

Z-index

Öka också kolumnens z-index.

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]

  • Z-index: 12
Relativ position divi

Inställningar för kolumn 2

Bakgrundsbild

Fortsätt genom att öppna inställningarna i kolumn 2 och ladda upp en bakgrundsbild som du väljer.

  • Bakgrundsstorlek: Omslag
  • Bakgrundsbildens position: Mitt
  • Upprepa bakgrundsbild: ingen upprepning
  • Blanda bakgrundsbilder: Normal
Divi kolumn bakgrund

Lägg till textmodul # 1 i kolumn 1

Lägg till H1-innehåll

Det är dags att lägga till moduler, börjar med en första textmodul i kolumn 1. Lägg till valfritt H1-innehåll.

Frilansassistans divi

H1 textinställningar

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

  • Titel typsnitt: Shadows in light
  • Titel typsnitt vikt: fetstil
  • Rubriktextfärg: # 000000
  • Rubriktextstorlek: 6vw (skrivbord), 11vw (surfplatta), 13vw (telefon)
  • Rubrikbokstavsavstånd: -2px
  • Huvudlinjens höjd: 1.2em
Konfiguration av Divi-teckensnitt

avstånd

Lägg också till en övre marginal.

  • Övre marginal: 10vw
Konfiguration av textavstånd

Lägg till textmodul # 2 i kolumn 1

Lägg till innehåll

Sätt i en annan textmodul med ditt beskrivningsinnehåll.

Lägg till en textkolumn 1 divi

Textinställningar

Ändra modulens textinställningar enligt följande:

  • Textstilsort: Öppna Sans
  • Textfärg: # 1e1e1e
  • Textstorlek: 0.9vw (skrivbord), 1.9vw (surfplatta), 3vw (telefon)
  • Textradhöjd: 2,4 em
Divi text teckensnitt anpassning

avstånd

Och lägg till anpassade marginalvärden på olika skärmstorlekar.

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]

  • Övre marginal: 4vw (skrivbord), 8vw (surfplatta), 12vw (telefon)
  • Nedre marginal: 4vw (skrivbord), 8vw (surfplatta), 12vw (telefon)
Konfiguration av divi-textavstånd

Lägg till en knappmodul i 1-kolumnen

Lägg till en kopia

Nästa och sista modul vi behöver i den här kolumnen är en knappmodul. Lägg till en kopia efter eget val.

Lägg till en divi-knappmodul

Knappinställningar

Ändra parametrarna för modulknapparna enligt följande:

  • Använd anpassade stilar för knappen: Ja
  • Knapptextstorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
  • Knapptextfärg: #ffffff
  • Knappens bakgrundsfärg: # 000000
  • Knappens bredd: 0px
  • Knappens radie: 100px
Anpassad stilknapp divi
  • Knappsnitt: Öppna utan
Parameterinställningar för teckensnittsknappen

avstånd

Och slutför knappinställningar genom att lägga till anpassade utfyllnadsvärden på olika skärmstorlekar.

  • Övre stoppning: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
  • Botten stoppning: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
  • Vänster stoppning: 3vw (skrivbord), 5vw (surfplatta), 7vw (telefon)
  • Höger stoppning: 3vw (skrivbord), 5vw (surfplatta), 7vw (telefon)
Avstånd mellan Divi-knappar

Lägg till en textmodul i 2-kolumnen

Lägg till innehåll

I den andra kolumnen är den enda modulen vi behöver en textmodul. Ange innehållet du väljer.

Textkolumn 2 divi

Textinställningar

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

  • Textstilsort: skuggor i ljuset
  • Textfärg: rgba (0,0,0,0,25)
  • Textstorlek: 9vw (skrivbord), 14vw (surfplatta och telefon)
  • Avstånd mellan textbokstäver: -3px
  • Höjd på textrad: 1em
  • Textinriktning: centrum (kontor), vänster (surfplatta och telefon)
Jane doe text kolumn 2 divi

avstånd

Lägg också till anpassade fyllningsvärden.

  • Övre stoppning: 5vw (skrivbord),
  • Botten stoppning: 60vw (surfplatta och telefon)
  • Vänster stoppning: 5vw (surfplatta och telefon)
Divi textavstånd

Använd bläddraanimationer

§

Upp- och nedstigning

När alla dina mods är på plats är det dags att använda rullningseffekterna! Öppna först sektionsparametrarna och använd följande skalningseffekt:

  • Aktivera Sclaing från topp till botten
  • Startskala: 100% (till 49%)
  • Medium skala:
    • Kontor: 70% (100%)
    • Tablet och telefon: 100% (100%)
  • Slutskala:
    • Kontor: 70%
    • Tablet och telefon: 100%
Bläddra effekt animations divi

Kolumn 1

Horisontell rörelse

Fortsätt genom att öppna inställningarna i kolumn 1 och använd följande horisontella rörelseeffekt:

  • Aktivera horisontell rörelse: Ja
  • Startförskjutning: 0
  • Genomsnittlig offset:
    • Kontor: 0 (65%)
    • Tablet och telefon: 0 (93%)
  • Slutförskjutning:
    • Kontor: 6
    • Tablet och telefon: 0
Divi horisontell inriktning

Upp- och nedstigning

Tillämpa också en skala upp och ner-effekt i kolumnen.

  • Aktivera skalning upp och ner: Ja
  • Startskala:
    • Kontor: 10%
    • Tablet och telefon: 100%
  • Medium skala:
    • Kontor: 90%
    • Tablet och telefon: 100%
  • Slutskala: 100%
del av hjältar som kolliderar med kolumner

Kolumn 2

Horisontell rörelse

Öppna sedan parametrarna i kolumn 2 och använd följande horisontella rörelseparametrar:

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]

  • Aktivera horisontell rörelse: Ja
  • Startförskjutning: 0
  • Genomsnittlig offset:
    • Kontor: 0 (53%)
    • Tablet och telefon: 0 (56%)
  • Slutförskjutning:
    • Kontor: -6 (53%)
    • Tablet och telefon: 0 (100%)
Horisontell animationsdivi

Tona in och ut

Slutför kolumninställningarna genom att lägga till en fade in och fade out-effekt.

  • Aktivera fade in och ut: Ja
  • Initial opacitet: 100% (vid 47%)
  • Genomsnittlig opacitet:
    • Kontor: 0% (47%)
    • Tablet och telefon: 100% (47%)
  • Slut på opacitet:
    • Kontor: 0%
    • Tablet och telefon: 100%
Motion animations divi

Avslutande tankar

I den här artikeln har vi visat dig hur du kreativt kan använda Divis rullningseffekter för att skapa en kolumn-kolliderande hjältesektion. Så snart besökare bläddrar börjar de två olika kolumnerna och deras element smälta samman. Detta i sin tur gör att du kan betona kopian ännu mer.

Andra resurser

Här är en lista med innehåll som gör att du kan göra mer med ditt Divi WordPress-tema.

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
996 aktier
del996
tweet
Enregistrer