Utilisez la section Liste d'images lorsque vous souhaitez afficher un ensemble d'images et de texte pertinent.
En utilisant cette section, vous pouvez facilement lier différentes pages du site Web ou ajouter des liens où vous souhaitez également ajouter une image et une description pour chaque lien.
Dans cet article :
- Qu'est-ce qu'une liste d'images ?
- Ajout d'une section Liste d'images à la page
- Ajouter et modifier des éléments de liste
- Éléments de la liste de séquencement
- Suppression d'éléments de la liste
- Modification de la disposition des sections
- Options de style
- Le style carrousel
- Exemple en direct
Liste d'images
- Une liste d'images est une collection d'images où vous pouvez ajouter une description de l'image et ajouter un lien ou un bouton pour la connecter à n'importe quelle autre page du site Web ou à tout autre lien.
Section Ajouter une liste d'images
- Une section peut être ajoutée à une page. Vous pouvez soit ajouter une section à une page déjà existante, soit créer une nouvelle page au sein de votre site Web.
- Sur ta page, Cliquez sur le bleu + icône ajouter un Nouvelle section à votre page.
- Vous verrez maintenant le catégories de rubriques sur le côté gauche.
- Choisissez le Liste (1) catégorie et cliquez sur Liste d'images onglet (2) où vous pouvez choisir différentes mises en page de la liste d'images (3).
- Choisissez n'importe quelle disposition de section et cliquez dessus pour l'ajouter à votre page.
Remarque:
- Vous pouvez gérer la largeur de la section à partir du paramètres de section et la largeur du contenu de la style de contenu.
- La taille d'image idéale que vous devez télécharger dans cette section dépendra du nombre de colonnes. En savoir plus.
- Gardez les titres, les sous-titres et les descriptions courts et clairs.
- Dans le champ de description, appuyez sur le Entrer bouton pour donner un saut de ligne et le Maj + Entrée bouton pour commencer à partir de la ligne suivante.
Ajouter et modifier des éléments de liste
Ajouter un élément de liste
Une fois que vous avez ajouté la section :
- Cliquez sur le Modifier la liste d'images (1) pour ouvrir le panneau des éléments de liste.
- Cliquez sur le Ajouter un article (2) bouton pour ajouter un nouvel élément de liste.
- Vous pouvez choisir de Ddupliquer ou supprimer (3) les éléments de la liste.
Modifier l'élément de la liste
Cliquez sur l'élément de liste que vous souhaitez modifier. Il ouvrira les options d'édition d'éléments de liste particuliers.
De là, vous pouvez:
- Télécharger/Supprimer une image (1) pour l’élément de liste. Vous pouvez également définir le Couleur d'accentuation de l'image à partir d'ici qui sera affiché au survol de l'image.
- Ajouter un Titre (2), Sous-titre (3), et Description (4) de l'élément de liste.
- Vous ne trouverez peut-être pas l'option de sous-titre et de description dans des éléments de liste particuliers en fonction de la mise en page que vous choisissez.
Avant d'ajouter la description, vérifiez this l'article.
- Cliquez sur l'icône Link Builder du Lien du titre (5) pour ouvrir le générateur de liens pour lier le titre de l'élément de liste à n'importe quelle page. En savoir plus à propos Créateur de liens.
- Définissez le lien pour qu'il s'ouvre dans un nouvel onglet ou dans le même onglet (6).
- Ajoutez n'importe quel type de Lien (7) à l'élément de liste. Vous pouvez ajouter un bouton/lien image/icône sociale/lien texte. Apprendre encore plus.
- Épargnez (8) vos modifications.
Voir la modification d'un élément de liste d'images en action :
Éléments de la liste de séquence
- Vous pouvez facilement faire glisser et déposer les éléments de la liste pour modifier la séquence.
Voir séquencer les éléments de la liste d'images en action :
Supprimer un élément de la liste
Une fois que vous avez ajouté un élément de liste, vous pouvez le modifier et le supprimer.
- Cliquez sur le Supprimer icône à côté de l'élément de la liste d'images.
- Alors, cliquez sur le Supprimer bouton dans la fenêtre de confirmation.
- Enfin, enregistrer vos changements.
Voir la suppression d'un élément de liste d'images en action :
Notes
L'élément de liste une fois supprimé ne peut pas être récupéré.
Disposition des sections
- Cliquez sur le Gérer la liste d'images (1) bouton.
- Choisissez le Disposition (2) onglet.
- Sélectionnez (3) la mise en page de votre section et Épargnez (4) les changements.
Pro Tip
Pour créer une section pleine largeur/une section de liste à onglets, choisissez n'importe quelle disposition allant de 25 à 29.
Notes
- Vous pouvez facilement ajouter une présentation de liste à onglets à votre page.
- Vous avez la possibilité de choisir parmi une disposition à onglets horizontaux/verticaux.
- Cela aide à créer une section basée sur la comparaison.
Donnez du style à votre rubrique
- Cliquez sur Gérer la liste d'images (1) .
- Choisissez le Style (2) languette.
- Modifiez le style des éléments de section et Enregistrer (3) vos changements.
Vous aurez plusieurs options de style pour la section :
Articles
- Choisissez d' Afficher les éléments in lignes et colonnes or carrousel
- Si vous avez choisi le lignes et colonnes option, les éléments de la liste seront disposés en lignes et en colonnes. Dans ce cas, vous devez spécifier le nombre de lignes et de colonnes.
- Si vous avez choisi le carrousel option, les éléments de la liste seront présentés sous forme de diaporama. En savoir plus.
- Met le Le nombre de colonnes pour la liste des images. Vous pouvez choisir de 1 à 10 colonnes.
- Spécifie le Espace entre les colonnes des éléments de la liste.
- Spécifie le Espace entre les lignes des éléments de la liste.
- Choisissez le Ordre du contenu c'est-à-dire les images des éléments de la liste à afficher en premier ou le texte associé.
- Aligner le contenu horizontalement dans la liste d'images. Vous pouvez les régler pour qu'ils soient alignés à gauche, à droite ou au centre.
- Aligner le contenu verticalement dans la liste des images. Vous pouvez les définir pour qu’ils soient alignés en haut, au centre et en bas.
Si l'option Carrousel est sélectionnée à l'étape 1, vous verrez les options supplémentaires suivantes :
- Choisissez d' Bouclez le carrousel ou non.
- Dans le cas du carrousel, choisissez le Commandes de navigation. Vous pouvez choisir entre Aucune commande, Flèches – En bas au centre/En haut à droite/En bas à droite, Chevron ou Points.
Affichage mobile
- Réglez le nombre de Colonnes de la grille pour les appareils mobiles. Vous pouvez le définir sur un maximum de 3 colonnes.
- Définir la espacement entre les grilles (en pixels).
Ajouter des images
- Choisissez le Image pour les éléments de la liste. Vous pouvez définir les images comme Carré, Cercle, Horizontal, Portrait et Original.
- Choisissez d'avoir un rayon d'angle commun ou un rayon d'angle différent pour chaque côté des éléments de la liste et définissez un nombre (en px) pour le CRayon du coin des images des éléments de la liste. En savoir plus.
Conseil
Le rayon de coin , vous pouvez créer différentes formes d'images d'éléments de liste. Si vous spécifiez 500 px ici, les images s'afficheront en forme de cercle.
- Si vous avez choisi des coins divisés, vous pouvez définir un rayon de coin différent pour chaque coin.
Au survol de l'image
- Choisissez le Couleur de survol de l'image à l' couleur d'accentuation ou être spécifié. Si vous avez choisi le couleur d'accentuation, puis spécifiez le opacité.
- Si vous avez choisi le spécifier la couleur puis définissez l'option Couleur et opacité du survol de base pour les éléments de la liste.
- Met le Éléments couleur pour les éléments de la liste de la section.
- Choisissez d' Animer les images des éléments de liste au survol en cliquant sur Oui. Vérifiez cette fonctionnalité sur une page en direct.
- Choisissez un Style d'animation pour les images lorsque le curseur passe dessus.
Taille et espace
- Spécifie le Largeur de l'image pour les éléments de la liste.
- Spécifie le Largeur du contenu pour les éléments de la liste.
- Spécifie le Espace sous le titre de la section en px.
- Spécifie le Espace sous les images des éléments de la liste (en %).
- Spécifie le Espace sous les titres des éléments de la liste (en %).
- Spécifie le Espace sous les sous-titres des éléments de la liste (en %).
Texte
- Cliquez sur le Modifier le style de texte bouton pour visiter le Conception section et gérer vos tailles et styles de police.
- Met le Titre style de police pour les éléments de liste de la section.
- Met le Sous-titre style de police pour les éléments de liste de la section.
- Définir la valeur par défaut Description style de police pour les éléments de liste de la section.
Cartes
- L'entreprise pour gérer les cartes.
Shadow
- Commande – Choisissez d'afficher toujours l'ombre derrière les éléments de la liste ou uniquement au survol.
- Style – Choisissez parmi les préréglages existants ou créez une ombre personnalisée.
Si vous avez choisi l'option personnalisée, visitez ce Générateur d'ombre de boîte pour créer une ombre personnalisée. Enfin, copiez et collez le boîte ombre CSS. - Si vous avez choisi l'option de préréglages, alors Choisissez les styles d'ombre de la liste déroulante.
Boutons et liens
- L'entreprise gérer le style de Boutons et liens.
- Épargnez tous les changements de style.
Le style carrousel
Le style Carrousel affiche les éléments de la liste sous forme de diaporama, c'est-à-dire que les éléments de la liste défileront les uns après les autres.
Découvrez comment fonctionne le style carrousel :
Voici une liste d'images en direct :
Voir un site de démonstration en direct.
Voyez comment fonctionne le Corner Radius :