Le CSS personnalisé vous permet d'ajouter un code personnalisé à votre site web pour lui donner une apparence et une sensation uniques.
Qu'est-ce que le CSS ?
CSS (Cascading Style Sheets) est une méthode permettant d'ajouter des styles aux pages web, tels que les couleurs, les polices, l'espacement et la position. L'un des avantages de l'éditeur Elementor est qu'il vous permet d'ajouter un grand nombre de ces éléments de style sans connaître les CSS. Cependant, Elementor Pro permet également aux créateurs de sites web ayant des connaissances en CSS d'ajouter des CSS personnalisés pour donner à leurs pages un aspect et une sensation uniques.
Où puis-je ajouter des CSS personnalisés en utilisant Elementor ?
L'éditeur Elementor vous permet d'ajouter des feuilles de style CSS personnalisées à trois niveaux différents :
- Niveau du site : l'ajout d'une feuille de style CSS personnalisée ici affectera l'ensemble de votre site !
- Au niveau de la page : l'ajout d'une feuille de style CSS personnalisée ici n'affectera que des pages spécifiques.
- Niveau de l'élément : l'ajout d'une feuille de style CSS personnalisée ici n'affectera que des éléments spécifiques.
Exemples de feuilles de style CSS personnalisées
| Où saisir le code | Insérer ce code | L'effet du CSS |
| Paramètres du siteplanche à pétrir | corps { | Fournir un fond rouge pour toutes les pages du site |
| Mise en pageplanche à pétrir | corps { | Fond de page bleu. prendre noteCette feuille de style CSS au niveau de la page a la priorité sur toute feuille de style CSS au niveau du site. Ainsi, même si vous utilisez la feuille de style CSS au niveau du site ci-dessus, cette page aura toujours un arrière-plan bleu ! |
| élémentaireOnglet Avancé | #my-element { | Il est basé surID CSS "my-element" pour l'élément spécifique ciblé et lui fournit un arrière-plan vert. Attention :Cette feuille de style CSS remplace toute feuille de style CSS au niveau du site ou de la page pour fournir un arrière-plan vert aux éléments. Ainsi, même si vous utilisez la feuille de style CSS du site et/ou de la page ci-dessus, cette page aura toujours un arrière-plan bleu. |
Comment ajouter des feuilles de style CSS personnalisées
Ajouter un CSS personnalisé à Elementor
1. en cliquant sur ou à partir dunavigateur (sur un écran d'ordinateur)pour le sélectionner en choisissant un élément dans le
2) Dans le tableau de bord, cliquez sur"Avancé"Tab.
3) Faites défiler vers le bas et développez Custom CSS.
4) Saisir le code CSS dans la zone de texte ouverte.
Ajouter une feuille de style CSS personnalisée à une page
1. aller dans le panneau de mise en page.
2. cliquez surniveau élevéTab.
3) Saisir le code CSS dans la zone de texte ouverte.
Ajouter des feuilles de style CSS personnalisées à un site web
1) Allez dans le panneau Paramètres du site.
2. sélectionner dans la listeCSS personnalisé.
3) Saisir le code CSS dans la zone de texte ouverte.
Comment ajouter des feuilles de style CSS personnalisées avec Elementor AI
Elementor AI vous aide non seulement à rédiger le contenu de votre site web, mais permet également aux utilisateurs Pro d'ajouter des styles CSS personnalisés aux pages et aux éléments. Les utilisateurs Pro peuvent également ajouter du code personnalisé aux sites web. Tous les utilisateurs peuvent utiliser Elementor AI pour ajouter du code HTML aux pages grâce au widget HTML.
Lorsque vous ajoutez des CSS ou du code personnalisés avec Elementor AI, suivez ces recommandations :
- Veillez à enregistrer et à sauvegarder votre page avant d'ajouter des feuilles de style CSS personnalisées, au cas où vous modifieriez accidentellement la mise en page.
- Lorsque vous ajoutez une feuille de style CSS à un élément spécifique, veillez à utiliser un "sélecteur" afin que le code n'affecte pas le reste de la page.
- Si vous utilisez Elementor AI pour régénérer le code, le code précédent sera écrasé. Il est donc conseillé de sauvegarder le code original dans un autre document.
- Lors de l'insertion de plusieurs extraits de code, certains codes peuvent entrer en conflit les uns avec les autres.
- Nous améliorons constamment les capacités de codage d'Elementor AI, mais le code généré peut nécessiter que vous l'ajustiez manuellement pour répondre à des besoins spécifiques.
- Veuillez noter qu'Elementor ne fournit pas de support technique officiel pour le code CSS personnalisé, les utilisateurs doivent vérifier et déboguer le code eux-mêmes.
Ajouter un code personnalisé à Elementor avec Elementor AI
L'exemple suivant ajoute un code de personnalisation CSS au titre de cette page d'accueil :
- Sélectionner le widget d'en-tête
- Dans le widget "Titre"."Avancé"et sélectionnez"CSS personnalisé".
- optionCoder avec l'IA.
Note : Après avoir utilisé Elementor AI pour la première fois, l'ongletAvec l'IALe code du texte sera remplacé par l'icône AI d'Elementor.
- Dans la zone de texte, tapez "Faire en sorte que ce titre devienne rouge au survol".
- cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Générer le code.
Cela ajoutera le code de personnalisation CSS suivant :
Cliquez sur Aperçu pour voir comment fonctionne le CSS personnalisé.
Titre de l'animation
Ajoutons maintenant une animation au titre.
- Retournez à Custom CSS et sélectionnezCoder avec l'IA.
- Dans la zone de texte, tapez "Dans cette rubrique, le texte s'affiche au survol".
- cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Générer le code.
- cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)"Insérer".
Cliquez sur "Aperçu" et visualisez les résultats. Lorsque vous passez votre souris sur le texte, celui-ci doit apparaître et devenir rouge.
Rendre Elementor collant
Une technique couramment utilisée par les concepteurs consiste à rendre certains éléments d'une page visibles en permanence, même lorsque le visiteur fait défiler la page. Cet effet est appelé "Sticky Elementor"Il est généralement utilisé dans l'en-tête d'une page web. L'objectif est de rendre le menu facilement accessible au visiteur lorsqu'il navigue n'importe où sur la page.
Voici un exemple qui montre comment garder le titre d'une page web collé et s'assurer qu'il est toujours affiché en haut de l'écran :
- optionModifier le titre.
- Sélectionner le conteneur dans l'en-tête
- optionCSS personnalisé.
- optionCoder avec l'IA.
- Tapez "Rendre ce conteneur collant" dans la zone de texte.
- cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)Générer le code. Le code généré ressemblera à ce qui suit :
Elementor AI vous fournit le code généré et, dans la zone située sous la boîte de code, il explique ce que fait le code en langage clair. - optionInsérer le code.
Utilisez l'aperçu pour visualiser les résultats et le titre restera en haut de l'écran lorsque vous ferez défiler la page.
Résumé :
Le concept de base du CSS (Cascading Style Sheets), un outil puissant pour ajouter et ajuster le style des pages web, comme les couleurs, les polices, l'espacement et la mise en page. Elementor permet notamment d'ajouter des feuilles de style CSS personnalisées à différents niveaux (niveau du site, de la page et de l'élément), ce qui permet aux utilisateurs de les adapter à leurs besoins spécifiques.
L'article fournit également des instructions spécifiques, étape par étape, sur la manière d'ajouter du code CSS à différentes parties d'Elementor, y compris une aide à la génération et à la gestion du code grâce à la technologie Elementor AI. Les points à garder à l'esprit lors de l'utilisation de CSS personnalisés, tels que les sauvegardes de code, l'utilisation de sélecteurs et la gestion des conflits de code, sont mis en évidence afin de garantir que la conception du site est à la fois esthétique et puissante.
