Media - Image

Dernière mise à jour : 2023-11-28
  • Créé pour :
  • Beginner
    Intermediate
    User

Utilisez la variable Image type de contenu pour ajouter une image de JPG, de GIF ou PNG à la variable 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.

CONSEIL

Vous pouvez utiliser la variable Intégration Adobe Stock pour rechercher et enregistrer une ressource appropriée parmi les millions fournis 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.

REMARQUE

Si vous apportez des modifications importantes à la variable Page Builder , il est recommandé d’augmenter le nombre de Durée de vie de la session d’administration pour 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.

Zone d’outils Image
Outil Icône Description
Déplacer Icône Déplacer 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 Ouvre la Modifier l’image dans laquelle vous pouvez modifier les propriétés de l’image et du conteneur.
Masquer Icône Masquer Masque l’image active.
Afficher Icône Afficher Affiche l’image masquée.
Dupliquer Icône Dupliquer Effectue une copie de l’image.
Supprimer Icône Supprimer 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.
REMARQUE

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 Page Builder panneau, développer Media et faites glisser un Image balise d’emplacement du 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 sur la scène
  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
    REMARQUE

    La taille de fichier maximale est de 4 Mo. Les types de fichiers pris en charge sont JPG, GIF et PNG.

    • 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 le Appareil photo ( Icône Appareil photo ).

    • Sélectionner une ressource existante: utilisez cette méthode pour sélectionner une ressource image existante dans le stockage/la galerie multimédia.

      • Cliquez sur Select from Gallery.

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

      • Cliquez sur la miniature, puis sur Add Selected.

        Ajouter une image sélectionnée
    • Rechercher et sélectionner une image Adobe Stock: utilisez cette méthode pour trouver une image à partir d’Adobe Stock.

      REMARQUE

      Cette méthode requiert une Intégration d’Adobe Stock configuré 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, puis 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.

    REMARQUE

    La variable Bannière et Curseur les types de contenu incluent également : Télécharger l’image et Sélectionner dans la galerie pour ajouter des images.

    Image dans une colonne

Modification des paramètres d’image

  1. Passez la souris sur le conteneur d’images pour afficher la zone d’outils et sélectionnez l’option Paramètres (Icône Paramètres ).
    Le nom, les dimensions et la taille du fichier apparaissent sous l’image active.

    Image actuelle
  2. Pour modifier la Image, 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 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 image existante dans le stockage/la galerie multimédia.

      • Cliquez sur Select from Gallery.

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

      • Cliquez sur la miniature, puis sur Add Selected.

        Ajouter une image sélectionnée
    • Rechercher et sélectionner une image Adobe Stock: utilisez cette méthode pour trouver une image à partir d’Adobe Stock.

      REMARQUE

      Cette méthode requiert une Intégration d’Adobe Stock configuré 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, puis cliquez sur Add Selected.

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

    Image mobile
  4. Si nécessaire, indiquez une 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.

      Choix d’un produit à lier
    • 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
    • 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

    Si vous souhaitez empêcher le visiteur de quitter votre boutique, sélectionnez la variable 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 une Image Caption, saisissez le texte à afficher 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. Par HTML, la variable <figcaption> est un sous-ensemble de la balise <figure> balise . <figcaption>This is the image caption</figcaption>

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

  7. Lorsque vous avez terminé, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

Déplacer une image

  1. Passez la souris sur le conteneur d’images pour afficher la boîte à outils et sélectionnez l’option Déplacer (Icône Déplacer ).

    Déplacement d’une image
  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

Supprimer une image

  1. Passez la souris sur le conteneur d’images pour afficher la boîte à outils et sélectionnez l’option Supprimer ( Icône Supprimer ).

  2. Lorsque vous y êtes invité, 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 alt description textuelle des 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. Par HTML, la variable alt est un sous-ensemble de la propriété image tag : <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. Par HTML, la variable title est un sous-ensemble de la propriété image tag : <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  • Pour contrôler le positionnement horizontal des images ajoutées au conteneur, sélectionnez une Alignment.

    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 la variable Border style appliqué aux quatre côtés du conteneur d’images :

    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 des bordures :

    Couleur de la bordure
    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 des CSS classes de 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 la variable Margins and Padding pour spécifier les marges extérieures et la marge intérieure du conteneur d’images.

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

    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.

Sur cette page