Gå till innehållet

Hur du lägger till en textblockanimering till dina titlar 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]

Din titel är en av de viktigaste delarna av din hemsida. Detta är vanligtvis vad du ser först och därför bestämmer det första intrycket. Som alla andra första intryck vill du att det ska vara bra. Nu, om du letar efter ett kreativt sätt att presentera din titel, kommer du att njuta av denna handledning eftersom vi visar hur du lägger till CSS-textblockanimationer i din titel och du kan också ladda ner layouten JSON-fil gratis!

undersökningen

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

Animerad divi-handledning för förhandsgranskning av titeln

Låt oss börja designen

Lägg till avsnitt 1

Lutningbakgrund

Börja med att lägga till ett vanligt avsnitt på en ny sida eller till den sida du arbetar med. Öppna sektionsinställningarna och använd följande lutningsbakgrund:

  • Färg 1: # f0f2b
  • Färg 2: # c10b1a
  • Lutningstyp: linjär
  • Lutningsriktning: 63deg
Konfiguration av divisionssektioner

avstånd

Byt till fliken sektionsdesign och använd följande anpassade topp- och bottenfyllnadsvärden på olika skärmstorlekar:

  • Övre stoppning: 7vw (skrivbord), 20vw (surfplatta), 25vw (telefon)
  • Botten stoppning: 7vw (skrivbord), 20vw (surfplatta), 25vw (telefon)
Konfiguration av avdelningsavstånd

gräns

Lägg också till en ram till sektionen.

  • Kantbredd: 2vw (topp, vänster, höger)
  • Nedre kantbredd: 0vw
  • Kantfärg: #ffffff
Divi sektion kantkonfiguration

Lägg till en ny rad

Kolumnstruktur

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

Konfiguration av Divi-kolumnlayout

dimensionering

Öppna linjeparametrarna och ändra dimensioneringsparametrarna i enlighet därmed:

  • Bredd: 100%
  • Max bredd: 100%
Divi kolumnbreddskonfiguration

Lägg till en textmodul i kolumnen

Lägg till H1-innehåll

Lägg sedan till en textmodul med en valfri H1-titel.

Lägg till en textmodul i kolumn 1 divi

Lägg till Div-taggar till varje ord i H1-titeln

Byt till textfliken i din titelkopia och lägg till en annan div till varje ord i din titel. CSS-ID: t måste vara olika för varje ord.

Redo

Bygga
Skön
Webbplatser?

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]

Lägg till divi-textmodulstaggar

H1 textinställningar

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

  • Titel typsnitt: Work Sans
  • Titel typsnitt vikt: medium
  • Rubriktextfärg: #ffffff
  • Rubriktextstorlek: 4vw (skrivbord), 5vw (surfplatta), 6vw (telefon)
  • Huvudlinjens höjd: 1,4 em
Parameter titel 1 divi

avstånd

Ändra sedan marginalvärdena på olika skärmstorlekar.

  • Vänster marginal: 20vw (skrivbord och surfplatta), 15vw (telefon)
  • Höger marginal: 35vw (skrivbord), 20vw (surfplatta), 15vw (telefon)
Divi textmodulavståndskonfiguration

Lägg till en kodmodul i kolumnen

Sätt in CSS-kod

För att textblocksanimationen ska kunna tillämpas på vår titel behöver vi lite CSS-kod. Vi lägger till den här CSS-koden i en ny kodmodul.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

Klistra in css divi-kod

avstånd

Byt till fliken moduldesign och ta bort alla standardunderlag.

  • Nedre marginal: 0px
Anpassa divi-modulmages

Lägg till en knappmodul i kolumnen

Lägg till en kopia

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

Gör en kopia av boton divi-modulen

Knappinställningar

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

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]

  • 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
Parameter för Divi-knappmodul
  • Knappsnitt: Work Sans
Ändra teckensnitt för divi-knapp

avstånd

Gå sedan till avståndsinställningarna och använd anpassade marginal- och stoppningsvärden på olika skärmstorlekar.

  • Övre marginal: 3vw (kontor),
  • Vänster marginal: 20vw (skrivbord och surfplatta), 15vw (telefon)
  • Övre stoppning: 1.2vw (skrivbord), 2vw (surfplatta), 4vw (telefon)
  • Botten stoppning: 1.2vw (skrivbord), 2vw (surfplatta), 4vw (telefon)
  • Vänster stoppning: 1.8vw (skrivbord), 3vw (surfplatta), 6vw (telefon)
  • Höger stoppning: 1.8vw (skrivbord), 3vw (surfplatta), 6vw (telefon)
Konfiguration av avstånd för Divi-knapp

animering

Anpassa också animationsinställningarna.

  • Animeringsstil: Vänd
  • Animeringsriktning: ner
  • Animeringsfördröjning: 2000 ms
  • Animationsintensitet: 100%
  • Animering start opacitet: 100%
  • Animationshastighetskurva: enkel in-ut
  • Animationsupprepning: en gång
Divi textmodul animering anpassning

Lägg till avsnitt 2

Fortsätt genom att lägga till ett nytt vanligt avsnitt precis under det föregående.

Lägg till en ny divisektion

avstånd

Öppna sektionsinställningarna och ta bort standardöverdelningen.

  • Övre stoppning: 0px
Konfigurera avståndet mellan delar

Lägg till en ny rad

Kolumnstruktur

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

Lägg till en ny sektionskolumn

dimensionering

Utan att lägga till fler moduler, öppna linjeparametrarna och låt linjen uppta hela sektionens behållares bredd.

  • Bredd: 100%
  • Max bredd: 100%
Storlekssektion divi

Lägg till en textmodul i kolumnen

Lägg till innehåll

Lägg sedan till en textmodul med beskrivningsinnehåll efter eget val.

Divi-modulens textinställningar

Bakgrundsfärg

Lägg till en vit bakgrundsfärg.

  • Bakgrundsfärg: #ffffff
Divi typsnitt färg conifguration

Textinställningar

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

  • Textstilsort: Work Sans
  • Textfärg: # 9b9b9b
  • Textstorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
  • Höjd på textrad: 2.6em
Konfiguration av teckensnittsdivision

avstånd

Lägg också till anpassade avståndsvärden på olika skärmstorlekar.

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]

  • Övre marginal: -5vw (skrivbord), -20vw (surfplatta), -27vw (telefon)
  • Vänster marginal: 20vw (skrivbord), 13vw (surfplatta), 8vw (telefon)
  • Höger marginal: 20vw (skrivbord), 13vw (surfplatta), 8vw (telefon)
  • Övre stoppning: 5vw (skrivbord), 7vw (surfplatta och telefon)
  • Botten stoppning: 5vw (skrivbord), 7vw (surfplatta och telefon)
  • Vänster stoppning: 3vw (skrivbord), 5vw (surfplatta), 6vw (telefon)
  • Höger stoppning: 3vw (skrivbord), 5vw (surfplatta), 6vw (telefon)
Divi-modul sektion avstånd konfiguration

Skugga låda

Och slutför modulinställningarna genom att använda en subtil rutskugga. Det är allt!

  • Box Shadow suddighetsstyrka: 50px
  • Skuggfärg: rgba (0,0,0,0,1)
Textmodul för skuggkonfiguration

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.

Slutresultat divi tutorial

Avslutande tankar

I den här artikeln visade vi dig hur du lägger till CSS-textblockanimationer i din titel. Det är viktigt att se till att din titel är synlig och läst från början. Att lägga till animering i din titel kan definitivt hjälpa! 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.

Översatt från: ElegantThemes

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
2 aktier
del2
tweet
Enregistrer