Bibliothèque de CSS personnalisé : modifier le design de vos pages sans être développeur

Le constructeur de page CrocoClick couvre l'immense majorité des besoins de design en quelques clics. Mais il reste toujours ce petit détail que les réglages ne proposent pas : un bouton qu'on voudrait un peu plus arrondi, un titre qui déborde sur mobile, une FAQ dont la police ne suit pas votre charte graphique.

Le CSS personnalisé sert exactement à ça. Et contrairement à ce que le mot laisse croire, vous partez d’exemples à adapter et à vérifier : cet article est une bibliothèque de recettes prêtes à copier-coller. Pour chacune, vous saurez ce qu'elle fait, où la coller et quelle valeur remplacer.

Si vous cherchez plutôt à faire générer un site ou une page entière par l'intelligence artificielle, c'est CrocoVibe qu'il vous faut. Ici, on parle de retouches chirurgicales sur une page que vous avez déjà construite. Si vous débutez avec l'éditeur, commencez par la présentation du constructeur de page.

1. Où coller votre CSS

C'est la question qui décide de tout le reste. Le même code n'a pas le même effet selon l'endroit où vous le placez, et un code collé au mauvais niveau peut ne rien faire ou toucher plus d’éléments que prévu.

Dans tous les cas, la manipulation se termine de la même façon : Sauvegarder, puis Publier. Sans publication, votre visiteur voit toujours l'ancienne version.

2. Cibler le bon élément grâce à son identifiant CSS

Une règle CSS comporte toujours un sélecteur. Une cible trop générale peut toucher plusieurs éléments : écrire une règle sur les boutons repeint les six boutons de la page, et pas seulement celui que vous visiez.

Chaque élément du constructeur possède un identifiant unique, du type #button-r8KpQz2Vn4. Pour le récupérer :

1. Cliquez sur l'élément à modifier dans le constructeur.
2. Dans le panneau de droite, ouvrez l'onglet Avancé (ou Styles selon l'élément).
3. Descendez tout en bas jusqu'à la ligne Sélecteur CSS.
4. Cliquez sur l'icône de copie à droite du code.

Dans toutes les recettes qui suivent, remplacez #button-XXXXXXXX, #section-XXXXXXXX et compagnie par l'identifiant que vous venez de copier. Le préfixe change selon la nature de l'élément (bouton, section, texte, image, FAQ), c'est normal : copiez toujours celui que le constructeur vous donne.

3. La bibliothèque de recettes

Ces exemples nécessitent l’adaptation des identifiants et du HTML effectivement produit par votre page. Un bouton peut être un lien <a>, un <button> ou un élément descendant : inspectez-le et adaptez le sélecteur, sans copier un identifiant fictif. Ajoutez une recette à la fois. Placez toute règle @import au tout début du CSS, avant les autres règles, puis sauvegardez et vérifiez le rendu.

Recette 1 : changer la couleur et l'arrondi d'un bouton

Ce que ça fait : impose une couleur de fond, une couleur de texte, des coins arrondis et un rembourrage plus généreux à un bouton précis.

Où le coller : CSS personnalisé de la page.

#button-XXXXXXXX button {
  background-color: #1E7A46 !important;
  color: #FFFFFF !important;
  border-radius: 12px;
  padding: 16px 32px;
  font-weight: 600;
  border: none;
}

À remplacer : #1E7A46 par votre couleur de fond, #FFFFFF par la couleur du texte, 12px par l'arrondi souhaité (mettez 999px pour un bouton totalement en gélule, 0px pour des angles droits).

Recette 2 : ajouter un effet au survol

Ce que ça fait : quand le visiteur passe la souris sur le bouton, celui-ci change de couleur, se soulève légèrement et prend une ombre. Vérifiez que l’effet reste lisible et n’entrave pas l’utilisation au clavier.

Où le coller : CSS personnalisé de la page, à la suite de la recette 1.

#button-XXXXXXXX button {
  transition: all 0.25s ease;
}

#button-XXXXXXXX button:hover {
  background-color: #14572F !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

