Utiliser l’IA pour générer du code

Rechercher
Imprimer

Utiliser l’IA pour générer du code

Le CMS AI Companion peut générer automatiquement du code CSS, HTML et JavaScript.

Les applications possibles sont nombreuses et variées. Vous pouvez par exemple demander à l’IA de générer le code CSS pour appliquer une mise en forme particulière ou pour animer des Blocs selon le déroulé que vous souhaitez.

Vous avez accès au code généré et vous pouvez le compléter et l’améliorer pour répondre exactement à vos besoins. Le code généré n’est pas toujours totalement exact mais il vous donne dans tous les cas une base de départ solide pour obtenir le résultat attendu.

Nous vous donnons ici quelques exemples mais les possibilités sont virtuellement illimitées.

Générer des animations avec l’IA

Le CMS AI Companion peut générer du code CSS pour animer les Blocs de votre Page et personnaliser leur mise en forme.

Dans l’exemple ci-dessous, l’IA a été utilisée pour :

  • Créer une animation d’entrée pour le Module Texte
  • Appliquer une mise en forme retardée au Module Texte
  • Créer une animation au survol pour les Modules Images

Faites connaissance avec notre équipe

 

Violette

 

Rose

 

Boris

Pour l’animation d’entrée du Module Texte

Depuis la fenêtre des Paramètres du Bloc Ligne ou se trouve le Module Texte :

  1. Cliquez sur l’onglet Avancé
  2. Depuis le volet Personnaliser CSS, cliquez sur CSS de forme libre
  3. Sous CSS, cliquez sur l’icône
  4. Dans la fenêtre qui s’affiche saisissez le texte qui permettra de générer du CSS et d’animer le Bloc Ligne
  5. Cliquez sur le bouton Générer du code
  6. Le code est généré, cliquez sur le bouton Utiliser ce code
  7. Cliquez ensuite sur le bouton pour sauvegarder les modifications et fermer la fenêtre des paramètres de la Ligne.
Pour la mise en forme retardée du Module Texte

Depuis la fenêtre des Paramètres du Bloc Module texte :

  1. Cliquez sur l’onglet Avancé
  2. Depuis le volet Personnaliser CSS, cliquez sur CSS de forme libre
  3. Sous CSS, cliquez sur l’icône
  4. Dans la fenêtre qui s’affiche saisissez le texte qui permettra de générer du CSS et de changer ainsi la couleur du texte après deux secondes d’affichage
  5. Cliquez sur le bouton Générer
  6. Le code est généré, cliquez sur le bouton Utiliser ce code
  7. Cliquez ensuite sur le bouton pour sauvegarder les modifications et fermer la fenêtre des paramètres du Module texte.
Pour l’animation au survol des Modules Images

Depuis la fenêtre des Paramètres du Module image :

  1. Cliquez sur l’onglet Avancé
  2. Depuis le volet Personnaliser CSS, cliquez sur CSS de forme libre
  3. Sous CSS, cliquez sur l’icône
  4. Dans la fenêtre qui s’affiche saisissez le texte qui permettra de générer du CSS et d’animer le Bloc Module image
  5. Cliquez sur le bouton Générer du code
  6. Le code est généré, cliquez sur le bouton Utiliser ce code
  7. Cliquez ensuite sur le bouton pour sauvegarder les modifications et fermer la fenêtre des paramètres du Module image.

Dans l’exemple ci-dessous, l’IA a été utilisée pour ajouter un dégradé à un Module Texte et une animation de fond à la Section.

Appliquer un dégradé des couleurs de l’arc en ciel au texte – Appliquer un dégradé des couleurs de l’arc en ciel au texte – Appliquer un dégradé des couleurs de l’arc en ciel au texte – Appliquer un dégradé des couleurs de l’arc en ciel au texte – Appliquer un dégradé des couleurs de l’arc en ciel au texte

Pour l’ajout d’un dégradé au Module Texte

Depuis la fenêtre des Paramètres du Module Texte :

  1. Cliquez sur l’onglet Avancé
  2. Depuis le volet Personnaliser CSS, cliquez sur CSS de forme libre
  3. Sous CSS, cliquez sur l’icône
  4. Dans la fenêtre qui s’affiche saisissez le texte qui permettra de générer du CSS 
  5. Cliquez sur le bouton Générer
  6. Le code est généré, cliquez sur le bouton Utiliser ce code
  7. Cliquez ensuite sur le bouton pour sauvegarder les modifications et fermer la fenêtre des paramètres du Module texte.

 
Pour l’animation de fond de la Section

Depuis la fenêtre des Paramètres de la Section :

  1. Cliquez sur l’onglet Avancé
  2. Depuis le volet Personnaliser CSS, cliquez sur CSS de forme libre
  3. Sous CSS, cliquez sur l’icône
  4. Dans la fenêtre qui s’affiche saisissez le texte qui permettra de générer du CSS 
  5. Cliquez sur le bouton Générer du Code
  6. Le code est généré, cliquez sur le bouton Utiliser ce Code ou, 
  7. Si le résultat n’est pas satisfaisant,  sous Affiner résultat, vous avez la possibilité d’affiner le résultat en ajoutant du texte, cliquez ensuite sur le bouton Regénérer, puis sur le bouton Utiliser ce Code
  8. Cliquez ensuite sur le bouton pour sauvegarder les modifications et fermer la fenêtre des paramètres de cette Section.