Qu'est-ce que CSS ? (Signification CSS)
CSS qui veut dire Cascading Style SheetsC'est un langage de style utilisé pour contrôler l'apparence, la mise en page et la conception d'une page Web.
En termes plus simples, Signification du CSS concerne « l’apparence des choses » — y compris polices, les couleurs, espacement, limites et positionnement des éléments sur votre page.
GemPages prend automatiquement en charge de nombreux paramètres visuels grâce à son éditeur glisser-déposer. Cependant, pour des designs sophistiqués ou uniques, l'ajout de CSS personnalisé JavaScript vous offre une plus grande flexibilité et précision.
Cette fonctionnalité est particulièrement utile pour mobiles, pigistes et agences qui souhaitent créer des conceptions de pages entièrement personnalisées et des expériences interactives.
Pourquoi utiliser CSS, JavaScript et HTML personnalisés dans GemPages ?
GemPages peut prend en charge la plupart des styles personnalisés sans nécessiter de codageCependant, pour des exigences de conception spécifiques qui doivent être adaptées, vous pouvez utiliser du code personnalisé.
Ce guide est destiné aux développeurs, aux freelances ou aux agences cherchant à améliorer la conception et les fonctionnalités de leur boutique grâce à un code personnalisé.
- CSS (feuilles de style en cascade) contrôle la mise en page, l'apparence et les éléments de conception de votre page. Pensez aux polices, aux couleurs, aux marges et au positionnement.
- JavaScript ajoute de l'interactivité, comme des animations, des effets de survol, des mises à jour de contenu dynamiques, etc.
Chaque élément dans GemPages se voit attribuer un nom de classe CSS par défaut, ce qui permet de cibler et de personnaliser facilement des éléments spécifiques.
Pour localiser le nom de la classe CSS d'un élément, il suffit sélectionner l'élément, cliquez-droit suret choisissez Code personnalisé.
Comment personnaliser les styles d'éléments avec CSS et JavaScript personnalisés ?
Étape 1 : Faites un clic droit sur l'élément que vous souhaitez modifier et sélectionnez Code personnalisé. Cela ouvre le panneau dans lequel vous pouvez insérer votre code personnalisé.
Étape 2 : Une fois dans le Code personnalisé panneau, vous verrez deux onglets : CSS JavaScript.
Sélectionnez le CSS onglet si vous vous concentrez sur le style, ou le JavaScript onglet pour ajouter de l'interactivité.
Étape 3 : Après avoir inséré votre CSS, JavaScript ou HTML personnalisé :
- Cliquez à nouveau sur Enregistrer.
- Utilisez le bouton Mode aperçu dans GemPages pour vérifier à quoi ressemble votre conception sur tous les appareils.
Exemples courants de CSS personnalisé pour la mise en forme des éléments GemPages
Voici quelques exemples courants Exemples de CSS personnalisés Vous pouvez l'utiliser pour ajuster rapidement le style des éléments GemPages, tels que les couleurs, les tailles de police, l'espacement et les bordures.
Pour appliquer ces styles, sélectionnez un élément, cliquez dessus avec le bouton droit, choisissez Code personnalisé, puis collez le CSS dans le Onglet CSS.
Modifier la couleur du texte avec CSS
Utilisez cette option lorsque vous souhaitez personnaliser la couleur du texte au-delà des paramètres de couleur par défaut.
Exemples de cas d'utilisation :
- Surligner les titres ou les messages clés
- Correspondez précisément aux couleurs de la marque à l'aide des codes hexadécimaux.
Définir la taille et l'épaisseur de la police
Cela permet de garantir la cohérence typographique sur l'ensemble de votre page.
Vous pouvez l'utiliser pour :
- Mettez davantage en évidence les titres.
- Améliorer la lisibilité des longs passages de texte
Personnaliser la couleur d'arrière-plan
Si vous souhaitez un contrôle plus poussé que celui offert par les paramètres d'arrière-plan intégrés :
Ceci est utile pour :
- Créer un contraste entre les sections
- Mise en valeur des promotions ou des zones d'appel à l'action
Ajuster le remplissage et la marge
Contrôlez l'espacement autour des éléments pour des mises en page plus claires.
Conseil : Un espacement approprié améliore la hiérarchie visuelle et l'expérience utilisateur.
Ajouter une bordure et des coins arrondis
Utilisez des bordures pour séparer visuellement le contenu.
Cas d'utilisation courants:
- Cartes
- Blocs de fonctionnalités
- Témoignages
Modifier le style du bouton avec CSS
Vous pouvez personnaliser le style des boutons pour mieux l'adapter à votre marque.
Exemple d'effet de survol
Ajoutez des effets d'interaction subtils grâce à la fonction CSS hover.
Les effets de survol peuvent améliorer l'engagement sans nécessiter de JavaScript lourd.
Bonnes pratiques pour l'utilisation de code personnalisé dans GemPages
- Gardez votre CSS JavaScript organisé et lisible.
- Testez sur différents appareils pour garantir une conception réactive.
- Évitez d'utiliser trop de scripts personnalisés, car ils peuvent ralentir votre page. Le code Liquid combiné de tous les blocs de l'extension ne doit pas dépasser 100 KB.
- Toujours sauvegardez votre travail avant d'apporter des modifications importantes au code.
Merci pour vos commentaires