• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 31/07/2019

Prenez en main Elementor et designez votre page d’accueil

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Prenez en main le page builder Elementor

La page d’accueil ainsi que les autres pages importées via le site de démo sont déjà créées avec Elementor. Pour les éditer avec Elementor, il suffit donc de visiter la page que vous souhaitez éditer et de cliquer “Modifier avec Elementor” dans la top bar d’administration.

Si la page n’est pas encore construite avec Elementor (typiquement, si vous en créez une nouvelle), éditez-la normalement depuis le dashboard et cliquez le bouton bleu “Modifier avec Elementor”.

Visitez maintenant votre page d’accueil et cliquez “Edit with Elementor”.

La page se divise alors en deux.

  • Sur la gauche, vous disposez d’une colonne contextuelle dédiée aux fonctionnalités Elementor.

  • Sur la droite, vous voyez le rendu de votre page.

Elementor-un page builder
Elementor- un page builder

Cette combinaison est très pratique, car, un peu comme dans le customizer, toutes les modifications que vous ferez sur la page se verront instantanément dans la zone de prévisualisation !

La colonne de gauche dispose de deux panneaux principaux.

  • Le premier affiché par défaut et accessible via l’icône présentant 6 petits carrés en haut à droite, liste les modules disponibles pour créer votre page. Vous pouvez ajouter ces modules à votre page en glissé-déposé.

  • Le second est le panneau contextuel d’édition des modules, colonnes ou sections. Pour l’afficher, cliquez sur le crayon bleu au survol d’un module.

Personnalisez le hero de votre page d’accueil

Nous allons commencer par modifier la première section de la page, aussi appelée “hero”. C’est la section la plus importante, car elle va donner la première impression au visiteur. Il faut donc qu’elle soit impactante, que le message soit clair et qu’elle propose un “appel à l’action” (“call to action”) clair.

Modifiez le titre

  • Cliquez simplement sur le titre principal “DISCOVER YOUR POTENTIAL​” dans la section de prévisualisation (à droite).

  • Vous pouvez modifier le texte directement dans la zone de prévisualisation ou dans le champ dédié dans la colonne de gauche qui affiche maintenant les options d’édition et de personnalisation du module sélectionné.

  • Modifiez le contenu avec “Créateur de sites web à croquer !” et sélectionnez “p” (paragraphe) dans le champ “Balise HTML”.

  • Cliquez l’onglet “Style” puis “Typographie”, et sélectionnez la taille de 60 px et le poids de 900.

Modifiez le sous-titre

Le sous-titre est actuellement composé d’un widget “texte”.

  • Faites un clic droit sur le sous-titre dans la zone de prévisualisation et cliquez “effacer”.

  • Cliquez ensuite sur l’icône composée de 9 carrés en haut à droite de la colonne de gauche, c’est l’icône d’accès aux widgets Elementor. C’est le bouton permettant d’accéder à la liste des modules Elementor.

  • Glissez-déposez le module “Titrage” dans la zone où était situé le sous-titre.

  • Remplacez le contenu par “Agence WordPress à Bordeaux : création de sites, identité graphique, référencement naturel”.

  • Cliquez l’icône d’alignement “centré” et sélectionnez “H1” dans le champ “Balise HTML”.

  • Dans l’onglet “Style”, choisissez la couleur “blanc”, cliquez “Typographie” et choisissez la taille 21 qui permet d’aligner à peu près la largeur des deux titres.

Modifiez le master visuel

Nous allons maintenant modifier l’image de fond de la section. Techniquement, il s’agit d’une “background image”. Cela veut dire que l’image n’est pas affichée via un widget dédié, mais qu’elle s’affiche en arrière-plan de la section.

La section Elementor est délimitée par un rectangle bleu. Pour la modifier, survolez-la et cliquez sur l’onglet bleu contenant 6 petits points en haut de la section.

La colonne de gauche affiche maintenant les options de “Mise en page” de la section. Je vous invite à les explorer, mais ce ne sont pas elles qui nous intéressent pour l’instant.

  • Cliquez l’onglet “Style” de la colonne de gauche. Vous voyez maintenant les options d’arrière-plan avec l’image que nous souhaitons modifier.

  • Cliquez dessus puis “Téléversez des fichiers” et téléversez le master visuel défini précédemment.

L’image de fond est bien remplacée !

Vous remarquerez en revanche qu’elle est grisée. C’est parce qu’il y a un “overlay” en transparence de noir par-dessus notre image. Cet overlay sert en général à améliorer la lisibilité du texte par-dessus une image, mais il peut aussi être utilisé à des fins esthétiques ; c’est ce que nous allons faire ici.

