On a vu comment les pages créées avec Elementor s’organisent en Section puis en colonnes puis en widgets.
On sait paramétrer des widgets pour avoir exactement ce qu’on veut en terme de rendu.
On va donc créer notre HomePage avec Elementor. Ce chapitre va être sous forme de travaux pratiques ou on va volontairement copier un design assez complexe pour nous permettre d’apprendre rapidement à obtenir exactement ce que l’on veut pour son site.
Sommaire chapitre 8 :
Pour être efficace et être certain de faire quelque chose de bien, on va partir de ce qui fonctionne.
Pour cela il suffit d’aller chercher les sites des concurrents, les sites les mieux référencés sur Google dans notre domaine. Ou encore un site qui visuellement ressemble à ce que l’on veut pour le sien.
Ensuite on va lister l’ensemble des contenus qu’on veut voir apparaitre sur son site puis le découper en sections.
Et il ne restera plus qu’à copier le design et y intégrer son contenu.
Un autre moyen ensuite sera d’utiliser les templates Elementor pour aller plus vite.
Par contre ils sont très génériques et nécessite d’être personnalisés.
On va donc partir d’un exemple et apprendre à monter une page entièrement.
On va utiliser le modèle de HomePage de Nathan Barry qui est un auteur entrepreneur :
Voila notre modèle.
Sur notre tableau de bord on va donc créer une nouvelle page qui sera notre HomePage brouillon.
On va donc dans Tableau de bord > Pages > Ajouter
En nom de page on va mettre Nathan Barry Homepage
Etat / Visibilité : Privé
Et sous Attribut de la page > Modèle : Elementor Canevas
En on clique sur le bouton Modifier avec Elementor
Donc on part d’une page vide :
On va d’abord se concentrer sur la page que l’on veut copier pour comprendre le nombre de sections et le nombre de colonne dans chaque sections.
Trouver les sections dans la page :
Sur cet exemple c’est assez intuitif.
Chaque section a un fond différent et on voit rapidement comment il a construit sa page :
Trouver les colonnes dans chaque section :
Ensuite a l’intérieur de chaque section on regarde le nombre de colonnes.
Ici sur la première on voit deux colonnes
Sur la seconde, trois colonne
Et sur la troisième, deux colonnes :
Ajouter le contenu dans la section :
Une fois qu’on a trouvé sa grille, on retourne dans Elementor et on paramètre de la même manière sa page, avec une première section de deux colonnes :
Puis on va ajouter le contenu dans la section :
Dans notre première colonne on a :
- Un titre
- Un Texte
- Une box pour recevoir des emails :
On a pas encore créé d’email via un service comme Mailchimp pour pouvoir construire ses emailings list donc pour l’instant on a pas de box email.
On va juste mettre un bouton avec l’url “mailto:monmail@mail.com” pour pouvoir être contacté.
Donc on ajoute les éléments titre, texte et bouton :
Et a droite une photo.
On ajoute une image et on importe la photo :
Et maintenant qu’on a bien tous les éléments de la première section, on va pouvoir la paramétrer.
Designer la section :
On commence par la section et on termine par les widgets.
Donc étape 1 : On paramètre le fond de sa section et la largeur que prennent les colonnes.
Ici sur notre exemple Nathan a mis un fond bleu ciel et une largeur d’environ 900 px.
On va donc dans Section > Mise en page
et sous on met Encadré et 900 :
Et toujours dans Section on va mettre un fond bleu ciel.
On va dans le deuxième onglet Style et on sélectionne un arrière plan classique et en couleur un bleu ciel.
Voila pour la section, on va maintenant passer aux colonnes.
Designer la colonne :
Voila pour la section, on va maintenant passer aux colonnes.
La répartition des colonnes sur la page de Nathan n’est pas exactement 50/50 mais plus 55/45.
On va donc cliquer sur la limite entre les deux colonnes et on va déplacer vers la droite le curseur pour obtenir 55/45 :
Et pour l’instant c’est tout ce qu’on va faire sur la colonne car elle n’a pas de fond et nous y reviendrons après pour régler les marges.
On passe maintenant aux Widgets de contenu.
Designer le contenu des colonnes :
On va commencer par le contenu et ensuite on paramètrera le design.
On va renseigner le titre, le paragraphe en dessous, la phrase au dessus du bloc de la newsletter et le bouton (qu’on va remplacer par un bouton de contact).
Ensuite on va aller modifier pour chaque texte, la police, la taille, la couleur pour ressembler au maximum à la page de Nathan.
On va donc pour chacun des éléments titres et texte aller dans l’onglet Style.
Pour notre titre ça donne :
Ensuite pareil pour le sous titre :
Et enfin pour la phrase en italique au dessus de la box de la newsletter :
Ensuite pour le bouton on va faire un bouton carré et orange pour essayer de ressembler avec le site de Nathan.
Dans l’onglet contenu, on va mettre Contact en texte et dans le lien on va indiquer “mailto:” suivi de notre adresse email. Ca va permettre aux personnes qui cliquent sur le bouton d’avoir un fenêtre qui s’ouvre avec notre email pré-rempli :
Puis dans l’onglet Style on va mettre une police un peu haute et fine comme sur la page de Nathan.
On va mettre en Majuscule :
En enfin on va gérer la bordure : on va mettre une bordure continue transparente (pour ne pas afficher la bordure mais pour pouvoir gérer le rayon de la bordure pour arrondir ou non les angles).
Et en rayon de la bordure on va mettre 0 pour avoir un bouton bien carré.
Et on va gérer la couleur avec un orange vif :
Et dans Au Survol, on va mettre un fond bleu très foncé comme sur le site de Nathan pour faire changer de couleur le bouton au survol du bouton avec la souris :
Et du coup on obtient ça :
Par rapport au site de Nathan, ça commence à ressembler à ce qu’on cherche :
Mettre en page la section : Marges et espacements
Donc maintenant on a le contenu avec le bon design c’est à dire les bonnes couleurs, tailles, typographies bordures etc.
On va maintenant s’attacher à la mise en page de la section donc gérer les marges et les espaces à l’intérieur des colonnes et entre les widgets.
Dans l’exemple de Nathan, on a la photo qui déborde sur la section d’en dessous :
Pour faire ça c’est assez simple.
Première chose, on ajoute une section en dessous (juste pour mieux gérer le débordement :
Et a l’intérieur on met un espaceur à 200 px juste pour lui donner une largeur en attendant qu’on y mette d’autres éléments :
L’idée est simplement qu’on puisse bien voir le débordement .
Donc maintenant on va aller faire déborder notre photo sur la section du dessous.
Pour ça on retourne sur notre photo, dans l’onglet Contenu > Taille de l’image on va mettre entière :
Puis dans l’onglet Avancé on va pouvoir gérer les marges.
Ce qui nous intéresse ici ce sont les Marges internes et externes
Un débordement vers le bas c’est simplement une marge externe du bas qui est négative.
Donc on va commencer à délier les marges pour pouvoir les gérer indépendamment en cliquant sur l’icône de la chaine :
Et en marge du bas, on va mettre -80 et on obtient bien un débordement vers le bas sur la section suivante :
Et dans les marges internes on va mettre 20px à gauche et à droite pour aller légèrement réduire la taille de la photo et obtenir ce qu’on cherchait :
Maintenant on va ajouter des espaces et gérer le positionnement du texte sur la colonne.
Sur la page de Nathan, on voit que dans la première colonne, l’ensemble du contenu est aligné au milieu :
Donc on clique sur la première colonne, et dans le premier onglet Mise en page, sous Alignement vertical, on sélectionne Au milieu.
Et le texte va s’aligner au centre de notre colonne :
Et enfin on a au dessus de la photo de Nathan un espace entre le bord de la section et l’image :
Plutôt que d’ajouter un Espaceur, on va simplement augmenter la marge externe supérieure de l’image.
Donc on clique sur l’image et dans l’onglet Avancé, sur la Marge (marge externe) sur le bord du Haut, on va mettre une marge à 20px pour éloigner l’image du bord supérieur de la section :
Et on obtient bien, pour cette première section, le même design que sur la page de Nathan.
La page de Nathan :
Notre page :
On va maintenant passer (plus rapidement) à la section suivante.
Elle va nous permettre de gérer des alignements de textes qui ne sont pas au même niveau avec des Espaceurs.
La section se présente sous la forme de trois colonnes avec un titre et deux textes :
Dupliquer le contenu créé pour gagner du temps :
Donc on a déjà créé la section du dessous.
On va faire clic droit sur notre colonne et la dupliquer deux fois pour avoir nos 3 colonnes comme sur la page de Nathan :
A l’intérieur on va glisser nos éléments :
- Titre dans la première colonne
- Texte dans la seconde
- Texte dans la troisième
Pour pouvoir garder la même typographie, couleur de texte et taille et donc éviter de tout reparamétrer, on va simplement dupliquer le titre qu’on a créé dans la colonne précédente : Clic droit sur le titre > Dupliquer :
Et simplement le faire glisser dans la première colonne de la section en dessous :
Puis on fait la même chose avec le texte qu’on va dupliquer deux fois et faire glisser dans la seconde et troisième colonne :
Ensuite on va faire comme précédemment, on commence par le contenu du titre et des textes en cliquant sur l’élément (titre ou texte) et dans le premier onglet Contenu, en entrant ses textes :
Puis dans le second onglet Style, on va gérer la taille, la couleur et les effets des textes :
Et enfin l’alignement.
Aligner le contenu avec alignement, marges et espaceurs :
Sur la page de Nathan on voit qu’il y a un alignement différent entre le titre et les textes.
On peut voir également qu’il y a des marges assez serrées atour des éléments.
On va faire la même chose pour notre page :
On va commencer par les marges.
Sur la page de Nathan, les colonnes ont une bonne marge interne qui permet d’espacer les paragraphes de textes entre eux.
On va donc cliquer sur la colonne et dans l’onglet Avancé, mettre une marge interne pour chaque colonne à 50px à gauche et à droite :
Puis on va ajouter des Espaceurs au dessus et en dessous (déjà ajouté en dessous) pour pouvoir gérer le placement dans la hauteur de nos éléments.
- Au dessus du titre on va mettre 70px
- Au dessus des textes on va mettre 120px
Et on va mettre 50px sur les Espaceurs du dessous :
Et on voit qu’on est pas aligné avec la section du dessus, notre titre déborde à gauche et le texte déborde à droite :
C’est lié à quelque chose de très simple, les marges de notre section.
Dans la première section le contenu de la section est encadré dans 900px de large. On le voit si on clique sur la première section > Mise en page > Largeur du contenu > Encadré, on a 900px :
Donc on fait la même chose pour cette seconde section.
On clique sur la section > Mise en page > Largeur du contenu > Encadré > 900px et on obtient le même alignement :
Designer dans le détail :
Pour terminer avec le design de cette section, on voit que sur la page de Nathan, le mot Products est souligné :
On ne peut pas souligner seulement une partie d’un titre (avec le widget Titre).
On va donc, pour avoir la même chose, utiliser un widget Texte à la place :
On va sélectionner uniquement le mot Products et on va le souligner avec U :
Et dans l’onglet Style, on va lui mettre la même police (Times New Roman), couleur (noir), taille (50) et hauteur de ligne (1) :
Et faire clic droit sur le titre > effacer :
Enfin on voit, sur la page de Nathan, qu’il y a un petit bouton sous le dernier paragraphe :
Donc on ajoute un widget bouton sous le texte de la troisième colonne :
Dans l’onglet Contenu :
- Texte : A little more about me
- Alignement : Gauche
- Icône : on ajoute une cone de flèche depuis la bibliothèque Elementor
- Position de l’icône : Après
- Espacement de l’icône : 8
Dans l’onglet Style on va remettre la même typographie (Time New roman en 15, italique et souligné) :
Et on va mettre une couleur du texte noire et une couleur de fond du bouton blanche :
Enfin dans l’onglet Avancé, on va mettre des marges négatives pour que la flèche soit alignée à la suite du texte :
Et on termine ainsi le design de cette deuxième section qui nous a permis de voir les marges et les alignements des éléments.
Avec la page de Nathan :
Notre page :
Dupliquer les sections plutôt qu'en créer des nouvelles :
Cette troisième section ne nous apprend rien de nouveau, c’est la quatrième qui va nous apprendre à gérer les images.
La voici, il s’agit d’une section très simple avec deux textes et un bouton dans la première colonne et une image et un texte dans la deuxième colonne. Le tout sur un fond rose :
Comme précédemment, on va toujours chercher à dupliquer et modifier des éléments plutôt que de les reparamétrer de zéro.
Cette section fonctionne comme la première, deux colonne avec d’un côté du texte et d’un côté une image.
On va donc dupliquer la première section et l’ajouter en dessous de la troisième.
Donc clic droit sur la première section > Dupliquer :
Et on va déplacer la copie en dessous de la deuxième section :
Et on paramètre :
On commence par le fond de la section, ici on va mettre une couleur rose pâle :
Ensuite le titre :
Le Texte :
Et pour le bouton, encore une fois plutôt que recommencer de zéro, c’est le même bouton que dans la section précédente donc on va le dupliquer : Clic droit sur le bouton > Dupliquer :
On le déplace et on supprime l’autre bouton :
On veut un fond transparent donc on clic sur le bouton et dans Style > couleur de l’arrière plan on met transparent en faisant glisser le second curseur tout en bas :
Et dans l’onglet contenu on écrit le bon texte :
Voila pour la première colonne.
Pour la seconde on remplace l’image avec celle récupérée sur la page de Nathan :
On règle les marges de l’image (dans Image > Onglet Avancé > Marge et marge interne) en faisant attention d’avoir les mêmes marges à droite que la section précédente pour que l’image reste aligné :
Puis en dessous on ajoute le titre Authority, comme sur la page de Nathan.
On peut dupliquer le titre I’m a creator de la colonne de gauche, le faire glisser à droite sous l’image et modifier la couleur.
Et on lui met les mêmes marges que celles de l’image juste au dessus, pour avoir le même alignement :
Dernière étape, comme précédemment, on peaufine le design :
Dans la première colonne on va mettre une marge interne droite à 130px pour éloigner le texte de l’image, comme sur la page de Nathan (Colonne > Onglet Avancé > Marge interne > Délier > Droite > 130px) :
Et pour terminer on ajoute un Espaceur en dessous des éléments à l’intérieur de chaque colonne :
- Colonne de gauche : Espaceur de 100px
- Colonne de droite : Espaceur de 150px
Ainsi très rapidement on obtient la même chose que sur la page de Nathan.
Page de Nathan :
Notre page :
La section suivante est justement bien plus intéressante parce qu’elle va nous permettre de voir des techniques plus avancées.
On va voir les sections internes (ou section à l’intérieur d’une colonne), les espacements entre colonnes et les superpositions d’éléments.
Voici la section sur la page de Nathan :
On a 3 colonnes dans lesquelles il y a une image et un titre.
Les colonnes dépassent sur la section supérieure.
Jusque là ça ressemble à ce qu’on a vu dans la première section avec l’image de Nathan qui dépassait en dessous sur la seconde section.
Mais là ou elle est beaucoup plus complexe, c’est que lorsqu’on passe la souris sur un élément, il y a une boite blanche et un bouton qui apparait :
C’est donc ça qu’on va faire.
Voici les étapes :
- Comprendre la structure de la page (grille, sections et colonnes)
- Ajouter ses éléments et les paramétrer
- Paramétrer les marges des colonnes
- Ajouter les animations
Comprendre la structure d'une section complexe :
Si on regarde bien cette section, il y a donc :
Une section avec 3 colonnes :
Maintenant si on regarde ce qu’il y a à l’intérieur des colonnes, on voit que ce n’est pas seulement une image qui va déborder sur la section supérieure.
C’est un ensemble Image + Titre + bouton :
Il y a donc une colonne à l’intérieur de cette colonne.
L’intérêt est qu’on va pouvoir créer une boite dans laquelle il y a du contenu qu’on va pouvoir paramétrer indépendamment du reste de la colonne.
Et pour ça on utilise le Widget Section Interne :
Reproduire une structure complexe :
On commencer et on va donc créer en dessous une nouvelle section de 3 colonnes dont le contenu est encadré à 900 px pour avoir le même encadrement que les sections précédentes.
Donc on clique sur le +, en structure on choisit 3 colonnes, et dans Section > Mise en page > Largeur du contenu, on clique sur Encadré et on met 900 px.
Ce qui nous donne :
A l’intérieur on va ajouter des widgets sections internes :
Et on supprime la deuxième colonne qui se créé automatiquement dans la section interne pour n’en avoir qu’une :
On est donc sur une structure qui peut paraitre complexe mais qui est plutôt simple et qui va nous permettre d’avoir ce qu’on cherche.
- On a donc une section.
- Dans laquelle il y a 3 colonnes.
- Chacune des colonnes contient une section avec une colonne.
Et si on ouvre le navigateur (icône en bas à gauche du tableau de bord à côté de mettre à jour), on retrouve bien cette structure :
C’est ainsi qu’on obtient donc une colonne indépendante qui va agir comme une boite dans laquelle on va pouvoir faire déplacer tout nos éléments d’un coup (Image, titre, boutons).
Ajouter tous les contenus à la sous-section :
Etape suivante, on ajoute tous les éléments images, titres, textes, boutons qui vont apparaitre.
On peut dupliquer les éléments déjà créés pour aller plus vite.
En réutilisant les images de la page de Nathan, on a :
Tous les éléments sont là, maintenant il s’agit seulement de paramètres de marges, d’écartement et de passage de la souris (Hover effect).
Marges, dépassement et écartements des colonnes :
Pour mieux voir ce qu’on fait, on va mettre un fond de couleur à nos colonnes (des sous-section), ce qui nous permettra de mieux voir les paramètres qu’on applique.
On changera ensuite pour remettre les bonnes couleurs.
Donc on clique sur la sous section et dans l’onglet Style > Arrière plan > Classique > Couleur, on sélectionne un vert par exemple :
On va donc faire dépasser les colonnes des sous-sections sur la section précédente.
Donc on clique sur la première colonne de la sous-section > Onglet Avancé > Marge > Délier les valeurs > Marge du Haut :
- Pour la première colonne on met -100
- Pour la seconde : -150
- Pour la troisième : -100
Ce qui donne :
Ensuite on va un peu plus écarter les colonnes les unes des autres, pour suivre l’exemple de la page de Nathan.
Pour ça, on va régler les marges entre les colonnes.
Donc pas les sous-colonnes mais bien les colonnes de bases et on va les écarter les unes des autres.
Donc on clique sur la colonne, on va dans Onglet Avancé > Marge et on met 10 partout :
A l’intérieur de la sous-colonne on va également augmenter les marges internes.
On va dans Sous colonne > Onglet Avancé > Marge internet > 15
Maintenant on va créer l’effet au passage de la souris.
Effet au passage de la souris ou Hover effect :
Ce qu’on cherche à obtenir c’est qu’au passage de la souris :
- Le fond blanc de la box (sous-colonne) apparaisse avec une ombre légère derrière.
- Le bouton apparaisse dès que la souris passe sur la sous colonne.
- Enfin que toute la zone soit cliquable.
On va commencer par le fond blanc et l’ombre.
On le gère avec le fond de la sous-colonne.
Donc on va dans : Sous-colonne > Onglet Style > Arrière plan > Au survol > Classique > Couleur
Et ici on met du blanc :
Et pour l’ombre, c’est juste en dessous dans Bordure > Au survol > Ombre de la boîte.
Et là on sélectionne la couleur et la transparence avec le sélecteur de couleur et le positionnement et le flou avec les paramètres en dessous :
On met la couleur du bouton transparent lorsque la souris n’est pas dessus.
On clique sur le bouton > Onglet Style > Bouton :
- Sous Normal, on met une couleur du bouton transparent.
- Sous Au Survol, on met une couleur du bouton noir.
Et on enlève le fond vert lorsque la souris n’est pas sur la sous-colonne :
Onglet Style > Arrière plan > Normal et avec le sélecteur de couleur on met du transparent :
Dernière étape, l’ensemble de la zone doit être cliquable et le bouton ne doit pas apparaitre seulement lorsque la souris est dessus, mais lorsque la souris passe sur n’importe quel endroit de la sous-section.
Etendre la zone active d'un bouton :
On va donc devoir étendre la zone active du bouton à l’ensemble de la sous-section.
Pour mieux voir ce qu’on fait, on va mettre un fond bleu au bouton qu’on enlèvera ensuite.
On va dans Bouton > Onglet Style > Couleur d’arrière plan > Bleu :
Et on va étendre cette zone cliquable.
C’est juste en dessous, toujours dans l’onglet Style, dans Marge interne.
On va uniquement jouer sur la marge du haut et de droite car le texte du bouton doit bien rester en bas à gauche.
- Donc sur la marge du haut on va mettre 240
- Et sur la marge de droite on va mettre 135 :
Et on va maintenant utiliser les marges externes pour faire en sorte que la zone active du bouton vienne superposer l’ensemble de la sous-colonne :
On va maintenant dans l’onglet Avancé :
- Dans Marge, on délie les marges et dans marge du haut: -243
- Dans Index-Z, on met 1 pour que le bouton soit bien au dessus du reste de la zone.
Ce qui nous donne :
Et on termine donc par enlever le fond bleu.
On va dans Onglet Style > Arrière plan > Couleur > Transparent :
On a ainsi toute la zone qui est cliquable et le bouton qui apparait lorsque la souris passe sur n’importe quel endroit de la zone.
Peaufiner le design :
Il ne nous reste plus qu’à dupliquer la colonne pour ne pas reparamétrer tout et utiliser le navigateur pour sélectionner, dupliquer et éditer rapidement les éléments.
C’est primordial lorsqu’il y a plusieurs couches d’éléments qui se superposent comme ici.
Pour terminer, on ajoute des Espaceurs en dessous dans les colonnes principales et on obtient bien la même chose que sur la page de Nathan :
Enfin on va terminer en voyant les animations.
Si on reprend la page de Nathan, on voit bien qu’il y a des animations d’entrée.
Les images apparaissent au fur et à mesure que l’on descend sur la page, soit en grossissant, soit en venant de la droite ou de la gauche :
Donc on va ajouter également des animations d’entrée.
Sur la page de Nathan : https://nathanbarry.com/
La photo de lui (1er section) apparait de la droite vers la gauche.
On clique sur la Photo > Onglet Avancé > Effet de mouvement et on choisit Slide in Right :
Le bouton de contact apparait depuis le bas :
Bouton > Onglet Avancé > Effet de mouvement
Et on choisit Fading up et sous vitesse on choisit Rapide :
Et encore sur les 3 images, on les fait apparaitre en grossissant.
Donc cette fois ci on applique le mouvement non pas à l’élément mais à à toute la section :
Section > Onglet avancé > Effet de mouvement > Zoom in :
On est parti d’un modèle assez complexe pour pouvoir aborder plusieurs cas différents de design.
On a vu donc comment faire des design avec des débordements, des animations, des superpositions et enfin comment gérer le passage de la souris.
On obtient une page quasiment identique avec la page de départ qu’on souhaitait recopier, la Homepage de Nathan Barry et voila où nous en sommes :
On ne va pas continuer à copier le design parce que le reste de la page n’apporte rien de nouveau à apprendre.
Par contre on va maintenant voir dans le chapitre 9, comment créer un menu et un pied de page pour cette page.
Et enfin comment la lier à wordpress et le reste de son site.