Définir l'arrière-plan de la colonne à l'intérieur de la ligne

L'ajout d'un arrière-plan à une colonne améliore la flexibilité de votre conception, vous permettant de créer des sections visuellement distinctes qui correspondent à l'image de marque de votre boutique. Cela permet de séparer efficacement le contenu, d'améliorer la lisibilité et de mettre en évidence les éléments clés.

Comment définir l'arrière-plan d'une colonne à l'intérieur d'une ligne ?

GemPages prend déjà en charge la définition des couleurs d'arrière-plan pour le Élément de ligne facilement. 

Vous pouvez exploiter cette fonctionnalité pour définir des arrière-plans pour les colonnes dans les lignes en suivant les méthodes simples ci-dessous.

Option 1 : Définition des arrière-plans en imbriquant des lignes dans des colonnes

Étape 1 : Dans l'éditeur, glissez-déposez un élément de ligne depuis la barre latérale gauche. Par exemple, créez une ligne avec trois colonnes.

Étape 2 : Imbriquer une nouvelle ligne dans chaque colonne. Ajouter du contenu à chaque colonne selon vos besoins.

Étape 3 : Cliquez sur chaque ligne imbriquée créée à l'étape 2 pour ouvrir ses paramètres. Faites défiler la page jusqu'à Présentation section et cliquez sur la case à côté de Couleur pour la configuration de la couleur d'arrière-plan.

Remarque : Cette méthode est idéale lorsque les lignes imbriquées ont la même hauteur. Si le contenu de chaque colonne varie en taille, cela peut entraîner des arrière-plans irréguliers.

Option 2 : Définition des arrière-plans des colonnes à l'aide d'un code personnalisé

Cette méthode consiste à ajouter du code personnalisé pour définir la couleur d'arrière-plan de chaque colonne individuellement. 

Suivez les étapes de synthèse:

Étape 1 : Ajoutez une ligne imbriquée dans chaque colonne. Ajoutez du contenu à chaque ligne imbriquée selon vos besoins.

Étape 2 : Faites un clic droit sur l'étiquette de l'élément principal de la ligne et sélectionnez Code personnalisé.

Étape 3 : Dans la boîte de dialogue de l'éditeur de code, recherchez le CSS onglet et ajoutez le code personnalisé suivant :

[data-component-tag="Col"] {

  background-color: #yourdesiredcolor;

}

remplacer #yourdesiredcolor avec le code couleur de votre choix. Par exemple, utilisez le code couleur #FFBAAD et cliquez sur Enregistrer .

Étape 4 : Vérifiez le résultat, enregistrez et publiez pour rendre vos configurations actives.