Liste avancée

Qu'est-ce que l'élément de liste avancé ?

GemPages propose deux éléments pour afficher le contenu d'une liste :

• Élément de liste d'articles: Conçu pour les listes simples. Chaque élément commence par un icône (sur le bord gauche de l'écran)Vous pouvez choisir une icône dans la bibliothèque GemPages ou importer la vôtre. Cet élément est idéal pour afficher des informations concises telles que les avantages, les caractéristiques ou les points forts d'un produit.
• Élément de liste avancée : Au lieu de se limiter aux icônes, il vous permet d'inclure images à côté de chaque élément de la listevous offre ainsi un meilleur contrôle visuel de la mise en page. Cela le rend idéal pour les cas d'utilisation nécessitant des visuels plus riches, comme la présentation des caractéristiques d'un produit à l'aide d'images, de guides étape par étape ou de comparaisons visuelles. 

Comment ajouter l'élément de liste avancée à votre page

Étape 1: Dans l' Tableau de bord GemPages, sélectionnez votre page pour entrer dans l'éditeur.

Étape 2: Dans l'éditeur, recherchez le Liste avancée élément sous le Liste de contenu section. Faites-la glisser et déposez-la à l'emplacement souhaité sur la page.

Cliquez sur l'élément, vous trouverez la configuration dévoilée sur la barre latérale gauche. 

Configurer l'onglet Paramètres

1. Gestion des articles

Cette section vous permet ajouter, supprimer ou dupliquer des éléments de liste.

• À ajouter un nouvel élément, clique le Icône en double à côté d'un élément existant. Un nouvel élément apparaîtra immédiatement sous l'original.
• À supprimer un élément, clique le Icône de la corbeille sur l'élément que vous souhaitez supprimer, puis confirmez la suppression.

2. Espacement des éléments

L'espace Espacement des éléments Contrôle l'espace vertical entre chaque élément de votre liste. Utilisez le curseur ou la valeur de saisie pour ajuster la distance.

• Réglage par défaut: 12px
• Un espacement plus grand peut rendre la liste plus facile à lire, tandis qu'un espacement plus petit crée une conception plus compacte.

3. Style de l'article

Espace entre les icônes et le texte : Cela ajuste l'espace horizontal entre l'icône (ou l'image) et le texte.

• Réglage par défaut: 12px
• Augmentez l'espace pour une disposition plus ouverte ; réduisez-le pour une apparence plus serrée.

Rembourrage: Ajoute de l'espace autour de chaque élément de la liste.

• Cliquez à nouveau sur Ajouter un rembourrage et entrez le nombre de pixels souhaité.
• Cela garantit que votre contenu ne touche pas les bords de la boîte de l'article.

Présentation: Vous pouvez ajouter un arrière-plan coloré derrière l'élément.

Bordure, coin et ombre:Ces options vous permettent de styliser le conteneur d'éléments.

• Frontière: Choisissez le style (plein, pointillé, pointillé), l'épaisseur et la couleur.
• Coin: Ajustez le rayon de la bordure pour arrondir les coins.
• Ombre: Ajoutez des ombres pour créer de la profondeur ou mettre en valeur des éléments.

4. Taille

Largeur: Contrôle la largeur de la zone de contenu à l'intérieur de l'élément :

• Adapté au contenu : La boîte s'ajuste automatiquement à la taille du contenu.
• Plein: La boîte s'étend jusqu'à 100 % de la largeur du conteneur.

Rembourrage: Ajustez l'espacement entre les bords de la zone de contenu et le contenu à l'intérieur. Cliquez Ajouter un rembourrage et entrez la valeur souhaitée en pixels.

Organiser: Alignez le contenu à l'intérieur de la boîte : Gauche, , ou Des.

• Ce paramètre sera masqué si la largeur est définie sur Auto.
• L'alignement par défaut est à gauche.

5. Contexte

Vous pouvez également définir un arrière-plan pour le élément de liste avancée entier:

• Couleur :

• Image:

6. Forme

• Frontière: Définissez le style de bordure, l’épaisseur et la couleur de l’élément global.
• Coin: Arrondissez les coins de l'élément avec un rayon de bordure.
• Ombre: Appliquez des effets d’ombre pour faire ressortir visuellement la liste.

7. Aligner

Déterminez le positionnement de l'élément sur votre page. Vous avez le choix entre trois options : alignement à gauche, centré et aligné à droite.

Configurer l'onglet Avancé

L'espace Onglet Avancé permet plus de personnalisation :

• Ajouter CSS personnalisé pour styliser votre liste de manières non disponibles dans les paramètres par défaut.
• Adapter visibilité par appareil pour masquer ou afficher la liste sur ordinateur, tablette ou mobile.
• Appliquer animations ou des effets d'interaction pour rendre votre contenu plus dynamique.

Pour une personnalisation plus détaillée, veuillez accéder au Onglet Avancé et suivez les instructions dans cet article.