Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. WordPress et ses extensions
  3. Construire un site
Extrait - WordPress et ses extensions Développez votre site de A à Z (théorie, TP, ressources)
Extraits du livre
WordPress et ses extensions Développez votre site de A à Z (théorie, TP, ressources) Revenir à la page d'achat du livre

Construire un site - Elementor

Introduction

L’extension Elementor est une extension Page Builder ; elle ajoute à WordPress un éditeur complet qui permet de faire des templates de page avec des rangées et des colonnes, afin d’y greffer des modules et être responsive.

On peut créer n’importe quel site avec les extensions Page Builder et créer le design que l’on souhaite sans nécessairement se soucier du thème installé. Il est donc préférable d’utiliser un thème de base lorsque l’on construit un site entièrement avec une extension Page Builder.

Beaucoup de thèmes avancés utilisent une extension Page Builder afin de le greffer à un design prédéfini et le rendre le plus modulable possible.

Il existe de nombreuses extensions Page Builder comme Elementor. Ces extensions fonctionnent toutes plus ou moins sur le même principe. Prenons, par exemple, SiteOrigin, Elementor, Beaver... il s’agit de grosses extensions, il ne faut donc pas hésiter à consulter la documentation ou à visionner des tutoriels.

Dans ce chapitre, vous allez créer une page d’accueil qui va ressembler à cela :

images/05EI01N.png

Page d’accueil du site que vous allez créer avec l’extension Elementor et qui va servir de maquette

Installation de l’extension Elementor

Installez l’extension Elementor depuis le répertoire des extensions WordPress et activez-la. Un panneau de configuration rapide s’affiche avec cinq étapes que vous avez la possibilité de modifier ultérieurement.

La première étape, Elementor account, implique de renseigner votre adresse e-mail afin de connecter votre compte, mais vous avez la possibilité de l’ignorer.

La deuxième étape, Hello Theme, vous propose d’installer Hello, thème basique (blank theme) officiel d’Elementor. Installez-le et activez-le ; vous pouvez également l’ajouter plus tard dans Apparences - Thèmes - Ajouter.

La troisième étape, Site name, est la configuration du titre de votre site. Vous avez la possibilité de le modifier à tout moment dans le menu principal Réglages - Général - Titre du site.

La quatrième étape, Site logo, permet d’ajouter votre logo.

La cinquième et dernière étape, Good to Go, permet de créer un template de page ou d’importer des templates.

images/05EI02N.png

Pages d’installation de l’extension Elementor

Après l’installation du thème Hello, nous allons configurer WordPress en créant l’arborescence.

Création de l’arborescence du site et premiers réglages du site

1. Création des pages

Pour créer l’arborescence du site, il faut créer toutes les pages. Allez dans le menu principal, onglet Pages et créez les pages : Accueil, Présentation, PsychologieSpécificités, En pratique et Contact.

images/05EI03N.png

Page Pages avec les pages de l’arborescence

2. Création du menu

Créez ensuite le menu dans Apparences - Menus, nommez le menu Principal, puis enregistrez-le. Ajoutez-lui les pages créées par glisser-déposer du panel Ajouter des éléments de menu à la Structure du menu, en respectant l’ordre de l’arborescence et enregistrez le menu.

images/05EI04N.png

Création du menu dans Apparences - Menus

Le menu est prêt à être utilisé. Vous l’intégrerez plus tard à la section En-tête du site.

3. Définir la page Accueil comme page d’accueil

Pour définir la page Accueil comme page d’accueil, rendez-vous dans le menu principal dans Réglages - Lecture, puis définissez La page d’accueil affiche une page statique, en sélectionnant la page d’accueil. Puis cliquez sur Enregistrer les modifications.

images/05EI05N.png

Sélection de la page Accueil comme page d’accueil dans l’onglet Réglages - Lecture

4. Réglage des permaliens

Maintenant, définissez...

Création de l’en-tête du site

Pour créer l’en-tête du site sur Elementor, il vous faudra la version Pro d’Elementor. Des alternatives existent cependant en installant une extension qui nous permettra de créer un en-tête et un pied de page gratuitement.

Installez et activez l’extension Elementor Header & Footer Builder par Brainstorm Force, Nikhil Chavan.

images/05EI07N.png

Page de téléchargement pour installer l’extension Elementor Header & Footer Builder par Brainstorm Force, Nikhil Chavan

