Media - 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"}

• ​ Télé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 sélectionnez l’image à ajouter à la galerie et au conteneur cible.

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

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

  • Cliquez sur Select from Gallery.

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

  • Cliquez sur la miniature et sur Add Selected.

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

• ​ Recherchez et sélectionnez une image Adobe Stock ​ : utilisez cette méthode pour trouver une image à partir d’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.

    Pour plus d’informations sur l’utilisation des ressources Adobe Stock, voir Utilisation d’images Adobe Stock .

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

L’image apparaît 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 une autre position dans le conteneur actif ou vers un autre conteneur.

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

Pointez sur le conteneur d’images 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 apparaissent sous l’image active.

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

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

• ​ Télé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 sélectionnez l’image à ajouter à la galerie et au conteneur cible.

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

  • Cliquez sur Select from Gallery.

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

  • Cliquez sur la miniature et sur Add Selected.

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

• Recherchez et sélectionnez une image Adobe Stock : utilisez cette méthode pour trouver une image à partir d’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.

    Pour plus d’informations sur l’utilisation des ressources Adobe Stock, voir Utilisation d’images Adobe Stock .

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

Pour ajouter un 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. Sélectionnez le produit dans la liste des résultats de 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 selon 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 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écochée, la destination liée s’ouvre dans le même onglet du navigateur, ce qui peut permettre de faire quitter votre boutique au visiteur.

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 apparaît généralement sous l’image et fournit des informations sur l’image aux visiteurs et aux moteurs de recherche. Si votre site est disponible en plusieurs langues, vous pouvez utiliser la même image, mais traduire la légende. En HTML, la balise <figcaption> est un sous-ensemble de la balise <figure>. <figcaption>This is the image caption</figcaption>

Mettez à jour les 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’images 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 jusqu’à sa nouvelle position, juste en dessous de la ligne directrice rouge.

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

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

Lorsque vous êtes invité à confirmer l’opération, cliquez sur OK.