Le widget  vous permet d’ajouter une zone d’image qui combine une image avec un titre et du texte, qui est souvent utilisé dans les sections Fonctionnalités, au lieu d’utiliser le widget Zone d’icônes .

Contenu

  1. Choisir une image : sélectionnez une image dans la bibliothèque multimédia ou téléchargez une nouvelle image
  2. Taille de l’image : sélectionnez la taille de l’image, de la miniature au plein, ou entrez une taille personnalisée
  3. Titre et description : ajoutez le titre et la description qui apparaîtront dans la zone d’image
  4. Lien vers : saisissez l’URL du lien de l’élément. Cliquez sur le rouage Options de lien pour ajouter rel = nofollow au lien ou pour ouvrir le lien dans une nouvelle fenêtre.
  5. Position de l’image : définissez la position de l’image à gauche, en haut ou à droite, par rapport au titre et à la description (sur la vue mobile, elle restera centrée).
  6. Balise HTML du titre : définissez la balise HTML du titre sur H1 … H6, div, span ou paragraph

Style

Image

  1. Espacement : définissez l’espace exact entre l’image et le titre
  2. Largeur : redimensionne la largeur de l’image de 0 à 100%
  3. Animation de survol : ajouter une animation de survol à l’image
  4. Filtres CSS : ajustez le style de l’image en modifiant les échelles de filtre CSS pour les paramètres de flou, de luminosité, de contraste, de saturation et de teinte dans les états Normal et Survol
  5. Opacité : contrôlez l’opacité de l’image dans les états Normal et Survol
  6. Durée de la transition : définissez le temps nécessaire à chaque diapositive pour apparaître. Cette durée est en millisecondes, donc 1000 ms équivaut à 1 seconde

Contenu

  1. Alignement : alignez le contenu à gauche, à droite, au centre ou justifié
  2. Alignement vertical : alignez le contenu sur le haut, le milieu ou le bas de la boîte

Titre

  1. Espacement : définissez l’espace entre le titre et la description
  2. Couleur : définir la couleur du titre
  3. Typographie : définissez les options de typographie pour le titre

La description

  1. Couleur : définissez la couleur du texte de description
  2. Typographie : définissez les options de typographie pour la description

Avancée

Définissez les options avancées applicables à ce widget

Source : https://docs.elementor.com/article/90-image-box