skip to Main Content

Comment créer un site Web complet avec Elementor

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Elementor propose régulièrement des thèmes qui vous aident à créer un site Web complet à partir de ces derniers. Chaque mois, nous publions de nouveaux thèmes qui sont construits autour d’un créneau spécifique, mais assez souple pour que vous puissiez les personnaliser enfin qu’ils correspondent à vos propres besoins.

Combinés avec Elementor Pro, ces thèmes vous aident à vous lancer rapidement avec chaque partie de votre site Web, y compris :

les pages statiques, comme la page d’accueil,

  • l’en-tête
  • le pied de page
  • la page 404
  • la section Archive 
  • le  blog
  • les Popups et autres

Dans ce tutoriel, nous allons donc vous montrer comment créer un site Web complet en utilisant le constructeur visuel de pages Elementor.

Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là.

Comment créer un site Web complet avec les thèmes Elementor

Dans ce tutoriel, vous apprendrez à utiliser un thème comme base pour toutes les parties importantes de votre site Web, puis tout assembler pour créer un site Web cohérent.

Plus précisément, le thème Digital Agency.

Votre site web aura un certain nombre de pages de base, telles que les pages :

  • Accueil
  • À propos
  • Services
  • Clients
  • Blog
  • Contact

Et il propose aussi des sections dédiées également au contenu dynamique. Par exemple, vos archives de publication de blog et vos modèles de publication correspondent automatiquement à vos pages autonomes. Vous pourrez également modifier votre en-tête, votre pied de page et vos pages 404.

Voici donc comment créer un site web avec  un thème Elementor :

1. Installer et activer le thème Elementor Hello 

Parce que vous allez utiliser Elementor et un modèle de thème pour créer l’ensemble de votre site Web, vous n’avez pas besoin de rechercher d’autres éléments.

Au lieu de cela, vous aurez juste besoin d’un site web léger et optimisé pour les performances, ce que le thème Elementor Hello fournit.

Pour commencer, accédez à Apparence → Thèmes → Ajouter et rechercher « Hello Elementor« . Ensuite, installez et activez le thème. 

2. Configurer les pages statiques de base de votre site Web

Ensuite, Allez sur le menu Pages → Ajouter pour créer les pages de base de votre site web.

Tout d’abord, créez une page appelée « Accueil » et cliquez sur le bouton Modifier avec Elementor pour lancer Elementor.

Ouvrez Page Settings et modifiez sa mise en page pour qu’elle soit égale à Elementor Full Width.

Ensuite, ouvrez la bibliothèque de modèles Elementor et recherchez « Digital Agency » sous Pages :

Vous devez voir une liste de modèles de page de ce thème. Insérez le modèle Home Page de la liste des modèles.

Maintenant, vous devriez voir une page d’accueil complète. L’entête semble un peu terne pour l’instant – mais ne vous inquiétez pas, nous allons corriger cela bientôt.

Ensuite, utilisez Elementor Finder pour ajouter une autre page à utiliser pour votre page « À propos« .

Comme avant, modifiez la Mise en page – Page Layout – à Elementor Full Width. Ensuite, ouvrez la bibliothèque de modèles et insérez le modèle About du thème Digital Agency.

Maintenant, il suffit de répéter le même processus pour créer toutes les autres pages, y compris : Services, Clients, et Contact.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Ne vous inquiétez pas pour la page Blog pour l’instant. Cette page n’est pas statique comme les autres. Pour cette raison, vous allez là créer via une méthode différente (que nous couvrirons plus tard dans ce tutoriel).

Pour terminer la configuration de vos pages statiques, vous devez indiquer à votre installation WordPress d’utiliser une page d’accueil statique. Pour ce faire…

  • Aller sur Settings → Reading
  • Choisir  Static page sous les paramètres de votre page d’accueil 
  • Sélectionnez la page qui intègre le modèle de page d’accueil du thème

3. Créer les autres parties de votre site web

