Le bloc Articles vous permet d'afficher une collection d'articles sur une seule page, vous donnant un contrôle total sur la manière dont votre contenu est interrogé, organisé et affiché. Choisissez parmi plusieurs skins, mises en page et options d'affichage pour créer un flux d'articles qui correspond au design de votre site.
Le bloc prend en charge un filtrage de requête puissant par type d'article, catégorie, étiquette et auteur, et offre de riches options de mise en page, y compris Grille, Maçonnerie et Carrousel. Vous pouvez également contrôler les informations d'article affichées — images à la une, titres, métadonnées, extraits, badges et liens « lire la suite » — le tout à partir d'un seul panneau de configuration.
Ajouter le bloc Articles à vos pages
Suivez ces étapes pour ajouter un bloc Articles à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Blocs > Avancé, faites glisser et déposez le bloc Articles dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Articles pour ouvrir ses paramètres. L'onglet Paramètres est organisé en deux sections : Requête d'articles et Mise en page.
Requête d'articles :
- Type de requête : Choisissez comment les articles sont récupérés. Défaut utilise les paramètres de requête existants de la page, Personnalisé vous permet de filtrer par type d'article, catégorie, étiquette et auteur, et Manuel vous permet de saisir une chaîne de requête WP_Query brute pour un contrôle total.
- Requête par type d'article : Activez pour filtrer les résultats par un ou plusieurs types d'articles. Sélectionnez les types d'articles à inclure dans le menu déroulant (disponible lorsque Personnalisé est sélectionné).
- Requête par catégorie : Activez pour filtrer les résultats par une ou plusieurs catégories. Sélectionnez les catégories à inclure dans le menu déroulant.
- Requête par étiquette(s) : Activez pour filtrer les résultats par une ou plusieurs étiquettes. Sélectionnez les étiquettes à inclure dans le menu déroulant.
- Requête par auteur(s) : Activez pour filtrer les résultats par un ou plusieurs auteurs. Sélectionnez les auteurs à inclure dans le menu déroulant.
- Trier par : Choisissez le champ utilisé pour trier les résultats — Date, Date de dernière modification, Titre, Nombre de commentaires ou Ordre du menu.
- Ordre : Définissez la direction du tri — ASC (plus anciens/A-Z en premier) ou DESC (plus récents/Z-A en premier).
- Paramètres de requête : Saisissez une chaîne WP_Query manuelle (disponible lorsque Manuel est sélectionné), par exemple :
post_type=post&posts_per_page=3&order=desc.
Mise en page :
- Skin : Choisissez la conception globale de la carte d'article — Classique (liste/grille standard), Carte (carte encadrée avec image en haut), Créatif (image avec zone de contenu superposée) ou Minimal (mise en page épurée et légère).
- Disposition : Choisissez comment les articles sont organisés — Grille (colonnes uniformes), Maçonnerie (colonnes de hauteur variable) ou Carrousel (diaporama à défilement horizontal). Les options du carrousel incluent Nombre de diapositives à afficher (1-10), bascule Lecture automatique, Vitesse de lecture automatique, Position de la navigation (Haut/Bas), Style de navigation (Flèches et Points/Flèches/Points) et Couleur de la navigation.
- Colonnes : Définissez le nombre de colonnes à afficher (dispositions Grille et Maçonnerie).
- Pagination : Activez pour ajouter des liens de pagination sous les articles.
- Nombre par page : Définissez le nombre d'articles à afficher par page (disponible lorsque le type de requête Personnalisé ou Manuel est sélectionné).
- Afficher l'image mise en avant : Activez pour afficher l'image mise en avant de chaque article. Lorsque cette option est activée, vous pouvez également définir la Hauteur de l'image (0-500px) et, pour les skins Créatif et Minimal, la Position de l'image (Gauche ou Droite).
- Afficher le titre : Activez pour afficher le titre de chaque article. Lorsque cette option est activée, choisissez la Balise de titre — H1 à H6, div, span ou p.
- Afficher les métadonnées : Activez pour afficher les métadonnées de l'article. Des bascules individuelles vous permettent d'afficher/masquer la Date de modification, l'Auteur, la Date, l'Heure et le Nombre de commentaires. Définissez un caractère Séparateur à faire apparaître entre les éléments des métadonnées.
- Afficher l'extrait : Activez pour afficher l'extrait de chaque article. Lorsque cette option est activée, définissez la Longueur de l'extrait (nombre de mots).
- Afficher Lire la suite : Activez pour afficher un lien « Lire la suite » sous l'extrait. Lorsque cette option est activée, personnalisez le Texte « Lire la suite ».
- Badge : Activez pour afficher un badge de taxonomie sur chaque article (disponible pour les skins Carte et Créatif). Lorsque cette option est activée, choisissez la Taxonomie du badge — Catégorie ou Étiquettes.
- Avatar : Activez pour afficher l'avatar de l'auteur (skin Carte uniquement).
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez affiner le style visuel de chaque élément de votre bloc d'articles. Les paramètres sont organisés dans les sections suivantes :
Article :
- Marge intérieure de l'article : Définissez l'espacement intérieur autour du contenu à l'intérieur de chaque carte d'article (Haut, Droite, Bas, Gauche).
- Couleur d'arrière-plan de l'article : Définissez la couleur d'arrière-plan de chaque carte d'article individuelle.
- Ombre de l'article : Ajoutez un effet d'ombre autour de chaque carte d'article — choisissez parmi Aucune, Cheveux d'ange, Petite, Moyenne, Grande, Très grande, 2x Très grande, ou une ombre personnalisée.
- Marge inférieure : Définissez l'espacement vertical entre les cartes d'articles de 0 à 100px.
Texte :
- Typographie du titre : Définissez la famille de polices, la taille, le poids et le style des titres d'articles (prend en charge les paramètres par appareil).
- Couleur du titre : Définissez la couleur du texte du titre de l'article.
- Typographie du texte des métadonnées : Définissez la typographie des informations de métadonnées de l'article (par appareil).
- Couleur du texte des métadonnées : Définissez la couleur du texte des métadonnées.
- Typographie de l'extrait : Définissez la typographie de l'extrait de publication (par appareil).
- Couleur de l'extrait : Définissez la couleur du texte de l'extrait.
- Typographie du texte « Lire la suite » : Définissez la typographie du lien « Lire la suite » (par appareil).
- Couleur du texte « Lire la suite » : Définissez la couleur du lien « Lire la suite ».
- Typographie de la pagination : Définissez la typographie des liens de pagination (par appareil).
- Couleur de la pagination : Définissez la couleur du texte des liens de pagination.
Image :
- Hauteur de l'image : Définissez la hauteur des images mises en avant de 0 à 500 pixels (affichée lorsque les images mises en avant sont activées).
- Ombre : Ajoutez un effet d'ombre à l'image mise en avant — choisissez parmi Aucune, Cheveu, Petite, Moyenne, Grande, Très grande, Très très grande ou Ombre portée inférieure.
- Marge de l'image : Définissez l'espacement autour de l'image mise en avant (Haut, Droite, Bas, Gauche).
- Bordure de l'image : Définissez le style de bordure de l'image (Pleine, Pointillée, Tirets), la couleur, la largeur et le rayon des coins (y compris le rayon par coin : Coin supérieur droit, Coin supérieur gauche, Coin inférieur droit, Coin inférieur gauche).
- Espace blanc de l'image : Ajoutez un remplissage intérieur autour de l'image mise en avant.
Bordure :
- Rayon de bordure : Définissez l'arrondi des coins de chaque carte de publication de 0 à 100 pixels.
- Style de bordure : Définissez le style de bordure pour chaque carte de publication — Pleine, Pointillée ou Tirets.
- Couleur de bordure : Définissez la couleur de bordure de chaque carte de publication.
- Largeur de bordure : Définissez la largeur de bordure par côté (Haut, Droite, Bas, Gauche).
Zone de contenu :
- Remplissage du contenu : Définissez le remplissage intérieur de la zone de texte dans chaque carte de publication (Haut, Droite, Bas, Gauche).
- Couleur d'arrière-plan du contenu : Définissez la couleur d'arrière-plan de la zone de contenu à l'intérieur de chaque carte de publication.
- Ombre du contenu : Ajoutez une ombre à la zone de contenu — choisissez parmi Aucune, Cheveu, Petite, Moyenne, Grande, Très grande, Très très grande ou une ombre personnalisée.
- Bordure de la zone de contenu : Définissez le style de bordure de la zone de contenu (Pleine, Pointillée, Tirets), la couleur, la largeur par côté et le rayon de bordure.
Taxonomie du badge :
- Remplissage de la taxonomie : Définissez le remplissage intérieur de l'étiquette du badge (Haut, Droite, Bas, Gauche).
- Rayon de bordure : Définissez l'arrondi du badge par coin (Coin supérieur droit, Coin supérieur gauche, Coin inférieur droit, Coin inférieur gauche).
- Couleur d'arrière-plan : Définissez la couleur d'arrière-plan du badge de taxonomie.
- Couleur : Définissez la couleur du texte de l'étiquette du badge de taxonomie.
- Typographie de la taxonomie : Définissez la famille de polices, la taille et le style du texte du badge (par appareil).
- Espacement inférieur : Définissez l'espacement sous le badge de 0 à 100 pixels.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc de publications (Haut, Droite, Bas, Gauche). Prend en charge les paramètres par appareil pour ordinateur, tablette et mobile.
- Marge intérieure : Ajustez l’espacement intérieur de votre bloc d’articles (Haut, Droite, Bas, Gauche). Prend en charge les paramètres par appareil.
Attributs :
- ID CSS : Affiche l’identifiant unique généré automatiquement pour votre bloc d’articles. Cet ID est créé automatiquement par SeedProd pour la personnalisation des styles ou le ciblage JavaScript.
- Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l’élément d’encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc d’articles sur les écrans d’ordinateur.
- Masquer sur tablette : Masquez le bloc d’articles sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc d’articles sur les appareils mobiles.
Effets d'animation :
- Animation d’entrée : Choisissez parmi divers effets d’animation qui se jouent lorsque le bloc d’articles apparaît à l’écran. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d’autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc d’articles et de personnaliser son apparence, assurez-vous d’enregistrer votre travail.
Vous avez ajouté avec succès un bloc d’articles à votre page ! Utilisez-le pour afficher élégamment votre contenu dans une mise en page visuellement attrayante et organisée qui encourage les lecteurs à explorer davantage votre site. Expérimentez avec différents skins, mises en page et paramètres de requête pour créer un flux d’articles qui correspond parfaitement à votre marque et à votre stratégie de contenu.