Scrollez dans la colonne de gauche et cliquez “Superposition d’arrière-plan”. Vous voyez alors la couleur noire qui est choisie. Plutôt que d’utiliser une teinte unique, nous allons définir une superposition en dégradé de couleurs :

  • Cliquez l'icône “dégradé” à côté de l’icône “couleur” représentée par un pinceau.

  • Cliquez ensuite la couleur noire et baissez la transparence à zéro.

  • C’est déjà beaucoup mieux !

  • On s’aperçoit en revanche que le jaune en haut est très clair et que cela va nuire à la lisibilité du menu blanc en haut de page.

  • Nous allons donc modifier l’angle du dégradé pour que le jaune clair soit en bas.

  • Saisissez 30 à la place de 180 dans le champ “angle”.

Nous allons maintenant encore améliorer notre hero en ajoutant une forme de séparation en bas de la section.

  • Scrollez toujours dans la colonne de gauche et cliquez “Forme de séparation”.

  • Cliquez “Bas” et sélectionnez “vague”.

Plutôt sympa, non ?

En revanche, la section s’arrête maintenant juste en dessous de la banane, ce qui n’est pas très esthétique.

  • Cliquez “Mise en page” dans la section de gauche et augmentez le champ “hauteur minimum” à 715 px.

Modifiez le style et la couleur des boutons

Les boutons carrés ne vont maintenant plus très bien avec le reste du design. Nous allons arranger cela.

  • Sélectionnez maintenant le bouton de gauche dans la section de prévisualisation.

  • Cliquez “style” dans la colonne de gauche.

  • Mettez 40 dans le champ “rayon de bordure”.

  • Cliquez maintenant “couleur de l’arrière-plan” et sélectionnez le bleu de notre palette.

  • Cliquez ensuite l’onglet “au survol”, cliquez “couleur de l’arrière-plan”, sélectionnez le bleu de notre palette et baissez l’opacité à environ ⅔.

  • Cliquez maintenant l’onglet “contenu” en haut de la colonne de gauche et saisissez le texte “En savoir plus” à la place de “Learn more” et saisissez “#ensavoirplus” dans le champ “lien”.

  • Ce type de lien s’appelle une ancre et va permettre de scroller au niveau de la section ayant l’ID “ensavoirplus” au clic sur le bouton (ce n’est pas la peine d’essayer, elle n’est pas encore définie !).

Une des fonctionnalités très pratiques d’Elementor est la possibilité de copier le design d’un élément pour l’appliquer à un autre.

Nous allons donc le faire ici pour designer le deuxième bouton.

  • Faites un clic droit sur le bouton que nous venons de designer et sélectionnez “copier”.

  • Cliquez à nouveau au même endroit pour “lâcher” le bouton qui s’est collé à votre souris.

  • Faites maintenant un clic droit sur le deuxième bouton et sélectionnez “Coller le style”.

  • Le style a bien été copié, mais le bouton est maintenant à droite !

  • Sélectionnez le bouton, puis dans alignement cliquez l’icône “justifié à gauche” pour le repositionner correctement.

  • Changer le texte par “Nous contacter” et le lien par “#contact”.

  • Allez dans “style” et changez la couleur d’arrière-plan et la couleur d’arrière-plan au survol avec le rose clair.

Ajoutez des animations sur les boutons

Elementor offre la possibilité d’ajouter très simplement de petites animations sur les widgets utilisés. Nous allons en ajouter sur les boutons pour qu’ils apparaissent en slidant de part et d’autre au chargement de la page.

Pour cela :

  • sélectionnez le bouton de gauche, cliquez “Avancé” dans la colonne de gauche et sélectionnez “Fade in left” dans la section “Animations” ;

  • sélectionnez le bouton de droite, cliquez “Avancé” dans la colonne de gauche et sélectionnez “Fade in right” dans la section “Animations”.

Ça y est, notre hero est fini ! Passons maintenant à la première section de la page.

Personnalisez le contenu de la page

Personnalisez la première section

Scrollez dans la zone de prévisualisation et cliquez sur le titre.

Modifiez le titre

Changez le contenu par “Création de sites WordPress”. Conservez le titre en “H2”, puisqu’il contient bien des expressions de recherche sur lesquelles nous souhaitons nous positionner. Après quelques tests, nous choisissons le style suivant :

  • Couleur : le bleu de notre palette.

  • Taille de police : 32 px.

  • Poids de la police : 600.

Définissez le style par défaut des titres H2

Plutôt que de paramétrer à chaque fois ces valeurs dans Elementor, paramétrez-les comme valeurs par défaut dans les options de votre thème. Cela vous permettra de ne pas avoir à les appliquer à chaque fois que vous créerez un titre de niveau 2 (H2) et si jamais vous devez les modifier dans le futur, de le faire en une seule fois plutôt que d’avoir à repasser sur tous les titres du site !

  • Notez les valeurs souhaitées, puis rétablissez les valeurs sur “par défaut” dans Elementor.

  • Retournez dans le customizer >> Typographie >> H2.

  • Insérez les valeurs notées plus haut et publiez.

