Modèles de blog Elementor : 10 mises en page de blog et 5 modèles de publication unique

Concevoir un blog dans Elementor signifie généralement deux tâches : la page qui répertorie vos articles et la mise en page utilisée par chaque article. Cette collection couvre les deux. Il existe 10 modèles de blog Elementor pour la liste des articles et 5 modèles de publication uniques pour les articles eux-mêmes, et chacun est livré sous forme de fichier JSON que vous pouvez télécharger, une démo en direct sur laquelle vous pouvez cliquer et un petit guide pour la configurer.

Tout ici est gratuit à télécharger Les mises en page de la page du blog tombent dans n'importe quelle page Elementor Les mises en page de publication uniques ont besoin d'un constructeur de thème pour les appliquer à vos publications, et la section de publication unique ci-dessous montre comment faire cela, y compris avec un constructeur de thème que vous utilisez déjà Si vous voulez des pages complètes pour le reste de votre site aussi, le Bibliothèque de modèles de pages d'éléments en compte plus de 200 dans le même format.

Ce que vous obtenez dans chaque téléchargement gratuit

Chaque modèle est téléchargé sous forme de petit fichier zip. Décompressez-le en premier : Elementor a besoin du .json file à l'intérieur de celui-ci Vous trouverez trois choses :

• un preview dossier avec deux captures d'écran du design, desktop-1440.webp et mobile-390.webp(traduction), pour que vous puissiez le vérifier avant d'importer quoi que ce soit,
• le modèle lui-même, a .json fichier nommé d'après le design (ma-blog-mosaic-masonry.json dans l'exemple ci-dessus), qui est le fichier que vous importez dans votre bibliothèque de modèles Elementor,
• un readme.txt cela répertorie les besoins du modèle et parcourt une importation de base, ainsi que tous les paramètres à modifier par la suite.

Tout le style d'un modèle vit dans un widget HTML en haut du design, adapté à ce modèle. Il n'y a pas de couleurs de thème ni de polices globales à reporter et aucune image n'est intégrée au fichier, donc le design est le même sur votre site que dans la démo. Vos propres publications, images et catégories présentées remplissent le contenu.

Ce dont vous avez besoin avant d'importer

Les mises en page des pages de blog sont construites sur les modules complémentaires principaux Widget Articles de blog(en anglais), c'est ce qui tire vos dernières publications sur la page Les mises en page de publication uniques utilisent les modules complémentaires principaux Extension Dynamic Tags pour remplir le titre, l'image en vedette, le contenu, l'auteur et la date à partir du message qu'un visiteur lit.

Vous avez également besoin d'un endroit pour exécuter WordPress Si vous créez un nouveau blog et que vous n'avez pas encore d'hébergement, Hostinger c'est ce que nous désignons pour un premier site WordPress.

10 modèles de page de blog Elementor gratuits à télécharger

Ce sont des mises en page pour la page qui répertorie vos publications. Chacun utilise une mise en page de Blog Posts différente et une structure de page différente, d'une liste de lecture à une colonne à un mur photo en maçonnerie.

1. Signal : grille de magazine avec un article vedette

Une première page de magazine Votre dernier article fonctionne comme une bannière pleine largeur avec le titre placé sur la photo, et les six suivants sont placés dans une grille de cartes à trois colonnes en dessous. Cela convient aux sites d'information, aux magazines et à tout blog qui publie souvent.

La grille saute le premier message, de sorte que l'histoire en vedette n'apparaît jamais deux fois Si vous modifiez le nombre de messages affichés par la bannière, modifiez le décalage de la grille pour qu'il corresponde.

2. Colonne : liste éditoriale d'une colonne

Une liste de lecture pour les écrivains Chaque article obtient une petite vignette sur la gauche, la date et la catégorie au-dessus d'un grand titre de empattement, et un standfirst de deux lignes La page est large de 820 px, ce qui maintient les lignes à une longueur confortable Il fonctionne bien pour les bulletins d'information, les essais et les blogs personnels.

3. Mosaïque : mur photo en maçonnerie

Un mur de maçonnerie à trois colonnes pour les blogs dirigés par des images Les photos restent en niveaux de gris jusqu'à ce que vous planiez, et chaque titre se trouve dans une petite carte blanche qui chevauche l'image Les blogs de nourriture, de voyage et de photographie en tirent le meilleur parti.

