Hoe kleurverloopteksten in Elementor te kleuren - DeLaatbusiness

Hoe kleurverloopteksten in Elementor te kleuren

4 min


104

Het is soms leuk om die mooie tekst met kleurovergangen te maken om wat pit aan uw webpagina’s te geven. Het is tenslotte onze taak als webdesigners om het comfort en de aantrekkingskracht van onze gebruikers tijdens het browsen door onze inhoud te maximaliseren. En voeg ook wat CRO toe om ze terug te laten komen en een zekere mate van professionaliteit te geven.

Hoe dan ook … dus in deze tutorial leer ik je hoe je het “kleurverloop” -effect kunt creëren voor koppen, alinea’s, ankers of eigenlijk elke tag die je wilt! Ik zal je ook leren hoe je dit heel gemakkelijk herbruikbaar kunt maken via Global Widgets .

Maar bovenal zou je kunnen overwegen om de Elementor Pro-versie aan te schaffen en toegang te krijgen tot meer cool ogende en hoogwaardige Elementor-sjablonen rechtstreeks naar je Elementor-sjabloonbibliotheek, gratis!

Koop nu Elementor Pro

Dat alles terzijde, laten we nu beginnen met de tutorial!

Stap 1: Installatie

De eerste stap is natuurlijk het vinden van de pagina waarop u het kleurverloop wilt toepassen. Ga gewoon naar uw WordPress-dashboard, klik op ‘Pagina’s’ en vervolgens op ‘Alle pagina’s’.

how-to-text-gradient-1

Blader nu naar de letterlijke pagina en zoek de link ‘Bewerken met Elementor’ en klik erop.

how-to-text-gradient-2

U bevindt zich nu op de Elementor visuele editor-sectie van die pagina. Ik heb hier een snelle test van gemaakt, dus dit is hoe je tekst eruit zal zien als je deze tutorial hebt voltooid.

how-to-text-gradient-3

Stap 2: Bewerken

Dus je bent nu op Elementor, aan de linkerkant, onder de ‘Basic’-widgets, zoek de’ Heading’-widget en sleep deze naar het ‘Drag Widget here’-gebied. Als u dit doet, wordt een instantie van die widget gemaakt, waarmee u een header-tag kunt maken, deze kunt ontwerpen en tekst kunt wijzigen, allemaal in realtime.

how-to-text-gradient-4

Laten we de lettergrootte van deze kop heel snel wijzigen, zodat we een veel duidelijker beeld krijgen van wat we later in deze tutorial zullen doen.

how-to-text-gradient-5

Stap 3: Kleur aanpassen

Ga nu naar de tag ‘Geavanceerd’ in het gedeelte Widget en zoek de ‘Aangepaste CSS’.

how-to-text-gradient-6

Als je het eenmaal hebt gevonden, ziet het er als volgt uit:

how-to-text-gradient-7

Dit is het lastige gedeelte. Omdat er momenteel geen andere manier is om het op elementor te doen, zelfs niet op de Elementor Pro-versie , moet je het natuurlijk handmatig doen, behalve het uploaden van Elementor-add-ons zoals ‘Raven Elements’ met het Jupiter X-thema.

Maar hier kopieert u deze code en plakt u deze in dat tekstgebied:

selector h2 {
    achtergrondafbeelding: lineair verloop (naar rechts, # 463f64, # 463f64, # e2285c, # e2285c);
    -webkit-achtergrondclip: tekst;
    display: inline-blok;
    opvulling: 14px;
    -webkit-tekstvulkleur: # 00000000;
    font-family: 'Stay Out Regular';
}


OPMERKING: Zie je dat “h2” naast het woord “selector”? Dat is het type widget dat we momenteel gebruiken. Dus als u besluit de kop te wijzigen, zorg er dan voor dat u deze ook bijwerkt, zodat u niet iets anders verandert… zoals ik deed!

Nu ziet uw tekst er onmiddellijk als volgt uit:

how-to-text-gradient-9

Dit is een van de verbazingwekkende aspecten van Elementor. Alles gebeurt in realtime! U hoeft de code niet te bewerken, de pagina te vernieuwen, opnieuw te bewerken, de pagina te vernieuwen, steeds opnieuw, net zoals ik deed tijdens het maken van deze tutorial. Natuurlijk zeg je: “waarom heb je het element niet geïnspecteerd?” Nou, ik hou niet echt van de tool, dus wat.

Stap 3: opslaan voor toekomstig gebruik

Laten we nu ons nieuw gemaakte Elementor-blok afronden, zodat we het overal op de website kunnen gebruiken zonder deze vuile dingen helemaal opnieuw te hoeven doen. Klik met de rechtermuisknop op de blog en zodra het paneel verschijnt, zoekt u naar de optie ‘Opslaan als een globaal’ en klikt u erop.

how-to-text-gradient-10

Kies gewoon een zeer duidelijke en duidelijke naam voor uw widget, zodat u uzelf niet in verwarring brengt als deze Global widgets eenmaal overbevolkt raken!

how-to-text-gradient-11

Maar voordat u het opnieuw op uw pagina’s gebruikt, moet u ervoor zorgen dat u de nieuwe instantieversie van die widget ‘ontkoppelt’ voor het geval u dingen verknoeit, deze zou niet van toepassing zijn op de andere instanties van die widget.

how-to-text-gradient-12

Nu zijn we klaar! Herhaal gewoon de stappen hier en pas de aangepaste CSS-code vrijelijk aan als u weet wat u doet, en u zult uw site er zeker mooi en aantrekkelijk laten uitzien voor uw gebruikers!

Ik heb deze versie heel snel gemaakt door alleen de hexadecimale kleurcodes en de lettertypestijl te veranderen. De mogelijkheden zijn grenzeloos, net zoals je creativiteit bent!

how-to-text-gradient-13

Bedankt dat je zo ver bent gekomen! 🙂

Ik hoop dat we je hebben kunnen helpen met deze tutorial! U kunt ook proberen de Elementor Pro-versie te installeren en gratis toegang krijgen tot meer Elementor-sjablonen!

Koop nu Elementor Pro


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format