0% ont trouvé ce document utile (0 vote)
93 vues50 pages

Guide complet sur Elementor

Cet ebook, issu d'articles du blog WPmarket.fr, propose une version enrichie pour mieux comprendre le plug-in Elementor et ses fonctionnalités. Il est divisé en trois parties : introduction à l'outil, exploration de l'interface avec des captures d'écran, et une évaluation de la nécessité d'acheter la version payante d'Elementor. L'auteur, Vincent Mary, encourage les lecteurs à s'abonner à sa newsletter pour recevoir des astuces et des nouveautés sur WordPress et Elementor.

Transféré par

rajaoandry2020
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
93 vues50 pages

Guide complet sur Elementor

Cet ebook, issu d'articles du blog WPmarket.fr, propose une version enrichie pour mieux comprendre le plug-in Elementor et ses fonctionnalités. Il est divisé en trois parties : introduction à l'outil, exploration de l'interface avec des captures d'écran, et une évaluation de la nécessité d'acheter la version payante d'Elementor. L'auteur, Vincent Mary, encourage les lecteurs à s'abonner à sa newsletter pour recevoir des astuces et des nouveautés sur WordPress et Elementor.

Transféré par

rajaoandry2020
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Débuter avec

Introduction

Bonjour et bienvenue dans cet ebook !

Pour la petite histoire, il est issu d’une série d’articles provenant du site WPmarket.
fr, un blog spécialisé sur WordPress, Elementor et le webmarketing, et dont je suis
l’heureux papa.

Reprendre le texte tel quel et faire un copier-coller n’avait pas grand intérêt, c’est
pourquoi cet ebook vous propose une version enrichie, pour vous permettre de le
découvrir de la façon qui vous plaît le plus.

Qu’il soit imprimé, en ligne ou en vidéo, ce contenu vous permettra (je l’espère)
de mieux comprendre le plug-in Elementor et ses nombreuses possibilités. C’est
une révolution que nous vivons actuellement (oui, je sais, ce mot est trop souvent
employé) !

Pourquoi ?

Car avec des outils comme Elementor, construire un site (simple ou complexe) devient
quelque chose d’accessible à tous ! Cerise sur le gâteau, on peut le faire avec le CMS le
plus utilisé au monde : WordPress ! Elle est pas belle, la vie de webmaster ?

Cet ebook est divisé en 3 grandes parties. La première vous propose de faire la
connaissance de l’outil. C’est parfait si vous débutez, car on reprend les bases, le
vocabulaire et les techniques dont nous parlerons ensuite au fil du guide.

La seconde partie vous propose de faire le tour du propriétaire avec de nombreuses


captures d’écran (animées pour certaines). Enfin, la dernière partie pose une question
précise : faut-il craquer et acheter la version payante d’Elementor ? Pour y répondre,
on fera une revue complète des avantages de la version payante.

2
Pour juger des possibilités de ce constructeur de site, je me suis amusé à créer une
fresque avec tous les modèles disponibles sur Elementor. Il y en a des centaines !
Vous pouvez même zoomer sur cette fresque (elle se situe à droite sur la couverture).

J’espère que vous prendrez autant de plaisir à découvrir Elementor que j’en ai eu à
vous proposer cet ebook !

Je vous souhaite tout plein de beaux sites avec Elementor !

Vincent MARY
[Link]
Auteur : Vincent MARY
Freelance WordPress

PS : Je publie régulièrement du nouveau contenu (vidéos, articles de blog, ebooks,


formations), alors si ce n’est pas déjà fait, pensez à vous abonner à ma newsletter :
j’y partage toutes mes astuces et les nouveautés de WordPress et d’Elementor pour
cela c’est très simple rendez vous tout en bas d’une des pages de mon
site vous y trouverez le formulaire d’inscription .

Transparence éditoriale :
Les liens présents dans cet ebook peuvent contenir des liens d’affiliation.

En passant par mes liens affiliés, cela ne vous coûte pas plus cher et permet de créer
davantage de contenu sur les produits ou services concernés. Alors merci d’avance
! Une précision (importante) : je ne recommande que ce que j’apprécie, dont je suis
client régulier et que j’ai longuement testé !

3
Table des matières
Alors, puis je créer un thème complet ?. . . . . . . . . . . . . . 14
Les variables.....................................................................14

Les conditions d’affichage...................................................................16

01
Elementor c’est quoi ? 02
Avant Elementor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Le tour de l’interface
Avec Elementor ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Pourquoi Elementor c’est génial ?. . . . . . . . . . . . . . . . . . . . 9


02
Le tour de l’interface
Glisser-déposer, c’est hyper simple ............................9

Même en désactivant le plugin, votre site reste


intact....................................................................................9 Première étape : créer une page. . . . . . . . . . . . . . . . . . . . 20
Vous avez la main sur le balisage HTML....................10
Donner un titre à sa page et la publier.....................20
Le plugin est mis à jour régulièrement..................... 11
Astuce SEO........................................................................20
Comment apprendre rapidement Elementor ?. . . . . . . . 12
Définir cette page comme page d’accueil................. 21
Elementor, c’est parfait ? . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Attention au responsive................................................ 12 Designer votre page avec Elementor . . . . . . . . . . . . . . . . 21
Première étape: lancer l’éditeur Elementor............. 21
Pour faire un thème, il faut payer :............................. 13
Seconde étape : se familiariser avec l’interface de
Une (petite) courbe d’apprentissage à prévoir........14
l’outil..................................................................................22
Le panneau de contrôle.................................................22 pour les modules !..........................................................36

Focus : Que fait le widget global ?..............................24 C’est quoi, l’étape suivante ?.......................................38

Interface de droite : canva............................................ 27

Les commandes de la section......................................28


03
Création de sections.......................................................29
Elementor PRO
Focus : Exporter un modèle pour un autre site.......32
Les widgets d’Elementor PRO. . . . . . . . . . . . . . . . . . . . . . . 42
Pourquoi je ne peux pas importer tous les
templates d’Elementor ?...............................................32 Les codes courts (short codes)....................................42

Un mot sur les colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Les modules tiers........................................................... 44

Les modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Le theme builder d’Elementor PRO. . . . . . . . . . . . . . . . . . 45

Le panneau de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Utiliser un thème page builder friendly....................45

Onglet contenu................................................................34 Le theme builder.............................................................45


L’éditeur Elementor 46
Onglet style.......................................................................35 Les widgets du theme builder 46
Les conditions d’affichage 47
Onglet Avancé..................................................................36
Conclusion : Alors, avec ou sans Elementor PRO ?. . . . . 48
Au fait : le panneau de contrôle, ce n’est pas que
L’essentiel.
Passez à la vitesse supérieure avec Elementor Pro

