Liste d'articles

Qu'est-ce que l'élément de liste d'éléments dans GemPages ?

L'élément Liste d'éléments vous permet de présenter des informations sous forme de liste, chaque élément commençant par une icône. Vous pouvez choisir des icônes dans la bibliothèque GemPages pour une cohérence visuelle optimale, ou, si vous préférez des icônes ou des images personnalisées, utiliser l'icône Élément de liste avancée à la place.

Cet élément est idéal pour :

• Mettre en valeur les caractéristiques du produit
• Liste des avantages ou des points de service
• Présentation des processus étape par étape
• Créer un contenu compact et numérisable

Comment ajouter l'élément Liste d'éléments à votre page

Pour ajouter l'élément Liste d'articles à votre page, veuillez suivre les étapes ci-dessous :

Étape 1 :  De ton Tableau de bord GemPages, sélectionnez la page que vous souhaitez modifier et ouvrez-la dans l'éditeur.

Étape 2 :  Dans l’éditeur, accédez à la section Liste de contenu dans la barre latérale gauche ou recherchez « Liste d’éléments » dans la barre de recherche.

Étape 3 : Faites glisser et déposez l'élément Liste d'éléments à l'emplacement souhaité sur la page.

Configurer les paramètres des éléments d'élément

Une fois l'élément sur votre page, cliquez dessus. La barre latérale gauche affichera deux onglets principaux : Paramètres et Avancé:

L'onglet Paramètres

1. Gestion des articles

Cette section vous permet d'ajouter, de supprimer ou de réorganiser des éléments de la liste :

• Ajouter un élément: Passez la souris sur un élément existant et cliquez sur l’icône Dupliquer pour créer une copie exacte.
• Supprimer un élément: Cliquez sur l'icône Corbeille sur l'élément que vous souhaitez supprimer, puis confirmez.
• Réorganiser les articles: Survolez l'élément que vous souhaitez déplacer, Cliquez et maintenez le bouton de la souris enfoncé., puis Faites glisser vers le haut ou vers le bas Pour modifier sa position dans la liste, cliquez dessus. Relâchez le bouton de la souris lorsque l'élément est à l'endroit souhaité.

2. Icône

• Type d'icône: Type d'icônes de chaque élément de la liste d'éléments. Il y a 2 options de type d'icône :

Icônes correspondantes : toutes les icônes de la liste des éléments seront identiques.

Différentes icônes : Chaque élément de la liste d'éléments possède une icône individuelle.

• Source de l'icône: Sélectionnez l'icône d'affichage

Si le type d'icône = Icônes correspondantes : toutes les icônes de la liste des éléments seront identiques.

Si le type d'icône = Différentes icônes : Chaque élément de la liste d'éléments possède une icône individuelle.

L'utilisateur sélectionne manuellement chaque icône pour chaque élément.

• Taille de l'icône: Saisissez votre taille préférée pour l'icôneLa taille par défaut de l'icône est de 16 px.

• Couleur de l'icône: Choisissez la couleur de votre icône dans la palette ou saisissez le code hexadécimal de la couleur dans la case.

• PostePosition de l'icône par rapport au texte de chaque élément de la liste. Deux options de positionnement sont disponibles : Aligner en haut et Aligner au centre.

• Rembourrage: Ajustez l'espace à l'intérieur du conteneur de l'icône. Cela contrôle la proximité de l'icône avec les bords du conteneur. Augmentez le remplissage pour plus d'espace autour de l'icône ; diminuez-le pour un ajustement plus serré.

• Présentation: Ajoutez un arrière-plan derrière l'icône.

Couleur : Sélectionnez une couleur d’arrière-plan unie ou dégradée.

Image: Téléchargez une image qui apparaîtra derrière l'icône.

• Frontière: Ajoutez une bordure autour du conteneur de l'icône. Vous pouvez définir :

Style de bordure (pleine, pointillée, en pointillés)

Épaisseur de la bordure (en pixels)

Couleur de la bordure

• CORNER: Ajustez la rondeur des coins du conteneur de l'icône en définissant un rayon de bordure.

3. Style de texte

À ce stade, vous avez la possibilité de modifier la typographie du texte. Voici les options disponibles :

• Styles:Sélectionnez votre style souhaité parmi les options prédéfinies, qui incluent 6 styles de titre et 3 styles de paragraphe.
• Fonte: Choisissez la police que vous souhaitez utiliser pour le texte. Si vous souhaitez utiliser une police qui n'est pas répertoriée, vous pouvez vous référer aux instructions fournies sur comment ajouter une police personnalisée dans Editor ver 7.
• Taille: Ajustez la taille de la police en spécifiant une valeur en pixels.
• Couleur:Modifiez la couleur du texte selon vos préférences.

Cliquez sur le bouton « Afficher plus » pour afficher plus d’options de personnalisation :

• Poids de polices: Choisissez le poids de police souhaité dans le menu déroulant fourni.
• Hauteur de ligne: Ajustez la hauteur du texte en spécifiant une valeur de pourcentage.
• L'espacement des lettres:Modifiez l'espacement entre les lettres en saisissant une valeur en pixels.
• Transformation de texte: Transformez le texte de l'une des manières suivantes : Aucune transformation appliquée, Majuscule, Minuscule, Majuscule.

4. Espacement des éléments

Ajustez l’espacement vertical entre les éléments de la liste à l’aide du curseur.

Par défaut : 12 px.

5. Style de l'article

Espace entre l'icône et le texte – contrôle l'espace horizontal entre l'icône et le texte.

Par défaut : 8 px.

6. Contexte

• Couleur:Cliquez sur le sélecteur de couleurs pour choisir un arrière-plan de couleur unie ou dégradée.
  
• Image(s)Téléchargez une image d'arrière-plan depuis votre appareil. La taille recommandée dépend de la mise en page de votre design.

7. Taille

• Largeur: Saisissez une valeur numérique (px) ou choisissez :

Ajuster le contenu : adapte la largeur à la taille du contenu.

Complet : s'étend sur toute la largeur du conteneur.

• Rembourrage: Ajustez l'espacement intérieur entre le contenu et la bordure de l'élément.
• Organiser: Alignez l'élément entier à gauche, au centre ou à droite.

8. Forme

• Frontière: Ajoutez une bordure, choisissez le style (plein, pointillé, en pointillés), définissez l'épaisseur et la couleur.
• CORNER: Arrondissez les coins en définissant une valeur de rayon (par exemple, 5 px pour un léger arrondi, 50 px pour un arrondi complet).
  
• Shadow: Ajoutez des effets d'ombre pour la profondeur ; ajustez le flou, l'étalement et la couleur.

9. Aligner

• Si la largeur = 100 %, l'alignement est fixe et ne peut pas être modifié.
  
• Sinon, l'alignement par défaut est à gauche, mais vous pouvez passer au centre ou à droite selon vos besoins.

L'onglet Avancé

Pour une personnalisation avancée, accédez à l'onglet Avancé. Vous pourrez :

• Ajoutez du CSS personnalisé pour un style unique.
• Contrôlez la visibilité par type d'appareil.
• Appliquer des animations et des effets d’interaction.

Pour des instructions détaillées, consultez notre Paramètres avancés .