Gå till innehållet

Hur man visar animerade banners 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]

Att ha en titel som sticker ut är att se till att du har en chans att fånga dina besökares uppmärksamhet. Rubriker går vanligtvis inte obemärkt på grund av deras storlek och centrala läge, men om du vill ta det ett steg längre och få rubriken bokstavligen att visas har du kommit till rätt ställe.

I den här handledningen kommer vi att kombinera animeringsinställningarna för Divi för att skapa en titel som sticker ut och fångar dina besökares uppmärksamhet.

Slutresultat

Exempel på slutresultat divi

Del 1: Design

Sektionskonfiguration

Bakgrundsfärg

Låt oss börja designa! Skapa en ny sida och lägg till en vanlig sektion i den. Öppna sektionsinställningarna och ändra bakgrundsfärgen.

  • Bakgrundsfärg: #EEE

Divi sektion justering

avstånd

Gå sedan till avsnittets avståndsinställningar och lägg till anpassade fyllningsmarginaler.

  • Botten stoppning: 10vw

Intern vaddering

Lägg till rad 1

Kolumnstruktur

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

Lägg till en rad i en divikolumn

Bakgrundsfärg

Utan att lägga till några moduler ännu, öppna radinställningarna och ändra radens bakgrundsfärg.

  •  Bakgrundsfärg: #DDD

Divi text bakgrund

dimensionering

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

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

Divi text bakgrund 1

avstånd

Ta också bort den övre och nedre interna stoppningen för linjen.

  • Padding på toppen: 0px
  • Padding Bottom: 0px

Konfiguration av intern vaddering

Lägg till en textmodul

Det är dags att börja lägga till moduler! Den första modulen vi behöver är en textmodul. Ange den första delen av din titel i innehållsområdet med hjälp av styckatekststilen.

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]

Ditt innehåll kommer hit

Bakgrundsfärg

Gå sedan till modulens bakgrundsinställningar och lägg till en bakgrundsfärg.

  • Bakgrundsfärg: #ccc

Textmodul för färgdivi

Textinställningar

Ändra även textinställningarna på fliken Design.

  • Teckentekst: Didactic Gothic
  • Textens textvikt: fetstil
  • Textfärg: #000000
  • Textstorlek: 10vw
  • Höjd på textrad: 0.9em
  • Textorientering: Center

Ändra textstilmodulen

avstånd

Skapa sedan den form du vill ha med anpassad stoppning längst upp och längst ner.

  • Padding på toppen: 10vw
  • Botten stoppning: 3vw

Ändra titelavstånd

animering

Sist men inte minst kommer vi att lägga till lite animering. Det är viktigt att se till att animationens varaktighet och startomskinligheten är noll. Detta gör att textmodulen kan visas med en blixteffekt.

  • Animeringsstil: Fade
  • Repeat Animation: En gång
  • Animation Varaktighet: 0ms
  • Animeringsfördröjning: 1000 ms

Konfigurera texten för animeringsdelmodulen

Klon x4-textmodulen

När du är klar med att redigera den första textmodulen kan du klona den så många gånger du vill, beroende på titelns längd. För varje del av titeln som du vill visa med en blixteffekt behöver du en separat textmodul. För detta exempel kommer vi att behöva ytterligare 4-moduler.

Uppdatera modulen

Bakgrundsfärg

Med bakgrundsfärgen.

  • Kopia 1 = Bakgrundsfärg: # 5900ff, textfärg: #FFF
  • Kopiera 2 = lämna som det är, ändra animationens varaktighet (animationsfördröjning): 1500 ms
  • Kopiera 3 = Bakgrundsfärg: # ffb200, textfärg: #FFF, ändra animationens varaktighet: 2000 ms
  • Kopiera 4 = Bakgrundsfärg: # 000, textfärg #FFF, ändra animationens varaktighet: 2500ms

Lägg till en negativ marginal till varje textmodul utom den första

När du är klar med att anpassa alla textmoduler kan du skapa en överlappning. För att skapa denna överlappning ska vi lägga till en negativ toppmarginal till var och en av de dubbla textmodulerna. Med andra ord ser vi till att alla moduler som följer den första modulen visas ovanför den första textmodulen.

  • Övre marginal: -31.98vw

Anpassa divi-textmodulmarginalen

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]

Transformationslinje

Transform Översätt

Fortsätt genom att transformera hela linjen, börja med transformationsparametrarna.

  • Bottom: -35vw

