Gå till innehållet

Hur man skapar en animerad hjältesektion 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]

De flesta webbplatser har en ”hjältesektion”, som inte längre behöver bevisas. Dess roll är inte bara att sticka ut utan också att delas in i flera element som förstärker uppmaningen till handling som finns. De lättförståeliga strukturerade hjälteavdelningarna med delat innehåll är mycket populära och används ofta av olika typer av webbplatser.

Och samtidigt som du skapar hjälteavdelningar med delat innehåll för skrivbordet låter det enkelt, du kan inte alltid luras av utseenden. Det är här denna handledning kommer att vara till nytta. Vi ska återskapa en mycket interaktiv mobil delad hjälte-sektion som inte bara ser bra ut på mobilen utan oavsett skärmstorlek. Vi kombinerar också fantastiska animationer för att matcha designstilen för 2019 perfekt. Vi hoppas att den här guiden inspirerar dig att skapa dina egna delade innehållsmobilhjältsektioner.

Låt oss gå!

undersökningen

Innan vi dyker in i handledningen, låt oss ta en titt på vad du kan få efter att ha slutfört den här handledningen.

Exempel på design design divi

Gränssnittsdesign

Lägg till en ny sektion

avstånd

Börja med att skapa en ny sida eller öppna en befintlig. Lägg till ett nytt vanligt avsnitt i det, gå till avståndsinställningarna och ta bort alla vanliga topp- och bottenvaddmarginaler.

  • Bästa vaddering: 0px
  • Padding Bottom: 0px

Parametersektion diviLägg till en ny rad

Strukturen av kolonnen

Vi fortsätter att lägga till en ny rad och använda följande kolumnstruktur:

Lägg till ett avsnitt med dubbla kolumnerBakgrundsfärg

Utan att lägga till fler moduler öppnar du radinställningarna och lägger till en helt svart bakgrundsfärg.

  • Bakgrundsfärg: #000000

Divi line-parametrar

Kolumn 1 bakgrundsfärg

Lägg också till en svart bakgrundsfärg i den första kolumnen.

  • Kolumn 1 Bakgrundsfärg: #000000

Inställningsradkolumn 1Kolumn 2 bakgrundsfärg

Samma sak för den andra kolumnen.

  • Kolumn 2 Bakgrundsfärg: #000000

Kolumn 2 bakgrund

dimensionering

Gå sedan till storleksinställningarna och låt raden och dess kolumner fylla hela skärmens bredd.

  • Gör den här linjen full bredd: Ja
  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja

Konfiguration av Divi Line-dimensioneringsdesignavstånd

Vi tar också bort alla standard- och undermarginaler på linjen.

  • Padding på toppen: 0px
  • Padding Bottom: 0px
  • Klädsel höger: 1vw

Konfigurera stoppning av dellinjerdisplay

Slutligen ser vi till att de två kolumnerna visas sida vid sida på mindre skärmar. För att göra detta måste vi lägga till en enda rad CSS-kod på fliken Avancerat på raden.

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]

display: flex;

Huvudelement css-inställningar

Lägg till en bildmodul i kolumn 1

Lämna bildområdet tomt

Vi har nu alla moduler vi behöver! Du måste börja med bildmodulen i den första kolumnen. Istället för att ladda upp en bild till bildområdet laddar vi upp bilden till bakgrundsinställningarna i nästa steg, så vi måste ta bort bilden som läggs till som standard. Således kan vi leka med hur bilden är placerad och hur mycket utrymme den upptar i vår rad.

Lägg till avdelningsbildmodulLägg till en bakgrundsfärg

Gå till bakgrundsinställningarna för bildmodulen och lägg till en bakgrundsfärg. I nästa steg kommer vi att kombinera denna bakgrundsfärg och en bakgrundsbild med en blandningseffekt för att göra bilden mörkare.

  • Bakgrundsfärg: #686868

Divi-modulens bakgrundsinställningarLägg till en bakgrundsbild

Lägg till en valfri bakgrundsbild och ändra bakgrundsinställningarna i enlighet därmed:

  • Bakgrundsstorlek: Omslag
  • Bakgrundsbildens position: mitt
  • Upprepa bakgrundsbild: Ingen upprepning
  • Bakgrundsbildmix: multiplicera

Konfiguration av bakgrundsbild för Divi-modul

dimensionering

Vi använde två kolumner av samma storlek för raden vi arbetar med, men resultatet är inte detsamma. Vi kommer att ändra storleken på varje tillagd modul manuellt så att det ser ut som om vi använder en annan kolumnstruktur. Anledningen till att vi gör detta (istället för att bara välja en annan kolumnstruktur) är att göra allt lyhört.

 på mindre skärmar. Öppna måttparametrarna för bildmodulen och ändra bredden.

  • Bredd: 88%
  • Justering av modulen: vänster

Bildmodulens avståndsbreddskonfigurationavstånd

Nu måste vi bestämma storleken på vår bild i avståndsinställningarna. Vi använder också en bildskärmsenhet för dessa värden för att säkerställa att vår design förblir full respons, oavsett skärmstorlek.

  • Övre stoppning: 26.3vw (skrivbord), 48vw (surfplatta), 72vw (telefon)
  • Klädsel längst ner: 26.3vw (skrivbord), 48vw (surfplatta), 72vw (telefon)

Bildmodulmarginalkonfiguration

animering

