Uw titel is een van de belangrijkste onderdelen van uw startpagina. Dit is meestal wat u als eerste ziet, en dus wat de eerste indruk bepaalt. Net als elke andere eerste indruk, wilt u dat deze goed is. Als u nu op zoek bent naar een creatieve manier om uw titel te presenteren, zult u genieten van deze tutorial, omdat we u laten zien hoe u CSS-tekstblokanimaties aan uw titel kunt toevoegen en u kunt ook het JSON-lay-outbestand gratis downloaden!

overzicht

Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.

Geanimeerde titelvoorbeeld divi-tutorial

Laten we beginnen met het ontwerp

Voeg sectie # 1 toe

Achtergrond met kleurovergang

Begin met het toevoegen van een gewone sectie aan een nieuwe pagina of aan de pagina waaraan u werkt. Open de sectie-instellingen en pas de volgende verloopachtergrond toe:

  • Kleur 1: # f0f2b
  • Kleur 2: # c10b1a
  • Gradient type: lineair
  • Verlooprichting: 63 graden
Configuratie van divi-secties

tussenruimte

Schakel over naar het tabblad sectie-ontwerp en pas de volgende aangepaste vulwaarden voor boven en onder toe op verschillende schermformaten:

  • Bovenste vulling: 7vw (desktop), 20vw (tablet), 25vw (telefoon)
  • Vulling onderzijde: 7vw (bureau), 20vw (tablet), 25vw (telefoon)
Divi-sectie-afstandsconfiguratie

grens

Voeg ook een rand toe aan de sectie.

  • Randbreedte: 2vw (boven, links, rechts)
  • Breedte onderrand: 0vw
  • Randkleur: #ffffff
Divi-sectie grensconfiguratie

Voeg een nieuwe regel toe

Kolomstructuur

Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:

Divi kolom layout configuratie

sizing

Open de lijnparameters en pas de dimensioneringsparameters dienovereenkomstig aan:

  • Breedte: 100%
  • Max breedte: 100%
Divi kolombreedte configuratie

Voeg een tekstmodule toe aan de kolom

Voeg H1-inhoud toe

Voeg vervolgens een tekstmodule toe met een H1-titel naar keuze.

Voeg een tekstmodule toe aan kolom 1 divi

Voeg Div-tags toe aan elk woord in de H1-titel

Schakel over naar het teksttabblad van uw titelkopie en voeg een andere div toe aan elk woord in uw titel. De CSS-ID moet voor elk woord anders zijn.

Klaar, gereed
Bij
Bouwen
Mooi
Websites?

Voeg divi-tekstmodule-tags toe

H1 tekstinstellingen

Schakel over naar het tabblad moduleontwerp en wijzig de H1-tekstinstellingen dienovereenkomstig:

  • Titellettertype: Work Sans
  • Gewicht lettertype titel: gemiddeld
  • Kleur koptekst: #ffffff
  • Tekstgrootte koptekst: 4vw (desktop), 5vw (tablet), 6vw (telefoon)
  • Hoofdlijnhoogte: 1,4 em
Parametertitel 1 divi

tussenruimte

Wijzig vervolgens de margewaarden op verschillende schermformaten.

  • Linkermarge: 20vw (bureau en tablet), 15vw (telefoon)
  • Rechter marge: 35vw (desktop), 20vw (tablet), 15vw (telefoon)
Divi tekst module afstand configuratie

Voeg een codemodule toe aan de kolom

Voer CSS-code in

Om de tekstblokanimatie op onze titel toe te passen, hebben we wat CSS-code nodig. We zullen deze CSS-code toevoegen aan een nieuwe codemodule.

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

Plak css divi-code

tussenruimte

Schakel over naar het moduleontwerp-tabblad en verwijder alle standaard bodemvulling.

  • Ondermarge: 0px
Pas divimodule-mages aan

Voeg een knopmodule toe aan de kolom

Voeg een kopie toe

De volgende module die we nodig hebben, is een knopmodule. Voer een kopie naar keuze in.

Maak een kopie van de boton divi-module

Knop instellingen

Schakel over naar het tabblad moduleontwerp en wijzig de knopinstellingen dienovereenkomstig:

  • Gebruik aangepaste stijlen voor de knop: Ja
  • Tekstgrootte knop: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
  • Knoptekstkleur: #ffffff
  • Achtergrondkleur knop: # 000000
  • Knoprandbreedte: 0 px
