Mettre du texte sur l'image

Dans GemPages v7, vous pouvez placer du texte sur une image en utilisant un Bannière de héros élément ou un Rangée .

Méthode 1 : Utilisation de l'élément Bannière du héros

L'élément Hero Banner est conçu pour créer des bannières Hero ou des bannières de collection percutantes qui renvoient vers des pages de collection, entre autres cas d'utilisation.

Par défaut, il propose des préréglages qui vous permettent de définir un arrière-plan et de modifier le texte sur l'image d'arrière-plan. Cela en fait une solution idéale pour les situations où du texte doit être placé sur une image.

Étape 1 : Accédez à l'éditeur GemPages

Depuis le tableau de bord GemPages, accédez à Pages, et cliquez sur la page cible pour ouvrir le éditeur.

Dans la barre latérale gauche, recherchez le Bannière de héros élément sous le Médiathèque section, puis faites-la glisser et déposez-la à n'importe quelle position sur votre page.

Étape 2 : Téléchargez et modifiez votre image

• Cliquez sur l'élément pour ouvrir le Paramètres panneau. Faites défiler vers le bas jusqu'à Présentation section et cliquez sur le Image(s) champ.

• En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Source, passez la souris sur l'image d'exemple et cliquez Télécharger l'image pour télécharger votre image. Si vous l'avez téléchargée dans la section Fichiers de Shopify, sélectionnez Parcourir la bibliothèque.

• Modifiez les paramètres de l'image selon vos préférences. Consultez cet article pour plus de détails sur la configuration de l'arrière-plan de votre image dans la bannière Hero.

Pour améliorer la lisibilité, vous pouvez appliquer une superposition :

• Dans la section Arrière-plan, cliquez sur Afficher plus, et localisez le Recouvrir option.
• Choisissez une couleur foncée (par exemple, noir ou gris foncé).
• Ajustez le curseur Opacité jusqu'à ce que le texte se détache clairement de l'arrière-plan.

Cela crée une couche sombre subtile sur l'image, rendant le texte plus facile à lire tout en gardant l'arrière-plan visuellement attrayant.

Étape 3 : Personnalisez le bloc de texte

Cliquez sur l'élément Bloc de texte pour afficher sa configuration. Personnalisez ensuite la police, la taille et la couleur du texte directement depuis le panneau de configuration pour qu'il se démarque de l'image.

Pour un guide complet sur les paramètres de Hero Banner, consultez cet article.

Méthode 2 : Utilisation de l'élément Row

Étape 1:Dans l'éditeur, faites glisser et déposez un Rangée élément de la barre latérale gauche de votre page.

Pour comprendre Row Element en profondeur, consultez cet article.

Étape 2: Dans le panneau des paramètres, faites défiler jusqu'à l'option Présentation section et cliquez sur le Image(s) champ.

Étape 3 : Définissez une image comme arrière-plan pour toute la ligne. Vous pouvez choisir parmi les fichiers Shopify (Parcourir la bibliothèque) ou télécharger un nouveau.

Ensuite, ajustez le en échelon position, choisissez l'image type de répétition l'attachement, et activer/désactiver le pré-charge fonctionnalité pour optimiser LCP.

Étape 3: Faites glisser et déposez un Bloc de texte élément à l'intérieur de cette ligne pour créer le texte sur votre image.

Étape 4 : Modifiez le texte comme vous le souhaitez.

Bannière de héros contre rangée

Les deux options peuvent répondre efficacement à vos besoins, mais l'utilisation de la bannière Hero est généralement plus rapide et plus simple. En revanche, l'utilisation de Rangée L'élément offre plus de flexibilité pour certains cas d'utilisation spécifiques.

Pratiques d'excellence

• Maintenir le contraste : Assurez-vous toujours que la couleur du texte contraste fortement avec l’image d’arrière-plan.
• Utiliser des superpositions : Appliquez des superpositions sombres sur des images lumineuses pour améliorer la lisibilité du texte.
• Test mobile : Prévisualisez votre conception sur des écrans plus petits pour confirmer que le texte reste clair.
• Gardez le texte concis : Limitez la quantité de texte sur les images pour une meilleure lisibilité.