Astuce Velo Wix : Appliquer des dégradés de couleurs à un texte sur Wix.
Dernière mise à jour : 4 juin 2023
Créez de superbes effets visuels accrocheurs pour vos textes avec des dégradés de couleurs, sans utiliser d'image et sans fenêtre de code HTML intégré. C'est possible avec Wix. KoalaVib création site internet Bordeaux va vous expliquez comment.
À aujourd'hui, avec l'éditeur Wix, les dégradés ne peuvent être ajoutés qu'en arrière-plan des éléments suivants, mais pas pour le texte :
Bandes et colonnes
Diaporamas
Répéteurs
Menus mobiles
Fenêtres promotionnelles
Je vous partage le lien vers le forum Wix pour appliquer des dégradés de couleurs aux éléments d'arrière-plan de votre site. En savoir plus
Dans ce cas, ils nous restent 2 solutions :
Créer une image et l'importer dans Wix. C'est une solution facile et pratique, mais vous le savez bien, Google ne reconnaît pas les images et donc ça ne va pas vous aider dans votre référencement.
Importer du code dans un HTML intégré. C'est une très bonne solution aussi, car le code sera concis, mais quand est-il du mode responsive ? Selon les écrans, vous allez avoir une fenêtre qui va s'ouvrir avec une barre de défilement. Et voilà des heures de Design évaporées en 30 secondes.
Finalement, il existe une 3e solution. Vous allez voir, pas besoin d'être un pro du codage. Nous allons utiliser le mode développeur Velo de Wix et les ressources que Wix met à notre disposition. En combinant les deux, nous allons créer un effet de dégradé de couleurs à notre élément de texte et rendre ainsi notre visuel plus attrayant, responsive et par la même occasion ne pas être pénalisé avec notre effet de style dans notre référencement. C'est parti !
Dans cet article, vous découvrez comment :
Bonne lecture et bon tuto.
Dans ce petit tuto, nous allons appliquer un dégradé de couleurs à un élément de texte en thème "En-tête 3". Pour commencer, KoalaVib création site internet Bordeaux va vous aidez à modifier quelques éléments afin que notre texte reste responsive.
Modifier les styles de votre thème de texte
Choisissez parmi les tailles de polices à appliquer aux éléments de texte "En-tête 3" de votre site. La taille de cette police va être importante, car elle sera appliquée automatiquement sur notre texte dégradé.
Pour modifier le thème de textes :
Cliquez sur Design du site.
Cliquez sur Personnaliser.
Cliquez sur Textes.
Cliquez sur l'icône Modifier à droite de l'élément de texte que vous voulez modifier et sélectionnez l'option suivante :
Taille de la police : Sélectionnez une taille de police qui va être automatiquement appliquée à l'ensemble des éléments de votre site.
Ajouter un élément de texte de votre thème
Choisissez parmi les éléments de textes assortis "Ajouter En-tête 3" à votre site Wix. Vous allez bientôt pouvoir créer de superbes textes avec des dégradés de couleurs pour rendre votre site visuellement plus encore plus attrayant.
Pour ajouter un élément de texte assorti :
Cliquez sur Ajouter des éléments.
Cliquez sur Texte.
Cliquez sur Texte assorti.
Cliquez sur l'élément Ajouter "En-tête 3" ou faire Glisser l'élément sur votre page.
Gagner du temps et confiez-moi
LA CRÉATION DE VOTRE SITE INTERNET !
Concentrez-vous sur votre entreprise et confier la gestion de votre site Web.
Par la suite, KoalaVib création site internet Bordeaux vous expliquera pourquoi il était important de définir une police, et surtout une taille de police. Passons maintenant par notre éditeur de code de dégradé de couleurs de texte.
Utiliser un générateur de code pour notre dégradé de couleurs
Il existe plusieurs générateur HTML de dégradé de couleurs ou color gradient. Libre à vous de choisir celui que vous voulez. J'en ai testé plusieurs et celui qui est en lien, fournis le code plus adapté dans la syntaxe accepté par Wix.
Pour créer le code de votre texte avec un dégradé de couleurs :
Allez sur le générateur de dégradé de couleurs ici.
Saisissez votre texte dans Your Message.
Sélectionnez le nombre de couleur que vous voulez avec # Of Colors.
Cliquez sur Colors et saisissez le code Hex de votre couleur (ex: Grey = #808080). Répéter l'opération selon le nombre de dégradé de couleurs que vous souhaitez. L'élément Fade Type va vous fournir le type de fondu que vous souhaitez, dans notre cas, nous allons laisser Horizontal. L'élément Output Code doit être sur HTML (span tags).
Cliquez sur le bouton Generate Color Faded Text.
Copiez le code qui est dans la fenêtre Color Code sans oublier de supprimer avant :
<div> : en début de code
</div> : en fin de code
Voilà une bonne étape de franchi. KoalaVib création site internet Bordeaux vous l'accorde, le morceau de code est un peu indigeste. Je vais vous expliquer à quoi il correspond. Pour des raisons de sécurité évidente, Wix ne nous permet pas de rentrer dans le code HTML et CSS de votre site web, ce qui nous aurait permis de coder une fonction (je ne vais pas rentrer en détails ici). Par contre, Wix prend en charge un style en ligne via des balises HTML qui sont répertoriées ici, c'est la méthode que nous avons utilisée dans l'étape précédente. Nous avons donc donné à chaque lettre un code Hex afin de créer un effet de texte dégradé ou color gradient.
Si vous connaissez un autre générateur de dégradé de couleur HTML compatible avec Wix, n'hésitez pas à m'en faire part, je me ferai une joie de partager le lien sur le tuto.
Il est grand temps de mettre tout ça en place sur notre site Wix.
Ouvrir le mode développeur Velo de Wix
Notre thème est préparé avec succès et nous avons notre bout de code de texte dégradé ou color gradient. Il est maintenant temps de rentrer dans le vif du sujet.
Pour activer le mode développeur Velo de Wix :
Cliquez sur Mode développeur.
Cliquez sur Activer le mode développeur, en bas de votre écran, une nouvelle fenêtre va s'ouvrir.
Changez l'ID de votre élément texte, en bas à droite. Dans notre exemple, nous allons lui donner l'ID # helloWorld.
Saisissez le code HTML de l'élément texte avec l'ID # helloWorld.
Nous allons appeler la fonction sur l'élément texte de la page qui à l'ID # helloWorld:
$w('#helloWorld').html= '<h3 style="text-align: center; font-family: Helvetica, Sans-serif"> </h3>';
Dans l'espace en violet, nous allons coller le morceau de code obtenu précédemment dans le générateur de dégradé de couleurs.
Prévisualisez votre site pour voir le code se dérouler sous vos yeux.
Dans l'éditeur mobile, si votre texte est trop petit, vous pouvez toujours l'agrandir avec A+ ou le diminuer avec A-.
Félicitations ! ! Vous venez d'appliquer votre premier dégradé de couleurs à un texte ou color gradient.
Bon à savoir :
$w('#helloWorld').html= '<h3 style="text-align: center; font-family: Helvetica, Sans-serif"> </h3>';
Comme vous pouvez le voir dans le code ci-dessus, j'ai rajouté à ma balise h3 l'attribut style avec les propriétés : texte-align, font-family, mais pas font-size.
texte-align : définit l'alignement horizontal d'un élément. start = alignement gauche ; end= alignement droit ; center = centré et justify = justifié.
font-family : définit une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte. Vous pouvez laisser celui enregistré dans votre thème ou en définir un nouveau.
font-size : définit la taille pour le texte. Vous ne pouvez pas utiliser cette propriété à l'intérieur de l'attribut style, car la taille définit dans cette propriété sera conservé en version mobile et vous ne pourrez pas modifier cette taille facilement avec A+ ou A-.
Avez-vous trouvé ce post utile ?
- Oui
- Non