La maçonnerie ne fait que tituber lorsque vos images en vedette se présentent sous des formes différentes Si chaque photo est la même culture, le mur ressemble à une grille ordinaire.

4. Kiosque : hub de catégorie avec languettes de filtre

Une grille de cartes avec des onglets de catégorie en haut, afin que les lecteurs puissent restreindre la page à un sujet sans la quitter Chaque carte porte un badge de date sur la photo et une étiquette de catégorie en dessous. Choisissez-le si vous publiez sur plusieurs sujets.

Les onglets proviennent du paramètre Filtrer par catégorie du widget, et non des catégories que vos publications utilisent. Après l'importation, ouvrez le widget Articles de blog, accédez aux paramètres avancés et choisissez vos propres catégories. Si vous le laissez vide, vous obtenez un seul onglet“All”.

5. Marquee : carrousel en vedette

Une bannière tournante de quatre articles en vedette en haut, avec lecture automatique et flèches, puis deux colonnes de cartes dont le texte se soulève sur l'image Cela fonctionne comme une page de blog ou comme la section des articles d'une page d'accueil.

Il y a un deuxième widget HTML d'une ligne directement au-dessus du carrousel Il garde le reste de la page à l'intérieur de son conteneur, alors laissez-le en place.

6. Broadsheet : blog classique avec une barre latérale

La mise en page que la plupart des gens imaginent lorsqu'ils disent“blog page” Un flux de messages horizontaux s'étend vers la gauche, et une barre latérale collante à droite contient un champ de recherche, des publications récentes, des liens de sujet et une carte d'abonnement La boîte de recherche est le widget Master Addons Search.

Les liens du sujet sont des espaces réservés Pointez chacun d'eux sur l'une de vos pages de catégorie et pointez le bouton d'abonnement sur votre formulaire d'inscription.

7. Minuit : blog de la carte noire

Une disposition de carte sombre à deux colonnes avec des cartes de style verre, une douce lueur derrière l'en-tête et une couleur d'accent menthe. Il a été conçu pour les blogs de produits, de développeurs et d'agences, ainsi que pour les journaux de changement qui veulent ressembler à une partie du produit.

La page définit son propre fond sombre, elle fonctionne donc même sur un thème clair Si votre thème ajoute un en-tête et un pied de page lumineux autour, définissez la disposition de la page sur Elementor Canvas.

8. grand livre : liste de bases de connaissances

Une mise en page compacte du centre d'aide : une barre de recherche, des onglets de sujet soulignés, puis une courte ligne par article avec un bouton Lire à droite. Utilisez-le pour la documentation, les notes de version ou une bibliothèque de ressources, où les lecteurs analysent une liste de titres pour trouver celui dont ils ont besoin.

Comme Kiosk, les onglets proviennent de Filter By Category, alors choisissez vos propres catégories après l'importation.

9. Frost : lignes de fonctionnalités pleine largeur

Un message par ligne Chacun obtient une image large de 430 px avec une carte de légende blanche soulevée sur son coin inférieur gauche Il donne à chaque histoire un emplacement pleine largeur, qui convient aux studios, portefeuilles et écriture longue forme, où vous publiez moins souvent et chaque pièce mérite l'espace.

10. Plaine : minimum à deux colonnes

Un index calme et centré sur deux colonnes sur un fond en papier souple Chaque carte montre une photo 4 :3, une date et un titre serif, sans bordures, boutons ou étiquettes de catégorie C'est celui à choisir quand votre thème est déjà minimal et que le blog doit l'égaler.

Comment créer une page de blog avec un modèle Elementor

Les modèles de page de blog fonctionnent sur n'importe quelle page Elementor Les étapes sont les mêmes pour les dix.

1. Téléchargez le zip et décompressez-le sur votre ordinateur Elementor importe le .json dossier ; un .zip importe uniquement lorsque l'option Activer les téléchargements de fichiers non filtrés est activée sous Élémenteur > Paramètres > Avancé.
2. Dans votre tableau de bord, accédez à Modèles > Modèles enregistrés et cliquez sur Modèles d'importation.
3. Choisissez le .json fichier et cliquez sur Importer maintenant Le modèle apparaît dans votre liste de modèles enregistrés.
4. Créez une nouvelle page, appelez-la Blog (ou ce que vous voulez), et ouvrez-la avec Elementor.
5. Cliquez sur l'icône du dossier, ouvrez l'onglet Mes modèles et cliquez sur Insérer à côté du modèle.
6. Publiez la page et ajoutez-la à votre menu.