Modifiez les blocs “services”

  • Cliquez l’icône d’affichage des modules et glissez-déposez le module titrage en haut de la première colonne.

  • Remplacez le texte par “Sites vitrines”, choisissez la balise HTML “H3”, centrez l’alignement, passez la couleur en blanc, et dans typographie, passez en majuscule, taille 26 px.

  • Supprimez le bloc “Boîte d’icône” situé en dessous.

  • Sélectionnez la colonne en cliquant l’icône grise en haut à gauche du bloc.

  • Dans style, mettez une image en arrière-plan et paramétrez un dégradé de couleur.

  • Dans avancé, paramétrez une marge de 5 px à gauche et à droite, et une marge interne de 120 px en haut et en bas.

  • Dupliquez deux fois le bloc ainsi obtenu et supprimez les 2 anciens blocs.

  • Remplacez les textes, images d’arrière-plan et dégradé pour correspondre au rendu souhaité.

Modifier les marges externes et internes
Modifier les marges externes et internes

Personnalisez la seconde section

Sélectionnez la section. Passez la largeur du contenu à 720 px. Changez l’image de fond avec l’image suivante dont vous aurez tout d’abord changé l’orientation en mode paysage (cf. remarque ci-dessous) : https://unsplash.com/photos/Km8L8QoJIq8

Important : éditer une image dans WordPress.

WordPress offre la possibilité d’effectuer des modifications simples sur une image directement depuis le dashboard sans avoir à passer par un éditeur externe comme Photoshop ou Gimp.

Pour cela :

  • Rendez-vous dans la rubrique “Médias” du dashboard.

  • Cliquez l’image que vous souhaitez modifier et cliquez “Modifier l’image” sous la zone de prévisualisation.

  • Vous pouvez alors effectuer des rotations ou des symétries en cliquant sur les icônes correspondantes ou encore recadrer l’image en sélectionnant la zone souhaitée sur la prévisualisation, puis en cliquant l’icône de recadrage.

  • Sauvegardez ensuite vos modifications en cliquant “Enregistrer”.

  • Ça y est, l’image est modifiée et vous pouvez l’insérer où vous le souhaitez via l’éditeur classique ou le page builder de votre choix.

  • Paramétrez la forme de séparation “vague” en haut et en bas de la section.

  • Paramétrez 120 px de marge intérieure en haut et en bas.

  • Supprimez la deuxième colonne de la section.

  • Sélectionnez la première colonne.

  • Paramétrez un fond blanc en opacité 90 %.

  • Passez le titre en bleu, “h3” taille 32 px.

  • Supprimez les images des composants “boîte d’image” dans la colonne.

  • Insérez les contenus souhaités dans les zones de texte.

  • Ajoutez un composant “Section interne” dans la colonne et ajoutez une colonne pour en avoir 3.

  • Glissez chaque composant “boîte d’image” dans une colonne différente.

Personnalisez les sections 3, 4 et 5

Modifiez enfin les sections 3, 4 et 5 par vous-même pour les faire ressembler au site créé par nos soins et supprimez les sections restantes.

Insérez les carrousels de témoignages clients

Depuis la liste des widgets Elementor, vous pouvez remarquer une section appelée “Livemesh Addons”. Elle regroupe les widgets ajoutés par l’addon “Elementor Addons” installé précédemment. Utilisez simplement le widget “Testimonial Slider” pour créer les carrousels de témoignages clients.

Adaptez le design pour tous les écrans

Avant de passer à la suite, nous allons voir une fonctionnalité essentielle d’Elementor et d’OceanWP : la possibilité de facilement adapter le design à différentes tailles d’écran.

Pour cela, cliquez sur l’icône écran de la colonne de gauche en mode édition avec Elementor et sélectionnez l’icône mobile. La zone de prévisualisation passe instantanément en mode mobile et vous allez constater de nombreuses choses à optimiser pour ce format : taille de police, marges, alignement des éléments etc.

Au clic sur un widget, vous allez pouvoir changer les paramètres avec l’icône bleue “mobile” à gauche spécifiquement pour mobile. Repassez donc sur la page pour corriger tous ces aspects et enregistrez.

Faites de même avec la version iPad.

Vous pouvez aussi changer les paramètres de typographie OceanWP (entre autre) de la même façon dans le customizer. Je vous invite donc à configurer les valeurs par défaut pour les tailles de corps de texte et de titres sur mobile dans le Customizer afin qu’elles soient automatiquement appliquées partout.

Nous vous laissons le soin de créer les autres pages de votre site et de les ajouter au menu.

A noter qu’en plus des pages du site de démo déjà importées vous pouvez :

  • importer des templates de pages et de sections gratuits proposés par Elementor en cliquant l’icône dossier depuis Elementor

  • importer des centaines de templates de pages gratuit via l’extension Envato Elements

Maintenant que vous maîtrisez la création de pages complexes avec Elementor, nous allons voir comment intégrer des fonctionnalités supplémentaires grâce à des extensions

Exemple de certificat de réussite
Exemple de certificat de réussite