Si tu veux créer une page de blog avec Elementor« , vous disposez de quelques options solides en fonction de votre budget. Une page de blog dédiée organise vos publications, aide Google à indexer votre contenu et donne aux visiteurs une raison de rester plus longtemps. ».
Vous n'avez pas besoin d'écrire de code pour cela Avec le Widget Postes Élémentaires (Pro) ou un plugin gratuit comme Modules complémentaires principaux pour Elementor, vous pouvez construire une coutume Page du blog Elementor cela correspond à votre marque.
Ce tutoriel couvre deux méthodes pour créez une page de blog dans WordPress avec Elementor:
- Méthode 1 : Utilisation du widget Elementor Pro Posts (payant)
- Méthode 2 : Utilisation du widget Master Addons Blog (gratuit)
Il y a un tableau comparatif à la fin pour que vous puissiez voir exactement ce que chaque option offre J'ai également enregistré une procédure vidéo si vous préférez cela.
Pourquoi votre site WordPress a besoin d'une page de blog
Votre page de blog est le seul endroit où tous vos articles apparaissent Les visiteurs peuvent parcourir les articles, les tutoriels, les actualités et les mises à jour à partir d'une seule URL Pour les propriétaires d'entreprise, il attire le trafic de recherche organique Pour les blogueurs, c'est essentiellement tout l'intérêt du site.
Un bon Conception de pages de blog WordPress fait quelques choses pour vous :
- Trafic SEO « Google indexe le contenu frais plus rapidement lorsqu'il est organisé sur une page de blog appropriée ».
- Sessions plus longues 'un disposition du blog Elementor avec des vignettes, des extraits et des catégories, les visiteurs cliquent sur davantage de publications au lieu de rebondir.
- Autorité « Publier régulièrement sur un sujet fait de vous la ressource incontournable dans votre niche ».
- Conversions Les articles de blog conduisent les lecteurs vers vos produits, services ou liste de diffusion.
Hors de la boîte, WordPress empile juste les publications dans l'ordre chronologique inverse Pas grand chose à regarder Avec la droite Widget de blog Elementor: vous pouvez échanger cela contre des grilles, des dispositions de cartes, des carrousels et bien plus encore, le tout sans code.
Avant de commencer : conditions préalables
Vous aurez besoin de quelques éléments prêts avant de commencer :
- WordPress installé sur votre hébergement (toute version récente fonctionne)
- Plugin d'élément installé et activé (version gratuite de WordPress.org)
- Quelques articles de blog publiés 3-6 articles vous ont besoin d'au moins 3-6 pour que la page du blog ait du contenu à afficher Ajoutez des images en vedette à chaque article pour obtenir le meilleur résultat visuel.
- Un ensemble de pages d'accueil statiques 'Going' Paramètres > Lecture et sélectionnez “Une page statique.” Définissez votre page d'accueil et créez une page séparée pour les publications.
Pour la méthode 1, vous aurez besoin Élémenteur Pro. Pour la méthode 2, vous n'avez besoin que du gratuit Plugin Addons Maître, qui fonctionne avec la version gratuite d'Elementor.
Tutoriel vidéo : créez une page de blog avec Elementor
Si la vidéo est plus votre truc, cette procédure pas à pas montre comment créez une page de blog dans Elementor utilisation du widget Master Addons Blog du début à la fin.
OK, passons aux deux méthodes.
Méthode 1 : Créer une page de blog avec le widget Elementor Pro Posts
Si vous avez Élémenteur Pro[TRADUCTION], vous avez déjà le Publie widget (parfois répertorié comme l'élément “Posts” dans le panneau).C'est le propre outil d'Elementor pour afficher les articles de blog sur n'importe quelle page.
Étape 1 : Ajoutez le widget Posts à votre page
Ouvrez la page où vous souhaitez que votre blog apparaisse dans l'éditeur Elementor Dans le panneau de widgets à gauche, recherchez “Posts” et faites glisser le Publie widget dans la section de votre page.
Le widget va immédiatement tirer dans vos publications publiées et les afficher dans une mise en page par défaut.
Étape 2 : Choisissez votre skin de mise en page
Elementor Pro vous offre trois skins de mise en page parmi lesquels choisir :
- Classique La peau par défaut. Affiche les publications dans une grille propre avec des images, des titres, des métadonnées et des extraits présentés.
- Cartes « Ajoutez une boîte de style carte autour de chaque poteau avec un subtil effet d'ombre ».
- Contenu complet « Displays » le contenu complet au lieu d'un simple extrait.
Par défaut, le skin Classic affiche une grille de 3 colonnes avec 6 publications Vous pouvez ajuster cela de 1 à 6 colonnes et définir n'importe quel nombre pour les publications par page.
Étape 3 : Configurer les paramètres de mise en page
Le Onglet Mise en page est l'endroit où vous composez comment votre Page du blog Elementor en fait, ça ressemble:
- Position de l'image « Placez l'image en vedette en haut, à gauche, à droite ou cachez-la complètement ».
- Taille et rapport de l'image « Pick the right thumbnail dimensions » pour votre conception.
- Titre Tag [TRADUCTION] ?Partage HTML (H2, H3, H4, etc.) pour les titres de publication Cela compte pour le référencement.
- Extrait Longueur « Contrôle du nombre de mots de l'extrait de message ».
- Métadonnées « Choisissez quelles méta-informations afficher : nom de l'auteur, date, heure et commentaires ».
- Lire la suite Texte ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' '
Étape 4 : Configurer la requête et la pagination
Le Onglet Contenu comporte deux sections importantes : Requête et Pagination.
Requête vous permet de contrôler les publications qui apparaissent sur la page de votre blog Vous pouvez filtrer par type de publication, catégories, balises ou identifiants de publication spécifiques Vous pouvez également inclure ou exclure certains messages des résultats.
Pagination contrôle la façon dont les utilisateurs naviguent à travers plusieurs pages de publications Trois options sont disponibles :
- Nombres (1, 2, 3...)
- Flèches précédentes/suivantes
- Numéros + Précédent/Suivant combinés
Étape 5 : Stylez votre mise en page de blog
Le Onglet Style comporte quatre sections pour les ajustements visuels :
- Disposition Écart de colonne, écart de ligne et alignement de contenu.
- Boîte ombre de bordure, rayon de bordure et boîte pour chaque carte postale.
- Image & large de frontière et d'espacement pour les images en vedette.
- Contenu « Typographie, couleurs et espacement des titres de publication, métadonnées, extraits et lien Lire la suite ».
Conseil : Utilisez un espacement et une typographie cohérents sur votre page de blog Définissez le même rayon de bordure pour les images et les cartes afin de créer un look raffiné Faites correspondre la couleur du lien Lire la suite avec la couleur de l'accent de votre marque.
C'est l'approche Elementor Pro. Fonctionne bien pour le basique Grille de blogs Elementor des mises en page, mais vous allez tomber dans les limites assez rapidement : pas de carrousel, pas d'effets de vol stationnaire, seulement 3 peaux.
Si vous voulez plus d'options sans payer pour Pro, la méthode suivante vaut le détour.
Méthode 2 : Créer une page de blog avec Elementor à l'aide de modules complémentaires principaux (gratuits)
Le Widget du blog Master Addons (étiqueté “MA Blog” dans l'éditeur) est gratuit et contient plus d'options de mise en page que le widget Elementor Pro Posts. 21 variations de mise en page, animations de survol, carrousel intégré, filtrage avancé C'est l'un des plus complets Widgets de blog Elementor là-bas.
Étape 1 : Installez et activez les modules complémentaires principaux
Attraper Modules complémentaires principaux pour Elementor depuis WordPress.org (gratuit).Après l'activation, vous verrez apparaître l'élément “MA Blog” dans votre panneau de widgets Elementor.
Étape 2 : Ajoutez le widget du blog et choisissez une mise en page
Faites glisser le Blog MA widget sur votre page Par défaut, il affiche une disposition de blog classique dans une grille de 4 colonnes.
C'est là que ça devient intéressant Tu obtiens trois types de mise en page:
- Grille Mise en page de blog propre et organisée
- Carte conception de cartes avec ombres et bordures
- Liste mise en page de la liste horizontale, idéale pour les blogs de style actualités ou magazines
Chaque type de disposition a 7 variations de style uniques1, vous donnant un total de 21 conceptions de pages de blog différentes (plus support maçonnerie).Vous pouvez basculer entre eux d'un simple clic.
Les 7 variantes de style incluent : Par défaut, chevauchement de contenu, méta en haut à gauche, cartes d'alignement à droite, cartes d'alignement central, alignement central avec fond dégradé et carte de bannière. Mélangez-les avec des mises en page de grille, de carte ou de liste pour créer un véritable page de blog personnalisée dans Elementor.
Étape 3 : Configurer les options d'affichage
Vous obtenez un contrôle granulaire sur la façon dont les articles de blog apparaissent :
- Post-commande ort par date, titre, date modifiée ou aléatoire.
- Colonnes 1 à 6 colonnes.
- Icône de format de publication (vidéo, audio, galerie) icônes pour différents formats de publication.
- Méta Séparateur « Choisissez le personnage qui sépare les éléments méta » (tuyau, point, tiret).
- Titre HTML Tag (H2, H3, H4, etc) l'étiquette de cap pour les titres de poste.
- Type de poste « Affichage de messages réguliers, de types de messages personnalisés » ou de pages.
- Espacement des rangées et des colonnes 'fine-tune the gaps' entre les poteaux'.
- Alignement du contenu 'left', center', or right-align your post content'.
- Messages par page [TRADUCTION] Combien de messages afficher par page.
- Pagination 'disable' ou désactivez la navigation de page'.
Étape 4 : configurez les options de vignettes
C'est là que Master Addons devance Elementor Pro. Le panneau à miniatures vous permet de :
- Activer ou désactiver les images en vedette
- Définissez une hauteur personnalisée pour les vignettes
- Choisissez la position de la vignette (en haut, à gauche, à droite)
- Choisir parmi 26 effets d'animation de vol stationnaire (Hang, Pulse, Push, Pop, Float, Sink, et plus encore)
- Appliquer 16 effets de couleurs (Flushing, Sépia, niveaux de gris, luminosité, etc)
- Sélectionner à partir de 5 formes de vignettes (Par défaut, arrondi, cercle, gradient bordé, et plus encore)
Dans la capture d'écran ci-dessus, j'ai“ l'animation de survol de « Hang” », “Flushing” effet de couleur, et “Gradient Bordered” forme miniature appliquéePlus de détails comme ceux-ci sont ce qui sépare une page de blog d'aspect générique de celle qui ressemble réellement à quelqu'un a conçu votre Page du blog Elementor exprès.
Étape 5 : Configurer les métadonnées Post
Sous Paramètres des publications, vous contrôlez quelles méta-informations apparaissent avec chaque article de blog :
- Titre du message (afficher/masquer)
- Image d'avatar de l'auteur
- Nom de l'auteur
- Date de publication
- Catégories
- Nombre de commentaires
- Longueur de l'extrait (réglez le nombre exact de mots)
- Lire la suite texte (entièrement personnalisable)
- Afficher le contenu complet vs extrait
Étape 6 : Utilisez le filtrage avancé
Le Paramètres avancés le panneau est l'endroit où vous déterminez exactement quels messages apparaissent :
- Exclure les messages spécifiques Ôter certains messages par ID de la page du blog.
- Filtrer par balise 'seulement les poteaux avec certaines étiquettes'.
- Filtrer par auteur « Display posts » d'un auteur spécifique (utile pour les blogs multi-auteurs).
- Décalage « Skip le premier N. Handy lorsque vous avez présenté un message séparément ».
- Ouvrir dans un nouvel onglet « Les liens des articles de blog sont ouverts dans un nouvel onglet de navigateur ».
Étape 7 : Activer le carrousel d'articles de blog
Vous avez probablement vu des sites qui affichent leurs derniers messages dans un carrousel défilant sur la page d'accueil Le widget Master Addons Blog a ceci intégré Basculez le Carrousel de blog Elementor allumé et configurez-le :
- Lecture automatique « Les choses défilent automatiquement à une vitesse que vous définissez ».
- Style de navigation [TRADUCTION] Choisissez entre des points ou des flèches.
- Position de la flèche ''place' flèches a l'interieur ou a l'exterieur du carrousel'.
Combinez le carrousel avec les paramètres avancés pour filtrer des articles spécifiques (comme “featured” ou “editors pick” tags) et placez-le n'importe où sur votre site, pas seulement sur la page du blog.
Important: Assurez-vous d'avoir activé “Load Font Awesome 4 Support” de Élémenteur > Paramètres. Sinon, les icônes de flèche dans le carrousel ne s'afficheront pas correctement.
Étape 8 : Stylez votre page de blog
Le Onglet Style couvre tous les ajustements visuels :
- Vignette Ôter la couleur, filtres CSS (luminosité, contraste, saturation)
- Titre et méta « Typographie, couleur du texte et couleur supérieure »
- Contenu couleur, couleur d'arrière-plan, typographie, ombre de boîte, rembourrage et marge de contenu
- Boîte ombre de fond, bordure et boîte pour toute la carte postale
- Pagination Typographie, couleur d'état normale, couleur d'état hover, bordure et rembourrage
Entre ces contrôles, vous pouvez faire correspondre votre disposition du blog Elementor à la marque de votre site jusqu'au pixel Couleurs, polices, espacement, ombres, le tout réglable depuis le panneau Elementor.
Widget de publication Elementor Pro ou widget de blog Master Addons
Voici tout disposé côte à côte pour que vous puissiez voir lequel Widget de blog Elementor correspond à votre situation.
| Caractéristique | Widget de publications Elementor Pro | Widget de blog Master Addons (gratuit) |
|---|---|---|
| Prix | Nécessite Elementor Pro (59 $/an+) | Gratuit |
| Variations de mise en page | 3 skins (Classique, Cartes, Contenu complet) | 21 variantes (7 styles x 3 types de mise en page) |
| Types de mise en page | Grille uniquement | Grille, carte et liste |
| Maçonnerie | Oui | Oui |
| Effets de survol des ongles | Aucun | 26 animations en vol stationnaire + 16 effets de couleurs |
| Formes d'ongles | Rayon de frontière uniquement | 5 formes (Défaut, Arrondi, Cercle, Dégradé Bordé, etc) |
| Options de métadonnées | Nom de l'auteur, Date, Heure, Commentaires | Auteur Avatar, Nom de l'auteur, Date, Catégories, Tags, Nombre de commentaires |
| Filtrage des requêtes | Type de message, Inclure/Exclure | Type de message, filtre par étiquette, filtre par auteur, exclusion de message, décalage |
| Pagination | 3 types (Numéros, Précédent/Suivant, Combinés) | Numéros + Précédent/Suivant avec texte personnalisable |
| Carrousel | Non disponible | Carrousel complet avec jeu automatique, contrôle de vitesse, flèches ou points |
| Ouvrir dans un nouvel onglet | Non | Oui |
| Icônes de format de publication | Non | Oui |
Pour les pages de blog de base, le widget Elementor Pro Posts fait le travail Si vous avez besoin d'effets de vol stationnaire, d'un carrousel ou tout simplement plus conception de pages de blog WordPress variété, le widget Master Addons Blog couvre tout cela gratuitement.
Conseils pour une meilleure mise en page de blog d'élémenteur
Quelques choses que j'ai apprises en créant des pages de blog pour des dizaines de sites WordPress :
1. Utilisez toujours les images en vedette
Un article sans image en vedette apparaît comme un rectangle vierge dans la grille de votre blog Il semble cassé Définissez une image en vedette pour chaque article, même s'il s'agit d'un graphique de marque simple Si la taille des fichiers est un problème, voici notre guide sur le meilleurs plugins WordPress optimiseur d'images.
2. Gardez les extraits courts
De longs extraits encombrent la grille et poussent les articles sous le pli. 15-25 mots suffisent pour dire aux lecteurs ce que couvre le message Le but est de les faire cliquer, pas de lire le tout depuis la page du blog.
3. utilisez des décomptes de colonnes cohérents
Trois colonnes fonctionne mieux pour la plupart des pages de blog Deux colonnes est bon pour les sites riches en contenu avec des extraits plus longs Quatre colonnes fonctionne quand vous avez beaucoup de courts articles avec des images fortes en vedette Et une fois que les lecteurs cliquent sur un article complet, aidez-les à rester là (le) meilleur plugin de table des matières pour WordPress ajoute des liens de saut pour que les longs messages soient faciles à écrémer.
4. Définissez les balises de titre appropriées
Le titre de votre page de blog devrait être H1. les titres des articles dans la grille de blog devraient être H2 ou H3. cela aide les moteurs de recherche à comprendre la structure de votre page Pour plus de conseils SEO, lisez notre meilleures pratiques de référencement pour Elementor guide.
5. Ajouter des catégories aux métadonnées
L'affichage des catégories dans les métadonnées de votre publication aide les visiteurs à trouver du contenu connexe Le widget Master Addons Blog vous permet d'afficher les catégories juste sous chaque titre de publication.
6. Test sur mobile
Prévisualisez votre page de blog sur mobile et tablette avant de publier Une grille de 3 colonnes s'empile sur 1 colonne sur les petits écrans, ce qui est bien, mais parfois l'espacement ou les tailles de police semblent décalés après l'effondrement Donnez-lui un défilement rapide sur votre téléphone Pour plus de contrôle, consultez notre guide sur design réactif avec les points d'arrêt Elementor.
7. utilisez un carrousel sur votre page d'accueil
Mettez un carrousel de blog Elementor sur votre page d'accueil en plus de la page du blog elle-même De cette façon, chaque visiteur voit vos derniers messages juste au moment où ils atterrissent, même s'ils ne cliquent jamais sur “Blog” dans la navigation Le widget Master Addons Blog a le carrousel intégré, il faut donc environ 30 secondes pour s'installer.
Foire aux questions
Puis-je créer une page de blog avec la version gratuite d'Elementor ?
Oui. Bien que l'élémenteur gratuit n'inclue pas de widget Posts, vous pouvez utiliser le Widget du blog Master Addons qui fonctionne avec la version gratuite d'Elementor Il vous offre 21 variations de disposition, effets de vol stationnaire, support de carrousel, et filtrage avancé sans frais.
Comment ajouter une page de blog à la navigation de mon site Web Elementor ?
Créez une nouvelle page dans WordPress (appelez-la “Blog”), concevez-la avec Elementor en utilisant le widget Posts ou le widget Master Addons Blog, puis ajoutez cette page à votre menu de navigation via Apparence > Menus Vous pouvez également utiliser le Constructeur de thèmes Master Addons pour créer un en-tête personnalisé avec votre navigation.
Combien de billets de blog dois-je afficher par page ?
6 à 12 messages par page est le point idéal pour la plupart des sites Moins de 6 peuvent donner l'impression que la page est vide, tandis que plus de 12 augmente le temps de chargement et submerge les visiteurs Activez la pagination afin que les lecteurs puissent parcourir les articles plus anciens.
Puis-je afficher les articles de blog d'une catégorie spécifique sur ma page de blog Elementor ?
Oui. Elementor Pro et Master Addons prennent en charge les publications de filtrage par catégorie. Dans Master Addons, utilisez le panneau Paramètres avancés pour filtrer par balise, auteur ou exclure des publications spécifiques. Cela vous permet de créer plusieurs pages de blog pour différents sujets.
Quelle est la meilleure disposition de blog Elementor pour le référencement ?
Une mise en page de grille avec des images en vedette, des titres de publication utilisant des balises H2/H3, de courts extraits, des métadonnées de catégorie et une pagination appropriée est la meilleure solution pour le référencement. Assurez-vous que votre page de blog se charge rapidement en optimisant les images et en utilisant un thème Élémenteur léger.
Réflexions finales
Bâtiment a page de blog personnalisée dans Elementor prend environ 10-15 minutes avec l'une ou l'autre méthode Le widget Elementor Pro Posts gère bien les bases si vous avez déjà une licence Pro.
Pour plus d'options de mise en page, le Widget du blog Master Addons vous donne 21 variations de mise en page, 26 animations de vol stationnaire, 16 effets de couleurs, un carrousel et un post-filtrage avancé. C'est suffisant pour créer une page de blog avec Elementor on dirait que vous avez engagé un designer.
Il fonctionne également avec la version gratuite d'Elementor. Télécharger les addons principaux et testez-le.
Si quelque chose ne fonctionne pas correctement pendant la configuration, déposez-nous un message et on va régler ça.
Lecture connexe:
