Comment créer des dégradés dynamiques dans WordPress

Les dégradés dynamiques peuvent transformer complètement l'apparence de votre site WordPress en ajoutant profondeur, mouvement et modernité. Dans cet article, nous allons explorer différentes techniques pour créer des dégradés attrayants et interactifs.

Les bases des dégradés CSS

Les dégradés CSS permettent de créer des transitions fluides entre plusieurs couleurs. Il existe trois types principaux de dégradés :

Dégradé linéaire

background: linear-gradient(direction, color1, color2);

Dégradé radial

background: radial-gradient(shape, color1, color2);

Dégradé conique

background: conic-gradient(from angle, color1, color2);

Remarque importante

Assurez-vous toujours d'inclure les préfixes de navigateur pour une compatibilité maximale, bien que les navigateurs modernes prennent en charge les dégradés CSS sans préfixes.

Créer des dégradés dynamiques avec CSS

Pour rendre vos dégradés dynamiques et interactifs, vous pouvez utiliser les animations CSS et les transitions. Voici trois exemples que vous pouvez facilement intégrer dans votre site WordPress :

1. Dégradé animé avec changement de position

Effet de mouvement


<div style="position: relative; height: 200px; overflow: hidden; border-radius: 8px;">
  <div style="position: absolute; inset: 0; background: linear-gradient(90deg, #6366F1, #EC4899, #6366F1); 
       background-size: 200% 100%; animation: gradientMove 5s ease infinite; 
       display: flex; align-items: center; justify-content: center;">
    <h3 style="color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.3); font-size: 1.8rem;">
      Votre texte ici
    </h3>
  </div>
</div>

<style>
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>

2. Dégradé interactif au survol

Survolez-moi

(Cette démonstration fonctionne mieux sur votre site)


<div style="padding: 2rem; background: linear-gradient(45deg, #6366F1, #3b82f6); 
     border-radius: 8px; transition: all 0.5s ease; text-align: center;"
     onmouseover="this.style.background='linear-gradient(45deg, #EC4899, #6366F1)'" 
     onmouseout="this.style.background='linear-gradient(45deg, #6366F1, #3b82f6)'">
  <h3 style="color: white; margin: 0;">Survolez-moi</h3>
</div>

3. Dégradé avec effet de rotation

Effet de rotation


<div style="position: relative; height: 200px; overflow: hidden; border-radius: 8px;">
  <div style="position: absolute; inset: 0; 
       background: conic-gradient(from 0deg at 50% 50%, #6366F1, #EC4899, #6366F1); 
       animation: rotateConic 10s linear infinite; 
       display: flex; align-items: center; justify-content: center;">
    <div style="background-color: rgba(16, 20, 54, 0.7); padding: 1rem 2rem; border-radius: 8px;">
      <h3 style="color: white; margin: 0;">Votre contenu ici</h3>
    </div>
  </div>
</div>

<style>
@keyframes rotateConic {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

Intégration des dégradés dans Elementor

Il existe deux façons principales d'intégrer des dégradés dynamiques dans Elementor :

Méthode 1 : HTML personnalisé

Ajoutez un widget "HTML" dans Elementor
Collez votre code avec le CSS inline
Assurez-vous d'ajouter les animations dans une balise <style>

Méthode 2 : CSS personnalisé

Utilisez les widgets normaux d'Elementor
Ajoutez des classes CSS personnalisées
Insérez le CSS dans l'éditeur CSS d'Elementor

Exemple d'intégration dans Elementor

Voici comment créer un bouton avec un dégradé dynamique au survol :


<a href="#" class="gradient-button" style="display: inline-block; padding: 1rem 2rem; 
   background: linear-gradient(90deg, #6366F1, #EC4899); border-radius: 50px; 
   color: white; text-decoration: none; font-weight: bold; 
   transition: all 0.3s ease; background-size: 200% auto;"
   onmouseover="this.style.backgroundPosition='right center'" 
   onmouseout="this.style.backgroundPosition='left center'">
  Bouton avec dégradé
</a>

Utilisation des variables CSS

Créez des dégradés personnalisables avec des variables CSS :


:root {
  --gradient-start: #6366F1;
  --gradient-end: #EC4899;
}

.dynamic-gradient {
  background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
  transition: --gradient-start 0.5s, --gradient-end 0.5s;
}

Utilisez JavaScript pour modifier les variables en temps réel.

Dégradés avec mélange de modes


<div style="position: relative;">
  <div style="position: absolute; inset: 0; 
       background: linear-gradient(45deg, #6366F1, #EC4899); 
       mix-blend-mode: overlay;"></div>
  <img src="votre-image.jpg" alt="Exemple" style="width: 100%; height: auto;">
</div>

Dégradés SVG animés


<svg width="300" height="200">
  <defs>
    <linearGradient id="svgGradient">
      <stop offset="0%" stop-color="#6366F1"/>
      <stop offset="100%" stop-color="#EC4899"/>
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#svgGradient)">
    <animate attributeName="x" from="-100%" to="100%" dur="5s" repeatCount="indefinite"/>
  </rect>
</svg>