J’en profite !
Tout ce qu’il faut retenir pour
prendre en main rapidement
Elementor Pro.
Au sommaire
Avant Elementor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Avec Elementor ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Pourquoi Elementor c’est génial ? . . . . . . . . . . . . . . . . . . . . 9


Glisser-déposer, c’est hyper simple ............................9

01 Même en désactivant le plugin, votre site reste


intact....................................................................................9

Elementor
Vous avez la main sur le balisage HTML....................10

Le plugin est mis à jour régulièrement..................... 11

c’est quoi ?
Comment apprendre rapidement Elementor ? . . . . . . . . 12

Elementor, c’est parfait ? . . . . . . . . . . . . . . . . . . . . . . . . . . 12


Attention au responsive................................................ 12

Pour faire un thème, il faut payer :............................. 13

.
Une (petite) courbe d’apprentissage à prévoir.......14

Alors, puis-je créer un thème complet ?. . . . . . . . . . . . . 14


.
Les variables....................................................................14

Les conditions d’affichage...................................................................16


Avant Elementor le même code en HTML et en CSS pour
chaque page de base (par exemple,
chaque recette pour un site de recettes).
Pour mieux comprendre ce qu’est Vous deviez créer un thème et être
Elementor, petit retour en arrière. familier de WordPress pour gérer le
contenu du site.
Promis, je fais court !
!"# $%$&'($ ) !" #$%&' ("%' )' *+"(",'
Avant l’arrivée des « pages builders »,
*$,%"',% -.. &'*'%%'(/ '% (" #$+( +%"0"('1
comme on les appelle, pour mettre en
!" #$%&'( )*!+ ",-!.'/ 0-+ 1 &*234'.
forme visuellement votre site internet,
02 *$+0'+& )' #$%&' %"%&' (+& -.. 324'(/
vous deviez :
52"( 6+(%' )2,( 7 %'5302%' )+ %895'
• Coder en HTML : &'*'%%' ;< =+>/ ?+'0 42", de %'53( @

C’est le langage qui permet de dire : On appelle cela un modèle de page. Il y


« ça, c’est un titre ; ça, c’est un en a un par type de contenu, un pour
paragraphe ». Un peu comme sur Word, notre page d’accueil, un pour les pages
mais avec du code obscur pour un articles dans notre cas, et un pour une
néophyte. recette de cuisine, par exemple.
• Coder en CSS

Un autre langage qui, lui, permet de


mettre en forme votre page, votre titre
ou votre paragraphe.

• Coder un thème

Descendons plus encore dans les limbes


de la complexité technique. Le thème !"# $ %&'()*+ '* ,-.* / ")-++#01*+
est un dossier contenant des fichiers 2)*+ '*13 ,4*%#*4+5 *6 17 )#8 9 17
HTML et CSS, voire PHP et JavaScript. 6:,* '* !"#$%#& '()!*+,&% - #"$.%
Avec un thème, plus besoin de recopier '*$% /&#% 4*"*66* '* "1#+#7*5;

Voir la vidéo de la partie 1


8
Avec Elementor ? Pourquoi Elementor c’est
génial ?
Nous verrons qu’avec l’arrivée de cet
outil, le nombre de connaissances à
maîtriser baisse drastiquement.
Glisser-déposer, c’est hyper
simple
* Savoir utiliser WordPress : ce n’est
pas trop l’objet de cet article, mais Il s’agit d’une interface qui permet
un minimum de connaissances sur d’agencer des blocs sur des pages,
WordPress est nécessaire. Rassurez- selon ses envies.
vous, c’est simple et l’apprentissage
se fait très vite. Cette méthode est très simple, car il
faut simplement utiliser le glisser-
* Savoir utiliser Elementor : Pour déposer. Plus besoin de « coder »
mettre en forme nos articles et nos (comprenez écrire pour placer et
contenus, bien entendu. mettre en forme les éléments de
notre page) : tout se fait à la souris
* C’est tout.
et en direct !
Oui, vous lisez bien : plus besoin de
connaître le HTML, le CSS ou même Même en désactivant le plugin,
la création de thèmes WordPress ! votre site reste intact
Certes, connaître ces langages sera
toujours un plus, mais ce n’est plus Contrairement à des solutions
indispensable pour créer un site comparables, si vous désactivez ce
A retenir aujourd’hui. plugin, vous conserverez le même
site. On n’y pense pas au début,
mais c’est très important le jour ou
vous changerez d’avis et de module.
Elementor permet de
composer rapidement les
pages de son site avec un
simple « glisser-déposer »

9
Une image valant mille discours, résultats de recherche ; or, ce
voici un exemple de ce qui se passe robot a besoin d’un accès facilité
le jour où vous décidez de changer à l’information. Pour faire simple,
ou de désactiver Divi. il s’agit d’annoncer au robot :
voici un titre important (de niveau
1), un sous-titre (niveau 2), des
paragraphes.

Sur Elementor, vous pouvez


sélectionner un titre et indiquer son
niveau : Elementor utilisera la balise
HTML correspondante.

Ouche, pas très lisible comme code ! Plus besoin, donc, de connaître le
C’est du coup plutôt intéressant de le HTML ; mais les bonnes pratiques,
savoir avant de choisir votre plugin cependant, oui, c’est mieux. Croyez-
de mise en page, non ? moi, on a vite fait d’écrire une page
qui effraiera le robot plus qu’autre
Vous avez la main sur le chose!
balisage HTML Par exemple, une des règles
d’optimisation dit qu’il ne faut
Ce qui est important en SEO, qu’un seul titre de niveau 1 dans
c’est d’avoir la main sur le HTML, votre page web (pour que Google
car un robot de Google indexera l’identifie bien comme le thème
(et classera) votre page dans les principal de votre page).
A retenir

Elementor est disponible


en version gratuite ou
payante (Elementor PRO)
La partie 3 du guide
compare les deux
versions.
10
Vous voyez mieux l’intérêt d’avoir la une par semaine, et ce, plusieurs
main depuis Elementor ? semaines de suite. C’est un vrai
plus, d’autant que les mises à jour
concernent aussi bien l’ergonomie
que les fonctions, et aussi bien la
version gratuite que celle payante…
Ah oui, il y a une version payante
d’Elementor ! Pas d’inquiétude,
nous en reparlerons un peu plus
tard.

Par exemple, depuis ma première


utilisation, il y a eu :

• Des raccourcis clavier (vive Ctrl +


Z pour revenir en arrière !).

• Le clic droit sur la souris (testez


le copier-coller de style, vous
verrez : cela change la vie).
Ici nous avons indiqué à Elementor • De nouveaux modules.
que notre titre était un titre de
niveau 2. • De nouvelles intégrations (par
exemple, intégrer un formulaire
Le plugin est mis à jour de contact directement à Slack
régulièrement ou Discord).

