Modifier les styles de texte

La personnalisation des styles de texte est l'un des moyens les plus simples de faire en sorte que votre boutique Shopify se démarque. Dans cet article, nous vous expliquerons étape par étape comment modifier les styles de texte dans GemPages.

Comment modifier les styles de texte dans GemPages ?

Étape 1 : sélectionnez l'élément de texte ou d'en-tête

Dans l'éditeur GemPages, cliquez directement sur le élément de texte, qui pourrait être n'importe lequel bloc de texte, titre, ou paragraphe sur ta page.

Cela activera le Panneau Paramètres sur le côté gauche de l'écran.

Étape 2 : Accéder aux options de style de texte

Le panneau Paramètres affiche diverses options de personnalisation. Localisez le Style de texte section pour changer le style du texte et le personnaliser à votre façon.

Voici ce que vous pouvez ajuster :

1. Modèles

Choisissez parmi des styles prédéfinis pour appliquer rapidement un aspect soigné à votre texte.

2. Police

Sélectionnez une police qui correspond à l'identité de votre marque. GemPages s'intègre à Google Fonts, vous aurez donc de nombreuses options parmi lesquelles choisir.

Vous pouvez aussi vous téléchargez votre police. Pour plus de détails, reportez-vous à cet article.

3. Taille

Redimensionnez facilement votre texte pour l'adapter à votre design. Ajustez à l'aide du curseur ou saisissez une valeur spécifique.

Si vous avez déjà modifié la taille du texte à l'aide de la Éditeur de texte en direct, vous ne pouvez pas ajuster la taille directement à partir des paramètres de la barre latérale gauche par la suite.

Dans ce cas, veuillez effacer le format du texte, puis modifier la taille du texte à l'aide du panneau des paramètres.

4. Couleur

Définissez la couleur de votre texte. Vous pouvez choisir dans la palette ou saisir un code hexadécimal personnalisé correspondant à votre marque.

Si vous souhaitez modifier la couleur d’un texte spécifique (au lieu de l’appliquer à l’élément entier), suivez ces étapes :

• Mettez le texte en surbrillance vous voulez changer.
• Extrait du éditeur de texte en direct barre d'outils qui apparaît au-dessus du texte, cliquez sur le bouton Couleur du texte option.
• Sélectionnez une couleur dans la palette ou entrez un code HEX.

De cette façon, seul le texte en surbrillance sera mis à jour, tandis que le reste de l'élément conserve sa couleur d'origine.

5. Poids de la police

Contrôlez l'audace de votre texte avec des options telles que léger, normal, gras, extra gras, etc.

6. Hauteur de la ligne

Ajustez l'espacement vertical entre les lignes de texte pour une meilleure lisibilité.

7. Espacement des lettres

Ajustez l’espacement entre les caractères pour créer un effet net ou dramatique.

8. Transformer

Modifiez la casse du texte en majuscules, minuscules ou en majuscules pour chaque mot.

9. Ombre

Ajoutez de la profondeur et de l’emphase à votre texte avec des ombres personnalisables.

10. Aligner

Alignez votre texte à gauche, au centre ou à droite pour l'adapter à la mise en page de votre page.

11. Largeur

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Taille section, définir le maximum largeur pour que votre bloc de texte contrôle sa propagation horizontale.

12. Rembourrage

Ajoutez de l'espace autour de votre texte dans son conteneur pour une conception équilibrée.

13. Contexte

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Présentation section, appliquer un solide/dégradé arrière-plan coloré or arrière-plan de l'image pour mettre en valeur votre texte.

Par exemple :

• Couleur de fond :

• Arrière-plan de l'image :

Comment créer un dégradé de texte dans GemPages

GemPages ne propose actuellement pas d'option de dégradé de texte intégrée. Cependant, vous pouvez facilement créer un effet de dégradé de texte à l'aide de CSS personnalisé.

Étape 1 : Générer le dégradé CSS

Allez dans Portail CSS – Générateur de dégradés de texte: https://www.cssportal.com/css-text-gradient-generator/

Configurez les couleurs, la direction et le style du dégradé souhaité. Copiez le code CSS généré.

Étape 2 : Sélectionnez l’élément de texte

Dans l'éditeur GemPages, cliquez avec le bouton droit sur l'élément de texte ou d'en-tête auquel vous souhaitez appliquer le dégradé => Code personnalisé

Étape 3 : Ajouter le code CSS

Collez-y le code du dégradé copié.

Étape 4 : Enregistrer et prévisualiser

Enregistrez vos modifications et prévisualisez la page pour voir le texte dégradé appliqué.