Média - Image

Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Image vers le conteneur cible.

Vous pouvez ajouter une image à une ligne, une colonne ou un onglet. Dans l’exemple suivant, l’image est glissée sur une colonne vide.

{width="600" modal="regular"}

Utilisez l’une des méthodes suivantes pour ajouter la ressource image :

{width="500" modal="regular"}

• ​ Charger une nouvelle image ​ : utilisez cette méthode pour charger un nouveau fichier image à partir de votre système.

  • Cliquez sur Upload Image.

  • Recherchez et choisissez l’image à ajouter au conteneur galerie et cible.

  Vous pouvez également faire glisser un fichier image de votre système et le déposer sur l’icône Appareil photo ( {width="20"} ).

• ​ Sélectionner une ressource existante ​ : utilisez cette méthode pour sélectionner une ressource image existante dans la galerie ou le stockage de médias.

  • Cliquez sur Select from Gallery.

  • Utilisez l’arborescence pour accéder à l’image.

  • Cliquez sur la miniature, puis sur Add Selected.

    {width="600" modal="regular"}

• ​ Rechercher et sélectionner une image Adobe Stock ​ : utilisez cette méthode pour rechercher une image dans Adobe Stock.

  note note
  NOTE
  Cette méthode nécessite une intégration Adobe Stock configurée pour votre administrateur.

  • Cliquez sur Search Adobe Stock et recherchez une image.

  • Enregistrez l’aperçu ou l’image sous licence dans la galerie.

    Voir Utilisation d’images Adobe Stock pour plus d’informations sur l’utilisation des ressources Adobe Stock.

  • Sélectionnez la miniature de la ressource dans la galerie et cliquez sur Add Selected.

L’image s’affiche dans le conteneur cible à l’emplacement de l’espace réservé. Contrairement à une image d’arrière-plan, vous pouvez déplacer l’image vers un autre emplacement au sein du conteneur actif ou vers un autre conteneur.

{width="500" modal="regular"}

Pointez sur le conteneur d’image pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
Le nom, les dimensions et la taille du fichier s’affichent sous l’image actuelle.

{width="600" modal="regular"}

Pour modifier le Image actuel, effectuez l’une des opérations suivantes :

• ​ Charger une nouvelle image ​ : utilisez cette méthode pour charger un nouveau fichier image à partir de votre système.

  • Cliquez sur Upload Image.

  • Recherchez et choisissez l’image à ajouter au conteneur galerie et cible.

• ​ Sélectionner une ressource existante ​ : utilisez cette méthode pour sélectionner une ressource image existante dans la galerie ou le stockage de médias.

  • Cliquez sur Select from Gallery.

  • Utilisez l’arborescence pour accéder à l’image.

  • Cliquez sur la miniature, puis sur Add Selected.

    {width="600" modal="regular"}

• Rechercher et sélectionner une image Adobe Stock : utilisez cette méthode pour rechercher une image dans Adobe Stock.

  note note
  NOTE
  Cette méthode nécessite une intégration Adobe Stock configurée pour votre administrateur.

  • Cliquez sur Search Adobe Stock et recherchez une image.

  • Enregistrez l’aperçu ou l’image sous licence dans la galerie.

    Voir Utilisation d’images Adobe Stock pour plus d’informations sur l’utilisation des ressources Adobe Stock.

  • Sélectionnez la miniature de la ressource dans la galerie et cliquez sur Add Selected.

Pour ajouter une Mobile Image, utilisez les mêmes méthodes que celles décrites à l’étape précédente pour sélectionner une image à utiliser pour l’affichage sur les appareils mobiles.

{width="600" modal="regular"}

Si nécessaire, spécifiez un Link pour l’image.

Le lien est la page de destination qui s’affiche lorsque le client clique sur l’image. Vous pouvez utiliser l’un des trois types de liens suivants :

• URL - Liens vers une URL relative ou complète.

• Product : identifie la page de destination en fonction du nom du produit ou du SKU. Recherchez le produit par nom en fonction d’un nom partiel ou complet. Choisissez le produit dans la liste des résultats de la recherche.

  {width="600" modal="regular"}

• Category - Identifie la page de destination en tant que catégorie ou sous-catégorie spécifique dans l’arborescence des catégories. Recherchez la catégorie en fonction d’un nom partiel ou complet. Sélectionnez la catégorie dans la section développée de l’arborescence affichée.

  {width="600" modal="regular"}

• Page - Identifie la page de destination en tant que page de contenu spécifique. Recherchez la page en fonction d’un nom partiel ou complet. Sélectionnez la page dans la liste des résultats de la recherche.

  {width="600" modal="regular"}

Si vous souhaitez empêcher le visiteur de quitter votre boutique, cochez la case Open in new tab . Lorsque la case à cocher est désactivée, la destination liée s’ouvre dans le même onglet du navigateur, ce qui peut efficacement éloigner le visiteur de votre magasin.

Pour ajouter un Image Caption, saisissez le texte qui doit apparaître sous l’image.

Le format de la légende est déterminé par la feuille de style associée au thème actif.

La légende s’affiche généralement sous l’image et fournit des informations sur l’image à l’intention des visiteurs et des moteurs de recherche. Si votre site est disponible dans plusieurs langues, vous pouvez utiliser la même image, mais traduire la légende. Dans HTML, la balise <figcaption> est un sous-ensemble de la balise <figure> . <figcaption>This is the image caption</figcaption>

Mettez à jour l’un des autres paramètres si nécessaire :

• Optimisation du moteur de recherche
• Avancé

Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Pointez sur le conteneur d’image pour afficher la boîte à outils et sélectionnez l’icône Déplacer ( {width="20"} ).

{width="500" modal="regular"}

Sélectionnez l’image et faites-la glisser vers sa nouvelle position, juste en dessous de la ligne directrice rouge.

{width="500" modal="regular"}

Pointez sur le conteneur d’image pour afficher la boîte à outils et sélectionnez l’icône Supprimer ( {width="20"} ).

Lorsque vous êtes invité à confirmer, cliquez sur OK.