CHAPITRE VIII

Créer et designer des pages avec Elementor

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 :

Trouver un modèle de page

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 : 

nathanbarry.com

Créer homepage model

Voila notre modèle. 

Paramétrer sa page dans WordPress

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

créer page site elementor homepage

En on clique sur le bouton Modifier avec Elementor

Designer la HomePage de son site dans Elementor - basique

Donc on part d’une page vide : 

Constructeur site wordpress Elementor interface

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 : 

créer page site elementor grille page
Les 3 premières sections de la page sont visibles d'un coup d'oeil :

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 :

créer page site elementor grille

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

créer page site elementor ajouter sections

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 :
créer page site elementor modele

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 : 

créer page site elementor ajouter titre texte bouton

Et a droite une photo.

On ajoute une image et on importe la photo :

créer page site elementor ajouter image

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

créer page site elementor design section

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. 

créer page site elementor fond section

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

créer page site elementor largeur section

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).

créer page site elementor marges colonnes

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 : 

créer page site elementor design titre

Ensuite pareil pour le sous titre

créer page site elementor fond section

Et enfin pour la phrase en italique au dessus de la box de la newsletter : 

créer page site elementor design texte

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 :

créer page site elementor bouton mailto

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 : 

créer page site elementor design bouton

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 : 

créer page site elementor couleur bouton

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

créer page site elementor couleur au survol

Et du coup on obtient ça : 

créer page site elementor design colonne

Par rapport au site de Nathan, ça commence à ressembler à ce qu’on cherche : 

créer page site elementor model

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 : 

créer page site elementor depasser image section

Pour faire ça c’est assez simple. 

Première chose, on ajoute une section en dessous (juste pour mieux gérer le débordement :

créer page site elementor ajouter une section

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 : 

créer page site elementor espaceur

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

créer page site elementor taille image

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

créer page site elementor mages interne image
Lorsque l'icone est dégrisée, les marges peuvent avoir des valeurs différentes.

Et en marge du bas, on va mettre -80 et on obtient bien un débordement vers le bas sur la section suivante : 

créer page site elementor marge interne image

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 : 

créer page site elementor marges interne image

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

créer page site elementor marges interne colonne

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 : 

créer page site elementor alignement texte

Et enfin on a au dessus de la photo de Nathan un espace entre le bord de la section et l’image :

créer page site elementor alignement texte

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 : 

créer page site elementor marge externe image

Et on obtient bien, pour cette première section, le même design que sur la page de Nathan.

La page de Nathan

créer page site elementor model

Notre page

créer page site elementor section

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

créer page site elementor modele

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 : 

créer page site elementor dupliquer colonne
Clic droit > Dupliquer permet de créer une nouvelle colonne à droite identique à la première.

A l’intérieur on va glisser nos éléments : 

  1. Titre dans la première colonne
  2. Texte dans la seconde
  3. 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

créer page site elementor dupliquer éléments
Dupliquer un élément déjà paramétré fait gagner beaucoup de temps sur le design.

Et simplement le faire glisser dans la première colonne de la section en dessous : 

créer page site elementor ajouter titre

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 : 

créer page site elementor dupliquer titre

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 : 

créer page site elementor contenu

Puis dans le second onglet Style, on va gérer la taille, la couleur et les effets des textes : 

créer page site elementor design texte

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 : 

créer page site elementor écartement colonnes

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

créer page site elementor marges internes colonnes
Les marges internes des colonnes vont resserrer le contenu à l'intérieur.

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.

  1. Au dessus du titre on va mettre 70px
  2. Au dessus des textes on va mettre 120px 
créer page site elementor écartement colonnes

Et on va mettre 50px sur les Espaceurs du dessous

créer page site elementor espaceur

Et on voit qu’on est pas aligné avec la section du dessus, notre titre déborde à gauche et le texte déborde à droite

créer page site elementor marge interne colonne

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

créer page site elementor section encadré

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 : 

créer page site elementor encadrement section

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é :

créer page site elementor modele

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 : 

créer page site elementor widget texte

On va sélectionner uniquement le mot Products et on va le souligner avec U :

créer page site elementor souligner texte

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) : 

créer page site elementor design texte

Et faire clic droit sur le titre > effacer

créer page site elementor effacer titre

Enfin on voit, sur la page de Nathan, qu’il y a un petit bouton sous le dernier paragraphe : 