À remplacer : #14572F par une version plus foncée de votre couleur principale. Le scale(1.03) agrandit le bouton de 3 pour cent : montez à 1.06 pour un effet plus marqué, ou supprimez la ligne transform si vous préférez un simple changement de couleur.

Recette 3 : rendre la taille d'un titre vraiment responsive

Ce que ça fait : au lieu de régler une taille pour ordinateur puis une autre pour mobile, la taille s'adapte en continu à la largeur de l'écran, avec un minimum et un maximum que vous fixez. Cela limite la taille de police ; vérifiez encore les mots longs et les débordements à chaque largeur utile.

Où le coller : CSS personnalisé de la page.

#text-XXXXXXXX h1 {
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.15;
}

À remplacer : 28px est la taille minimale (sur le plus petit téléphone), 56px la taille maximale (sur grand écran), et 6vw le rythme de croissance entre les deux. Remplacez h1 par h2, h3 ou p selon la balise de votre texte : si vous ne savez pas laquelle est utilisée, l'article sur les balises de titre dans vos pages et funnels vous montre où la vérifier.

Recette 4 : masquer un élément sur mobile (ou sur ordinateur)

Ce que ça fait : fait disparaître un élément en dessous d'une certaine largeur d'écran. Utile pour une image décorative qui alourdit la version mobile, ou pour afficher deux versions différentes d'un même bloc.

Où le coller : CSS personnalisé de la page.

/* Masquer jusqu’à 767 px de largeur */
@media (max-width: 767px) {
  #image-XXXXXXXX {
    display: none !important;
  }
}

/* Masquer sur ordinateur */
@media (min-width: 768px) {
  #image-YYYYYYYY {
    display: none !important;
  }
}

À remplacer : les deux identifiants, et éventuellement 767px qui est le point de bascule habituel entre mobile et ordinateur.

Recette 5 : ajuster l'espacement d'une section

Ce que ça fait : donne de l'air en haut et en bas d'une section, puis réduit cet espace sur mobile pour éviter les grands vides qui obligent à scroller dans le vide.

Où le coller : CSS personnalisé de la page.

#section-XXXXXXXX {
  padding-top: 90px;
  padding-bottom: 90px;
}

@media (max-width: 767px) {
  #section-XXXXXXXX {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

À remplacer : les quatre valeurs en pixels. Pour rapprocher deux sections collées l'une à l'autre, réglez le padding-bottom de la première et le padding-top de la seconde à 0px.

Recette 6 : styliser les champs d'un formulaire

Ce que ça fait : harmonise les champs, les étiquettes, les messages d'erreur et le bouton d'envoi de votre formulaire avec votre charte graphique.

Où le coller : dans le constructeur du formulaire, onglet Styles, section Avancé, zone CSS personnalisé. Pas dans le CSS de la page : à cause du cadre isolé, il n'aurait aucun effet.

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), textarea, select {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
}

input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
  border-color: #1E7A46;
  box-shadow: 0 0 0 3px rgba(30, 122, 70, 0.18);
  outline: 2px solid #1E7A46;
  outline-offset: 2px;
}

label {
  font-weight: 600;
  color: #111827;
}

button[type="submit"] {
  background-color: #1E7A46;
  color: #FFFFFF;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
}

button[type="submit"]:hover {
  background-color: #14572F;
}

À remplacer : #1E7A46 par votre couleur principale, #D0D5DD par la couleur de bordure des champs au repos. Le bloc :focus gère l'apparence du champ quand le visiteur est en train d'y écrire : vérifiez son contraste et sa visibilité au clavier, puis contrôlez séparément les cases à cocher et radios exclues du sélecteur, ainsi que le rendu particulier des champs de date et des messages d’erreur.

Recette 7 : personnaliser une FAQ en accordéon

Ce que ça fait : applique votre police, votre taille et vos couleurs aux questions et aux réponses de l'élément FAQ, que les réglages natifs ne couvrent pas entièrement.

Où le coller : CSS personnalisé de la page qui contient la FAQ.