• Etc
J’ai constaté, depuis que je l’utilise,
qu’il y a de nouvelles fonctions
très régulièrement, parfois même

11
Comment apprendre Il y a tout de même des petites
rapidement Elementor ? astuces qui permettent de gagner
du temps. Je vous conseille de jeter
un œil à mon blog qui les recense
Je conseille d’utiliser d’abord les ou même de construire un
modèles à disposition. site de A à Z pour apprendre
Elementor encore plus vite. Dans la
Deux-trois clics permettent de formation que je propose, il s’agit
rapidement insérer des templates de construire ce portfolio par
professionnels, qu’il n’y aura plus exemple.
qu’à modifier pour les rendre plus
personnels.
Elementor, c’est parfait ?
L’intérêt est double : vous gagnez
du temps et vous voyez les
(nombreuses) possibilités de Hum, comme dans chaque solution,
combinaisons permises par le tout n’est pas parfait et les points
plugin. suivants méritent votre attention.

Par la suite, vous pourrez combiner Attention au responsive


différents modèles pour arriver
à vos fins, pour enfin créer vos
propres modèles. Pour construire un site qui s’adapte
à chaque taille d’écran, j’ai constaté
Je vous rassure : ce n’est pas qu’il fallait assez souvent vérifier
obligatoire. Modifier des templates / modifier l’affichage de son site
de base permet déjà d’avoir un en version mobile et tablette pour
site à votre image, tellement les éviter les mauvaises surprises.
modèles sont nombreux ! Attention donc aux designs un peu
complexes. En soi, c’est simple à
Petit aperçu du nombre de réaliser avec Elementor, mais il faut
templates disponibles avec la tout de même y penser.
jolie fresque ci contre.

12
Pour faire un thème, il faut un dossier. Il décrit comment doit
payer : s’afficher chaque type de contenu.

Pour reprendre notre exemple de


Oui et non. Bien que sa version site de recettes, nous aurons dès
gratuite soit très complète, si vous lors une mise en page différente
désirez avoir un en-tête et un pied pour :
de page communs à chaque
page, il vous faudra payer pour • La page d’accueil
la version PRO d’Elementor.
(comptez environ 40 euros pour un • Le blog
site avec un an de mise à jour).
• Les recettes de cuisine
Même si on peut contourner
Donc 3 modèles de page qui sont
(notamment avec ma formation
inclus dans 1 thème.
sur le portfolio), si vous
souhaitez créer des templates Ajoutons que même si les modèles
de pages (notre page de recettes de pages sont différents, il existe
de cuisine par exemple) ou bien des zones communes à tout votre
encore un en-tête et un footer site, quel que soit le modèle de
communs à tout votre site, il vous page. Ces zones sont l’en-tête et le
faudra dans la plupart des cas pied de page.
vous acquitter de la version PRO
d’Elementor.

Patience, on va y revenir ! Mais


A retenir avant, comprenons mieux à quoi
sert un thème.

C’est important pour la suite.


Un site est divisé en 3 zones
le header le contenu et le Comme on l’a vu plus haut, un
footer. Seul Elementor PRO thème est une collection de fichiers
permet de modifier toutes HTML, PHP et CSS contenue dans Le header et le footer sont
les zones communs à nos modèles de pages.

13
En règle générale, l’en-tête contient Par exemple, créer un thème
le logo et le menu principal du site. complet, modifier les marges
ou harmoniser ses pages vous
Et le pied de page, les mentions demandera un peu plus de temps.
légales et le menu « secondaire ». Rien d’insurmontable, rassurez-
vous.
!"#$ %&# '(#)#$*+, -+"* .,/0& .+&,
)#**,# #$ 1+,)# &$# .23# #* $+$
4#- *5.#- 4# 6+$*#$&-7 "( 4#0"#$* Alors, puis-je créer un
.+--"8(#7 20#6 (# *9#)# 8&"(4#,7 4# thème complet ?
6,/#, &$ *9:)# .+&, *+&* 0+*,# -"*#;

La grande force de ce système ? !"# $ %&"' ()*+, #* -+".'+ /+00)' /+'


*) 12)4) 5"#*.)'6
La création du thème est
transparente ! Vous pourrez définir autant de
modèles que vous souhaitez et vous
Pas besoin de créer un répertoire et aurez la même interface que pour
d’y déposer des fichiers HTML et CSS créer n’importe quelle page.
: avec Elementor, vous pouvez créer
des templates de pages comme vous Deux différences cependant :
créez des articles ! La révolution est
là : un seul outil à apprendre, conçu Les variables
pour créer aussi bien du contenu
que des modèles de pages !
Dans un modèle de page, vous ne
savez pas encore quel contenu sera
Une (petite) courbe
utilisé par le site, puisque celui-ci
d’apprentissage à prévoir pourra très bien afficher une recette
de tarte aux pommes comme une
Comme pour toute solution, si recette de blanquette de veau.
la prise en main est rapide, pour
devenir un utilisateur avancé
d’Elementor, il faudra cependant
mettre un peu les mains dans le
cambouis.
14
Alors, pour permettre de mettre en Vous voyez un peu les possibilités
page, vous allez devoir utiliser des offertes ?
variables. Non, ne partez pas tout de
suite, je vous rassure : c’est simple ! Comment savoir comment va
s’afficher mon modèle dans la vraie
Vous pouvez glisser les variables vie ?
(titre, contenu de votre recette)
sur votre modèle, comme vous Elementor a pensé à tout : vous
avez l’habitude avec la version pouvez sélectionner un contenu
« classique ». Vous avez juste accès en particulier pour voir comment il
à des variables auxquelles vous s’affichera depuis votre template !
n’avez pas accès avec la version
« page » d’Elementor.

Voici un petit aperçu des modules


« variables » spécifiquement
disponibles dans les modèles de
pages :

!"#$%&'"( )%#&%*+"( '" (,'$