Divi översätter transformation

Transformera rotationen

Ändra också rotationsvärdena för transformationen.

  • Vänster: 320deg

Transformation rotation divi text moduler

Lägg till 2-raden

Kolumnstruktur

På andra plats! Nu när titeleffekten är på plats kan vi börja lägga till de återstående modulerna. Lägg till en ny rad med följande kolumnstruktur:

Konfigurera divi-layouten

dimensionering

Utan att lägga till några moduler ännu, öppna radinställningarna och låt raden uppta hela skärmens bredd i storleksinställningarna:

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

Ändra divi-modulen

avstånd

Tar bort standardfyllningen från nästa rad.

  • Övre stoppning: 0px

Lägg till en textbeskrivningsmodul i 2-kolumnen

Lägg till H1-innehåll

Det är dags att lägga till moduler. Den första modulen blir en textmodul. Du kan lägga till vilket innehåll du vill.

Lägg till en särskild divisektionH1 textinställningar

Gå sedan till fliken design och ändra H1-inställningarna.

  • Titelens teckensnitt: Didact Gothic
  • Titel Vikt: Fet
  • Teckenstorlek: 1.8vw (dator), 3.8vw (surfplatta), 4vw (telefon)

Ändra inställningen för stretching divi-textmodulavstånd

Lägg till anpassade marginaler i avståndssektionen.

  • Övre marginal: -4vw
  • Nedre marginal: 2vw
  • Vänster marginal: 30vw
  • Höger marginal: 30vw (dator), 15vw (surfplattor och telefon)

Textinställningar marginalavstånd diviLägg till en separatormodul i 2-kolumnen

synlighet

Nästa modul är separatormodulen. Se till att alternativet "Visa avdelare" är aktiverat.

  • Visa separator: Ja

Divider divi-konfigurationFärg

Gå sedan till fliken "Design" och ändra avgränsarens färg.

  • Färg: #000000

Separatorns färgDimentionnement

Ändra också avståndsalternativen.

  • Avståndsvikt: 8 pixlar
  • Bredd: 7%

Separatormodulens storlekinställningaravstånd

Alltid med limning alternativ.

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åg marginal: 1vw
  • Vänster marginal: 30vw

Konfigurera divi-avstånd

Lägg till en textmodul i 2-kolumnen

Lägg till innehåll

Nästa modul kommer att vara en annan textmodul. Du måste tillhandahålla innehållet du väljer.

Divi textmodulTextinställning

Då måste du ändra textinställningarna på fliken "Design".

  • Textstorlek: 0.8vw (dator), 1.3vw (surfplatta), 1.6vw (telefon)
  • Linjens höjd: 2.2em

Textstorlek divi textmodulavstånd

Lägg också till några marginaler i avståndssektionen.

  • Låg marginal: 3vw
  • Vänster marginal: 30vw
  • Höger marginal: 30vw (dator), 15vw (surfplattor och telefoner)

Divi-avståndLägg till en knappmodul i 2-kolumnen

Inställningar för knappmodul

För den sista modulen, som kommer att vara en knappmodul. Du lägger till innehållet du väljer och ändrar inställningarna enligt följande:

  • Använd anpassad stil: Ja
  • Teckenstorlek: 1vw (dator), 1.5vw (surfplatta), 2vw (telefon)
  • Bredden på knappgränsen: 0px
  • Knapp typsnitt: Poppins
  • Textvikt: fet
  • Teckensnittstyp: Storlek

Inställningar för Divi-modulknappenavstånd

Gå till avståndsinställningarna och lägg till en anpassad yttre marginal, samt en inre marginal och det är det.

  • Vänster yttre marginal: 30vw
  • Inre hög marginal: 1vw
  • Inre låg marginal: 1vw
  • Vänster innermarginal: 3vw
  • höger innermarginal: 3vw

Knappmodulkonfigurationatt avsluta

I denna handledning såg vi hur man utformar en titel med animerad text med endast Divis interna alternativ. Detta är en fantastisk teknik som gör att du kan fånga dina besökares uppmärksamhet på ett mycket originellt sätt.

Denna artikel innehåller 1 kommentar

  1. Hallå. Bra din handledning, tack. Jag gjorde det, men jag har ett litet problem. Animationen sker bara en gång och sedan upprepas den inte.

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
8 aktier
del8
tweet
Enregistrer