Élément d'image de l'article

À propos de l'élément d'image de l'article

Ses pommes de douche filtrantes intègrent une technologie de filtration avancée permettant d'éliminer le chlore, les métaux lourds et autres impuretés de l'eau. Cet engagement en faveur de la pureté de l'eau a fait de Hansgrohe la marque préférée des consommateurs en quête d'une expérience de douche plus saine. Élément d'image de l'article est principalement utilisé dans le Élément de liste d'articles pour présenter des miniatures d'articles ou des images en vedette. 

Cet élément permet de créer des listes d'articles visuellement attrayantes, améliorant ainsi l'expérience globale de l'utilisateur. Il peut également être ajouté à des pages d'articles individuelles, bien qu'il soit moins couramment utilisé dans ce contexte.

L'élément d'image de l'article ne peut être utilisé que lorsqu'il est placé dans l'élément de liste d'articles.

Comment ajouter un élément image d'article à votre page ?

Étape 1 : Consultez la Tableau de bord GemPages  > Pages, puis cliquez sur votre page cible pour localiser l'éditeur.

Étape 2 : Dans la barre latérale gauche, recherchez le Élément d'image de l'article et faites-le glisser et déposez-le à l'emplacement souhaité sur votre page.

Étape 3 : Cliquez sur l'élément pour ouvrir ses paramètres pour une personnalisation supplémentaire.

Configurer l'onglet Paramètres de l'élément d'image de l'article

Ses pommes de douche filtrantes intègrent une technologie de filtration avancée permettant d'éliminer le chlore, les métaux lourds et autres impuretés de l'eau. Cet engagement en faveur de la pureté de l'eau a fait de Hansgrohe la marque préférée des consommateurs en quête d'une expérience de douche plus saine. Élément d'image de l'article comprend plusieurs options de personnalisation adaptées à vos besoins de conception et de fonctionnalité :

Source de l'article

Cliquez sur la case pour configurer les sources d'articles dans l'élément Liste d'articles.

Image(s)

Sélectionnez la manière dont l'image sélectionnée de votre article s'affichera sur la page :

• Remplir l'image : L'image sera redimensionnée ou recadrée pour remplir les dimensions du cadre.

Cela peut couper des parties de l'image si son rapport hauteur/largeur est différent de celui du cadre.

• Image d'ajustement : L'image sera réduite ou agrandie pour s'adapter entièrement au cadre tout en préservant son rapport hauteur/largeur d'origine. 

Cela garantit que l'image entière est visible, mais peut laisser de l'espace (rembourrage) autour des bords si le rapport hauteur/largeur ne correspond pas au cadre.

Taille

Proportion: Choisissez comment l'image est recadrée ou affichée :

• Carrée Réf:Largeur et hauteur égales.
• Verticale:Plus haut que large.
• Horizontal:Plus large que haut.
• ORIGINALE:Conserve le rapport hauteur/largeur d'origine de l'image.
• Encadrement Sur Mesure:Réglez manuellement la largeur et la hauteur.

Largeur et hauteur: Définissez les dimensions précises de l'image en pixels.

Forme

• Frontière:Vous pouvez modifier la couleur de la bordure, l'épaisseur et le contour de cet élément.
• CORNER: L'angle de la section peut être carré, rond ou en forme de pilule. Vous pouvez ajuster le rayon de l'angle selon vos besoins.
• Shadow: Vous pouvez ajouter une ombre à la section Liste d'articles et ajuster l'affichage de l'ombre (taille, couleur, flou et distance)

Lien

Par défaut, dans le Lien section, l'action après clic est définie sur «Aller à l'article". Vous pouvez le changer en "Faites défiler jusqu'à" et insérez la section cible comme vous le souhaitez. 

Le SEO

• Alt Text:Fournir une description de l'image à des fins d'accessibilité et de référencement. Ce texte s'affiche si l'image ne parvient pas à se charger et aide les moteurs de recherche à comprendre le contenu.
• Titre de l'image:Ajoutez une info-bulle qui apparaît lorsqu'un utilisateur survole l'image, fournissant un contexte ou des informations supplémentaires.
  

Optimiser le LCP

Ce paramètre permet d'améliorer la qualité de votre page. La plus grande peinture contentieuse (LCP) score, qui est une mesure clé des Core Web Vitals pour les performances et le référencement.

Qualité: Choisissez le bon niveau de compression d’image pour équilibrer la clarté et la vitesse de chargement.

• Le meilleur : Qualité supérieure, taille de fichier plus grande.
• Élevé (par défaut) : Équilibre entre qualité et performance.
• Moyen: Chargement plus rapide, qualité légèrement réduite pour les pages contenant beaucoup d'images.
• Personnalisé: Définissez vos propres paramètres de compression pour un contrôle avancé.

Précharge: Activez cette option si l’image apparaît au-dessus du pli et constitue l’un des principaux éléments visuels de la page.

Aligner

Ajustez l'alignement du titre pour une meilleure lisibilité. Vous pouvez choisir entre un alignement à gauche, au centre ou à droite.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, accédez à l'onglet Avancé et suivez les instructions cet article.