Een titel hebben die opvalt, betekent ervoor zorgen dat je de kans krijgt om de aandacht van je te trekken bezoekers. Titels blijven meestal niet onopgemerkt vanwege hun grootte en centrale positie, maar als je een stap verder wilt gaan en de titel letterlijk wilt laten opvallen, ben je hier aan het juiste adres.

In deze tutorial combineren we de animatie-instellingen van Divi om een ​​kop te creëren die opvalt en de aandacht trekt bezoekers.

Eindresultaat

Deel één: ontwerp

Sectie configuratie

Achtergrondkleur

Laten we beginnen met ontwerpen! Maak een nieuwe pagina en voeg er een gewone sectie aan toe. Open de sectie-instellingen en verander de achtergrondkleur.

• Achtergrondkleur: #EEE

tussenruimte

Ga vervolgens naar de instellingen voor sectieafstand en voeg aangepaste opvulmarges toe.

• Vulling onderkant: 10vw

Rij 1 toevoegen

Kolomstructuur

Ga door met het toevoegen van een nieuwe rij met behulp van de volgende kolomstructuur:

Achtergrondkleur

Open de rij-instellingen en verander de achtergrondkleur van de rij zonder nog modules toe te voegen.

•  Achtergrondkleur: #DDD

sizing

Ga dan naar de maatinstellingen en laat de rij de volledige breedte van het scherm vullen.

• Maak deze regel over de volle breedte: Ja
• Gebruik een aangepaste gootbreedte: Ja
• Dakgootbreedte: 1

tussenruimte

Verwijder ook de standaard bovenste en onderste interne opvulling voor de lijn.

• Opvulling bovenaan: 0px
• Bekleding onder: 0px

Voeg een tekstmodule toe

Het is tijd om modules toe te voegen! De eerste module die we nodig hebben is een tekstmodule. Voer het eerste deel van uw titel in het vak in inhoud met behulp van de alineatekststijl.

Achtergrondkleur

Ga vervolgens naar de achtergrondinstellingen van de module en voeg een achtergrondkleur toe.

• Achtergrondkleur: #ccc

Tekst instellingen

Wijzig ook de tekstinstellingen op het tabblad Ontwerpen.

• Lettertype: Didactisch Gotisch
• Lettergewicht van de tekst: vet
• Tekstkleur: #000000
• Tekstgrootte: 10vw
• Hoogte van de regel tekst: 0.9em
• Tekstrichting: Midden

tussenruimte

Creëer vervolgens uw gewenste vorm met behulp van aangepaste opvulling aan de boven- en onderkant.

• Opvulling bovenaan: 10vw
• Vulling onderkant: 3vw

Animatie

Last but not least gaan we wat animatie toevoegen. Het is belangrijk om ervoor te zorgen dat de animatieduur en de startdekking nul zijn. Hierdoor kan de tekstmodule worden weergegeven met een flitseffect.

• Animatiestijl: vervagen
• Herhaal Animatie: Eenmaal
• Animatieduur: 0ms
• Animatievertraging: 1000ms

Kloon de x4-tekstmodule

Als u klaar bent met het bewerken van de eerste tekstmodule, kunt u doorgaan en deze zo vaak als u wilt klonen, afhankelijk van de lengte van uw titel. Voor elk deel van de titel dat u met een flitseffect wilt weergeven, heeft u een aparte tekstmodule nodig. Voor dit voorbeeld hebben we extra 4-modules nodig.

Achtergrondkleur

Met de achtergrondkleur.

• Kopie 1 = Achtergrondkleur: # 5900ff, tekstkleur: #FFF
• Kopieer 2 = laat zoals het is, wijzig de animatieduur (Animation Delay): 1500ms
• Kopieer 3 = Achtergrondkleur: # ffb200, tekstkleur: #FFF, wijzig animatieduur: 2000ms
• Kopieer 4 = Achtergrondkleur: # 000, tekstkleur #FFF, wijzig animatieduur: 2500ms

Voeg een negatieve marge toe aan elke tekstmodule behalve de eerste

Als u klaar bent met het aanpassen van alle tekstmodules, kunt u doorgaan en een overlap creëren. Om deze overlap te creëren, gaan we een negatieve bovenmarge toevoegen aan elk van de dubbele tekstmodules. Met andere woorden, we zorgen ervoor dat alle modules die volgen op de eerste module boven die eerste tekstmodule verschijnen.