créer page site elementor bouton souligné

Donc on ajoute un widget bouton sous le texte de la troisième colonne : 

créer page site elementor ajouter bouton

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
créer page site elementor design icone

Dans l’onglet Style on va remettre la même typographie (Time New roman en 15, italique et souligné) :

créer page site elementor design bouton

Et on va mettre une couleur du texte noire et une couleur de fond du bouton blanche

créer page site elementor style bouton

Enfin dans l’onglet Avancé, on va mettre des marges négatives pour que la flèche soit alignée à la suite du texte : 

créer page site elementor marges negatives bouton

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

créer page site elementor exemple modele

Notre page : 

créer page site elementor design sections

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 :

créer page site elementor section modèle

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 :

créer page site elementor dupliquer section

Et on va déplacer la copie en dessous de la deuxième section : 

créer page site elementor déplacer section

Et on paramètre

On commence par le fond de la section, ici on va mettre une couleur rose pâle

créer page site elementor fond section rose

Ensuite le titre

créer page site elementor design section

Le Texte

créer page site elementor design 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

créer page site elementor dupliquer bouton

On le déplace et on supprime l’autre bouton

créer page site elementor déplacer 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 :

créer page site elementor couleur bouton

Et dans l’onglet contenu on écrit le bon texte : 

créer page site elementor texte bouton

Voila pour la première colonne

Pour la seconde on remplace l’image avec celle récupérée sur la page de Nathan :

créer page site elementor image dans section

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é : 

créer page site elementor marge image

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

créer page site elementor marges texte

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) :

créer page site elementor marges éléments

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 
créer page site elementor espacement colonnes

Ainsi très rapidement on obtient la même chose que sur la page de Nathan. 

Page de Nathan

créer page site elementor section modèle

Notre page : 

créer page site elementor section

Designer la HomePage de son site dans Elementor - avancé

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 :

créer page site elementor sections modèle 3 colonnes

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 : 

créer page site elementor bouton apparait au survol
Quand on passe la souris, un bouton apparait dans une box blanche.

C’est donc ça qu’on va faire.

Voici les étapes : 

  1. Comprendre la structure de la page (grille, sections et colonnes)
  2. Ajouter ses éléments et les paramétrer
  3. Paramétrer les marges des colonnes 
  4. 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

créer page site elementor grille d'une section

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 :

créer page site elementor grille colonne

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

créer page site elementor 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 : 

créer page site elementor créer section 3 colonnes

A l’intérieur on va ajouter des widgets sections internes

créer page site elementor ajouter section interne

Et on supprime la deuxième colonne qui se créé automatiquement dans la section interne pour n’en avoir qu’une : 

créer page site elementor section interne

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 : 

créer page site elementor navigateur

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 : 

créer page site elementor ajout image titre bouton dans sous section

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 :

créer page site elementor fond colonne sous section

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 :

créer page site elementor marge interne négative

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

créer page site elementor écartement marges

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

créer page site elementor écartement colonnes

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 :

  1. Le fond blanc de la box (sous-colonne) apparaisse avec une ombre légère derrière.
  2. Le bouton apparaisse dès que la souris passe sur la sous colonne.
  3. 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 :

créer page site elementor fond sous colonne

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 : 

créer page site elementor ombre colonne

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
créer page site elementor couleur bouton survol

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

créer page site elementor couleur colonne

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

créer page site elementor couleur bouton
Le fond bleu représente la zone active de notre bouton.

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 :
créer page site elementor zone clicable bouton
Le fond bleu représente la zone active de notre bouton.

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 : 

créer page site elementor zone clicable bouton
La zone active doit superposer l'ensemble de la sous colonne.

Et on termine donc par enlever le fond bleu. 

On va dans Onglet Style > Arrière plan > Couleur > Transparent

créer page site elementor bouton fond transparent
La zone active doit superposer l'ensemble de la sous colonne.

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.  

créer page site elementor utiliser navigateur
Le navigateur permet de sélectionnet et déplacer rapidement des éléments.

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 : 

créer page site elementor animation d'entrée

Enfin on va terminer en voyant les animations. 

Ajouter des animations d'entrée

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 : 

Créer homepage model

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

créer page site elementor animation slide 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

créer page site elementor animation fading fast

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

créer page site elementor animation d'entrée

Conclusion

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 : 

créer page site elementor page rendu final

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.