Maintenant, vous êtes prêt à créer les autres parties de votre site Web à l’aide de Elementor. Elementor vous permet d’aller au-delà de la création de pages statiques(comme vous l’avez fait ci-dessus).

Avec Elementor, vous pouvez également concevoir des sections telles que : l’en-tête; le pied de page, etc…

Et grâce au thème Elementor, vous pourrez importer des modèles pour toutes les sections qui se trouvent déjà dans les pages statiques que vous avez créées dans l’étape précédente.

Pour accéder au constructeur visuel d’Elementor, allez sur Templates → Theme Builder. Vous devrez installer Elementor Pro pour pouvoir accéder à ce dernier.

Maintenant, il est temps de créer vos sections

En-tête

Pour commencer, accédez à l’onglet Header de l’interface du constructeur visuel, puis cliquez sur Add New Header. Sur l’écran suivant, donnez-lui un nom, puis cliquez sur Create Template.

Ensuite, vous verrez une sélection de modèles dans la bibliothèque Elementor. Tout comme vous l’avez fait avec les pages statiques, recherchez « Digital Agency », puis insérez le  :

Maintenant, vous devriez voir un aperçu visuel de votre en-tête, ainsi qu’un espace vide pour votre menu de navigation.

À l’heure actuelle, le menu de navigation est vide parce que vous n’avez pas encore créé de menu. Pour créer votre menu…

  • Aller sur  Apparence → Menus dans votre tableau de bord WordPress
  • Donnez un nom à votre menu
  • Cliquez sur Créer le menu

Une fois que vous avez créé un menu, vous pouvez ajouter les pages que vous avez créées à l’étape #2 à votre menu de navigation.

Lire aussi : 10 outils d’automatisation pour marketing des petites entreprises

Lorsque vous avez terminé d’ajouter des éléments de menu, enregistrez votre menu et retournez à votre modèle d’en-tête dans l’interface Elementor.

Ensuite, publiez votre en-tête et utilisez les conditions d’affichage pour afficher votre modèle d’en-tête sur l’ensemble de votre site web. Si vous le souhaitez, vous pouvez également utiliser les conditions d’affichage pour créer différents en-têtes pour différents types de contenu :

Ensuite, appuyez sur Enregistrer et fermer.

Pied de page

Maintenant, il est temps de créer le pied de page de votre site web :

  • Revenir à l’interface du constructeur visuel de page
  • Cliquez sur l’onglet Footer 
  • Cliquez sur le bouton pour Add New Footer
  • Dans le pop-up, donnez un nom à votre pied de page et cliquez sur Create Template

Maintenant, vous devriez voir une liste de modèles de pieds de page comme vous l’avez fait avec votre en-tête. Recherchez « Digital Agency » et insérez le modèle de pied de page.

Une fois que vous avez inséré le modèle de pied de page, vous devriez voir un aperçu de votre pied de page :

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Ensuite, publiez votre modèle de pied de page et utilisez les conditions d’affichage pour l’afficher sur l’ensemble de votre site web.

Page Blog

Contrairement aux pages statiques que vous avez créées à l’étape #2, la page blog de votre site web est une page « archive ». Fondamentalement, cela signifie qu’il affiche dynamiquement le contenu le plus récent de votre site web.

Si un utilisateur clique sur un élément spécifique sur la page blog, il sera conduit à une page avec le contenu de cet élément. C’est ce qu’on appelle la page « unique ». Votre conception unique garantit que tout votre contenu aura le même style de base – la seule chose qui change est le contenu réel (comme le titre de l’article, le corps, l’image à la une, etc…).

Découvrez également Comment ajouter la table des matières sur WordPress avec Elementor

Pour créer des pages archives et des modèles de pages uniques, vous devez utiliser le constructeur visuel Elementor – et non les zones page ou article par défaut de WordPress.

