Comment créer une page de blog avec Elementor (gratuit, aucun professionnel n'est nécessaire)

Free Elementor ne peut pas lister vos messages Le widget Posts, les messages d'archives, le titre de la publication et le reste des widgets de publication sont tous des Elementor Pro. Sur une installation gratuite, ils s'affichent dans le panneau du widget avec un cadenas et rien d'autre. Pour créer une page de blog sans payer pour Pro, installez le gratuit Additions maîtres branchez et utilisez son widget Blog Posts, qui répertorie les publications dans la grille, la liste ou la maçonnerie et fonctionne dans l'éditeur Elementor normal.

Ce guide construit un début pour finir, avec des captures d'écran d'Elementor 4.2.4 et Master Addons 3.2 sur une installation gratuite Il couvre les choix de mise en page, les filtres de requête, les onglets de filtre de catégorie manqués par la plupart des tutoriels, et les deux paramètres qui décident si votre grille semble bien rangée ou en lambeaux.

Elementor a-t-il gratuitement un widget de blog ou de publications ?

N° Recherchez dans le panneau du widget les“post” sur une installation gratuite et voici ce qui revient.

Les articles de blog et la chronologie portent le badge violet Master Addons et sont prêts à être glissés. Les articles, le titre de la publication, l'extrait de la publication, les articles d'archives, les commentaires de la publication, la navigation de la publication et les informations de publication portent tous un cadenas, qui est un élément publicitaire Pro depuis l'intérieur du plugin gratuit.

Vous avez donc quatre options :

Le reste de ce guide utilise le widget gratuit Master Addons Chaque contrôle indiqué ci-dessous est dans le plugin gratuit Rien dans le widget Blog Posts n'est verrouillé.

Ce dont vous avez besoin avant de commencer

• WordPress avec Élémenteur installé. La version gratuite est fine.
• Le plugin gratuit Master Addons. Installer les notes est ici si vous les voulez.
• Quelques billets publiés Six ou plus rend la mise en page plus facile à juger.
• Une image en vedette sur chaque publication Un message sans un laisse un espace dans la grille, et aucun paramètre de mise en page ne corrige cela.

Comment créer une page de blog Elementor gratuitement, étape par étape

Étape 1 : Créer la page

Aller à Pages → Ajouter une nouvelle page, titrez-le Blog, puis cliquez sur Modifier avec Elementor. Laissez la zone de contenu WordPress vide Tout se passe dans le canevas Elementor.

Ne définissez pas cette page comme page WordPress Posts sous Paramètres → Lecture. Cela transmet l'URL à votre thème et supprime la conception Elementor. Il existe une section sur la bonne façon de le faire plus bas.

Étape 2 : Ajouter le widget Articles de blog

Recherchez dans le panneau du widget blog et traîner Articles de blog sur la toile Il rend vos derniers messages tout de suite, afin que vous puissiez voir ce que vous changez au fur et à mesure que vous le changez.

Étape 3 : Choisissez une mise en page

Ouvrir Options d'affichage. Les contrôles définissent ici la forme de la page.

Les deux commandes les plus importantes se situent au sommet :

• Mise en page du blog: Classique ou Cartes. Classique met le texte sur le fond de la page Les cartes enveloppent chaque message dans son propre panneau.
• Type de blog: Disposition de grille, disposition de liste ou disposition de maçonnerie.

En dessous de ceux-là, ensemble Nombre de Colonnes. Il s'agit d'un contrôle réactif, vous pouvez donc donner au bureau trois colonnes et à un mobile en changeant de périphérique en haut de l'éditeur. Trois est la valeur par défaut sûre pour un blog avec des images.

Deux autres qui valent la peine d'être réglés maintenant. Titre HTML Tag par défaut, H2, qui convient parfaitement à un index de blog, puisque l'en-tête de la page est le H1 et que chaque titre de publication se trouve en dessous. Et Source choisit entre les Derniers messages et la requête en cours Laissez-le sur les derniers messages pour une page de blog normale ; La requête en cours est pour modèles d'archives: où le widget doit suivre la catégorie ou l'auteur visualisé au lieu de ses propres paramètres.

Étape 4 : Choisissez une carte ou un style de liste

Définissez la disposition du blog sur les cartes et un Disposition des cartes le contrôle apparaît avec sept modèles.

Par défaut, chevauchement de contenu, méta en haut à gauche, cartes d'alignement à droite, cartes d'alignement central, BG de dégradé d'alignement central et carte de bannière. Le chevauchement de contenu et la carte de bannière placent le texte sur l'image, ils ont donc besoin de photos avec de la place. Les cartes d'alignement par défaut et à droite sont les choix les plus sûrs pour un ensemble mixte d'images présentées.

Basculez le type de blog sur la liste et le contrôle de la carte est remplacé par Liste Type de mise en page, avec sept autres.

Cela représente 14 modèles prêts à l'emploi au total, sept pour les grilles et sept pour les listes, en plus des trois types de mise en page, vous devez donc rarement styliser une carte à partir de zéro.

Étape 5 : Définissez la taille de la vignette et l'effet de survol

Ouvrir Paramètres de vignettes. Une page de blog en lambeaux est généralement corrigée ici.

Par défaut, le widget maintient chaque image présentée à son propre rapport, donc une photo de portrait dans une rangée de paysages pousse cette carte vers le bas de la page Tournez Hauteur personnalisée allumé et réglez le min et le max à la même valeur, environ 200 à 240 px, et chaque vignette affleure dans la même boîte. Queue de pouce set to Cover empêche la récolte d’écraser quoi que ce soit.

Sous ça, Animation de survol utilise les propres animations d'Elementor, et Effet Couleur ajoute l'un des seize effets de superposition : zoomer et dézoomer, faire pivoter et zoomer, glisser, échelle de gris, flou, sépia, les deux combinaisons de flou, deux évanouissements d'opacité, rougir, briller et faire le cercle. Formes d'ongles ajoute cinq images au-dessus : encadrées, diagonales, bordées, bordées de dégradés et carrés.

Choisissez un effet et utilisez-le partout. Trois différents sur une page lus comme du bruit.

Étape 6 : Choisissez quelle méta afficher

Ouvrir Paramètres des publications et éteignez tout ce dont le lecteur n’a pas besoin.

Extrait Longueur par défaut, 55 mots, ce qui est long pour une carte Déposez-le à 15 à 25 afin que la grille reste scannable et que le clic aille au message plutôt qu'au résumé. Lire la suite Texte est du texte libre, donc “Lire le guide” fonctionne aussi bien que “Lire la suite”.

Les bascule sous le titre du poste de contrôle, l'avatar de l'auteur, le nom de l'auteur, la date, les catégories, les balises et le nombre de commentaires indépendamment. Tournant Catégories d'affichage ? on en vaut généralement la peine, car il donne aux lecteurs une seconde voie vers des publications connexes.

Étape 7 : Filtrez quels messages apparaissent

Ouvrir Paramètres avancés. C'est la section requête.

• Filtrer par catégorie, Filtrer par balise et Filtrer par auteur rétrécir la requête Chacun accepte plusieurs valeurs.
• Messages à exclure supprime les publications spécifiques par nom, c'est ainsi que vous conservez une annonce épinglée hors de la grille principale.
• Compte de postes décalés saute les N premières publications Définissez un widget en vedette au-dessus de la grille pour afficher les trois dernières, puis décalez la grille de trois, et aucun message n'apparaît deux fois.
• Liens dans le nouvel onglet fait ce qu'il dit.

Étape 8 : Publiez et vérifiez le résultat

Appuyez sur Publier et ouvrez la page dans un onglet de navigateur normal Voici la grille finie : trois colonnes, cartes, vignettes uniformes, onglets de catégorie en haut.

Le temps total, une fois que vous savez où se trouvent les commandes, est inférieur à dix minutes.

Ajouter des onglets de filtre de catégorie à la page du blog

Les onglets de filtre en haut de cette capture d'écran sont gratuits et constituent la partie manquée par les gens. Les lecteurs peuvent réduire la grille par catégorie sans quitter la page.

Allumez Catégorie Filter Tabs dans Paramètres avancés. Puis choisissez les catégories que vous voulez comme onglets dans le champ Filtrer par catégorie Les onglets sont construits à partir de cette sélection, pas à partir des catégories des messages sur la page Laissez le champ vide et vous obtenez un seul onglet Tout et rien d'autre, qui semble cassé mais fonctionne comme conçu.

Tout Texte renomme le premier onglet, et Alignement déplace la rangée vers la gauche, le centre ou la droite Les onglets de filtrage et le carrousel s'excluent mutuellement, donc si vous activez le carrousel les onglets arrêtent le rendu.

Grille, liste ou maçonnerie : quelle disposition utiliser

Grille est la valeur par défaut et convient à la plupart des blogs Cartes égales, trois de diamètre, scannables Utilisez-la avec une hauteur de vignette personnalisée pour que les lignes s'alignent.

Liste met un message par ligne avec la vignette à côté du texte Définissez le nombre de colonnes sur 1 colonne lorsque vous passez à la liste, ou vous obtenez trois éléments de liste entassés côte à côte.

List donne à l'extrait de la place pour respirer, il fonctionne donc pour les blogs de style essai où le résumé est en cours de vente.

Maçonnerie conserve les colonnes mais diminue la hauteur de ligne fixe, de sorte que les cartes s'empilent par contenu et que les espaces se rapprochent.

La maçonnerie est le seul cas où vous devriez laisser Custom Height éteint, puisque les hauteurs inégales sont ce qui le fait fonctionner Il convient aux blogs dirigés par des photos et s'effondre lorsque chaque image présentée a la même forme.

Transformez la grille des blogs en carrousel

Le même widget sert également de carrousel de publication, ce que vous souhaitez sur une page d'accueil plutôt que sur la page de blog elle-même.

Commutateur Activer le carrousel? allumé et la section Paramètres du carrousel s'ouvre : vitesse de lecture automatique et de lecture automatique, pause en vol stationnaire, diapositives à faire défiler par appareil, diapositive centrale, curseur de saisie, mode sans traînée, boucle et vitesse d'animation. Le contrôle de mise en page offre également un effet de couverture avec ses propres paramètres de rotation, d'étirement, de modification et de profondeur.

Observateur devrait être Oui si le carrousel se trouve à l'intérieur d'une languette, d'un accordéon ou de tout autre élément caché sur la charge de la page, sinon il se mesure à une largeur nulle et se restitue sous forme de pile.

Affichage de la date modifiée au lieu de la date publiée

Le widget Articles de blog peut trier par date modifiée : fixée Commandez par to Last Modified dans les options d'affichage et les publications récemment mises à jour montent au sommet. Cela seul est souvent ce que les gens veulent réellement, car cela permet de garder visible le contenu actualisé.

Affichage de la date modifiée car le texte visible est différent Le widget imprime la date publiée dans la carte, tandis que le sous-jacent <time datetime> attribut porte la date modifiée Les moteurs de recherche lisent l'attribut, de sorte que vos dates mises à jour sont publiées même lorsque la carte indique le contraire, mais un lecteur voit la date originale.

Pour afficher la date modifiée sous forme de texte, vous avez besoin des balises dynamiques d'Elementor Pro, où la balise Post Date a une option Modifiée, utilisée dans un widget Posts Pro ou Loop Grid Il n'y a pas d'équivalent Elementor gratuit, car les balises dynamiques sont une fonctionnalité Pro en premier lieu L'alternative sur free est un petit extrait qui filtre get_the_time pour votre modèle de blog.

Page de blog ou page de publications ? Définissez-le correctement

WordPress a sa propre page de publications, définie ci-dessous Paramètres → Lecture. La page que vous venez de construire est une page régulière et les deux se comportent différemment.

Si vous attribuez votre page Elementor comme page Posts dans Paramètres → Lecture, WordPress remet l'URL au modèle d'archive du thème et votre conception Elementor est ignorée C'est la raison la plus courante pour laquelle une page de blog terminée affiche la liste par défaut du thème à la place.

Deux façons de le faire correctement :

• Gardez-le une page normale. Laissez Paramètres → Lecture seule et ajoutez votre page Blog au menu sous Apparence → Menus La page rend votre conception Elementor, qui est ce que vous voulez.
• Construire la véritable archive. Si vous souhaitez que l'URL de l'archive WordPress elle-même utilise votre conception, créez un modèle d'archive dans le Constructeur de thèmes Master Addons et définissez la source de la requête actuelle du widget Blog Posts, de sorte qu'elle suive l'archive consultée.

Articles de blog Master Addons vs le widget Elementor Pro Posts

Elementor Pro gagne sur les balises dynamiques, le chargement-plus et le défilement infini Le widget gratuit Master Addons gagne sur la variété de mise en page, les effets de survol, les onglets de filtre et le carrousel intégré Si les popups, les formulaires et la construction de thèmes vous attirent déjà vers Pro, achetez Pro. Si la page du blog est la seule raison pour laquelle vous l'envisagez, cela la couvre pour rien, et le Licence Master Addons vaut le détour uniquement si vous voulez les widgets Pro ailleurs.

Sept correctifs pour une mise en page de blog qui semble fausse

1. Hauteurs de cartes déchiquetées. Activez la hauteur personnalisée dans les paramètres de vignettes et réglez min et max à la même valeur. C'est le correctif neuf fois sur dix.
2. Un rectangle vierge dans la grille. Cet article n’a pas d’image vedette. Ajoutez-en un, même un graphique de marque simple.
3. Extraits avalant la carte. Drop Extrait Longueur de 55 à environ 20 mots.
4. Trois éléments de liste côte à côte. Besoins de mise en page de la liste Nombre de colonnes définies sur 1 colonne.
5. Filtrer les onglets affichant uniquement Tous. Choisissez les catégories dans Filtrer par catégorie Les onglets proviennent de ce champ.
6. Tout empilé sur mobile dans une longue colonne. C'est généralement correct Vérifiez-le avec le commutateur de périphérique et définissez délibérément les colonnes mobiles plutôt que de laisser le hasard Notre guide de Points d'arrêt des éléments couvre le reste.
7. Page de blog lente. Vérifiez la taille de vos images en vedette avant de blâmer le widget Compressez-les d'abord ; voir notre tour d'horizon de l'optimiseur d'image et les notes sur accélération des sites Elementor.

Questions fréquemment posées

Lecture connexe

• Widget Articles de blog, la page de fonctionnalités avec chaque paramètre répertorié
• Documentation des éléments du blog
• Comment créer un en-tête collant dans Elementor
• Comment modifier le pied de page dans WordPress à l'aide d'Elementor
• Bibliothèque de modèles Master Addons: si vous préférez importer une page prête à l’emploi
• Modules complémentaires principaux sur WordPress.org