Si vous n'avez pas importé de modèle Elementor auparavant, le guide d'importation des modèles Elementor marche à travers chacun de ces écrans Une fois que vous avez fait le design vôtre, vous pouvez enregistrez la page en tant que modèle et exportez-la en tant que JSON pour le réutiliser sur un autre site.

Ne le définissez pas comme la page” de WordPress“Posts

WordPress a une option de page Posts sous Paramètres > Lecture Laissez-la vide pour la page que vous venez de construire Lorsqu'une page est définie comme page Posts, WordPress la remplace par la propre archive de votre thème, et votre conception Elementor ne publie jamais le modèle comme une page normale et crée plutôt un lien vers celle-ci à partir de votre menu Notre tutoriel sur la façon de créer une page de blog avec Elementor explique pourquoi plus en détail.

Paramètres qui valent la peine d'être vérifiés après votre importation

• Les publications par page et la commande sont en direct dans les options d'affichage du widget Articles de blog Chaque modèle est livré avec entre 4 et 10 publications par widget.
• Kiosque et Ledger ont besoin de vos propres catégories dans Filtrer par catégorie avant que leurs onglets n'aient un sens.
• Le nombre de colonnes doit rester à 1 colonne sur les mises en page de la liste (colonne, feuille de lecture, grand livre et gel), ou la liste se transforme en grille.

Se tourner vers la pagination

Vous ne verrez pas de numéros de page sous les publications de nos démos en direct Nous avons volontairement désactivé la pagination, pour conserver chaque démo sur un écran de publications. Sur votre propre site, vous pouvez l'activer en quelques clics et le styliser pour qu'il corresponde au modèle que vous avez choisi.

1. Cliquez sur le widget Articles de blog et restez dans l'onglet Contenu.
2. Dans Options d'affichage, basculez Pagination vers Oui. Posts Par Page définit ensuite le nombre de publications qui apparaissent sur chaque page.
3. Modifiez le texte de la page suivante et le texte de la page précédente si vous souhaitez des étiquettes différentes et choisissez un alignement.

Pour modifier l'apparence des numéros de page, ouvrez l'onglet Style et développez la section Pagination Vous obtenez une typographie, des couleurs séparées pour la page normale, en vol stationnaire et active, plus une bordure, un rayon, un remplissage et un espacement Dans la capture d'écran ci-dessous, la page active utilise l'accent de rouille de Signal et les autres sont blancs avec une fine bordure, de sorte que les chiffres se fondent dans les cartes.

Sur Signal et Marquee, activez la pagination pour le deuxième widget Blog Posts uniquement, la grille sous les articles présentés La bannière en vedette et le carrousel en haut sont censés rester les mêmes sur chaque page, alors laissez la pagination pour eux.

Faire correspondre les pages de votre catégorie

Un modèle de page de blog stylise la page sur laquelle il se trouve Vos archives de catégorie, de balise et d'auteur sont des pages séparées, et elles conservent la conception de l'archive de votre thème à moins que vous ne la remplaciez Pour leur donner le même look, construisez un modèle d'archive dans un constructeur de thème, insérez le même design, et définissez la Source du widget Blog Posts sur Current Query afin qu'il suive la catégorie qui est consultée guide des modèles d'archives couvre le côté Master Addons Theme Builder de cela.

5 modèles gratuits de publication unique Elementor

Ceux-ci contrôlent ce qu'un lecteur voit lorsqu'il ouvre l'un de vos messages Chaque champ est rempli de balises dynamiques, donc un modèle stylise chaque article du site Les démos en direct ci-dessous sont remplies d'un exemple d'article afin que vous puissiez les voir avec du contenu réel ; le téléchargement contient la version dynamique qui tire dans vos propres messages.

