FORMATION ELEMENTOR.
Apprenez a maitriser Elementor pour creer des pages web professionnelles
🎨 WebP vs JPEG vs PNG : Quel format choisir ?
- WebP : Format moderne, meilleur compromis qualité/poids (30% plus léger que JPEG). ✅ Recommandé pour 2024+
- JPEG : Idéal pour les photos. Bon niveau de compression. Compatible partout.
- PNG : Pour les logos et images avec transparence. Plus lourd que JPEG.
- GIF : Pour les animations uniquement. Éviter pour les photos.
- SVG : Format vectoriel pour les icônes et logos (qualité parfaite à toute taille).
⚡ Lazy loading : Charger les images à la demande
Elementor active automatiquement le lazy loading : les images ne se chargent que quand l’utilisateur scrolle jusqu’à elles. Cela accélère considérablement votre site !
COMPRENDRE L’INTERFACE.
Decouvrez l’editeur visuel d’Elementor et ses differentes zones
Comment ouvrir l’editeur pour modifier vos pages
Methode 1 : Depuis le tableau de bord WordPress.
1. Allez dans Pages (ou Articles).
2. Survolez la page a modifier.
3. Cliquez sur “Modifier avec Elementor”.
Methode 2 : Depuis la page elle-meme.
1. Visitez votre page en etant connecte.
2. Cliquez sur “Modifier avec Elementor” dans la barre d’admin en haut.
Methode 3 : Creer une nouvelle page.
1. Allez dans Pages -> Ajouter.
2. Donnez un titre a votre page.
3. Cliquez sur le bouton bleu “Modifier avec Elementor”.
Le panneau de controle ou tout se passe
L’interface Elementor se divise en deux parties principales :
-> A gauche : Le panneau de controle avec les widgets et les reglages.
-> A droite : L’apercu en temps reel de votre page.
Contenu du panneau gauche.
1. La barre de recherche
En haut du panneau, tapez le nom d’un widget pour le trouver rapidement.
2. Les categories de widgets
Les widgets sont organises par categories :
-> Basique (Titre, Texte, Image, Bouton.)
-> General (Icone, Separateur, Espaceur.)
-> Pro (Formulaire, Slider, Posts.)
-> WooCommerce (Produits, Panier.)
3. Les onglets de personnalisation
Quand vous selectionnez un element, trois onglets apparaissent :
-> Contenu : Ce que l’element affiche (texte, image, lien.).
-> Style : L’apparence (couleurs, polices, bordures.).
-> Avance : Marges, animations, conditions d’affichage.
Le menu hamburger (trois traits).
En haut a gauche du panneau, cliquez sur les trois traits pour acceder a :
-> Reglages du site : Couleurs globales, polices, logo.
-> Theme Builder : Header, footer, pages produits.
-> Historique : Revenir a une version anterieure.
-> Parametres : Options de la page actuelle.
La zone d’edition : Votre canevas.
Ou vous construisez visuellement votre page
Structure hierarchique.
Elementor organise le contenu en trois niveaux :
1. Les Sections (conteneurs principaux)
-> Ce sont les “rangees” horizontales de votre page.
-> Icone bleue avec 6 points.
-> Peuvent etre en pleine largeur ou encadrees.
2. Les Colonnes (divisions verticales)
-> Chaque section peut contenir 1 a 6 colonnes.
-> Icone grise avec 2 barres verticales.
-> Permettent de placer des elements cote a cote.
3. Les Widgets (elements de contenu)
-> Les composants individuels : texte, image, bouton.
-> Se placent dans les colonnes.
-> Entierement personnalisables.
Manipuler les elements.
-> Ajouter : Glissez un widget depuis le panneau gauche.
-> Deplacer : Cliquez et maintenez l’icone pour repositionner.
-> Dupliquer : Clic droit -> Dupliquer.
-> Supprimer : Clic droit -> Supprimer, ou touche Suppr.
Qu’est-ce qu’Elementor ?
Elementor est le constructeur de pages (page builder) le plus populaire pour WordPress, utilise par plus de 2 millions de sites web dans le monde. Il vous permet de creer des mises en page professionnelles sans avoir besoin de connaitre le code HTML ou CSS.
Pourquoi Elementor ?
-> Glisser-deposer : Construisez vos pages en faisant simplement glisser des elements.
-> Visuel en temps reel : Voyez instantanement le resultat de vos modifications.
-> Aucun code requis : Interface 100% visuelle, accessible aux debutants.
-> Design professionnel : Des centaines de templates et widgets inclus.
Quelle version d’Elementor avec DigiKoder ?
DigiKoder intègre une version optimisée d’Elementor avec tous les widgets essentiels pour créer un site professionnel : sections, colonnes, textes, images, boutons, formulaires de contact, cartes Google Maps, témoignages, et bien plus.
Widgets disponibles : Vous disposez de tous les éléments nécessaires pour concevoir votre site vitrine, portfolio, blog ou boutique en ligne, sans limitation fonctionnelle pour votre activité.
📌 Tous les forfaits DigiKoder bénéficient de la même version d’Elementor. Les différences entre Starter, Pro et Business concernent uniquement les quotas (nombre de pages, stockage) et les fonctionnalités e-commerce, pas l’éditeur Elementor.
La barre d’outils inferieure.
Les outils essentiels en bas du panneau
En bas du panneau gauche, vous trouvez plusieurs icones utiles :
Reglages (roue dentee)
Parametres de la page actuelle : titre, statut, image mise en avant.
Navigateur (grille)
Affiche l’arborescence de tous les elements de votre page. Tres utile pour les pages complexes.
Historique (horloge)
Liste toutes vos modifications. Cliquez sur une etape pour revenir en arriere.
Mode Responsive (appareils)
Visualisez votre page en mode Desktop, Tablette ou Mobile.
Apercu (oeil)
Ouvre un apercu de la page dans un nouvel onglet.
Publier/Mettre a jour (bouton vert)
Sauvegarde et publie vos modifications.
⌨️ Raccourcis clavier utiles
- Ctrl + S (Cmd + S sur Mac) : Enregistrer la page
- Ctrl + Z : Annuler la dernière action
- Ctrl + Shift + Z : Rétablir
- Ctrl + D : Dupliquer l’élément sélectionné
- Suppr : Supprimer l’élément sélectionné
- Ctrl + C / Ctrl + V : Copier/Coller un élément
💡 Ces raccourcis vous font gagner beaucoup de temps !
LES WIDGETS ELEMENTOR
Decouvrez les elements que vous pouvez ajouter a vos pages
Les widgets que vous utiliserez le plus souvent
💡 Widget vs Bloc Gutenberg : Quelle différence ?
Dans Elementor, on parle de “widgets”. Dans l’éditeur WordPress classique (Gutenberg), on parle de “blocs”. C’est la même chose : des éléments que vous ajoutez à votre page !
📝 Exemples d’utilisation des widgets basiques
- Widget Titre : Pour vos titres de sections (H1, H2, H3)
- Widget Texte : Pour vos paragraphes de contenu
- Widget Bouton : Pour vos appels à l’action (“Contactez-nous”, “Acheter maintenant”)
- Widget Image : Pour afficher vos photos, logos, illustrations
- Widget Vidéo : Pour intégrer YouTube, Vimeo, ou vos propres vidéos
Pour structurer et organiser votre contenu
DESIGN ET STYLE.
Personnalisez l’apparence de vos elements
Creer une identite visuelle coherente
Couleurs globales du site.
Pour definir des couleurs utilisables partout sur votre site :
1. Cliquez sur le menu hamburger (3 traits en haut a gauche).
2. Allez dans Reglages du site -> Couleurs globales.
3. Definissez vos couleurs : Principale, Secondaire, Texte, Accent.
Modifier la couleur d’un element.
1. Selectionnez l’element (widget, section, colonne).
2. Allez dans l’onglet Style.
3. Cliquez sur le selecteur de couleur.
4. Choisissez une couleur ou entrez un code HEX (#FF6B6B).
Conseils pour une bonne palette.
-> 2-3 couleurs principales : Pas plus, pour rester coherent.
-> Une couleur d’accent : Pour les boutons et elements importants.
-> Contraste suffisant : Le texte doit etre lisible sur le fond.
-> Coherence avec votre logo : Reprenez les couleurs de votre identite.
Choisir et configurer vos polices
Polices globales du site.
Pour definir les polices par defaut :
1. Menu hamburger -> Reglages du site -> Typographie.
2. Definissez la police pour : Corps du texte, Titres H1 a H6.
Modifier la typographie d’un element.
1. Selectionnez l’element.
2. Onglet Style -> Typographie (icone crayon).
3. Options disponibles :
-> Famille : Choisissez parmi +900 polices Google Fonts.
-> Taille : En pixels, em ou pourcentage.
-> Graisse : Light (300), Normal (400), Bold (700).
-> Style : Normal, Italique.
-> Decoration : Souligne, barre.
-> Interligne : Espacement entre les lignes.
-> Espacement lettres : Espace entre les caracteres.
Bonnes pratiques typographiques.
-> Maximum 2-3 polices : Une pour les titres, une pour le corps.
-> Taille minimum 16px : Pour une bonne lisibilite sur mobile.
-> Interligne 1.5 a 1.8 : Pour le confort de lecture.
-> Hierarchie visuelle : Les titres doivent etre clairement plus grands que le texte.
Controler l’espace autour et a l’interieur des elements
Comprendre Marge vs Remplissage.
Marge (Margin) : L’espace autour de l’element, a l’exterieur.
-> Cree de l’espace entre les elements.
-> Peut etre negative pour rapprocher les elements.
Remplissage (Padding) : L’espace a l’interieur de l’element.
-> Ajoute de l’espace entre le bord et le contenu.
-> Ne peut pas etre negatif.
Configurer les espacements.
1. Selectionnez l’element.
2. Onglet Avance.
3. Sections Marge et Remplissage.
4. Cliquez sur le cadenas pour delier les valeurs haut/droite/bas/gauche.
Valeurs responsives.
Cliquez sur l’icone d’appareil (Desktop/Tablette/Mobile) pour definir des valeurs differentes selon la taille d’ecran.
Unites disponibles.
-> px (pixels) : Valeur fixe, la plus utilisee.
-> em : Relative a la taille de police du parent.
-> % : Pourcentage du conteneur parent.
-> rem : Relative a la taille de police racine.
-> vw/vh : Pourcentage de la largeur/hauteur de la fenetre.
Personnaliser les fonds de vos sections et elements
Types d’arriere-plans disponibles.
1. Couleur unie
La plus simple. Choisissez une couleur avec ou sans transparence (opacite).
2. Degrade (Gradient)
Transition entre 2 couleurs ou plus.
-> Lineaire : Transition en ligne droite (angle configurable).
-> Radial : Transition circulaire depuis le centre.
3. Image
Uploadez une image de fond.
-> Position : Centree, en haut, en bas.
-> Taille : Couvrir, Contenir, Auto.
-> Attachement : Fixe (effet parallaxe) ou Defiler.
-> Repetition : Oui ou Non (pour les motifs).
4. Video (sections uniquement)
Inserrez une video en arriere-plan avec lecture automatique.
Superposition (Overlay).
Ajoutez une couche de couleur ou degrade par-dessus l’image pour :
-> Ameliorer la lisibilite du texte.
-> Creer une ambiance coloree.
-> Attenuer une image trop vive.
DESIGN RESPONSIVE.
Adaptez votre site a tous les ecrans
Visualisez et ajustez votre site sur differents appareils
Acceder au mode responsive.
1. Cliquez sur l’icone d’appareil en bas du panneau gauche.
2. Ou utilisez le raccourci clavier.
3. Basculez entre Desktop, Tablette et Mobile.
Les points de rupture (Breakpoints).
Elementor utilise des largeurs d’ecran par defaut :
-> Desktop : > 1024px
-> Tablette : 768px – 1024px
-> Mobile : < 768px
Ajuster par appareil.
La plupart des options ont une icone d’appareil a cote :
1. Cliquez sur l’icone pour choisir l’appareil.
2. Modifiez la valeur pour cet appareil uniquement.
3. Un point bleu apparait pour indiquer une valeur personnalisee.
Ce que vous pouvez ajuster par appareil.
-> Tailles de police : Plus petites sur mobile.
-> Marges et remplissages : Reduire les espacements.
-> Nombre de colonnes : Empiler sur mobile.
-> Alignements : Centrer sur mobile.
-> Ordre des elements : Reorganiser le contenu.
-> Afficher/Masquer : Cacher certains elements.
Concevoir d’abord pour les petits ecrans
Pourquoi le Mobile-First ?
-> +60% du trafic provient des mobiles.
-> Google utilise le mobile-first indexing pour le SEO.
-> Plus facile d’ajouter des elements que d’en enlever.
Principes du Mobile-First.
1. Contenu essentiel d’abord
Sur mobile, placez les informations les plus importantes en haut.
2. Navigation simplifiee
Menus hamburger, boutons plus grands, moins de niveaux.
3. Textes lisibles
Minimum 16px, interligne genereux, paragraphes courts.
4. Elements tactiles
Boutons d’au moins 44×44 pixels, espaces entre les liens.
5. Images optimisees
Compressez les images, utilisez des formats modernes (WebP).
Workflow recommande.
1. Creez en mode Desktop (plus facile pour construire).
2. Passez en mode Tablette : ajustez les largeurs.
3. Passez en mode Mobile : reduisez, empilez, masquez.
4. Testez sur vrai mobile : validez l’experience.
Afficher ou cacher du contenu selon l’ecran
Comment masquer un element.
1. Selectionnez l’element (section, colonne ou widget).
2. Allez dans l’onglet Avance.
3. Section Responsive.
4. Activez Masquer sur Desktop/Tablette/Mobile.
Cas d’usage courants.
Image decorative grande taille
-> Afficher sur Desktop, masquer sur Mobile.
Bouton “Appeler”
-> Masquer sur Desktop (pas de telephone), afficher sur Mobile.
Menu de navigation complexe
-> Version complete sur Desktop, version simplifiee sur Mobile.
Sidebar
-> Afficher sur Desktop, masquer ou deplacer sur Mobile.
FONCTIONNALITES AVANCEES.
Maitrisez les outils puissants d’Elementor Pro
Maitriser la structure de vos pages
Options de section.
Cliquez sur l’icone de section (6 points bleus) pour acceder aux options :
Mise en page
-> Largeur du contenu : Encadree ou Pleine largeur.
-> Ecart entre colonnes : Espace entre les colonnes (Defaut, Etroit, Etendu.).
-> Hauteur : Auto, Hauteur minimale, Plein ecran (100vh).
-> Position verticale : Haut, Milieu, Bas, Espace entre.
Structure de colonnes
Clic droit sur la section -> Modifier la structure :
-> 1 colonne (100%)
-> 2 colonnes (50/50, 33/66, 25/75.)
-> 3 colonnes et plus
-> Colonnes personnalisees (ajustez les largeurs manuellement)
Options de colonne.
Largeur personnalisee
Saisissez un pourcentage precis dans Mise en page -> Largeur de colonne.
Alignement vertical
Alignez le contenu en haut, au milieu ou en bas de la colonne.
Section interne.
Le widget “Section interne” permet de creer des colonnes a l’interieur d’une colonne existante. Utile pour des mises en page complexes.
Gagner du temps avec les modeles
La bibliotheque de templates.
Cliquez sur l’icone de dossier dans le panneau ou le bouton “+” dans une section vide.
Types de templates disponibles :
-> Pages : Mises en page completes (accueil, contact, a propos.).
-> Sections : Blocs individuels (hero, temoignages, CTA.).
-> Mes modeles : Vos propres templates sauvegardes.
Utiliser un template.
1. Ouvrez la bibliotheque (icone dossier).
2. Parcourez ou recherchez.
3. Cliquez sur la loupe pour previsualiser.
4. Cliquez sur “Inserer” pour l’ajouter a votre page.
5. Personnalisez les couleurs, textes et images.
Sauvegarder comme template.
Une section : Clic droit -> Enregistrer comme modele.
La page entiere : Menu hamburger -> Enregistrer comme modele.
Vos modeles sont disponibles dans l’onglet “Mes modeles” de la bibliotheque.
Personnaliser l’integralite de votre theme
Qu’est-ce que le Theme Builder ?
Le Theme Builder permet de creer et personnaliser les elements communs a toutes vos pages :
-> Header (en-tete) : Logo, menu, boutons.
-> Footer (pied de page) : Liens, contact, copyright.
-> Single Post : Apparence des articles de blog.
-> Archive : Pages de categories, etiquettes.
-> Page 404 : Page d’erreur personnalisee.
-> Pages WooCommerce : Produit, boutique, panier.
Acceder au Theme Builder.
-> Menu WordPress : Modeles -> Theme Builder.
-> Ou : Menu hamburger dans Elementor -> Theme Builder.
Creer un Header personnalise.
1. Theme Builder -> Header -> Ajouter.
2. Choisissez un modele ou partez de zero.
3. Ajoutez : Logo (widget Image), Menu (widget Menu), Bouton CTA.
4. Publiez et definissez les conditions (ex: “Tout le site”).
Conditions d’affichage.
Lors de la publication, vous pouvez definir ou appliquer le template :
-> Tout le site : Affiche partout.
-> Pages specifiques : Seulement certaines pages.
-> Categories : Articles d’une categorie.
-> Exclure : Sauf certaines pages.
Creer des fenetres surgissantes efficaces
Types de pop-ups.
-> Modale classique : Fenetre centree avec overlay.
-> Slide-in : Apparait depuis le cote.
-> Notification bar : Bandeau en haut ou bas de page.
-> Plein ecran : Couvre toute la page.
Creer une pop-up.
1. Menu WordPress : Modeles -> Pop-ups -> Ajouter.
2. Choisissez un template ou partez de zero.
3. Construisez le contenu (formulaire, promo, annonce.).
4. Configurez les parametres (animation, taille, position).
5. Publiez avec conditions et declencheurs.
Declencheurs (Triggers).
Quand la pop-up doit-elle apparaitre ?
-> Au chargement : Apres X secondes.
-> Au scroll : Apres avoir fait defiler X%.
-> A l’intention de sortie : Quand la souris quitte la page.
-> Au clic : Declenchee par un bouton.
-> Inactivite : Apres X secondes sans action.
Bonnes pratiques.
-> Ne pas en abuser : Une pop-up par visite maximum.
-> Facile a fermer : Bouton X visible, clic en dehors.
-> Valeur claire : L’offre doit etre evidente.
-> Timing adapte : Pas au chargement immediat.
-> Mobile-friendly : Taille adaptee, pas plein ecran.
FORMULAIRES.
Creez des formulaires de contact et d’inscription
Le widget Formulaire d’Elementor Pro
Etape 1 : Inserer le widget.
1. Glissez le widget “Formulaire” depuis le panneau.
2. Un formulaire basique (Nom, Email, Message) apparait.
Etape 2 : Configurer les champs.
Dans l’onglet Contenu -> Champs du formulaire :
-> Cliquez sur un champ pour le modifier.
-> Cliquez sur + Ajouter un element pour un nouveau champ.
-> Glissez pour reordonner les champs.
Etape 3 : Configurer l’envoi d’email.
Dans Contenu -> Actions apres envoi :
-> L’action “Email” est activee par defaut.
-> Cliquez sur “Email” pour configurer :
– A : Votre adresse email.
– Objet : “Nouveau message depuis le site”.
– Depuis : L’adresse de l’expediteur.
Etape 4 : Message de confirmation.
Dans Contenu -> Messages additionnels :
-> Personnalisez le message de succes.
-> Personnalisez les messages d’erreur.
Etape 5 : Styliser le formulaire.
Dans l’onglet Style :
-> Formulaire : espacement, colonnes.
-> Champs : taille, police, bordures, fond.
-> Bouton : couleurs, typographie, survol.
Tous les types de champs que vous pouvez ajouter
Texte : Champ texte simple sur une ligne.
Email : Valide automatiquement le format email.
Zone de texte : Champ multi-lignes pour messages longs.
URL : Valide le format d’adresse web.
Telephone : Champ numerique pour telephone.
Nombre : Accepte uniquement des chiffres.
Date : Selecteur de date avec calendrier.
Heure : Selecteur d’heure.
Select (liste) : Menu deroulant avec options.
Radio : Choix unique parmi plusieurs options.
Checkbox : Cases a cocher (choix multiples).
Acceptation : Case pour CGV/RGPD.
Upload : Envoi de fichiers (PDF, images.).
Mot de passe : Champ masque.
HTML : Contenu HTML personnalise.
Champ cache : Valeur invisible (tracking, source.).
reCAPTCHA : Protection anti-spam Google.
Options communes a chaque champ.
-> Libelle : Le titre du champ.
-> Placeholder : Texte d’aide dans le champ vide.
-> Requis : Champ obligatoire ou non.
-> Largeur de colonne : 100%, 50%, 33%.
Ce qui se passe quand le formulaire est soumis
Actions disponibles.
Email
Envoie les donnees par email a une ou plusieurs adresses.
Email 2
Envoie un second email (ex: confirmation a l’utilisateur).
Redirect (Redirection)
Redirige vers une page de remerciement apres l’envoi.
Webhook
Envoie les donnees a une URL externe (integration Zapier, Make.).
Popup
Ouvre ou ferme une popup apres l’envoi.
Integrations marketing
-> Mailchimp : Ajoute a une liste email.
-> ConvertKit, AWeber, GetResponse.
-> ActiveCampaign, HubSpot.
Enregistrer dans la BDD
Stocke les soumissions dans WordPress (visible dans le tableau de bord).
Configuration recommandee.
1. Email : Pour recevoir les messages.
2. Redirect : Vers une page de remerciement (meilleur pour le tracking).
3. Integration : Si vous avez une newsletter.
E-COMMERCE AVEC WOOCOMMERCE.
Personnalisez votre boutique en ligne
La combinaison parfaite pour votre boutique
Pourquoi cette combinaison ?
-> WooCommerce : Le plugin e-commerce #1 pour WordPress (28% des boutiques en ligne).
-> Elementor Pro : Permet de personnaliser visuellement les pages WooCommerce.
Ce que vous pouvez personnaliser.
Avec le WooCommerce Builder d’Elementor Pro :
-> Page Produit : Mise en page de la fiche produit.
-> Page Boutique : La grille de tous vos produits.
-> Pages Archives : Categories et etiquettes.
-> Page Panier : L’apparence du panier.
-> Page Paiement : Le tunnel de commande.
Acceder au WooCommerce Builder.
1. Menu WordPress : Modeles -> Theme Builder.
2. Cliquez sur l’onglet “Produits” ou “Archive Produit”.
3. Cliquez sur “Ajouter” pour creer un nouveau template.
4. Choisissez un modele ou partez de zero.
5. Publiez avec les conditions appropriees.
Creer une fiche produit qui convertit
Elements essentiels d’une page produit.
Utilisez les widgets WooCommerce d’Elementor :
Widget Images du produit
Affiche la galerie d’images avec zoom et navigation.
Widget Titre du produit
Le nom du produit (dynamique).
Widget Prix du produit
Affiche le prix, les promotions, le prix barre.
Widget Ajout au panier
Le bouton d’achat avec selecteur de quantite et variations.
Widget Description courte
Le resume du produit.
Widget Onglets du produit
Description complete, informations, avis.
Widget Note du produit
Les etoiles et le nombre d’avis.
Widget Meta du produit
Categories, etiquettes, UGS.
Widget Produits associes
Produits similaires ou complementaires.
Mise en page recommandee.
-> Gauche : Images (grande, galerie en dessous).
-> Droite : Titre, prix, description courte, bouton achat.
-> En dessous : Onglets, produits associes.
Afficher vos produits sur n’importe quelle page
Widgets pour afficher des produits.
Widget Produits
Affiche une grille de produits avec filtres :
-> Par categorie, etiquette.
-> Produits en vedette, en promotion.
-> Nombre de colonnes, limite.
-> Avec pagination ou carrousel.
Widget Categories de produits
Affiche les categories en grille visuelle. Ideal pour la navigation.
Widget Produits en vedette
Met en avant vos produits stars.
Widget Panier
Affiche l’icone du panier avec le nombre d’articles.
Widget Menu Mon compte
Lien vers l’espace client (commandes, adresses.).
Utilisation sur la page d’accueil.
Exemple de structure :
1. Hero banner avec promo en cours.
2. Categories : 3-4 categories principales.
3. Nouveautes : Derniers produits ajoutes.
4. Meilleures ventes : Produits populaires.
5. Promotions : Produits en solde.
6. Temoignages : Avis clients.
ASTUCES ET DEPANNAGE.
Gagnez en productivite et resolvez les problemes courants
Travaillez plus vite avec les raccourcis
Actions de base.
Ctrl + S (Cmd + S sur Mac) : Sauvegarder
Ctrl + Z : Annuler la derniere action
Ctrl + Shift + Z : Retablir
Ctrl + C : Copier l’element selectionne
Ctrl + V : Coller
Ctrl + D : Dupliquer l’element
Suppr : Supprimer l’element selectionne
Navigation.
Ctrl + P : Ouvrir le panneau de recherche de widgets
Ctrl + Shift + L : Ouvrir la bibliotheque de templates
Ctrl + Shift + E : Passer en mode editeur
Ctrl + Shift + M : Passer en mode responsive
Apercu et publication.
Ctrl + Shift + P : Apercu de la page
Ctrl + Shift + V : Coller le style seulement
Afficher tous les raccourcis.
Dans Elementor, appuyez sur Ctrl + ? (ou Cmd + ?) pour afficher la liste complete des raccourcis.
Gardez votre site rapide
Optimiser les images.
-> Compressez avant upload : Utilisez TinyJPG ou Squoosh.
-> Format adapte : JPEG pour photos, PNG pour logos/transparence.
-> Taille appropriee : Pas plus large que necessaire (1920px max).
-> Lazy loading : Actif par defaut dans Elementor.
Limiter les widgets.
-> Chaque widget ajoute du code CSS/JS.
-> Fusionnez les textes proches dans un seul widget Editeur de texte.
-> Evitez les sections imbriquees inutiles.
Polices Google.
-> Limitez a 2 polices maximum.
-> Selectionnez seulement les graisses utilisees (400, 700).
-> Elementor -> Reglages -> Avance : desactivez les polices inutilisees.
Regenerer les fichiers CSS.
Si le style ne s’affiche pas correctement :
1. Elementor -> Outils -> Regenerer les fichiers CSS.
2. Videz le cache de votre plugin de cache.
3. Videz le cache de votre navigateur (Ctrl+Shift+R).
Fonctionnalites experimentales.
Elementor -> Parametres -> Experimental :
-> Activez “Improved Asset Loading” pour charger moins de CSS/JS.
-> Activez “Flexbox Containers” pour des mises en page plus legeres.
Solutions aux problemes frequents
L’editeur Elementor ne charge pas.
-> Videz le cache du navigateur.
-> Desactivez temporairement les autres plugins.
-> Augmentez la memoire PHP (contactez DigiKoder si besoin).
-> Verifiez que votre navigateur est a jour.
Les modifications ne s’affichent pas.
-> Cliquez sur “Publier” ou “Mettre a jour”.
-> Videz le cache (plugin de cache + navigateur).
-> Regenerez les fichiers CSS (Elementor -> Outils).
-> Testez en navigation privee.
Erreur “Erreur serveur” ou page blanche.
-> Conflit de plugin probable. Desactivez les autres plugins.
-> Limite de memoire PHP atteinte. Contactez le support.
Le responsive ne fonctionne pas.
-> Verifiez que vous avez bien sauvegarde en mode mobile.
-> Certains styles Desktop peuvent ecraser le mobile.
-> Testez sur un vrai appareil, pas seulement l’apercu.
Formulaire : emails non recus.
-> Verifiez le dossier spam/courrier indesirable.
-> Installez un plugin SMTP (WP Mail SMTP).
-> Verifiez l’adresse email dans les parametres du formulaire.
Images floues.
-> L’image source est trop petite. Uploadez une image plus grande.
-> Verifiez le reglage de taille d’image dans le widget.
-> Regenerez les miniatures : Outils -> Regenerer miniatures.
EXERCICES PRATIQUES.
Mettez en pratique vos connaissances avec ces exercices guides
Niveau : Debutant | Duree estimee : 15 minutes
Une section Hero est la premiere chose que vos visiteurs voient. Elle doit etre impactante.
Objectif.
Creer une section d’accueil avec image de fond, titre accrocheur, sous-titre et bouton d’action.
Etapes detaillees.
Etape 1 : Creer la section
1. Cliquez sur le + rose pour ajouter une section.
2. Choisissez une structure a 1 colonne.
3. Cliquez sur l’icone bleue (6 points) de la section.
Etape 2 : Configurer l’arriere-plan
1. Onglet Style -> Arriere-plan.
2. Selectionnez une image.
3. Position : Centre centre | Taille : Couvrir.
4. Ajoutez une superposition noire a 50%.
Etape 3 : Definir la hauteur
1. Onglet Mise en page.
2. Hauteur : 80vh | Alignement : Milieu.
Etape 4 : Ajouter le contenu
1. Widget Titre : texte blanc, 48px, centre.
2. Widget Texte : slogan blanc, 18px.
3. Widget Bouton : “Decouvrir” avec couleur de fond.
Niveau : Debutant | Duree estimee : 20 minutes
Objectif.
Presenter 3 services avec icones en colonnes.
Etapes.
1. Structure : Section 3 colonnes egales.
2. Contenu : Widget Boite d’icone dans chaque colonne.
3. Style : Icone en haut, titre, description 2-3 lignes.
4. Dupliquer : Clic droit -> Dupliquer pour les autres colonnes.
Niveau : Intermediaire | Duree estimee : 30 minutes
Structure de la page.
1. Mini Hero (40vh) avec titre “Contactez-nous”
2. Section 2 colonnes : Formulaire (60%) | Coordonnees (40%)
3. Section carte Google Maps pleine largeur
Colonne Formulaire.
Widget Formulaire avec : Nom, Email, Telephone, Sujet (liste), Message, Bouton “Envoyer”.
Colonne Coordonnees.
Widget Liste d’icones : adresse, telephone, email, horaires. Plus icones reseaux sociaux.
Section Carte.
Widget Google Maps, hauteur 400px, zoom 15.
Niveau : Intermediaire | Duree estimee : 25 minutes
Objectif.
Afficher les avis clients de maniere professionnelle avec un carrousel.
Etapes.
1. Ajoutez une section avec fond colore leger.
2. Titre centre : “Ce que disent nos clients”.
3. Widget Carrousel de temoignages (Pro).
4. Ajoutez 3-5 temoignages avec : photo, nom, entreprise, avis, note etoiles.
5. Configurez : 1 temoignage visible, navigation fleches, autoplay.
Alternative sans Pro.
Utilisez 3 colonnes avec le widget Boite d’icone ou Editeur de texte pour chaque temoignage.
ANIMATIONS ET EFFETS.
Donnez vie a vos pages avec des effets visuels
Faites apparaitre vos elements avec style
Ou trouver les animations ?
1. Selectionnez n’importe quel element (section, colonne ou widget).
2. Allez dans l’onglet Avance.
3. Ouvrez la section Effets de mouvement.
Types d’animations d’entree.
Fondu (Fade)
-> Fade In : Apparition progressive depuis transparent.
-> Fade In Down/Up/Left/Right : Avec direction.
Zoom
-> Zoom In : L’element grandit depuis petit.
-> Zoom In Down/Up : Avec direction.
Glissement (Slide)
-> Slide In Down/Up/Left/Right : Glisse depuis l’exterieur.
Rebond (Bounce)
-> Bounce In : Effet de rebond a l’arrivee.
Rotation
-> Rotate In : Rotation a l’apparition.
Parametres d’animation.
Duree : Lent (2s), Normal (1s), Rapide (0.5s).
Delai : Temps avant le debut (0 a 2000ms).
Interactions au passage de la souris
Effets sur les images.
Widget Image -> Onglet Style -> Survol :
-> Opacite : Assombrir ou eclaircir.
-> Filtres CSS : Flou, niveaux de gris, sepia.
-> Transition : Duree de l’effet (0.3s recommande).
Effets sur les boutons.
Widget Bouton -> Onglet Style -> Survol :
-> Changer la couleur de fond.
-> Changer la couleur du texte.
-> Changer la bordure.
-> Animation : Grandir, Retrecir, Pulse, Bounce.
Effets sur les Boites d’icones.
-> L’icone peut changer de couleur.
-> Le fond peut changer.
-> Une animation peut se declencher (rotation, bounce).
Animations declenchees par le defilement (Elementor Pro)
Ou les trouver ?
Onglet Avance -> Effets de mouvement -> Effets de defilement.
Types d’effets disponibles.
Defilement vertical
L’element monte ou descend plus/moins vite que le scroll. Cree un effet de profondeur.
Defilement horizontal
L’element se deplace horizontalement pendant le scroll vertical.
Transparence
L’element devient plus ou moins transparent selon la position de scroll.
Flou
L’element devient flou puis net (ou inverse) pendant le scroll.
Rotation
L’element tourne pendant le scroll.
Echelle
L’element grandit ou retrecit pendant le scroll.
Parametres.
Direction : Haut/Bas ou Gauche/Droite.
Vitesse : De -10 a 10 (negatif = sens inverse).
Viewport : Zone de declenchement (quand l’element entre/sort de l’ecran).
A faire.
-> Subtilite : Preferez les animations discretes et rapides.
-> Coherence : Utilisez le meme type d’animation sur toute la page.
-> Purpose : Chaque animation doit guider l’attention.
-> Performance : Limitez le nombre d’animations simultanees.
A eviter.
-> Trop d’animations differentes sur une meme page.
-> Animations trop lentes (>1 seconde pour les entrees).
-> Animations qui distraient du contenu important.
-> Effets sur les elements cruciaux (bouton d’achat).
Accessibilite.
Certains utilisateurs sont sensibles aux mouvements. Les navigateurs modernes respectent le parametre prefers-reduced-motion. Vos animations s’adapteront automatiquement.
SEO ET REFERENCEMENT.
Optimisez vos pages pour Google
Les bases du referencement naturel dans Elementor
Hierarchie des titres (H1-H6).
Regle d’or : Un seul H1 par page (le titre principal).
-> H1 : Titre principal de la page (1 seul).
-> H2 : Sections principales.
-> H3 : Sous-sections.
-> H4-H6 : Details et sous-points.
Dans Elementor : Widget Titre -> Balise HTML -> Choisir H1, H2, H3.
Meta titre et description.
Ces elements apparaissent dans les resultats Google :
-> Titre SEO : 50-60 caracteres, mot-cle principal inclus.
-> Meta description : 150-160 caracteres, incitative au clic.
Ou les configurer ?
Utilisez le plugin Yoast SEO ou Rank Math (inclus avec DigiKoder). En bas de chaque page, vous trouverez les champs SEO.
Texte alternatif (Alt Text).
Le texte alternatif decrit l’image pour :
-> Les moteurs de recherche (Google Images).
-> Les lecteurs d’ecran (accessibilite).
-> L’affichage si l’image ne charge pas.
Dans Elementor : Widget Image -> Contenu -> Texte alternatif.
Bonnes pratiques :
-> Decrivez ce que montre l’image.
-> Incluez le mot-cle si pertinent.
-> 5-15 mots maximum.
-> Pas de “image de.” au debut.
Nom du fichier.
Avant d’uploader, renommez vos images :
-> Mauvais : IMG_20240115_143256.jpg
-> Bon : artisan-boulanger-pain-tradition.jpg
Compression des images.
Images lourdes = site lent = mauvais SEO.
-> Compressez avant upload (TinyJPG, Squoosh).
-> Format JPEG pour photos, PNG pour logos/transparence.
-> Largeur max recommandee : 1920px.
Un site rapide = meilleur classement Google + visiteurs satisfaits
Impact sur le SEO.
Google penalise les sites lents. Objectif : page chargee en moins de 3 secondes.
Optimisations dans Elementor.
1. Regenerer les fichiers CSS
Elementor -> Outils -> Regenerer les fichiers CSS.
2. Parametres de performance
Elementor -> Parametres -> Performance :
-> Activez “Improved Asset Loading”.
-> Activez “Lazy Load des images”.
3. Limitez les widgets
-> Moins de widgets = moins de code.
-> Fusionnez les textes proches.
-> Evitez les sections imbriquees inutiles.
4. Polices Google
-> Maximum 2 polices.
-> Selectionnez seulement les graisses utilisees.
Outils de test.
-> Google PageSpeed Insights
-> GTmetrix
-> Lighthouse (dans Chrome DevTools)
GESTION DES IMAGES.
Tout savoir sur l’ajout et l’optimisation des images
Comment telecharger et inserer vos images
Methode 1 : Via le Widget Image.
1. Glissez le widget Image dans votre page.
2. Cliquez sur “Choisir une image”.
3. La bibliotheque de medias s’ouvre.
4. Cliquez sur “Telecharger des fichiers”.
5. Selectionnez votre image sur votre ordinateur.
6. Cliquez sur “Inserer le media”.
Methode 2 : Via la Bibliotheque de medias.
1. Dans WordPress : Medias -> Ajouter.
2. Glissez vos images ou cliquez pour selectionner.
3. Les images sont maintenant disponibles partout.
Methode 3 : Glisser-deposer directement.
Depuis votre ordinateur, glissez une image directement sur le widget Image dans Elementor !
JPEG (.jpg).
Ideal pour : Photos, images avec beaucoup de couleurs.
Avantages : Fichiers legers, bonne qualite.
Inconvenient : Pas de transparence, perte de qualite si trop compresse.
PNG (.png).
Ideal pour : Logos, icones, images avec transparence.
Avantages : Transparence, pas de perte de qualite.
Inconvenient : Fichiers plus lourds que JPEG.
WebP (.webp).
Ideal pour : Tout type d’image sur le web.
Avantages : 25-35% plus leger que JPEG/PNG, transparence supportee.
Inconvenient : Pas supporte par tres vieux navigateurs.
SVG (.svg).
Ideal pour : Logos, icones, illustrations vectorielles.
Avantages : Infiniment redimensionnable sans perte, tres leger.
Inconvenient : Non adapte aux photos.
GIF (.gif).
Ideal pour : Animations simples, memes.
Avantages : Animation possible.
Inconvenient : Limite a 256 couleurs, fichiers lourds.
🎨 WebP vs JPEG vs PNG : Quel format choisir ?
- WebP : Format moderne, meilleur compromis qualité/poids (30% plus léger que JPEG). ✅ Recommandé pour 2024+
- JPEG : Idéal pour les photos. Bon niveau de compression. Compatible partout.
- PNG : Pour les logos et images avec transparence. Plus lourd que JPEG.
- GIF : Pour les animations uniquement. Éviter pour les photos.
- SVG : Format vectoriel pour les icônes et logos (qualité parfaite à toute taille).
⚡ Lazy loading : Charger les images à la demande
Elementor active automatiquement le lazy loading : les images ne se chargent que quand l’utilisateur scrolle jusqu’à elles. Cela accélère considérablement votre site !
Images pleine largeur (Hero, bannieres).
Largeur : 1920px
Hauteur : 600-1080px selon le design
Poids max : 200-300 Ko
Images de contenu (dans les colonnes).
Largeur : 800-1200px
Hauteur : Proportionnelle
Poids max : 100-150 Ko
Miniatures / Vignettes.
Largeur : 300-600px
Hauteur : Proportionnelle
Poids max : 30-50 Ko
Logo.
Largeur : 200-400px
Format : PNG avec transparence ou SVG
Poids max : 20 Ko
Favicon (icone onglet).
Taille : 512x512px (WordPress le redimensionne)
Format : PNG carre
🎨 WebP vs JPEG vs PNG : Quel format choisir ?
- WebP : Format moderne, meilleur compromis qualité/poids (30% plus léger que JPEG). ✅ Recommandé pour 2024+
- JPEG : Idéal pour les photos. Bon niveau de compression. Compatible partout.
- PNG : Pour les logos et images avec transparence. Plus lourd que JPEG.
- GIF : Pour les animations uniquement. Éviter pour les photos.
- SVG : Format vectoriel pour les icônes et logos (qualité parfaite à toute taille).
⚡ Lazy loading : Charger les images à la demande
Elementor active automatiquement le lazy loading : les images ne se chargent que quand l’utilisateur scrolle jusqu’à elles. Cela accélère considérablement votre site !
Onglet Contenu.
Image : Selectionnez ou changez l’image.
Taille de l’image : Miniature, Moyenne, Grande, Taille originale.
Alignement : Gauche, Centre, Droite.
Legende : Texte affiche sous l’image.
Lien : Aucun, Fichier media (lightbox), URL personnalisee.
Onglet Style.
Largeur / Hauteur max : Controlez la taille d’affichage.
Opacite : Rendez l’image plus ou moins transparente.
Filtres CSS : Flou, luminosite, contraste, saturation, teinte.
Bordure : Type, couleur, epaisseur.
Rayon de bordure : Coins arrondis (mettez 50% pour un cercle).
Ombre : Ajoutez une ombre portee.
Effet Lightbox.
Pour que l’image s’ouvre en grand au clic :
1. Lien -> Fichier media.
2. L’image s’ouvre dans une lightbox automatique.
GLOSSAIRE ELEMENTOR.
Tous les termes techniques expliques simplement
Termes de A a M.
Accordion – Widget qui affiche du contenu repliable. Ideal pour FAQ.
Alignement – Position du contenu : gauche, centre, droite ou justifie.
Arriere-plan – Fond d’un element : couleur, image, video ou degrade.
Breakpoint – Point de rupture definissant quand le design change (Desktop/Tablette/Mobile).
Call to Action (CTA) – Bouton incitant a l’action (Acheter, Contacter, S’inscrire).
Colonne – Division verticale d’une section. Contient les widgets.
Condition – Regle definissant ou un template s’applique.
Conteneur – Nouveau systeme Flexbox remplacant sections/colonnes.
CSS personnalise – Code de style avance pour personnalisations impossibles via l’interface.
Degrade (Gradient) – Transition progressive entre 2+ couleurs.
Drag & Drop – Glisser-deposer pour ajouter et deplacer des elements.
Dynamique – Contenu genere automatiquement (titre de page, prix produit).
Espaceur – Widget invisible ajoutant de l’espace vertical.
Flexbox – Systeme de mise en page CSS moderne.
Footer – Pied de page : liens, contact, copyright.
Global – Element ou style reutilisable et synchronise partout.
Header – En-tete : logo, menu, boutons.
Hero – Grande section d’accueil en haut de page.
Hover – Etat d’un element au survol de la souris.
Inner Section – Section interne pour creer des colonnes dans une colonne.
Kit – Ensemble coherent de templates, couleurs et polices.
Lazy Loading – Chargement differe des images pour la vitesse.
Lightbox – Fenetre modale affichant une image en grand.
Marge (Margin) – Espace exterieur autour d’un element.
Motion Effects – Animations au scroll : parallaxe, rotation, zoom.
Termes de N a Z.
Navigateur – Panneau affichant l’arborescence de tous les elements.
Overlay – Couche coloree par-dessus une image.
Padding – Espace interieur entre le bord et le contenu.
Page Builder – Constructeur de pages visuel.
Parallaxe – Effet ou le fond bouge plus lentement que le contenu.
Pop-up – Fenetre surgissante pour promos, inscriptions.
Responsive – Design qui s’adapte a toutes les tailles d’ecran.
Section – Bloc horizontal principal. Base de la structure.
Slider/Carrousel – Diaporama d’images avec navigation.
Template – Modele de page ou section reutilisable.
Theme Builder – Outil Pro pour header, footer, pages produits.
Trigger – Evenement declenchant une pop-up.
Typography – Police, taille, graisse, interligne.
Widget – Element de contenu : titre, image, bouton, formulaire.
Z-Index – Ordre d’empilement. Plus eleve = devant.
LIENS ET NAVIGATION.
Maitrisez les liens pour une navigation fluide
Elementor permet d’ajouter des liens sur pratiquement tous les elements. Voici les differents types de liens disponibles :
1. Liens URL classiques.
-> URL externe : https://exemple.com
-> URL interne : /ma-page ou /contact
-> URL relative : ./autre-page
2. Liens speciaux.
-> Email : mailto:contact@monsite.com
-> Telephone : tel:+33123456789
-> WhatsApp : https://wa.me/33123456789
-> SMS : sms:+33123456789
3. Liens d’action.
-> Pop-up : #elementor-action%3Aaction%3Dpopup%3Aopen.
-> Ancre : #nom-de-section
-> Retour haut : #top
Les liens internes connectent les pages de votre site entre elles
Comment ajouter un lien interne.
1. Selectionnez l’element (bouton, texte, image)
2. Cliquez sur l’icone lien ou trouvez le champ “URL”
3. Commencez a taper le nom de votre page
4. Elementor propose les pages correspondantes
5. Selectionnez la page souhaitee
Bonnes pratiques.
-> Utilisez des textes de lien descriptifs (pas “cliquez ici”)
-> Liez vers des pages pertinentes et utiles
-> Verifiez regulierement que vos liens fonctionnent
-> Evitez les liens vers des pages en construction
Les liens externes menent vers des sites tiers
Reglages recommandes pour les liens externes.
Les ancres permettent de naviguer a l’interieur d’une page
Creer une ancre dans Elementor.
1. Selectionnez la section ou le widget cible
2. Allez dans l’onglet Avance
3. Trouvez le champ ID CSS
4. Entrez un identifiant unique (ex: ma-section)
5. Le lien sera : #ma-section
Utiliser le widget Ancre de menu.
1. Recherchez “Ancre de menu” dans les widgets
2. Glissez-le au debut de la section cible
3. Entrez le nom de l’ancre (sans le #)
4. Utilisez #nom-ancre dans vos liens
Elementor ajoute automatiquement un effet de scroll fluide quand vous cliquez sur un lien ancre. Pas besoin de code supplementaire !
Exemples d’utilisation.
-> Menu one-page : Chaque item pointe vers une section
-> Table des matieres : Liste cliquable au debut d’un article
-> Bouton “Retour en haut” : Lien vers #top
-> FAQ : Liens directs vers chaque question
Lien ancre depuis une autre page.
Pour pointer vers une section depuis une autre page :
/ma-page#ma-section
BONNES PRATIQUES UX.
Creez des pages que vos visiteurs adorent
Guidez l’oeil de vos visiteurs vers l’essentiel
La hierarchie visuelle determine l’ordre dans lequel les visiteurs percoivent les elements de votre page. C’est essentiel pour communiquer efficacement.
Les outils de hierarchie dans Elementor.
Un texte lisible = des visiteurs qui restent
Regles de base pour la lisibilite.
Taille de police minimum
-> Corps de texte : 16px minimum (18px ideal)
-> Sur mobile : jamais en dessous de 14px
-> Titres : proportionnels au texte
Longueur de ligne
-> Ideal : 50-75 caracteres par ligne
-> Trop large = fatigue visuelle
-> Utilisez une largeur max de 800px pour le texte
Interligne (line-height)
-> Minimum 1.5 pour le corps de texte
-> 1.2-1.3 pour les titres
-> Plus la ligne est longue, plus l’interligne doit etre grand
Contraste des couleurs
-> Ratio minimum 4.5:1 pour le texte normal
-> Ratio minimum 3:1 pour les grands textes
-> Evitez le texte gris clair sur fond blanc
Les pieges classiques et comment les eviter
1. Trop de choix tue le choix.
-> Limitez les options de menu (max 7 items)
-> Un seul CTA principal par section
-> Guidez vers UNE action prioritaire
2. Texte sur image illisible.
-> Ajoutez toujours un overlay sombre si texte clair
-> Ou un cadre colore derriere le texte
-> Testez sur differents ecrans
3. Animations excessives.
-> Trop d’animations distraient du contenu
-> Choisissez 1-2 types d’animations max
-> Desactivez sur mobile pour la performance
4. Pop-ups agressives.
-> Pas de pop-up immediate a l’arrivee
-> Attendez au moins 30 secondes ou 50% de scroll
-> Facile a fermer (X visible, clic exterieur)
5. Formulaires trop longs.
-> Demandez le minimum necessaire
-> Nom + Email suffit souvent
-> Chaque champ supplementaire reduit les conversions de 10%
Besoin d’aide supplementaire ?
Claudia, votre assistante IA, est la pour repondre a toutes vos questions sur Elementor et la creation de votre site.
Retour au Guide DigiKoder Parler a Claudia