Slutligen lägger vi till en bildanimering i bildmodulen. När du väl har använt animeringen kommer du att märka att bilden inte kommer att visas förrän det går in i den första kolumnen. Den andra kolumnens bakgrundsfärg förblir högst upp på bildmodulen när den dras åt vänster.

  • Animeringsstil: Slide
  • Repeat Animation: En gång
  • Animeringsriktning: vänster
  • Animation Varaktighet: 1450ms
  • Intensity Animation: 60%
  • Animering Starta opacitet: 100%

Divi bildmodul animeringsinställning

Lägg till en knappmodul i 1-kolumnen

Lägg till en kopia

Nästa modul vi behöver i kolumn 1 är en knappmodul. Ange en kopia efter eget val.

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]

Inställning av knapp för Divi-modulKnappinställningar

Gå sedan till fliken Design och ändra knappinställningarna.

  • Använd anpassade stilar för knappen: Ja
  • Knapptextstorlek: 1.5vw (skrivbord), 2.5vw (surfplatta), 4vw (telefon)
  • Knapptextfärg: #ffffff
  • Knapp bakgrundsfärg: #e02b20
  • Bredden på knappgränsen: 0px
  • Radi av gränsen för knappen: 1px
  • Knapp typsnitt: Poppins
  • Typsnittsvikt: fet

Divi-knappen stilkonstruktion

avstånd

Ändra också avståndsvärdena.

  • Övre marginal: -3.3vw (skrivbord), -6vw (surfplatta), -9.1vw (telefon)
  • Vänster Padding: 8vw
  • Klädsel höger: 8vw

Avståndsinställningar för Divi-knappmodul

Skugga låda

Och lägg till en subtil skugga för att skapa djup på sidan.

  • Box Shadow Blur Force: 20px
  • Skuggfärg: rgba (0,0,0,0.3 XNUMX XNUMX)

Inställning av skärm för Divi-knappmodul

Lägg till textmodul # 1 i kolumn 2

Lägg till H1-innehåll

På andra kolumnen! Den första modulen vi behöver är en textmodul. Lägg till valfritt H1-innehåll.

Divi-textmodulkonfiguration

H1 Textinställningar

Gå sedan till fliken Design och ändra H1-textinställningarna.

  • Teckensnitt: Poppins
  • Titeltextfärg: #ffffff
  • Texttitelstorlek: 4vw (skrivbord), 5vw (surfplatta), 6vw (telefon)

Parametermoduljusteringsdelavstånd

Ändra också avståndsvärdena.

  • Övre marginal: 12vw
  • Vänster marginal: -20vw
  • Höger marginal: 17vw (skrivbord), 15vw (surfplatta), 1vw (telefon)

Konfiguration av divi-textmodulmarginaler

animering

Och lägg till en subtil animering.

  • Animeringsstil: Slide
  • Repeat Animation: En gång
  • Animationsriktning: Ned
  • Animation Varaktighet: 1450ms
  • Intensity Animation: 10%
  • Animering Starta opacitet: 100%

Conifgurer animationsmodul text divi

Lägg till en delningsmodul i 2-kolumnen

synlighet

Nästa modul vi behöver i andra kolumnen är en delningsmodul. Se till att alternativet "Visa separator" är aktiverat.

  • Visa Divider: Ja

Visa diviseparatorFärg

Gå sedan till fliken Design och ändra separatorns färg.

  • Färg: #e02b20

Fliken för stil för Divi-separatormodulanimering

Lägg till en animering till divisionsmodulen nästa.

  • Animeringsstil: Slide
  • Repeat Animation: En gång
  • Animationsriktning: Höger
  • Animation Varaktighet: 1450ms
  • Intensity Animation: 83%
  • Animering Starta opacitet: 100%

Divi modul separator animation

Lägg till textmodul # 2 i kolumn 2

Lägg till innehåll

Låt oss gå vidare till nästa och sista modul vi behöver i den andra kolumnen! Lägg till en beskrivning av ditt val.

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]

Lägg till en divi-textmodul

Textinställningar

Gå sedan till textinställningarna på fliken Design och gör några ändringar därefter:

  • Text teckensnitt: Poppins
  • Textens tyngdtext: Lätt
  • Textfärg: #919191
  • Textstorlek: 0.9vw (skrivbord), 1.8vw (surfplatta), 2.2vw (telefon)
  • Spacing av textbokstäver: 0.1vw
  • Höjd på textrad: 2.2em

Textjusteringsmodul text diviavstånd

Ändra också avståndsvärdena.

  • Övre marginal: 9vw (skrivbord), 19vw (surfplatta), 23vw (telefon)
  • Nedre marginal: 12vw (skrivbord), 19vw (surfplatta), 23vw (telefon)
  • Vänster marginal: -3vw
  • Höger marginal: 20vw (skrivbord), 6vw (surfplatta), 3vw (telefon)

Avståndsinställningar för Divi-textmodulanimering

Och till slut lägger du till en blekningsanimation till modulen så är du klar!

  • Animeringsstil: Fade
  • Repeat Animation: En gång
  • Animation Varaktighet: 1400ms
  • Animeringsfördröjning: 1000 ms
  • Animering Starta opacitet: 0%

Divi textmodul inställningar aniamtionAvslutande tankar

I den här handledningen har vi visat dig hur du skapar fantastiska delade innehållshjältsektioner med Divi. Delade hjälteavsnitt är mycket populära och används ofta på webben, men det är också viktigt att se till att de är mycket lyhörda. Om du har några frågor eller förslag, var noga med att lämna en kommentar och gärna dela den på sociala medier!

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
4 aktier
del4
tweet
Enregistrer