Paramètres d'arrière-plan et de couleur
Les paramètres d'arrière-plan sont un outil de conception essentiel qui vous permet de contrôler l'apparence de votre site Web. Ils vous permettent de définir le ton visuel de vos pages en appliquant différents styles, tels que des couleurs unies, des dégradés, des images ou des vidéos.
En définissant une couleur d'arrière-plan unie, un dégradé ou une image, vous pouvez créer des mises en page visuellement attrayantes qui améliorent votre image de marque et engagent les visiteurs.
Les paramètres d'arrière-plan vous permettent de définir l'apparence générale de votre page. Avec GemPages, vous pouvez :
- Appliquer couleurs solides pour un style épuré et minimaliste.
- Utilisez le les gradients pour créer des transitions douces et de la profondeur.
- Ajouter simples images. or les vidéos pour rendre votre design plus dynamique.
Définir la couleur de fond
Dans GemPages v7, il est facile d'appliquer une couleur unie ou un dégradé à l'arrière-plan de votre page ou d'une section spécifique.
Définir une couleur d'arrière-plan
Vous pouvez utiliser une couleur d'arrière-plan unie pour un design épuré et précis. C'est l'option la plus simple pour uniformiser les sections et garantir leur lisibilité.
Étape 1 : Sélectionnez l'élément
- Cliquez sur la section, la ligne ou la colonne où vous souhaitez appliquer une couleur d’arrière-plan.
- Ouvrez le Paramètres dans la barre latérale gauche.
Étape 2 : Rechercher les paramètres d’arrière-plan
- Dans le panneau des paramètres, recherchez le Présentation .
- Choisir Couleur et choisissez solide Couleur comme type d'arrière-plan.
Étape 3 : Choisissez une couleur
Vous pouvez définir l'arrière-plan de couleur unie à partir de ces options :
- Cliquez sur le sélecteur de couleurs pour sélectionner une couleur manuellement
- Entrez un code hexadécimal spécifique (par exemple, #FCD6D6)
- Sélectionnez une couleur parmi les échantillons de couleurs
- Choisissez parmi Couleurs récentes or Suggéré pour vous listes.
Définir un dégradé d'arrière-plan
Un arrière-plan dégradé permet de mélanger deux couleurs ou plus pour un effet moderne et dynamique. Il est particulièrement utile pour mettre en valeur des sections clés ou créer des transitions fluides.
Étape 1 : Activer l’arrière-plan dégradé:
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). Paramètres d'arrière-plan, choisissez Couleur et sélectionnez Couleur dégradée comme type d'arrière-plan.
Étape 3 : Personnalisez le dégradé:
- Choisir les couleurs : sélectionnez deux couleurs ou plus pour le dégradé.
- Définir la direction du dégradé : ajustez l'angle du dégradé (par exemple, vertical, diagonal ou radial).
- Ajuster l'opacité: Ajustez les niveaux de transparence des couleurs du dégradé, si nécessaire.
Définir l'image d'arrière-plan
L'ajout d'une image d'arrière-plan peut améliorer l'attrait visuel de votre page en incorporant des textures, des motifs ou des visuels thématiques.
Étape 1 : Activer l’arrière-plan de l’image
Dans l' Présentation , choisissez Image(s) comme type d'arrière-plan.
Étape 2 : Définir l’arrière-plan de l’image
Passez la souris sur l'image actuelle et appuyez sur Télécharger l'image pour télécharger une nouvelle image.
Sinon, vous pouvez choisir parmi votre bibliothèque multimédia (fichiers Shopify) ou coller l'URL de l'image dans la case.
Étape 3 : Ajuster les paramètres de l'image
- Échelle: Ajustez la taille de l'image pour l'adapter à votre mise en page.
- Poste: Choisissez l'alignement de l'image, par exemple au centre, en haut à gauche ou en haut à droite, pour contrôler la façon dont l'image est affichée dans la zone d'arrière-plan.
- Répéter: Décidez si l'image doit être disposée sur l'arrière-plan ou rester une seule instance.
- Pièce jointe: Définissez l'image d'arrière-plan pour qu'elle défile avec la page ou qu'elle reste fixe en place pour un effet de parallaxe.
- Optimiser LCP : Utilisez des images compressées pour maintenir une vitesse de page rapide.
Combiner la couleur et l'arrière-plan de l'image
Vous pouvez améliorer l'esthétique globale de votre conception en combinant une couleur d'arrière-plan avec une image.
La couleur d'arrière-plan apparaîtra sous l'image, ce qui est efficace lorsque vous utilisez une image avec un arrière-plan transparent.
Étape 1 : Ajouter un arrière-plan d'image
- Dans l' Présentation section, sélectionnez Image(s) option.
- Téléchargez ou sélectionnez une image avec un arrière-plan transparent.
Étape 2 : Ajouter un arrière-plan coloré
Pourtant, dans le Présentation Section, cliquez sur le Couleur option. Choisissez une couleur que vous souhaitez afficher derrière l'image.
En associant une couleur d’arrière-plan appropriée à l’image, vous pouvez créer un design harmonieux et visuellement attrayant qui améliore le ton général de votre page.
Définir la vidéo d'arrière-plan
Les arrière-plans vidéo sont un excellent moyen de créer des visuels dynamiques et attrayants pour votre site Web.
Étape 1 : Activer l’arrière-plan vidéo
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). Présentation section, cliquez sur le bouton « Ajouter… » à côté du Vidéo champ pour ouvrir le panneau des paramètres d'arrière-plan vidéo.
Étape 3 : Ajoutez une vidéo à utiliser comme arrière-plan
Extrait du Source Dans le champ, sélectionnez la source à laquelle joindre votre vidéo. Deux options s'offrent à vous :
- YouTube: Sélectionnez une vidéo YouTube à lire comme vidéo d’arrière-plan.
- Hébergement vidéo : Choisissez une vidéo téléchargée à partir des fichiers Shopify.
Collez le URL de la vidéo pour intégrer la vidéo et en faire l'arrière-plan.
Vous pouvez changer le Boucle vidéo sur Oui pour activer la fonction de boucle.
Plus d'options de personnalisation
Pour des arrière-plans vidéo avancés avec plus de contrôle sur les superpositions, le texte et les boutons d'appel à l'action, pensez à utiliser l'un des éléments suivants :
- Suivre cet article pour personnaliser l'arrière-plan de votre vidéo à l'aide d'un Bannière de héros.
- Si vous préférez le Bannière vidéo élément, en savoir plus ici.
Merci pour vos commentaires