AIDE-MEMOIRE ELEMENTOR - GUIDINEE.COM
Reperes a garder sous la main pendant le projet fil rouge.
Elementor = constructeur de pages VISUEL (drag & drop) pour WORDPRESS (extension). FREE = corps des pages ; PRO = Theme Builder, widgets avances, dynamique, WooCommerce...

=== PRISE EN MAIN & INSTALLATION ===
- ELEMENTOR = page builder VISUEL (WYSIWYG) : on concoit les pages en glisser-deposer, sans coder. C'est une EXTENSION (plugin) qui s'ajoute a un WordPress auto-heberge (wordpress.org) - il ne fonctionne PAS seul. Souvent associe a un theme leger (HELLO ELEMENTOR).
- FREE vs PRO : FREE construit le CORPS des pages (suffit pour beaucoup de sites vitrines). PRO ajoute le THEME BUILDER (en-tete/pied, articles), des WIDGETS avances (formulaire, articles, diaporama), le CONTENU DYNAMIQUE, le LOOP BUILDER, WooCommerce Builder, les pop-ups.
- EDITEUR : le CANVAS (centre) = apercu EN DIRECT de la page. Le PANNEAU (gauche) = les WIDGETS a glisser + les REGLAGES de l'element selectionne. On glisse un widget, on le regle, on voit le resultat aussitot.
- BLOCS DE CONSTRUCTION : CONTENEURS (structure/mise en page, bases sur Flexbox) + WIDGETS (contenu : titre, texte, image, bouton...). On structure avec des conteneurs, on y place des widgets. Le NAVIGATOR affiche la hierarchie (utile pour s'y retrouver et nommer les elements).

=== CONSTRUIRE UNE PAGE (DEBUTANT) ===
- CONTENEURS FLEXBOX : controle SOUPLE de la disposition - DIRECTION (rangee/colonne), ALIGNEMENT, repartition (GAP/justify), enveloppement (wrap). Plus legers que l'ancien systeme sections/colonnes. Changer la direction (rangee -> colonne) = cle du responsive.
- WIDGETS DE BASE : Titre, Editeur de texte, Image, Bouton, Icone, Separateur, Espace... On les GLISSE dans un conteneur et on les regle. Choisir le bon niveau de TITRE (H1-H6) par SEMANTIQUE (un seul H1, hierarchie), pas par taille.
- 3 ONGLETS (identiques pour tout widget) : CONTENU (ce qu'il affiche : texte, image, lien) / STYLE (apparence : couleurs, typographie, espacements, bordures, ombres) / AVANCE (marges/padding, positionnement, RESPONSIVE, CSS, animations, attributs). Comprendre ces 3 onglets = savoir regler n'importe quel widget.
- COHERENCE : memes polices/tailles pour les memes roles, espacements reguliers. Idealement via les GLOBALES (voir N2). La coherence fait le professionnalisme.
- RESPONSIVE : VUES bureau/tablette/mobile pour VERIFIER et AJUSTER par appareil (tailles, espacements, direction rangee->colonne, visibilite). Surcharges par vue (pas de site separe). Le mobile est MAJORITAIRE : le penser et le TESTER (empiler, reduire).

=== DESIGN & CONTENU RICHE (INTERMEDIAIRE) ===
- ARRIERE-PLANS & SUPERPOSITIONS : image/degrade/couleur de fond. Une SUPERPOSITION (overlay) sombre/coloree sur une image assure la LISIBILITE du texte (contraste). Moderation : eviter les fonds trop charges. L'esthetique ne prime jamais sur la lisibilite.
- WIDGETS AVANCES : onglets, accordeon, carrousel, icones, temoignages... pour un contenu RICHE et organise. Precaution : le contenu CACHE (onglets/accordeon fermes, diapos non visibles) est MOINS vu et parfois moins accessible - a reserver au secondaire. Carrousels : moderation.
- GLOBALES (Site Settings) : definir l'IDENTITE (palette de couleurs + polices) UNE fois et l'appliquer partout. COHERENCE garantie + MAINTENANCE facile (changer une globale met a jour tout le site d'un coup). A faire tot dans le projet.
- MODELES (templates) : partir d'un bloc/page predefini (bibliotheque) qu'on personnalise = gain de temps. Enregistrer ses PROPRES modeles pour reutiliser (coherence + productivite).
- NAVIGATION PAR ANCRES : donner un ID (ancre) a une section + lier vers cet ID (widget Ancre de menu) -> le clic fait DEFILER jusqu'a la section. Ideal pour les pages longues (one-page).

=== ELEMENTOR PRO & THEME BUILDER (AVANCE) ===
- THEME BUILDER (PRO) = fonctionnalite PHARE : concevoir VISUELLEMENT l'EN-TETE, le PIED DE PAGE et les modeles d'ARTICLES/ARCHIVES - ce que FREE ne permet pas (ils viennent du theme). Elementor devient un constructeur de SITE COMPLET. On definit les CONDITIONS D'AFFICHAGE (ou s'applique chaque modele). En-tete : COLLANT (sticky), responsive (hamburger mobile), widget Menu de navigation.
- MODELE SINGLE (article) : mise en page d'UN article (titre, image a la une, contenu, meta...) appliquee a TOUS via du CONTENU DYNAMIQUE. MODELE D'ARCHIVE : mise en page des LISTES (blog, categories, recherche) = grille de cartes. Un modele -> tout le contenu correspondant (modifier = tout suit).
- WIDGETS PRO : FORMULAIRE (natif ; en Free = plugin tiers), ARTICLES/Posts (grilles d'articles), DIAPORAMA, temoignages, prix, compte a rebours, partage social, navigation... Ils INTEGRENT des fonctions qui, sans Pro, exigeraient des plugins tiers.
- FORMULAIRE : definir les ACTIONS apres soumission (au minimum ENVOYER un E-MAIL - sinon les donnees sont PERDUES). Aussi : redirection, enregistrement, integrations marketing/CRM. DELIVRABILITE : configurer un SMTP fiable. TOUJOURS tester la reception. Anti-spam. RGPD (consentement).
- EFFETS DE MOUVEMENT : animations d'entree, effets de defilement (parallaxe), survol (hover), effets de souris. Principe : MODERATION (« moins, c'est plus ») - subtils, coherents, avec un BUT. A l'exces : distraient, ralentissent, font amateur. Attention PERFORMANCE (surtout defilement/souris, mobile) et ACCESSIBILITE (respecter « reduire les animations »).
- POP-UPS (Popup Builder) : DECLENCHEURS (chargement/apres X s, defilement, INTENTION DE SORTIE, clic) + CONDITIONS (ou) + regles (a qui, FREQUENCE). NON INTRUSIF : pas des l'arrivee, FACILE a fermer, frequence limitee, apporter de la VALEUR. Prudence mobile (interstitiels penalises SEO) + RGPD.

=== CONTENU DYNAMIQUE & E-COMMERCE (EXPERT) ===
- CONTENU DYNAMIQUE : afficher des donnees qui VARIENT selon le contexte (titre/image de l'article courant, champ personnalise, donnee du site) en LIANT un widget a une SOURCE (au lieu d'une valeur fixe). Fait fonctionner les MODELES. Relie le DESIGN (modele) aux DONNEES (WordPress).
- CHAMPS PERSONNALISES (souvent ACF - Advanced Custom Fields) : ajouter des donnees structurees SUR MESURE aux contenus (prix, surface, poste...). Elementor les affiche en dynamique. Pour des sites STRUCTURES (annuaires, catalogues, fiches, portfolios).
- LOOP BUILDER : afficher des GRILLES/listes de contenus avec un design ENTIEREMENT personnalise. On concoit une CARTE (element de boucle, en dynamique) puis un LOOP GRID la repete pour chaque contenu. Controle TOTAL (vs widget Posts, predefini). Combine aux champs perso = annuaires/catalogues sur mesure (+ filtrage/tri).
- WOOCOMMERCE : WooCommerce = le MOTEUR e-commerce (produits, panier, commandes, paiement, taxes). Elementor Pro (WooCommerce Builder) = l'APPARENCE des pages (produit, boutique, categories). Les DEUX necessaires. Page produit (conversion) : images, PRIX visible, AJOUT AU PANIER evident, description, avis. Parcours d'achat fluide + rassurant. RESPONSIVE + PERFORMANCE = ventes. Paiement securise + legal (varie selon les pays).
- FORMULAIRES AVANCES & INTEGRATIONS : champs varies, logique conditionnelle, etapes multiples ; ACTIONS = e-mail, redirection, INTEGRATIONS marketing/CRM (ajouter l'e-mail a une liste, creer un contact, webhooks). RGPD IMPERATIF : OPT-IN explicite (non pre-coche) + information avant d'ajouter a une liste. Anti-spam, formulaires courts, delivrabilite (SMTP), verifier que les donnees arrivent.
- CSS PERSONNALISE & ATTRIBUTS : CSS perso (onglet Avance, sur element/page/site) pour les cas que les options ne couvrent pas (controle ultime, requiert des notions de CSS). ATTRIBUTS/CLASSES : accessibilite (ARIA), integration de scripts (data-*), ciblage/reutilisation. COMPLEMENT pour cas avances, PAS le mode normal (Elementor = sans code pour l'essentiel). Ne pas abuser (maintenabilite), verifier responsive/conflits.

=== PERFORMANCE, ACCESSIBILITE & BONNES PRATIQUES ===
- PERFORMANCE (VITESSE) = MAJEURE (experience, SEO, conversions). Leviers : IMAGES (levier n°1, souvent 1re cause de lenteur : COMPRESSER, DIMENSIONNER a l'affichage, WebP, LAZY LOADING) ; HEBERGEMENT de qualite (PHP recent) ; plugin de CACHE (+ minification) ; theme LEGER (Hello) + PEU d'extensions ; CONTENEURS Flexbox + OPTIONS de performance d'Elementor ; structure propre. MESURER (PageSpeed, GTmetrix) et corriger. Elementor n'est PAS lent par nature.
- STRUCTURE & RESPONSIVE : eviter la SUR-IMBRICATION (conteneurs inutiles = code lourd, maintenance et responsive difficiles). SIMPLICITE : juste ce qu'il faut de conteneurs (Flexbox evite souvent des imbrications). Structure LOGIQUE, conteneurs NOMMES (Navigator). Penser RESPONSIVE des la structure (direction changeable, largeurs souples) et TESTER sur les 3 vues. Le mobile est majoritaire.
- SEO : repose surtout sur le CONTENU de qualite (+ mots-cles) et une EXTENSION SEO (Yoast, Rank Math - balises TITLE/META, sitemap, donnees structurees). Elementor AIDE (structure de TITRES : un H1 + hierarchie ; ALT des images + poids ; PERFORMANCE ; MOBILE) mais ne suffit pas seul. URL claires, maillage interne.
- ACCESSIBILITE (site utilisable par TOUS, y compris handicap) = ethique, souvent legale, benefique (SEO + tous). Bonnes pratiques : ALT des images (lecteurs d'ecran), structure de TITRES, CONTRASTES suffisants, navigation au CLAVIER, liens/boutons EXPLICITES (pas « cliquez ici »), ne pas compter QUE sur la couleur, respecter « reduire les animations », tailles lisibles. Elementor gere une partie (structure, ARIA de base) ; completer + attributs ARIA au besoin. /!\ Verifier les obligations legales de votre pays.
- WORKFLOW PRO & MAINTENANCE : REUTILISER (kits, modeles, globales - vite + coherent). METHODE : structure/identite d'abord, reutilisation, TESTS (responsive, performance, liens, formulaires, SEO) avant livraison. MAINTENANCE (un site VIT, n'est PAS « fini ») : mises a jour (WordPress/Elementor/extensions/theme), SAUVEGARDES regulieres + AVANT toute intervention, securite (n°1 : failles), surveillance. LIVRAISON CLIENT : site teste, client forme/documente, maintenance prevue (contrat). SAUVEGARDER avant d'intervenir.

RAPPELS
- CONTENEURS (structure, Flexbox) vs WIDGETS (contenu). 3 ONGLETS : Contenu / Style / Avance. GLOBALES = identite centralisee (coherence + maintenance).
- PRO = THEME BUILDER (en-tete/pied, articles), widgets Pro, DYNAMIQUE, Loop Builder, WooCommerce, pop-ups. FORMULAIRE : definir les ACTIONS (e-mail), tester la reception, RGPD.
- CONTENU DYNAMIQUE relie design (modele) et donnees (WordPress). LOOP BUILDER + champs perso = sites structures. WooCommerce = moteur, Elementor = apparence.
- PERFORMANCE : IMAGES d'abord (compresser, WebP, lazy), cache, hebergement, theme leger, peu d'extensions, structure propre (pas de sur-imbrication). MESURER.
- RESPONSIVE des la structure + tester 3 vues. SEO = contenu + extension SEO + structure/alt/vitesse. ACCESSIBILITE = alt, contrastes, clavier, liens explicites.
- MODERATION sur animations et pop-ups (ne pas etre intrusif, penser performance/accessibilite). CSS perso = complement pour cas avances, pas le mode normal.
- BUT ULTIME : non « savoir cliquer dans Elementor » mais LIVRER des sites PROFESSIONNELS, RAPIDES, ACCESSIBLES et PERENNES. Construire proprement, optimiser, tester, livrer et MAINTENIR.