-&(.,'&*+"( /0" -%'( 0' 1,'$"2$"
.%#$&10+&"#3 4%# "2"5.+" 0' $"5.+%$" !"
#$%" &'(#" !)*+,-.*/" 0-12%3"4"5
%#16&)" "' +%'7%7" 8,#-4#"((9 ),0(
-,''"#% %11:( à +% .#"5&:#" !,+,''"3 15
Les conditions d’affichage
!"#$% &'$#()"*'$(#+ ," #-%.% /"(*,%$ 0
12"3 *'(33%$ )-2(3($ ,'43 5"%* )'3 *%
!"#$%&!" '& ()&*+,-"./ 012. 23 &.!4,%"5
23" &'6%7 "4% '$)-(1%7 "4% &'6% '1%) #%*
2" #%* .2#8)*+9 :; %4)2$%7 <*%.%4#2$
12"3
*'(33% *% )-2(=>

!"#$ %"#&'( )*"#+', )#+)-+ .'


conditions que nécessaire pour avoir un
modèle appliqué à un seul ou au contraire
à beaucoup de contenu !

16
Au sommaire
Première étape : créer une page. . . . . . . . . . . . . . . . . . . . 20

Donner un titre à sa page et la publier.....................20

Astuce SEO........................................................................20

Définir cette page comme page d’accueil................. 21

02 Designer votre page avec Elementor . . . . . . . . . . . . . . . . 21


Première étape: lancer l’éditeur Elementor............. 21

Le tour de Seconde étape : se familiariser avec l’interface de


l’outil..................................................................................22

l’interface
Le panneau de contrôle.................................................22

Focus : Que fait le widget global ?..............................24

Interface de droite : canva............................................ 27

Les commandes de la section......................................28

Création de sections.......................................................29

Focus : Exporter un modèle pour un autre site.......32


Pourquoi je ne peux pas importer tous les
templates d’Elementor ?...............................................32

Un mot sur les colonnes. . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Les modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Le panneau de contrôle . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Onglet contenu................................................................34

02
Onglet style.......................................................................35

Onglet Avancé..................................................................36

Le tour de
Au fait : le panneau de contrôle, ce n’est pas que
pour les modules !..........................................................36

C’est quoi, l’étape suivante ?.......................................38

l’interface
Afin de faire le tour de l’interface nous allons
reprendre l’exemple de notre site de recettes de
cuisine introduit dans le premier article de cette
série, et admettre que nous voulons maintenant
créer la page d’accueil.

Petite particularité concernant la page d’accueil


: par défaut, celle-ci liste vos articles de blog
(logique : à la base, WordPress est conçu pour
réaliser facilement un blog). Nous voulons
avoir la main sur notre page et personnaliser
l’apparence de celle-ci. Pas le choix : on va
devoir passer par deux ou trois étapes pour
rendre cela possible avant de toucher à
Elementor.

Rassurez-vous, c’est simple !

Voir les vidéos


de la partie 2
19
Première étape : créer une page
Donner un titre à sa page et la
Depuis le menu du haut, cliquez sur publier
Créer -> Page.
Une petite vidéo valant un grand
Simple, non ? discours, voici comment faire :
La page d’après sera celle de
WordPress, dans laquelle vous pourrez
définir les caractéristiques de votre
contenu.

Est-il publié ? Quel titre ? Quel


contenu ? etc.

Concernant le contenu, justement,


vous pouvez utiliser l’éditeur
de WordPress ou celui Etapes pour enregistrer sa page dans
d’Elementor, mais n’allons pas wordpress
trop vite : nous y reviendrons bientôt,
promis ! Astuce SEO
Pour le moment, nous devons
Attention au nom de la page. Il
définir cette page comme étant
s’agit de votre page d’accueil, soit
notre nouvelle page d’accueil. Voici
probablement celle qui recevra le
comment faire.
plus de trafic. Faites plaisir à Google
et évitez « Bienvenue » ou « Page
d’accueil », car tout le monde utilise
ce genre de titres. Mon conseil :
indiquez de quoi parle de votre site.

Tout simplement.

20
Définir cette page comme page Designer votre page avec
d’accueil Elementor

Dernière étape : rendez-vous à


la section Réglage/Lecture, puis
Première étape : lancer
sélectionnez votre page dans le menu l’éditeur Elementor
déroulant, comme ci-dessous :
Pour cela, retournons à notre page.
Plusieurs moyens : soit cliquer sur le
bouton précédent de votre navigateur
jusqu’à retourner sur la bonne page,
soit passer par l’interface de gestion
des pages de WordPress. Voici
comment faire.

Comment l’interface del’éditeur


d’Elementor
Pour que cela fonctionne, n’oubliez pas
que votre page doit être publiée.

À présent, le contenu de notre page


n’est plus la liste de nos articles, mais
le contenu de notre page de recettes
corses. Allons donc ajouter un peu
de contenu à cette page, à l’aide
d’Elementor !

Une fois sur notre page, un bouton


nous permet de lancer Elementor.

L’intérêt ?

21
Vous quittez l’interface traditionnelle À gauche, le panneau de contrôle ; à
de WordPress et passez à une droite, l’éditeur de page.
interface conçue par l’éditeur et
spécialement adaptée à la mise en Le panneau de contrôle
page, sans distraction. Prêt ?

Cliquons sur le bouton de notre plugin C’est le panneau qui gère le contenu :
chouchou !
Comprenez par là :
Seconde étape : se familiariser • Quel module je vais ajouter à ma
avec l’interface de l’outil page (parmi une large sélection)

• Une fois un module sélectionné :


Avec Elementor, le concept est plutôt
simple. • Gérer son contenu
L’interface se divise en deux. • Gérer son apparence

Puisque l’interface du panneau est


très compacte, on retrouve également
A retenir d’autres options :

Le constructeur de page est


subdivisé en deux.

Un panneau latéral
(rétractable) permet L’interface laisse le plus de place
d’ajouter du contenu et de possible à la visualisation de votre
paramétrer son affichage. page et à son édition en temps réel.

Le reste de la page
(le canva) permet d’avoir un
aperçu de sa page.
22
1. Réglages globaux : Un menu un peu 3. Onglet Elements : C’est là où vous
vvvfourre-tout, je dois bien l’admettre. trouverez l’ensemble des modules
<. = 3&53(*1& $&' 0%3%/>53&' 895' que vous pourrez glisser-déposer
#$()%*+6 8(.5 $& ?@(9+ 8& $% 5=0( où bon vous semble dans votre
(* 8& $% ?(*$&*3 0(*3 5(*5 $& '95&6 page.
/%9' "#%$&/&.5 8&' 3%??(*3?9'
0(*3 A '(3593 B 8:C$&/&.5(3; 4. Onglet Global : C’est là où vous
trouverez certains des templates
2. Liste des modules : Vous cliquerez que vous avez sauvegardés. Je
souvent sur ce bouton ! Il vous précise cela, car vous pouvez
!"#$"% &'()*+,"# -( -./%" &" %01/ sauvegarder des portions de
les modules disponibles pour le votre page de différentes façons
glisser-déposer. En effet, dès que dans Elementor. Dans la version
vous cliquez sur un élément de gratuite, ce panneau n’est pas
votre page avec Elementor, le actif. Pourquoi ? Parce que sa
panneau latéral de gauche vous fonctionnalité très pratique est
donnera plus de détails. Donc, si réservée aux personnes qui
201/ &3/.#"4 ()*+,"# -( -./%" &" disposent de la licence payante
tous les modules pour en ajouter d’Elementor.
de nouveaux, ce bouton sera un
passage obligé. 5. Recherche : Très pratique pour
gagner du temps… quand on sait
ce que l’on cherche bien sûr ! Ce
n’est pas le cas ?

23
Focus : Que fait le widget global ?

Le widget global permet de réutiliser un


modèle sur plusieurs pages, et il suffit
de le modifier une seule fois pour qu’il
se mette à jour sur toutes les pages de
votre site ! Si, par exemple, vous indiquez
le prix d’un produit dans un widget de ce
type et que vous insérez celui-ci partout,
une simple modification sera répercutée
partout ! Ce widget est conçu pour
être inséré au sein d’un article. Si vous
souhaitez modifier le header ou le footer
de votre site, il vaut mieux passer par
le theme builder (c’est le sujet de mon
prochain article).

Un doute sur ce qu’est le header ou le


footer d’un site ?

Je vous suggère de (re)lire la première


partie de cet ebook :)

24
5. Prévisualisation : Un clic
ouvrira une nouvelle page vous
1. Réglage local : Pour publier sa permettant de voir votre contenu
page ou changer son titre : un peu sans panneau de contrôle, même
comme l’interface classique de si votre page n’est pas encore
WordPress, mais en un peu moins publiée. Astuce : vous pouvez
complet tout de même. également cliquer sur le petit
bouton, comme l’illustre le GIF
2. Navigateur : Affiche un petit suivant, mais méfiez-vous de ce
navigateur qui permet de mode : il n’est pas très fiable.
sélectionner des zones de sa Préférez donc le clic sur le bouton
page plus facilement. Pas souvent prévisualisation.
utilisé, mais peut vous sortir
du pétrin lorsque vous devez 6. Sauvegarder/Mettre à jour :
sélectionner une partie de votre Pratique pour enregistrer votre
page devenue inaccessible. Je vous travail, mais pas souvent utilisé,
rassure : cela n’arrivera que si vous car Elementor le sauvegarde
poussez trop loin les curseurs de automatiquement.
positionnement de vos blocs.
7. Raccourcis : N’oublions pas cette
3. Historique : Permet de revenir à !"#$%& !&'('& )* +,&- .&#/&-
une version antérieure. Très utile abandonnée… Elle vous fera gagner
lorsqu’on a fait une bourde. Au fait, pas mal de temps, car elle propose
Elementor prend en charge le Ctr+Z des raccourcis contextuels. Dans
dans ses raccourcis clavier : plutôt notre cas :
cool, non ?
Dans d’autres contextes
4. Mode responsive : Cet outil, pour cette !"#$% &%'(%)
le coup, vous risquez de l’utiliser *+,##-*%' .
plus souvent. Il vous permet de d’autres actions telles que
visualiser votre page en simulant les #/0*1)1/0 *+,23#$,4%
un téléphone ou une tablette. *,05 les modèles par
Très utile pour faire de petits exemple.
ajustements si nécessaire.
25
! "#$#%&" ' ()*+ ",-&.# /*# )# 0)&0 +*" )12#&) 3,&+ 32&%+ 4, 5)# #% $#"3# .# "#%.* 4,)6

26
Interface de droite : canva. Vous pouvez ajouter une colonne ou
en retirer une après avoir créé votre
section. Rien n’est figé.
La page de droite est une visualisation
de votre page. Nous l’appellerons Vous pouvez directement glisser un
« canva ». module dans une section pour gagner
du temps. Cela équivaut à créer une
C’est là que vous allez pouvoir glisser
colonne unique.
vos modules, puis les agencer comme
bon vous semble. OK, c’est bien joli, mais… si on
illustrait un peu tout cela ?
La page est structurée comme suit
: vous ajoutez une section, puis, à
l’intérieur de celle-ci, le nombre de
colonnes souhaitées. À l’intérieur
de ces colonnes, vous disposez les
modules comme bon vous semble.

Donc, en résumé, nos poupées


russes donnent une section, qui
contient une ou plusieurs colonnes,
• En bleu : une section qui contient
qui contiennent elles-mêmes un ou
deux colonnes dont j’ai mis le fond
plusieurs modules.
en bleu.
Quelques astuces :
• En jaune : une colonne avec un
Vous pouvez directement choisir le fond jaune.
nombre de colonnes lorsque vous
À l’intérieur de la colonne : un module
ajoutez une section.
image que j’ai glissé-déposé depuis le
panneau.

27
Toujours au menu des colonnes, je Les commandes de la section
peux redéfinir leur taille ou même les
inverser : il suffit d’un peu de doigté !

1. Ajouter une section : permet


d’ajouter une section au-dessus
de la section actuelle, afin de ne
pas avoir à cliquer sur le bouton
Vous avez vu ? Parfois, il faut « ajout de section » qui se trouve
persévérer pour arriver au résultat. Pas tout en bas de l’outil. Hum… un
d’inquiétude, cela concerne même les exemple ?
meilleurs ! ^^
2. Sélection : permet de sélectionner
Je peux même utiliser le clic droit la section pour : soit la glisser-
pour, cette fois, supprimer ou déposer ailleurs, soit modifier ses
dupliquer des colonnes. propriétés dans le panneau de
contrôle.

3. Suppression : permet de supprimer


une section. Vous pouvez
également le faire avec un clic
droit puis « Supprimer ».

Allez, fini le temps des démos GIF


saison un ! Zoom sur les commandes
qui nous permettent de réaliser tout
ceci :

28
Création de sections Mais, dans mon cas, cela ne
fonctionnait pas, donc je suis passé
par l’outil navigateur vu plus haut.
Deux écoles, donc, comme l’illustre
Pas d’inquiétude : cela aurait dû
la capture d’écran ci-dessous : vous
fonctionner chez moi, je suppose que
cliquez soit sur le bouton rouge, soit
c’est l’écran de capture GIF qui a posé
sur le bouton « + » de la commande
problème.
de section.
Qu’est-ce qui se passe si, au lieu
Si vous désirez ajouter une section
de cliquer sur « + », je clique sur le
dans une page qui en contient déjà
dossier ?
pas mal, le bouton « + » est une
bonne option, comme l’illustre cet
exemple.

Ouh là, vous êtes sûr ? En appuyant


sur ce bouton, vous entrez dans la
quatrième dimension ! Celle des
templates d’Elementor.
Deux remarques : Les templates sont très pratiques
pour gagner du temps, et même
1. On peut copier-coller tout et
pour obtenir un résultat efficace
n’importe quoi avec Elementor :
très rapidement, mais on est là pour
des colonnes, des sections, mais
apprendre les bases et faire notre
également des modules. C’est ce
propre design, non ?
qui a été fait ici.
Allez, on va quand même faire un tour
2. Normalement, on peut déplacer la
pour l’inspiration !
section avec le bouton 2, celui-ci :

29
A retenir
Magnifique, non ?

Ne partez pas, ce n’est pas fini ! Pour Dans le panneau des modèles, on
Vous pouvez insérer un exploiter pleinement les templates, il retrouve pêle-mêle : des filtres, un
modèle de page quand vous nous reste quelques bases à acquérir, moteur de recherche, la possibilité de
n’avez pas de compétences notamment avec le panneau de mettre de côté des favoris et de faire
avancées en design, pour contrôle qui se trouve à gauche ! des prévisualisations avant d’insérer
trouver de l’inspiration ou tout le contenu. Pas mal, non ?
encore gagner du temps.
30
1. Ajouter un bloc : « Bloc » peut 4. Importer un modèle : Si vous
prêter à confusion, on va plutôt !"#$ %& '( )*#+ #,-#+&# .!% /0+1!-
traduire cela par ajouter une .jscon) contenant un modèle,
section vous pouvez l’importer depuis ce
bouton. Utile quand vous importez
2. Ajouter une page : Pour l’effet un template depuis un autre
« Waouh » ! site, par exemple (voir le focus
« Exporter un modèle pour un autre
3. Ajouter un modèle : Avec
site » pour plus d’informations)
Elementor, un clic droit depuis
l’éditeur suffit pour enregistrer 5. Synchroniser la librairie : Pour
une section ; vous les retrouverez mettre à jour votre librairie de
toutes à cet onglet. Attention : modèles, au cas où vous en avez
depuis l’éditeur, seule une section importé manuellement.
est enregistrable (pas une colonne
ni un modèle) ; en revanche, vous 6. Enregistrer la page : Permet
pouvez enregistrer une page en d’enregistrer toute votre page
entier avec le bouton 6. en cours, et pas seulement une
section !
31
Focus : Exporter un modèle pour page des modules qui sont réservés
un autre site aux versions payantes d’Elementor.
Le cas typique ? Tous les templates
qui incluent un formulaire sont
!" #$%& &$%'(")*+ *,-$.)*. %/ 0$123* */ inaccessibles, car ce module est un
1*'$.& 1* #$).* 3"4.("."* 5-$%. %/ !"#$% module « pro ». Je vous rassure : une
&'#%( )!$ %*%+),%-( ', ./"& &"01# 1* fois activée, votre licence vous permet
36*/.*7"&).*.8 1* #$%& .*/1.* 1(/& 9 ;*& d’accéder à tous les templates, sans
0$123*& <8 -%"& 1* =3">%*. &%. limite !
« ?,-$.) < =$00* ="@1*&&$%&A B6*/ -(.3*
C7(3*0*/) !"#$ %&''& ()!*+A Voici pour les sections. Je vous
propose de dire un mot rapide
des colonnes, avant de passer aux
modules.

Un mot sur les colonnes

Pourquoi je ne peux pas Comme on l’a illustré dans le GIF,


importer tous les templates les colonnes sont déplaçables et on
d’Elementor ? peut également appliquer un fond
de couleur (ou personnaliser leur
À noter : Certains templates ne apparence à sa guise). Voilà, je vous
sont pas accessibles avec la version avais prévenus : c’est court, mais pas
gratuite d’Elementor. Pourquoi ? parce grand-chose d’autre à dire, à ce stade,
que ceux-ci utilisent dans leur mise en concernant les colonnes !

32
Les modules

Depuis la partie canva, vous pouvez sélectionner un module avec le bouton (1) et modifier
le contenu ou l’apparence de votre module depuis le panneau latéral (2)

Les modules sont éditables avec l’outil crayon.

Bien sûr, comme chaque module est unique, les options proposées dans le panneau de
droite sont très diverses : parfois un seul choix, parfois plusieurs dizaines.

Allons donc de l’autre côté et, avec le titre sélectionné, examinons les options disponibles
depuis le panneau latéral.

33
Le panneau de contrôle Pour faire simple : vous vous souvenez
du chapitre sur le HTML ? En gros, tout
ce que vous modifierez ici, ou presque,
Celui-ci est subdivisé en trois : modifiera la balise HTML de l’élément.

Onglet contenu Souvenez-vous de l’exemple du niveau


de titre :

Comment son nom l’indique, c’est là


que vous allez pouvoir personnaliser
le contenu de votre module (ici, un Ici nous avons indiqué à Elementor que
titre). notre titre était un titre de niveau 2.
Vous pouvez l’écrire à la main ou Depuis ce panneau, on peut donc
utiliser des variables (C’est juste pour avoir la main à la fois sur le contenu
info, hein ! On ne va pas le faire ici, et sur les balises HTML. Rassurez-vous,
rassurez-vous : je veux vous garder en encore une fois, vous n’aurez pas à
bonne santé jusqu’au bout !). apprendre le HTML. Tout s’écrit en
coulisse, selon vos choix !
34
Onglet style Un exemple ?

Et si on passait ce titre en bleu ?


Ce panneau aussi change beaucoup
selon le module sélectionné. C’est
logique : il propose des options de
personnalisation adaptées à chaque
cas. C’est donc ici que l’on transforme
l’apparence de notre module et, là
encore, tout s’écrit en coulisse, en
langage CSS, sans qu’on ait besoin de
le connaître.

Les modification se font en temps réel.

C’est aussi simple que cela ! C’est


également ici que vous pourrez à loisir
changer la police de votre titre.

35
Onglet Avancé Si vous sélectionnez l’onglet style et
que vous mettez un fond rose, celui-
ci s’appliquera à toute votre ligne si
Contrairement aux deux premiers, cet
vous avez sélectionné une section, et
onglet est commun à chaque module
uniquement à votre colonne si vous
sélectionné.
avez sélectionné une colonne.
Il vous propose notamment d’ajouter
Ces jolies couleurs vous disent
des marges entre deux éléments
quelque chose ? C’est le même
(espacer, c’est important pour laisser
principe ici.
« respirer » votre page). Les autres
rubriques sont un peu moins utilisées,
mais peuvent s’avérer utiles pour
peaufiner son design sur les écrans
mobiles, par exemple.

Au fait : le panneau de contrôle,


ce n’est pas que pour les La section a un fond bleu et la
modules ! colonne, un jaune. Ces deux couleurs
ont été sélectionnées depuis l’onglet
« Style » du panneau de contrôle.
Ah oui, j’oubliais quelque chose
d’important : le panneau de Seul le premier onglet des colonnes
commande et ses 3 onglets sont et des sections est un peu différent
également disponibles pour une par rapport au module : en effet, on
colonne ou une section. ne parle pas vraiment de « contenu »
dans ce cas, mais plutôt de mise en
Selon ce que vous sélectionnerez, leur
page de la colonne ou de la section.
comportement ne sera donc pas le
D’ailleurs, cela tombe bien, il s’appelle
même.
« Mise en page ». Merci Elementor !

36
Pour une colonne, on vous proposera
d’en changer la taille.

Pour une section, vous aurez un peu


plus d’options de mise en page. Pareil
pour le style, d’ailleurs, avec beaucoup
d’options pour définir un arrière-plan !
37
C’est quoi, l’étape suivante ?

Vu la longueur du présent guide, on ne pourra,


hélas ! pas décortiquer le comportement de
chaque module. L’idée était plutôt de vous faire
faire un tour du propriétaire. Ce que je vous
suggère, c’est d’aller « chipoter » les curseurs
pour voir le résultat en direct. Je vous rassure
: Ctrl + Z existe sur Elementor, alors n’ayez pas
peur ! On y prend très vite goût.

Commencez par des modules simples, tels que


« Titre » ou « Paragraphe », et allez également
modifier les onglets « Style » depuis des
sections !

Je vous rassure, je n’ai pas oublié le projet


de base, celui de refaire notre page d’accueil.
Cependant, vu que vous êtes maintenant
familiers avec les commandes, je vous propose
de continuer notre tour guidé en vidéo pour
la suite de ce projet. La vidéo couvrant cette
partie est juste en dessous.

Si vous avez des questions sur ce guide, les


commentaires en bas de page sont là pour cela.

38
L’essentiel.
Passez à la vitesse supérieure avec Elementor Pro

J’en profite !
Tout ce qu’il faut retenir pour
prendre en main rapidement
Elementor Pro.
Au sommaire
Les widgets d’Elementor PRO. . . . . . . . . . . . . . . . . . . . . 42
Les codes courts (short codes).....................................
42

Les modules tiers.............................................................


44

03 Le theme builder d’Elementor PRO. . . . . . . . . . . . . . . . 45


Utiliser un thème page

Elementor
builder friendly.................................................................
45

Le theme builder..............................................................

PRO
45
L’éditeur Elementor 46
Les widgets du theme builder 46
Les conditions d’affichage 47
Conclusion : Alors, avec ou sans Elementor PRO ?. . . 48
Suite et fin de notre guide sur Elementor
PRO.

Dans la première partie, nous avons


fait connaissance avec Elementor et ses
concepts clés. Dans la seconde partie,
nous avons commencé la création de
notre page d’accueil, après un tour
complet de l’interface.

Dans cette dernière partie, terminons


notre page d’accueil, d’une part, et
même notre thème, d’autre part, à l’aide
d’Elementor Pro.

Pour répondre à la question de l’utilité


d’une licence Elementor Pro, il y a
deux points à prendre en compte. Ils
correspondent aux deux grandes parties
de ce dernier chapitre.

Voir la vidéo de la partie 3


41
Les widgets d’Elementor PRO En plus d’être beaucoup moins
visuelle, la page sans le plug-in payant
se caractérise par une absence quasi
Avec la version payante arrive une complète de paramétrage.
multitude de widgets « Pro » que
l’on peut glisser-déposer. Mais est-ce Je dis « quasi complète », car les
vraiment indispensable pour créer plus bidouilleurs d’entre vous auront
une page ? toujours la possibilité de « bricoler » la
mise en page, avec l’onglet « Avancé »
Oui et non. par exemple.
En fait, pour une page « classique » Le point négatif : certes, vous pourrez
comme la page « À propos » ou « Qui modifier le CSS sans Elementor Pro,
sommes-nous ? », il est tout à fait mais vous devrez le faire dans votre
possible de s’amuser et d’obtenir un thème, et non depuis l’éditeur en
résultat bluffant, et ce, très direct, ce qui vous compliquera (un
rapidement ! (Merci, les modèles, peu) la tâche. Ainsi, même pour mettre
!"#$%&'#( ) *+,& -+,& &%./0%1#2 3%#- 04 la main dans le cambouis, Elementor
vie !) Pro offre un avantage : proposer
l’édition du CSS dans le panneau
Là où les choses se compliquent…
Avancé.
… c’est lorsque vous voulez afficher du
Le gros point positif : n’oubliez pas
contenu dynamique. Comme sur notre
qu’en version gratuite, vous disposez
page d’accueil, par exemple. Il n’est
du widget « code court », et il est
pas impossible de créer une page
simplement magique !
d’accueil sans Elementor Pro, mais
regardez l’exemple par vous-même ci-
dessous… Les codes courts (short codes)

Tout module tiers disposant de

42
cette option vous permet d’afficher Mais du coup, je dois payer pour
son rendu final directement dans d’autres plug-in ?
Elementor. Il suffit de copier-coller la
formule magique entre crochets. Pas forcément, il existe des milliers de
plug-in WordPress gratuits qui offrent
la possibilité de copier-coller des
codes courts. La question est plutôt
de savoir si le rendu est par défaut
Exemple de shortcode du module crelly « design » et s’il y a des possibilités
slider de mise en page avancée depuis les
pages d’administration du plug-in (à
Des exemples ? défaut de le faire directement dans
Elementor encore une fois).
Bien sûr ! Avec ce genre de codes
courts, vous allez pouvoir insérer des Dernière option, si vous ne désirez pas
diaporamas, des menus, ou même la acheter tout de suite Elementor Pro,
liste de vos articles. Reconnaissons-le, mais quand même faire joujou avec
c’est très pratique et c’est ce que nous les curseurs depuis l’éditeur : utiliser
cherchions à faire en priorité avec les modules tiers.
notre page d’accueil.

43
Les modules tiers Du coup, vous devrez certainement
installer plusieurs de ces modules
pour parvenir à vos fins. Citons, parmi
Puisqu’ils sont faits pour être
les plus connus :
compatibles avec Elementor,
ceux-ci proposent des options de Essential Addons for
!"#$%&&'()$'*)%& +" (,'-./0'1" "* +2 Elementor, Premium Addons
design directement depuis l’éditeur. for Elementor ou bien encore
Parfois trop même, rendant un peu Livemesh Addons for Elementor.
indigeste la partie pourtant la plus
fun, qui est la personnalisation de Tous proposent beaucoup de
notre page. widgets gratuits et, bien sûr, une
option payante pour encore plus de
Là aussi, tout n’est pas rose, car ce
possibilités !
sont le plus souvent des modules
payants, qui ne débloquent pas Il n’est donc pas impossible de faire
toujours l’ensemble des widgets, et sa page d’accueil (ou même des
donc il vous faudra payer pour profiter pages complexes) sans Elementor
à fond de ces plug-in. Installer les Pro, et c’est un peu le même principe
versions gratuites peut par contre être concernant le thème de son site.
très pertinent lorsqu’on ne veut pas Oui, on peut faire un thème entier
du tout d’Elementor Pro ou que l’on avec Elementor ! Si cela ne vous
recherche des plug-in introuvables sur parle pas trop, je vous recommande
celui-ci ! chaudement de lire le tout premier
guide, dans lequel je vous explique le
concept et le vocabulaire.

44
Le theme builder d’Elementor Cela reste encore une fois une très
PRO bonne option si vous êtes prêt à
passer un peu de temps en dehors de
l’éditeur d’Elementor pour concevoir
Deux choix ici, pour le moins votre thème. Là aussi, faites attention :
radicalement différents : l’ensemble des fonctionnalités ne sont
pas débloquées, car pour ces deux
Utiliser un thème page builder thèmes, une version « Pro » existe !
friendly
Le theme builder
Sans Elementor Pro, utiliser un thème
comme Ocean WP ou Astra theme Avec lui, c’est Noël avant l’heure !
(mon chouchou) vous permettra de Pourquoi ?
faire cohabiter au mieux Elementor
et le thème de votre site. Vous aurez Vous disposez de l’éditeur d’Elementor
juste moins de contrôle sur le header ! "#$ %&"'#($ $)*+&,-.#$ /.0 (1#2#
et le footer de celui-ci, car vous ne builders (voir la première
passerez pas par Elementor pour le partie3 ! "#$ +45"&(&45$ "6/7,+1/'#8
créer, mais par l’interface classique
Détaillons un peu :
de WordPress, qui, il faut bien le dire,
peut vite devenir un vrai labyrinthe
pour les non-initiés !

45
L’éditeur Elementor Les widgets du theme builder

Cela peut sembler normal, mais !"#$ %&'( )*+,$$)-.% /0"1234%5 6,75%
croyez-moi, dans l’écosystème de menu, votre sidebar ou bien encore
WordPress (pour le moment), rares sont une liste d’articles. Ils sont donc
les plug-in permettant à la fois !" essentiels pour construire son site de
#$!%&"' ()*++*'",-" !).," +*/" et A à Z, et il faut bien dire qu’Elementor
celle d’un thème entier. Seuls quelques a fait un travail de DINGUE concernant
pages builders font cela bien, et quoi certains de ses widgets et les
de plus appréciable que de construire personnalisations possibles ! Prenez
son site EN ENTIER avec l’éditeur que le menu, par exemple : vous pouvez
l’on connaît déjà ? Fini les longues décider d’avoir un menu horizontal,
heures à manipuler les vertical ou mobile, et, pour chaque
sous-sous-sous-menus sans vraiment 3,#28&5"7),#( /%$ +%5$,##".)$"7),#$
voir ce qui se passe ! Ici, on peut très poussées au niveau du design.
manipuler chaque portion en direct. Quel effet mettre au passage de ma
Ouf ! souris ? Comment indiquer un sous-
menu ? Etc, etc.

46
Les conditions d’affichage différents : un pour les personnes
connectées à leur espace membre,
et l’autre pour les personnes
C’est bien beau de créer des
déconnectées ?
templates, mais il faut quand même
expliquer où et comment ils vont L’avantage ?
s’afficher.

!"#$ %"#&'( )*"#+', )#+)-+ .'


conditions que nécessaire pour avoir
un modèle appliqué à un seul ou au
contraire à beaucoup de contenus avec
Elementor PRO et son thème builder.

Par exemple, dire que votre header


(cf. partie 1 si ce terme ne vous parle
pas) va s’afficher sur tout votre site,
que le modèle « article » va s’afficher
Proposer des menus adaptés à chaque
pour chacun de vos contenus de type
contexte. Avec connexion d’un côté et
article, etc.
déconnexion de l’autre, par exemple.
À moins de vouloir un site complexe,
Vous savez quoi ?
le tout est très rapidement configuré,
mais permet quelques raffinements C’est très simple à mettre en place
pour les utilisateurs les plus aguerris. avec Elementor Pro. Tout ce qu’il faut
faire, c’est créer deux modèles et
Par exemple :
choisir ensuite, dans les conditions, si
Pourquoi ne pas avoir deux headers ce menu s’affiche pour les personnes
connectées ou non.

47
Conclusion : Alors, avec ou sans En somme, ce qu’offre Elementor Pro,
Elementor PRO ? c’est une interface unique qui, une
fois que vous la maîtriserez, vous
fera gagner beaucoup de temps, que
Faire une page avec un affichage ce soit pour concevoir des pages
dynamique ou original est possible affichant du contenu dynamique, une
sans Elementor Pro, mais il vous page toute simple, ou bien agir sur
faudra composer avec quelques votre thème. Au final, vous gagnerez
modules supplémentaires, des short en temps et en efficacité en ne
codes et quelques « bidouilles » multipliant pas les outils. Là est, je
pour modifier l’apparence, car les pense, le véritable avantage à payer
options de mise en page restent peu l’upgrade vers Elementor Pro.
nombreuses.
À ce propos, si vous décidez de
Pour ce qui est des thèmes, faire votre sauter le pas et d’acheter une licence
site sans Elementor Pro est peut- Elementor Pro, j’ai une bonne nouvelle
être plus simple, notamment si vous pour vous !
utilisez Ocean WP ou Astra theme.
Si vous passez par mon lien
Cependant, vous ne pourrez pas d’affiliation, je vous fais bénéficier
utiliser l’éditeur d’Elementor, ce qui d’une offre spéciale et vous offre une
pourra parfois vous compliquer la formation pour vous aider à prendre
tâche et vous empêchera d’avoir un en main ce plug-in !
design vraiment personnalisé.
A retenir

gagnez du temps avec


Elementor PRO qui
permet de modifier tout
son site en apprenant
une seule interface !

48
Ensemble, nous recréerons, en seulement
quelques minutes, un site d’hôtel. Et je vous
donnerai de précieuses astuces pour vous
faire économiser encore plus de temps !
Consultez cette page pour connaître le plan
de la formation, et celle-ci pour connaître les
modalités de l’offre spéciale. J’ajoute (c’est
important) que passer par mon lien ne vous
coûtera pas plus cher. D’ailleurs, vous serez
directement dirigé(e) vers le site officiel
d’Elementor pour poursuivre votre achat. Par
contre, il faut bien cliquer depuis mon lien
d’affiliation pour que je puisse enregistrer votre
commande et vous faire profiter de l’offre.

Il ne me reste plus qu’à vous souhaiter de


nombreux sites avec Elementor ! J’espère que
vous avez pris autant de plaisir à lire ce guide,
que j’en ai eu à l’écrire pour vous.

Si vous avez la moindre question, c’est juste


en bas, ou alors depuis ma newsletter ou le
formulaire de contact :-)

49
L’essentiel.
Passez à la vitesse supérieure avec Elementor Pro

J’en profite !
Tout ce qu’il faut retenir pour
prendre en main rapidement
Elementor Pro.

Vous aimerez peut-être aussi