Ajoutez un dégradé à la bannière principale à l'aide de code personnalisé.

Un dégradé superposé peut améliorer l'apparence visuelle de votre bannière principale et mettre en valeur le contenu placé par-dessus, comme par exemple un Titre, Bloc de texte, Bouton—plus facile à lire.

À propos de l'élément Bannière du héros

Le Bannière de héros un élément Dans GemPages, l'élément <div> est couramment utilisé pour créer une section large et attrayante en haut d'une page. Il comprend généralement une image ou une couleur de fond avec du contenu affiché par-dessus.

Si l'arrière-plan de votre bannière principale a besoin de plus de contraste ou d'un aspect plus soigné, vous pouvez appliquer une superposition de dégradé à l'aide de code personnalisé.

Comment ajouter un dégradé en utilisant du code personnalisé

Étape 1 : Ouvrez le panneau Code personnalisé

Dans l'éditeur GemPages, repérez le Bannière de héros élément que vous souhaitez personnaliser.

Puis, clic droit sur l'élément Bannière du héros et sélectionnez Code personnalisé.

Étape 2 : Collez le code CSS

Collez le code suivant dans le Code personnalisé boîte.

ElementClass .hero-banner-bg:after {

  contenu: "";

  position: absolue;

  top: 0;


  gauche: 0;

  right: 0;


  bottom: 0;


  arrière-plan : dégradé linéaire (45°, #253956, transparent) !important ;

}

Étape 3 : Remplacer les valeurs d’espace réservé

Avant d'enregistrer le code, remplacez les valeurs d'espace réservé par vos paramètres préférés.

• Remplacer ElementClass

ElementClass est un espace réservé pour la classe réelle de votre élément de bannière de héros.

Remplacez-le par la classe de votre bannière de héros.

• Personnalisez le dégradé

La ligne suivante contrôle l'apparence du dégradé :

arrière-plan : dégradé linéaire (45°, #253956, transparent) !important ;

Vous pouvez personnaliser les valeurs suivantes :

Étape 4 : Enregistrez vos modifications

Après avoir mis à jour le code avec le nom de classe et les paramètres de dégradé de votre choix, enregistrez le code personnalisé.

Prévisualisez votre page pour vous assurer que le dégradé s'affiche correctement.