Dégradés d’arrière-plan pilotés par le CMS dans Webflow

Sur une page CMS, cela semble tout simple : il suffit de choisir les couleurs de départ, d’arrivée et les éventuelles couleurs intermédiaires d’un dégradé dans les réglages de couleur d’arrière-plan. Mais comme on l’apprend à ses dépens quand on se met à Webflow, cela transforme votre dégradé prédéfini en arrière-plan uni, au lieu de simplement remplacer les couleurs par celles définies dans le CMS.

Heureusement, il existe une solution vraiment facile (un dégradé d’arrière-plan dynamique piloté par un champ couleur du CMS), mais je vais commencer par un petit préambule pour expliquer d’où vient cet article.

Bref, nous avons récemment eu un client qui voulait des pages de services pilotées par le CMS pour tous les services qu’il propose, avec une couleur précise attribuée à chaque service. Cette couleur détermine la couleur du texte H1, celle d’un arrière-plan granuleux et bruité où figure un texte défilant, et enfin celle d’un dégradé dans le footer, qui change lui aussi pour prendre la même couleur que le H1 et l’arrière-plan granuleux.

Plusieurs approches sont possibles, mais nous voulions rester simples, pour que l’équipe de la clinique concernée puisse gérer tous les services depuis l’Éditeur en choisissant simplement une couleur, et c’est tout. En même temps, nous avons un footer en symbole : l’idéal était donc de ne rien dissocier et de garder le footer habituel sur les pages CMS, mais avec, à la place du dégradé de couleur primaire, les couleurs secondaires des services.

Après y avoir réfléchi un moment, il s’avère qu’il suffit d’un HTML Embed et d’un peu de code.

Alors, que faut-il ? Il y a notre footer, un symbole dont l’arrière-plan a un dégradé (ce n’est pas obligatoire, mais nous avions un symbole qui avait déjà un dégradé et nous voulions le remplacer sur la page modèle CMS) :

Il faut aussi un élément CMS qui comporte au moins un sélecteur de couleur. Notre footer n’avait besoin que d’une seule couleur, mais vous pouvez en avoir davantage et adapter le code à vos besoins.

Enfin, il nous faut un HTML Embed sur la page avec le code suivant (le mieux est de le placer près du haut de la page) :

Vous pouvez aussi consulter le code dans notre CodePen pour cet article.

Remplacez le nom de l’élément par celui sur lequel vous voulez appliquer le dégradé d’arrière-plan ; notre style s’appelait simplement .footer. Définissez ensuite votre dégradé : le nôtre devait être à 180 degrés et aller du transparent à la couleur sélectionnée. Vous pouvez définir une couleur de départ, d’arrivée et des couleurs intermédiaires, à votre convenance. Ajoutez vos couleurs depuis le menu déroulant + Add Field. Dans le Designer actuel, cliquez sur le point violet qui apparaît à côté de la ligne dans Edit code et choisissez votre champ couleur. Nous avons ajouté un !important pour être sûrs qu’il remplace le style par défaut.

Une fois que vous enregistrez, vous verrez le changement sur l’élément sélectionné :

Voilà, c’est tout, rien de plus. Dites-nous si vous avez des questions en postant un commentaire. Nous préparons une petite vidéo à ce sujet : likez et abonnez-vous pour ne rien manquer de nos prochains contenus.

Questions fréquentes

Pourquoi choisir une couleur CMS transforme-t-il mon dégradé en arrière-plan uni ?

D’après notre expérience, choisir une couleur CMS pour l’arrière-plan donne un arrière-plan uni au lieu de remplacer les couleurs à l’intérieur de votre dégradé. C’est pourquoi nous définissons le dégradé dans un petit HTML Embed, où la couleur CMS se glisse directement dans le code du dégradé.

Puis-je ajouter une superposition en dégradé dynamique sur des images d’arrière-plan CMS ?

Oui, cela devrait fonctionner, car l’embed applique simplement un style à la classe que vous lui indiquez. Placez le dégradé sur un élément de superposition distinct, posé par-dessus l’image, et réglez-le pour aller du transparent à la couleur choisie dans le CMS. Nous avons construit cet article autour d’un footer : testez donc d’abord sur votre propre mise en page.

Puis-je utiliser plusieurs couleurs dans le dégradé ?

Oui. Ajoutez à votre collection un champ couleur pour chaque étape souhaitée, puis insérez chacun dans le code du dégradé de l’embed, y compris les couleurs de départ, d’arrivée et intermédiaires.

Dois-je toucher au symbole du footer ?

Non. Nous avons laissé le symbole tel quel et remplacé son dégradé avec l’embed sur la page modèle CMS, c’est pourquoi le code comporte un !important.

Si vous aimez les astuces CMS comme celle-ci, jetez un œil à nos articles sur la création de spans de texte dans les éléments de texte CMS dynamiques, les vidéos d’arrière-plan pilotées par le CMS dans Webflow, la création d’un bandeau défilant piloté par le CMS et comment briser la grille CMS avec un modèle flexbox. Vous pouvez aussi parcourir nos cloneables Webflow.