#faq-XXXXXXXX .hl-faq-child-heading-text {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  color: #111827 !important;
}

#faq-XXXXXXXX .hl-faq-child-item-text p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  color: #4B5563 !important;
}

À remplacer : l'identifiant de votre élément FAQ, le nom de la police et les deux couleurs. Le premier bloc gère les questions, le second les réponses.

Recette 8 : utiliser une police personnalisée

Ce que ça fait : impose une police à tous les titres et une autre à tous les textes courants, y compris sur les éléments qui ne proposent pas de sélecteur de police.

Où le coller : CSS personnalisé de la page, ou paramètres du funnel ou du site pour l'appliquer partout.

Pour une police disponible sur Google Fonts :

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@400;600&display=swap');

h1, h2, h3 {
  font-family: 'Playfair Display', serif !important;
}

p, span, a, li {
  font-family: 'Montserrat', sans-serif !important;
}

Comment obtenir votre ligne d'import : rendez-vous sur fonts.google.com, cherchez votre police, cliquez sur Get font, puis Get embed code, puis sélectionnez l'option @import. Copiez l'adresse entre parenthèses et remplacez celle du code ci-dessus.

Pour une police déjà enregistrée et chargée sur la page, utilisez son nom exact. Le simple téléversement d’un fichier ne prouve pas qu’il est chargé : vérifiez son insertion via le sélecteur natif ou une déclaration @font-face adaptée, avec une police de secours.

h1, h2, h3, p, span, a, li {
  font-family: 'nom-de-votre-police' !important;
  font-weight: normal;
  font-style: normal;
}

La marche à suivre pour le téléversement est décrite dans l'article importer des fichiers de police dans la Bibliothèque Média. Le nom à utiliser dans le CSS est celui affiché dans le sélecteur de police du constructeur, à la lettre près.

Recette 9 : changer la couleur des icônes de réseaux sociaux

Ce que ça fait : inspectez d’abord le format des icônes sociales. Une image bitmap, un SVG et une police d’icônes ne se recolorent pas de la même manière. On passe par un filtre, qui transforme la couleur d'origine.

Où le coller : CSS personnalisé de la page ou du site.

#social-icons-XXXXXXXX {
  filter: invert(43%) sepia(67%) saturate(500%) hue-rotate(90deg) brightness(95%) contrast(95%);
}

Comment procéder : un filtre ne se calcule pas, il se règle à tâtons. Modifiez hue-rotate pour faire tourner la teinte, saturate pour l'intensité, brightness pour la clarté, puis sauvegardez et regardez le résultat. Contrôlez toutes les icônes et les autres contenus inclus dans le sélecteur ; un filtre appliqué au conteneur peut modifier tout son rendu.

4. Les précautions à connaître avant de commencer

Trois réflexes qui vous éviteront la quasi-totalité des mauvaises surprises.

Testez sur mobile avant de publier

Plus de la moitié de vos visiteurs verront votre page sur un téléphone. Le constructeur propose une prévisualisation mobile : utilisez-la après chaque ajout de CSS, en particulier pour les recettes qui touchent aux tailles et aux espacements. Une modification impeccable sur ordinateur peut faire déborder un titre ou coller deux blocs sur un écran de 5 pouces.

N'abusez pas du !important

Le !important modifie la priorité d’une déclaration dans la cascade ; il ne gagne pas universellement contre toutes les autres règles importantes, origines ou couches. Il est parfois indispensable, notamment pour les couleurs et les polices que le constructeur réapplique de son côté. Mais si vous en mettez partout, plus rien ne peut être corrigé : votre CSS se met à se battre contre lui-même et vous ne savez plus quelle ligne gagne. La bonne méthode consiste à écrire la règle sans !important, à sauvegarder, puis à ne l'ajouter que si l'effet ne se produit pas.

Une modification à la fois

Ajoutez une recette, sauvegardez, regardez. Puis la suivante. Si vous collez huit blocs d'un coup et que le rendu part de travers, vous n'aurez aucun moyen de savoir lequel est en cause.

Questions fréquentes