Att ha en titel som sticker ut innebär att se till att du har en chans att fånga din uppmärksamhet besökare. Titlar går vanligtvis inte obemärkt förbi på grund av sin storlek och centrala position, men om du vill ta det ett steg längre och få titeln att bokstavligen poppa upp, har du kommit till rätt plats.

I den här handledningen kommer vi att kombinera animationsinställningarna för Divi att skapa en rubrik som sticker ut och fångar din uppmärksamhet besökare.

Slutresultat

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

avstånd

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

• Botten stoppning: 10vw

Lägg till rad 1

Kolumnstruktur

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

Bakgrundsfärg

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

•  Bakgrundsfärg: #DDD

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

avstånd

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

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

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 rutan innehåll med stycketextstilen.

Bakgrundsfärg

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

• Bakgrundsfärg: #ccc

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

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

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

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.

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

Transformationslinje

Transform Översätt

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

• Bottom: -35vw

Transformera rotationen

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

• Vänster: 320deg

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:

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

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 kommer att vara en textmodul. Du kan lägga till innehåll som du önskar.

H1 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)

avstå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)

Lägg till en separatormodul i 2-kolumnen

synlighet

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

• Visa separator: Ja

Färg

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

• Färg: #000000

Dimentionnement

Ändra också avståndsalternativen.

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

avstånd

Alltid med limning alternativ.

• Låg marginal: 1vw
• Vänster marginal: 30vw

Lägg till en textmodul i 2-kolumnen

Lägg till innehåll

Nästa modul blir en annan textmodul. Du måste tillhandahålla innehåll som du väljer.

Textinstä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

avstå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)

Lä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

avstå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

att avsluta

I den här handledningen såg vi hur man designar en titel med animerad text, med endast de interna alternativen för Divi. Detta är en utmärkt teknik som gör att du kan fånga din uppmärksamhet besökare på ett mycket originellt sätt.