• Bovenmarge: -31.98vw

Transformatie lijn

Transformeer Vertalen

Ga door met het transformeren van de hele lijn, beginnend met de transformatieparameters.

• Onderste: -35vw

Transformeer rotatie

Wijzig ook de rotatiewaarden van de transformatie.

• Links: 320eg

Voeg de 2-regel toe

Kolomstructuur

Op de tweede plaats! Nu het titeleffect aanwezig is, kunnen we beginnen met het toevoegen van de resterende modules. Voeg een nieuwe rij toe met behulp van de volgende kolomstructuur:

sizing

Zonder nog modules toe te voegen, open je de rij-instellingen en laat je de rij de volledige breedte van het scherm vullen in de formaatinstellingen:

• Maak deze regel over de volle breedte: Ja
• Gebruik een aangepaste gootbreedte: Ja
• Dakgootbreedte: 1

tussenruimte

Hiermee verwijdert u de standaard bovenvulling van de volgende regel.

• Bovenste vulling: 0px

Voeg een tekstbeschrijvingsmodule toe aan de 2-kolom

Voeg H1-inhoud toe

Het is tijd om modules toe te voegen. De eerste module zal een tekstmodule zijn. U kunt de inhoud dat je wenst.

H1 tekstinstellingen

Ga dan naar het design-tabblad en verander de H1-instellingen.

• Lettertype van de titel: Didact Gothic
• Titel Gewicht: Vet
• Lettergrootte: 1.8vw (computer), 3.8vw (tablet), 4vw (telefoon)

tussenruimte

Voeg aangepaste marges toe in het afstandsgedeelte.

• Bovenmarge: -4vw
• Ondermarge: 2vw
• Linkermarge: 30vw
• Rechtermarge: 30vw (computer), 15vw (tablets en telefoon)

Voeg een scheidingsmodule toe aan de 2-kolom

zichtbaarheid

De volgende module is de scheidingsmodule. Zorg ervoor dat de optie "Show Divider" is ingeschakeld.

• Show Separator: Ja

Kleur

Ga dan naar het tabblad "Design" en verander de kleur van het scheidingsteken.

• Kleur: #000000

Dimentionnement

Wijzig ook de afstandsopties.

• Afstandsgewicht: 8px
• Breedte: 7%

tussenruimte

Altijd met dimensioneringsopties.

• Lage marge: 1vw
• Linkermarge: 30vw

Voeg een tekstmodule toe aan de 2-kolom

Voeg inhoud toe

De volgende module zal een andere tekstmodule zijn. U moet de inhoud de votre choix.

Tekst instelling

Vervolgens moet u de tekstinstellingen wijzigen op het tabblad "Ontwerp".

• Tekstgrootte: 0.8vw (computer), 1.3vw (tablet), 1.6vw (telefoon)
• Hoogte van de regel: 2.2em

tussenruimte

Voeg ook wat marges toe in het afstandsgedeelte.

• Lage marge: 3vw
• Linkermarge: 30vw
• Rechtermarge: 30vw (computer), 15vw (tablets en telefoons)

Voeg een knopmodule toe aan de 2-kolom

Knopmodule-instellingen

Voor de laatste module, dat zal een knopmodule zijn. U voegt de inhoud van uw keuze toe en wijzigt de instellingen als volgt:

• Gebruik aangepaste stijl: Ja
• Lettergrootte: 1vw (computer), 1.5vw (tablet), 2vw (telefoon)
• Breedte van de knoprand: 0px
• Knooplettertype: Poppins
• Tekstgewicht: Vet
• Letterstijl: hoofdletters

tussenruimte

Ga naar de afstandsinstellingen en voeg een aangepaste buitenmarge toe, evenals een binnenmarge en dat is alles.

• Linker externe marge: 30vw
• Binnenste hoge marge: 1vw
• Binnen lage marge: 1vw
• Linker binnenmarge: 3vw
• rechter binnenmarge: 3vw

Voltooien

In deze tutorial hebben we gezien hoe je een titel met geanimeerde tekst kunt ontwerpen, met alleen de interne opties van Divi. Dit is een uitstekende techniek waarmee je de aandacht van je publiek kunt trekken bezoekers op een heel originele manier.