Un nouvel onglet est apparu dans Apparences - Elementor Header & Footer Builder, cliquez sur Ajouter nouveau. Un pop-up s’ouvre mais ignorez-le.

Pour créer l’en-tête, saisissez le titre en le nommant En-tête, puis dans les options choisissez comme Type de modèle : En-tête, et Afficher sur : Tout le site, puis enregistrez les modifications.

images/05EI08N.png

Création de la page de configuration pour l’En-tête

Dorénavant, l’en-tête initial va être remplacé par cet en-tête. Pour l’instant, rien n’apparaît car nous n’avons pas mis en page l’en-tête. Pour ce faire, cliquez sur le bouton bleu Modifier avec Elementor.

Vous allez construire l’en-tête comme sur la maquette du site. Il faut ajouter le logo et la phrase d’accroche à gauche et le menu à...

Création du pied de page

Tout comme pour la partie En-tête, créez le Pied de page. Il se composera de deux rangées, une première composée de trois colonnes de la même taille et une deuxième qui prendra toute la largeur.

Pour quitter la page d’en-tête, une fois enregistré, cliquez dans le menu des options tout en haut à gauche du logo Elementor sur le menu hamburger (trois traits horizontaux). Puis cliquez sur Quitter, afin de revenir à l’éditeur classique.

images/05EI14N.png

Menu hamburger en haut à gauche du logo Elementor

Puis cliquez sur le bouton Ajouter un nouveau !

Cette fois-ci, le titre sera : Pied de page, le Type de modèle : Pied de page, et Afficher sur : Tout le site. Puis cliquez sur le bouton bleu Publier.

images/05EI15N.png

Page de configuration pour le Pied de page

Cliquez sur le bouton bleu Modifier avec Elementor pour mettre en page le pied de page et construisez la structure des rangées et colonnes.

images/05EI16N.png

Structure de rangées et de colonnes pour le Pied de page

Ajoutez la couleur #B1A17F aux arrière-plans des rangées ainsi qu’une bordure continue de 1px en haut de la rangée du bas.

images/05EI17N.png

Page des options de la rangée pour l’arrière-plan

images/05EI18N.png

Page des options de la rangée pour la bordure

Ajoutez ensuite les éléments aux colonnes en cliquant sur Plus à l’intérieur des colonnes....

Création du contenu de la page d’accueil

Pour créer le contenu de la page d’accueil, cliquez sur l’onglet Pages puis sur Accueil. Cliquez ensuite sur le bouton bleu Modifier avec Elementor en haut de la page.

images/05EI22N.png

Bouton Modifier avec Elementor de la page Accueil

Commencez par masquer le titre de la page. Pour cela, cliquez sur l’icône Réglages avec la roue crantée en bas à gauche de la colonne d’options, puis passez l’option Masquer le titre sur Oui.

images/05EI23N.png

Options pour la page d’accueil avec l’option Masquer le titre

Maintenant, créez la structure de la page avec les différentes rangées en fonction de la maquette.

images/05EI24N.png

Structure de la page d’accueil avec les rangées et colonnes

Ajoutez les couleurs d’arrière-plan aux rangées, la première a un fond blanc, la seconde la couleur #B3A07F, la troisième la couleur #D7C9AF et la quatrième la couleur blanche.

Ajoutez ensuite les éléments aux différentes colonnes et ajustez les réglages grâce à la colonne d’options sur la gauche, qui apparaît quand on clique sur l’élément. De même, pour faire réapparaître les options d’une rangée, il faut cliquer sur la rangée.

Ajoutez l’élément Image à la première rangée.

images/05EI25N.png

Élément Image...

Conclusion

À présent, vous avez fini de créer la page d’accueil du site selon la maquette ; vous pouvez reproduire le processus pour les autres pages et construire l’intégralité de votre site.

Vous venez de voir une façon rapide et simple de créer un site internet vitrine avec Elementor, que ce soit pour l’en-tête, le pied de page, ou le contenu.

L’extension Elementor offre une multitude d’options et d’éléments pour construire votre site internet, bien au-delà de ce que nous avons exploré ici. N’hésitez pas à tester les différents éléments et à parcourir également les autres réglages qu’offre Elementor. Avec cette extension, vous pouvez créer n’importe quel design de site.

De nombreuses extensions complémentaires peuvent être ajoutées afin d’augmenter les possibilités de design. Vous pouvez également ajouter des templates préconçus afin d’avoir un design clé en main, si le monde du webdesign ne vous est pas familier.