Media - Image

Utilisez le type de contenu Image pour ajouter une image de GIF, de ou PNG à l’ Page Builder étape. Outre l’image de bureau par défaut, vous pouvez spécifier une image secondaire pour les appareils mobiles. Vous pouvez également ajouter une légende qui s’affiche sous l’image et associer l’image à n’importe quelle URL, produit, catégorie ou page.

TIP
Vous pouvez utiliser l’ intégration Adobe Stock pour rechercher et enregistrer une ressource appropriée parmi les millions de ressources fournies par Adobe Stock. Voir Utilisation d’images Adobe Stock pour plus d’informations sur la recherche, l’affinage et l’enregistrement de ressources Adobe Stock dans votre galerie.
NOTE
Si vous apportez des modifications importantes au contenu Page Builder, il est recommandé d’augmenter la durée de vie de la session d’administration afin d’empêcher l’expiration de la session pendant que vous travaillez.

Zone d’outils Image

La boîte à outils d’image s’affiche lorsque vous placez le pointeur de la souris sur le conteneur d’images.

Boîte à outils d’image

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace l’image vers une autre position sur la scène.
(label)
Image
Identifie le conteneur de contenu actuel en tant qu’image. Passez la souris sur le conteneur d’images pour afficher la boîte à outils.
Paramètres
Icône Paramètres {width="25"}
Ouvre la page Modifier l’image où vous pouvez modifier les propriétés de l’image et du conteneur.
Masquer
Icône Masquer {width="25"}
Masque l’image active.
Afficher
Icône Afficher {width="25"}
Affiche l’image masquée.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie de l’image.
Supprimer
Supprimer l’icône {width="25"}
Supprime l’image de la scène.
Charger une nouvelle image
Télécharge une image de votre système de fichiers local vers la galerie.
Sélectionner dans la galerie
Choisit une image existante dans la galerie.
NOTE
Les éléments masqués sont stockés dans la base de données et invisibles pour les clients. Toutefois, ces éléments sont visibles par les moteurs de recherche et d’autres robots qui analysent votre site. Elles sont également renvoyées dans le cadre du contenu si nécessaire par le biais d’un appel API avec un attribut d’invisibilité, sauf si vous les supprimez de l’étape.

Ajout d’une image

  1. 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.

    Faire glisser un type de contenu d’image vers l’étape {width="600" modal="regular"}

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

    Télécharger l’image ou effectuer une sélection à partir des outils de galerie sur l’étape {width="500" modal="regular"}

    note note
    NOTE
    La taille de fichier maximale est de 4 Mo. Les types de fichiers pris en charge sont JPG, GIF et PNG.
    • 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 ( Icône de caméra {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.

        Ajouter une image sélectionnée {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.

    note note
    NOTE
    Les types de contenu Bannière et Curseur incluent également les options Télécharger l’image et Sélectionner dans la galerie pour ajouter des images.

    Image dans une colonne {width="500" modal="regular"}

Modification des paramètres d’image

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

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

  2. 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.

        Ajouter une image sélectionnée {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.

  3. 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.

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

  4. 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.

      Choisir un produit à lier {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.

      Choix d’une catégorie à lier {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.

      Choix d’une page à lier {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.

  5. 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>

  6. Mettez à jour les autres paramètres si nécessaire :

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

Déplacer une image

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

    Déplacement d’une image {width="500" modal="regular"}

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

    Utilisation de la ligne guide rouge pour positionner l'image {width="500" modal="regular"}

Supprimer une image

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

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

Optimisation du moteur de recherche

Le texte de ces paramètres est visible par les moteurs de recherche et améliore la manière dont la page est indexée.

  • Pour Alternative Text, saisissez une description textuelle alt pour les outils d’accessibilité numérique à afficher.

    L’utilisation de texte de remplacement est une bonne pratique en matière d’accessibilité. Elle est requise par la loi dans certains paramètres régionaux. En HTML, l’attribut alt est un sous-ensemble de la balise image : <image title="tooltip" alt="description" src="image.jpg">.

  • Pour Title Attribute, saisissez le texte à afficher sous forme d’info-bulle lorsque vous pointez dessus.

    Il est recommandé de choisir un titre descriptif et riche en mots-clés afin d’améliorer l’indexation de l’image par les moteurs de recherche. En HTML, l’attribut title est un sous-ensemble de la balise image : <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  • Pour contrôler le positionnement horizontal des images ajoutées au conteneur, choisissez un Alignment.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Description
    Default Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif.
    Left Aligne le contenu de l’image le long de la bordure gauche du conteneur d’images, en tenant compte de la marge intérieure spécifiée.
    Center Aligne le contenu de l’image dans le centre du conteneur d’images, en tenant compte de la marge intérieure qui est spécifiée.
    Right Aligne le contenu de l’image le long de la bordure droite du conteneur d’images, en tenant compte de la marge intérieure spécifiée.
  • Définissez le style Border appliqué aux quatre côtés du conteneur d’images :

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Option Description
    Default Applique le style de bordure par défaut spécifié par la feuille de style associée.
    None Ne fournit aucune indication visible des bordures du conteneur.
    Dotted La bordure du conteneur s’affiche sous la forme d’une ligne pointillée.
    Dashed La bordure du conteneur s’affiche sous la forme d’une ligne en pointillés.
    Solid La bordure du conteneur s’affiche sous la forme d’une ligne pleine.
    Double La bordure du conteneur s’affiche sous la forme d’une ligne double.
    Groove La bordure du conteneur s’affiche sous forme de ligne droite.
    Ridge La bordure du conteneur s’affiche sous la forme d’une ligne à droite.
    Inset La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion.
    Outset La bordure du conteneur apparaît comme une ligne de départ.
  • Si vous définissez un style de bordure autre que None, renseignez les options d’affichage de la bordure :

    Couleur de bordure {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Description
    Border Color Définissez la couleur en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente.
    Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure.
    Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure.
  • (Facultatif) Indiquez les noms de CSS classes dans la feuille de style actuelle à appliquer au conteneur d’images.

    Séparez plusieurs noms de classe par un espace.

  • Saisissez des valeurs, en pixels, pour que Margins and Padding spécifient les marges extérieures et la marge intérieure du conteneur d’images.

    Saisissez chaque valeur correspondante dans le diagramme du conteneur d’images.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Zone de conteneur Description
    Margins Espace vide appliqué au bord extérieur de tous les côtés du conteneur.
    Padding Espace blanc appliqué au bord intérieur de tous les côtés du conteneur.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d