Parce que les champs sont des balises dynamiques, qui sont livrés avec le plugin gratuit Master Addons, l'importation d'un modèle prend environ une minute Ne vous inquiétez pas s'il semble à moitié vide juste après l'importation, avec des cases grises où le titre, l'image et l'article devraient être (comme la capture d'écran ci-dessus).Le modèle ne montre rien jusqu'à ce qu'il ait un vrai article à lire, vous avez donc besoin d'au moins un article publié avec un titre, une image en vedette et du contenu Une fois que vous l'appliquez dans votre créateur de thème, chaque article de votre blog passe automatiquement au nouveau design. Les étapes sont en cours Comment créer un modèle de publication unique dans Elementor: juste après les cinq modèles.

11. Folio : éditorial classique

L'article de magazine fiable Une ligne de catégorie, un titre serif, un standfirst et une signature avec la photo de l'auteur se trouvent au-dessus d'une image en vedette large En dessous se trouvent une boîte de contenu “In this article”, le post dans une colonne de lecture 748 px, une carte d'auteur et trois messages connexes La boîte de contenu est le Master Addons Widget Table des matières.

12. Immersif : héros à part entière

L'image en vedette remplit la majeure partie de l'écran avec le titre, la catégorie et la signature dessus L'article se trouve ensuite sur un panneau blanc soulevé sur la photo, avec des boutons de partage qui restent à côté du texte pendant que vous faites défiler Une bande d'abonnement sombre et deux messages associés ferment la page Utilisez-le pour les fonctionnalités et les histoires avec une photographie forte.

Les boutons de partage construisent leurs liens X, Facebook et LinkedIn à partir de l'adresse de la page lorsqu'elle se charge, et le quatrième bouton copie le lien Aucun script tiers n'est impliqué.

13. Manuel : didacticiel de barre latérale collante

Une mise en page de documentation sans image en vedette Un badge de catégorie et une date de” mise à jour par les“ se trouvent au-dessus d'un titre propre, et un rail de contenu collant à gauche met en évidence la section que vous lisez Les blocs de code, le code en ligne et les cases d'appel sont conçus pour la rédaction technique La page se termine par un “Was this article utile ?” row et une courte liste de ce qu'il faut lire ensuite.

14. Calme : essai textuel

Aucune image du tout : un titre serif, une position debout en gris, une casquette de dépôt et une colonne de 660 px placée dans un visage serif Les citations pull sont centrées et italiques Après l'article il y a une petite signature d'auteur, une carte d'abonnement et une liste de lecture ultérieure uniquement textuelle Il convient aux essais, aux articles d'opinion et aux bulletins d'information qui vivent sur le web.

15. Casefile : étude de cas visuelle

Construit pour les agences et les studios qui publient leur travail sous forme de publications Le titre se trouve à gauche et une carte d'information sur le projet à droite, suivie d'une large image de couverture, de l'écriture, d'une galerie à trois colonnes, d'un appel à l'action et de deux autres études de cas.

La carte de faits indique trois champs personnalisés sur chaque publication : client, year et service. La galerie montre les images jointes au message, ce qui signifie celles téléchargées depuis l'intérieur de l'éditeur de ce message. Le readme explique les deux.

Comment créer un modèle de publication unique dans Elementor

Un modèle de publication unique n'a de sens qu'à l'intérieur d'un générateur de thème. Déposés sur une page ordinaire, les balises dynamiques afficheraient le titre propre de la page et une image vide, car une page n'est pas une publication. Un générateur de thème est ce qui indique à WordPress d'utiliser votre conception chaque fois qu'un visiteur ouvre une publication.

Avec le constructeur de thèmes Master Addons

C'est ainsi que les cinq modèles ont été construits et testés Le type de modèle Single dans les modules complémentaires Master Addons Constructeur de thèmes fait partie de Maître Addons Pro.

1. Importer le .json fichier sous Modèles > Modèles enregistrés, de la même manière qu'un modèle de page de blog.
2. Accédez à Modules complémentaires > Générateur de thèmes, cliquez sur Ajouter un nouveau et choisissez Simple comme type de modèle.
3. Modifier le nouveau modèle avec Elementor, ouvrir l'icône du dossier, aller dans Mes modèles et insérer le design.
4. Définissez la condition d'affichage pour inclure > Singulier > Publication. Pour utiliser une mise en page pour un type de contenu uniquement, comme des études de cas, choisissez ces publications dans la condition au lieu de toutes les publications.
5. Enregistrez, puis ouvrez n'importe quel message sur votre site pour le vérifier.

Le documentation modèle unique affiche chacun de ces écrans, et le Guide du constructeur de thèmes Elementor explique comment les autres types de modèles (en-tête, pied de page, archive et plus encore) s'emboîtent.

Avec Elementor Pro ou un autre constructeur de thèmes

Si vous utilisez déjà le générateur de thèmes d'Elementor Pro, ou un autre générateur de thèmes qui vous permet de concevoir la disposition de la publication unique dans Elementor, vous pouvez également y utiliser ces modèles Créez un nouveau modèle de publication unique dans votre constructeur, insérez la conception de Mes modèles et définissez-la pour l'appliquer à vos publications.

Gardez Master Addons installé et actif Les champs titre, image, contenu et auteur proviennent des Master Addons Balises dynamiques« , et la zone de contenu et les publications associées proviennent des widgets Master Addons. Sans le plugin, ces parties seraient vides. Nous avons testé les modèles dans le Master Addons Theme Builder ; si quelque chose ne regarde pas dans un autre builder, les notes readme sont le premier endroit à vérifier ».

Deux détails à laisser en place

• Le widget de corps d'article dans Folio, Immersive, Manual, Quiet et Casefile propose une classe CSS appelée entry-content. Le widget Table des matières recherche les titres à l'intérieur de cet élément, donc la suppression de la classe vide la zone de contenu.
• Le widget HTML en haut de chaque modèle contient la feuille de style, et dans Folio et Manuel un court script qui remplit la liste des contenus si le widget ne l'a pas déjà fait Modifiez les styles, mais ne supprimez pas le widget.

Personnalisation des couleurs et des polices

Chaque modèle conserve ses couleurs dans une poignée de variables CSS en haut de sa feuille de style : encre pour les titres, corps pour le texte du paragraphe, coupé pour les dates et accent pour les liens et les étiquettes Ouvrez le widget HTML, modifiez ces valeurs et tout le design suit. Les polices sont définies dans la même feuille de style, donc échanger Georgia contre votre serif de marque est un changement d'une ligne.

Si vous préférez travailler section par section, la même approche passe par notre modèles de section Élémenteur gratuit(, qui s'associent bien à ces mises en page de blog lorsque vous construisez le reste du site).

Dépannage

“Contenu invalide dans le fichier” lors de l'importation

Vous téléchargez le zip lui-même, ou un fichier qui n'est pas une exportation Elementor. Décompressez le téléchargement et importez le .json fichier.

La page du blog est vide

Le widget Articles de blog a besoin de publications publiées avec des images en vedette Sur Kiosque et Ledger, une grille vide signifie généralement Filtrer Par Catégorie pointe toujours sur les catégories qui n'existent pas sur votre site Ouvrez le widget et choisissez le vôtre.

Le design est différent de la démo

Votre thème peut être en ajoutant son propre en-tête, pied de page ou largeur de page autour du modèle Définissez la disposition de la page sur la toile Elementor ou la largeur complète de l'élémentor dans les paramètres de la page.

Le modèle de publication unique n'apparaît pas sur mes publications

Cochez trois choses dans votre générateur de thèmes Le type de modèle doit être Single, la condition d'affichage doit inclure vos publications, et un seul modèle Single doit correspondre aux mêmes publications Dans le Master Addons Theme Builder, lorsque deux modèles actifs correspondent, le plus récent gagne Effacement de votre plugin de cache après l'enregistrement aide également.

Le carrousel s'effondre à l'intérieur de languettes ou d'un accordéon

Les balayeurs mesurent leur largeur lorsque la page se charge Si vous déplacez le carrousel de Marquee dans une languette cachée ou un panneau accordéon, définissez Observer sur Yes dans ses paramètres de carrousel.

Questions fréquemment posées

Choisissez une mise en page et créez votre blog

Commencez par le modèle de blog Elementor qui correspond à la façon dont vous publiez : Signal ou Marquee si vous publiez souvent et souhaitez une première page, Colonne ou Calme si les mots comptent le plus, Mosaic ou Frost si les photos le font, et Ledger ou Manuel pour la documentation Téléchargez le JSON, importez-le et pointez-le sur vos propres messages.

Lorsque le blog est terminé, les mêmes étapes d'importation fonctionnent pour toutes les autres pages de votre site, de la page d'accueil au formulaire de contact.

Les liens “Getobtenir” dans cet article sont des liens de référence Si vous achetez un hébergement via un, nous pouvons gagner une commission sans frais supplémentaires pour vous.