Pour commencer…

  • Ouvrir l’interface Theme Builder
  • Accédez à l’onglet Archive
  • Cliquez sur Add New Archive
  • Donnez-lui un nom et cliquez sur Create Template

Comme pour votre en-tête et votre pied de page, vous verrez une liste de modèles de page d’archive. Recherchez le modèle « Digital Agency » et insérez-le.

Maintenant, vous devriez voir la conception de base pour votre page de nouvelles, bien que le seul contenu sera le post par défaut « Hello World! » de WordPress :

Pour l’instant, tout ce que vous devez faire est de publier votre page d’archive et de la définir pour l’afficher sur toutes les archives.

Lire notre guide sur Comment migrer manuellement un site web WordPress

Ensuite, vous pouvez aller à la zone des publications régulières de WordPress et créer de nouveaux articles de blog. Affectez chaque article à une catégorie appelée “Beyond News”.

Maintenant, lorsque vous accédez à votre page d’archive, vous devriez automatiquement voir tous ces nouveaux articles :

Création de la page modèle d’article de blog

À ce stade, votre page de blog possède un look assez convivial. Mais si vous cliquez sur un article de blog spécifique, la mise en page ne correspondra pas au reste de votre site web.

Pour résoudre ce problème, vous devez créer un modèle « unique » avec Elementor  :

  • Ouvrir le constructeur visuel Elementor
  • Accédez à l’onglet Single
  • Cliquez sur Add New Single

Dans le pop-up New Template :

  • Donnez-lui un nom
  • Sélectionnez Post dans la liste déroulante Select Post Type. Cela indique à Elementor que vous souhaitez utiliser ce modèle pour vos publications de blog (par opposition aux Pages ou à un autre type de publication personnalisé que vous pourriez utiliser)

Une fois de plus, vous verrez la bibliothèque de modèles Elementor. Recherchez le modèle d’article unique du template « Digital Agency »  et insérez-le.

Lire également Mode maintenance sur WordPress : Explication et configuration

Si vous le souhaitez, vous pouvez utiliser les nombreux widgets de données de publication dynamique pour contrôler l’apparence de votre page.

Par exemple, si vous modifiez le widget  Post Info, vous pourrez contrôler les éléments de métadonnées qui apparaissent, comme sur la publication…

  • Auteur
  • Date de publication
  • Commentaires
  • Etc.

Une fois que vous êtes satisfait de votre modèle d’article, cliquez sur Publish. Ensuite, vous pouvez utiliser les options d’affichage de sorte que ce modèle unique ne s’applique qu’aux publications de la catégorie « Beyond News »:

  • Sélectionner dans la catégorie
  • Choisissez la catégorie Beyond News

Ensuite, appuyez sur Enregistrer et fermer.

Maintenant, tous vos articles de blog devraient avoir une conception qui correspond au reste de votre site web.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Pour terminer les choses, accédez à Apparence → Menus et ajoutez votre page de blog à votre menu de navigation. Pour ce faire, vous pouvez ajouter un lien vers la catégorie « Beyond News » dans la section Catégories.

Page 404

Enfin, vous devez créer la page 404 de votre site Web. La page 404 de votre site web est ce que les visiteurs verront s’ils suivent un lien brisé ou essayent de visiter une page qui n’existe pas.

Découvrez également nos 5 plugins WordPress pour gérer au mieux les erreurs 404

Pour créer votre page 404, utilisez le constructeur visuel Elementor pour ajouter un autre modèle unique. Uniquement maintenant, utilisez la liste déroulante Select Post Type pour sélectionner 404 Page :

Insérez le modèle de page 404 comme on l’a fait ci-dessus. Ensuite, publiez votre modèle pour terminer votre site Web.

Obtenez Elementor Pro Maintenant !

Conclusion

Voila ! C’est tout pour ce guide qui vous montre étape après étape comment créer un site Web complet avec Elementor. Si vous avez des commentaires ou des suggestions, n’hésitez pas à nous en faire part dans la section réservée.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer