2. Construire les parties redondantes : header et footer
Pour rappel, le header désigne la partie “haute” d’une page (sa “tête”) et le footer la partie basse du site (son “pied”).
Etape 1 : installer le thème de base
Avant de commencer à bâtir votre thème, commencez par installer le thème “Hello”, qui est le thème officiel d’Elementor.
Pourquoi utiliser ce thème en particulier ? Parce qu’il ne risque pas d’interférer avec les fonctions d’Elementor. D’autres thèmes pourraient en effet empêcher le bon fonctionnement du constructeur.
Plus tard, rien ne vous empêchera d’essayer d’utiliser d’autres thèmes : la plupart sont compatibles avec Elementor.
Néanmoins, sachez que comme nous allons utiliser le constructeur de thème, ça ne sert à rien d’avoir un beau template en amont : nous allons tout faire de A à Z, donc autant partir sur un thème simple en mode “page blanche”.
Etape 2 : installer Elementor ET Elementor Pro
Le processus pour activer Elementor Pro avec une licence officielle se trouve ici : https://docs.google.com/document/d/1yjGPbB3HDmepXldNafzUu6Mu6gIXO2l4ZZ6OiDF8A0w/edit?usp=sharing (connectez-vous avec votre compte ISD Flaubert).
N’oubliez pas que pour profitez de toutes les fonctions de la version pro, il faut également créer un compte (gratuit) sur le site elementor.com, et relier le site que vous créez à votre compte quand Elementor vous le demandera !
N.B : il se peut que les screenshots des tutos que vous allez suivre soient différents de l’interface que vous avez sous les yeux. C’est normal : le cours a été rédigé en février 2023, mais Elementor a évolué depuis ! Les couleurs et la disposition des boutons peuvent avoir changé, mais les principes restent les mêmes.
Etape 2,5 : installer le plugin “classic editor”
Nous verrons un peu plus tard qu’il est plus simple d’utiliser l’éditeur classique de WordPress avec Elementor, plutôt que d’utiliser son éditeur par défaut.
Pour ce faire, rdv dans “Extensions”, “Ajouter” → puis installez et activez “Classic Editor” :
Etape 3 : se rendre dans l’interface du constructeur de thème (= Theme Builder)
Le module “Theme Builder” se trouve dans l’onglet “Modèles”
Une fois dans l’interface, Elementor vous propose d’éditer le modèle de votre choix.
Quelques mots doivent déjà vous paraître familiers :
- En-tête : permet d’agir sur la partie haute du template (header)
- Pied de page : permet d’agir sur la partie basse du template (footer)
- Article Unique : permet d’agir sur le corps des articles publiés dans le blog (pour rappel, corps = ce qui se trouve entre la tête et les pieds 😃 !). Donc en gros, le “milieu” des pages d’articles.
- Page unique : permet d’agir sur le corps des pages du site (= les pages “informatives” du type “qui sommes-nous”, “nous contacter”, etc.)
- Archive : permet d’agir sur les pages de catégorisation (WordPress appelle toute page qui liste d’autres pages des “archives” – ça peut être des pages de catégorie de blog ou des pages qui regroupent les articles selon leur étiquette. Nous y reviendrons + tard…)
- Résultats de la recherche : permet d’agir sur la page qui s’affiche lorsqu’on utilise le moteur de recherche intégré à WordPress
- Boucle : template un peu particulier sur lequel on reviendra bien plus tard – en gros il permet de définir une requête qui va chercher des éléments précis dans la base de données
- Erreur 404 : permet d’agir sur les pages d’erreur 404 – les pages “inexistantes” du site.
Etape 4 : créer le header
Pour cet exercice, nous allons utiliser un en-tête pré-construit disponible grâce à la version pro.
4.1 Créer un premier header vide
Allez dans “En-tête”, puis cliquez sur “Ajouter une nouvelle »
Par défaut, Elementor va vous proposer des modèles préconstruits : choisissez-en un qui vous plaît. Par exemple, celui-ci :
Cliquez simplement sur “Insérer”. Vous devriez obtenir ceci :
Les 2 zones grises correspondent à des éléments dynamiques. On parle d’élément dynamique lorsqu’on fait référence à des scripts qui appelle des variables bien précises.
En l’occurence, l’image est censée appeler le logo officiel du site (que vous pouvez paramétrer via “Apparence → Personnaliser”) et la barre grise est censée appeler un menu que vous avez préalablement enregistré dans “Apparence → Menu”.
4.2 Publier le header
Cliquez sur “Publier” en bas à gauche.
Elementor vous demande “Où voulez-vous afficher votre Modèle ?”
C’est l’étape cruciale qui va déterminer l’affichage de votre header sur l’ensemble du site : ne passez pas à côté !
Cliquez sur “Ajouter une condition”, laissez la proposition “Dans tout le site”, puis Enregistrez.
Pour vérifier que l’enregistrement a bien été effectué, cliquez sur “Voir le site en direct” en bas à gauche :
Si tout s’est bien passé, votre site doit ressembler à ça :
Bravo, vous avez créé le fichier qui gère la partie haute de toutes vos pages ! Essayez de vous rendre sur la page de l’article “Hello World”, vous verrez que le header y est également présent.
4.3 Affecter un logo et un menu principal au site
Le logo
Maintenant que la structure de l’en-tête est définie, il va falloir l’améliorer un peu.
Rdv dans apparence → personnaliser → puis cliquez sur “Identité du site”. Vous pouvez y insérer un logo que vous avez préalablement préparé avec Photoshop (ou un autre logiciel qui permet de préparer des images pour le web).
Si vous le désirez, demandez à l’IA de Midjourney de vous en créer un en suivant ce tuto, ça sera l’occasion pour vous d’apprendre à l’utiliser → https://k-graphiste.com/blog/test-logo-midjourney/
Voici celui qui a été utilisé pour l’exemple si vous voulez aller + vite :
Cliquez ensuite sur “Publier” : toutes les pages doivent désormais avoir ce logo dans la partie haute !
Le menu
Si vous vous souvenez des premiers cours, il faut d’abord créer les pages avant de créer des menus.
Créez quelques pages sur votre site, une ou deux catégories d’articles de blog (que vous alimenterez avec quelques articles générés via chatGPT ou du lorem ipsum !), puis créez un menu avec ces éléments (vous pouvez cocher “En-tête”, mais ce n’est pas indispensable car comme vous le verrez vous pourrez charger n’importe quel menu dans vos templates Elementor !)
Cf l’exemple ci-après :
Retournez voir votre site côté public : le menu doit s’afficher juste sous le logo !
4.4 Améliorez l’apparence de l’en-tête
Retournez dans le constructeur de page d’Elementor maintenant, et rendez-vous sur le header que vous venez de créer.
Vous pouvez agir librement sur chaque widget pour personnaliser l’apparence du header – pour que les couleurs correspondent un peu plus au logo par exemple :
💡 Pro tip : bien utiliser les réglages du site
En théorie, quand vous construisez votre site, vous avez déjà une idée des couleurs à utiliser dans votre charte graphique.
Sachez que vous pouvez les enregistrer comme couleurs globales via le menu général d’Elementor :
Puis rdv dans “Réglages du site” :
Vous avez ainsi accès aux réglages généraux qui peuvent s’appliquer par défaut à tout le contenu (couleurs, typos, etc.) :
Allez dans “Couleurs Globales”, puis définissez une autre couleur comme couleur principale par exemple :
Cliquez ensuite sur “Mettre à jour”, et sortez des réglages du site en cliquant sur la petite croix :
Désormais, à chaque fois que vous voudrez définir la couleur d’un élément, celle que vous avez enregistré dans la palette des réglages du site peut être récupérez rapidement via ce bouton :
Ça devrait vous faire gagner pas mal de temps dans la conception de votre site !
Etape 5 : créer le footer
Maintenant que vous avez créé le header, et pour voir si vous avez bien compris le fonctionnement du constructeur, à vous de jouer pour le footer (= partie basse du site) :
- Créez un nouveau pied de page via le constructeur de thème
- Vous pouvez charger un template prêt à l’emploi ou faire le votre
- Modifiez le de façon à ce que les couleurs coïncides avec celles de l’en-tête
Voici un exemple de ce que ça peut donner au final en quelques clics :
Et en visualisant un article côté front (ça commence à ressembler à quelque chose !) :
Maintenant que le site a une tête et des pieds, il va falloir s’occuper du corps.