Parameter Divi-knopmodule
  • Knoplettertype: Work Sans
Wijzig het lettertype van de divi-knop

tussenruimte

Ga vervolgens naar de afstandsinstellingen en pas aangepaste marge- en opvulwaarden toe op verschillende schermformaten.

  • Bovenmarge: 3vw (kantoor),
  • Linkermarge: 20vw (bureau en tablet), 15vw (telefoon)
  • Bovenste vulling: 1.2vw (desktop), 2vw (tablet), 4vw (telefoon)
  • Vulling onderzijde: 1.2vw (bureau), 2vw (tablet), 4vw (telefoon)
  • Linker opvulling: 1.8vw (desktop), 3vw (tablet), 6vw (telefoon)
  • Vulling rechts: 1.8vw (bureau), 3vw (tablet), 6vw (telefoon)
Divi-configuratie van de afstand tussen de knoppen

Animatie

Pas ook de animatie-instellingen aan.

  • Animatiestijl: omdraaien
  • Animatierichting: naar beneden
  • Animatievertraging: 2000 ms
  • Animatie-intensiteit: 100%
  • Startdekking animatie: 100%
  • Animatiesnelheidscurve: gemak in uit
  • Animatie herhalen: een keer
Animatieaanpassing van de Divi-tekstmodule

Voeg sectie # 2 toe

Ga door met het toevoegen van een nieuw normaal gedeelte net onder het vorige.

Voeg een nieuwe divi-sectie toe

tussenruimte

Open de sectie-instellingen en verwijder de standaard bovenste opvulling.

  • Bovenste vulling: 0 px
Configureer de afstand tussen de secties

Voeg een nieuwe regel toe

Kolomstructuur

Blijf een nieuwe rij toevoegen met behulp van de volgende kolomstructuur:

Voeg een nieuwe sectie divi-kolom toe

sizing

Zonder meer modules toe te voegen, opent u de lijnparameters en laat u de lijn de volledige breedte van de sectiecontainer innemen.

  • Breedte: 100%
  • Max breedte: 100%
Maatdeel divi

Voeg een tekstmodule toe aan de kolom

Voeg inhoud toe

Voeg vervolgens een tekstmodule toe met a inhoud beschrijving van uw keuze.

Divi-module tekstinstellingen

Achtergrond kleur

Voeg een witte achtergrondkleur toe.

  • Achtergrondkleur: #ffffff
Divi lettertype kleurconifguratie

Tekst instellingen

Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:

  • Tekstlettertype: Work Sans
  • Tekstkleur: # 9b9b9b
  • Tekstgrootte: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
  • Hoogte van de regel tekst: 2.6em
Divi-titel lettertype-configuratie

tussenruimte

Voeg ook aangepaste afstandswaarden toe op verschillende schermformaten.

  • Bovenmarge: -5vw (desktop), -20vw (tablet), -27vw (telefoon)
  • Linkermarge: 20vw (bureau), 13vw (tablet), 8vw (telefoon)
  • Rechter marge: 20vw (desktop), 13vw (tablet), 8vw (telefoon)
  • Bovenvoering: 5vw (desktop), 7vw (tablet en telefoon)
  • Vulling onderkant: 5vw (bureau), 7vw (tablet en telefoon)
  • Linker opvulling: 3vw (desktop), 5vw (tablet), 6vw (telefoon)
  • Vulling rechts: 3vw (bureau), 5vw (tablet), 6vw (telefoon)
Divi module sectie afstand configuratie

Schaduw doos

En voltooi de module-instellingen door een subtiele doosschaduw toe te passen. Dat is het!

  • Box Shadow Blur Strength: 50 px
  • Schaduwkleur: rgba (0,0,0,0,1)
Schaduwconfiguratie divi-tekstmodule

overzicht

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Eindresultaat divi tutorial

Final gedachten

In dit artikel hebben we u laten zien hoe u CSS-tekstblokanimaties aan uw titel kunt toevoegen. Het is belangrijk om ervoor te zorgen dat uw titel vanaf het begin zichtbaar en gelezen is, het toevoegen van animatie aan uw titel kan zeker helpen! U kon ook het layout JSON-bestand gratis downloaden. Als u vragen of suggesties heeft, kunt u een reactie achterlaten in de opmerkingen hieronder.

Vertaald uit: ElegantThemes