Examen niveau 1 — Elementor

Examen — questions durcies

15 questions pour valider la construction d'une page : conteneurs Flexbox, widgets de base, les 3 onglets, style/espacements et responsive.
Répondez à tout, puis cliquez sur Corriger : chaque explication réexplique le concept.

1.1 · Rappel

1. Dans un conteneur Flexbox, que règle la « direction » ?

L'alignement en rangée (horizontal) ou en colonne (vertical) La couleur de fond du conteneur La taille de la police Le nom du conteneur

La direction définit si les éléments s'alignent en rangée (horizontal) ou en colonne (vertical).

1.1 · Application

2. Pour espacer régulièrement 3 cartes dans une rangée, quel réglage utiliser ?

Une marge différente sur chacune Le gap du conteneur Un CSS personnalisé obligatoire Rien, c'est automatique et non réglable

Le gap fixe un écart régulier entre les éléments, plus propre que des marges individuelles.

1.1 · Arbitrage

3. Nadia veut que 3 cartes en rangée s'empilent sur mobile. Que doit-elle activer ?

Un deuxième H1 Le CSS personnalisé uniquement Le wrap (retour à la ligne) du conteneur La suppression des cartes sur mobile

Le wrap autorise les éléments à passer à la ligne quand la largeur manque : les cartes s'empilent sur mobile.

1.2 · Rappel

4. Combien de H1 doit comporter une page ?

Autant que l'on veut Aucun Exactement trois Un seul

Un seul H1 (le titre principal), puis des H2/H3 en hiérarchie — important pour le SEO et l'accessibilité.

1.2 · Application

5. Quel réflexe pour chaque image insérée ?

Renseigner un texte alternatif (alt) descriptif La mettre en H1 La dupliquer trois fois La laisser sans description

L'alt décrit l'image pour les moteurs et les lecteurs d'écran : à renseigner sur chaque image utile.

1.2 · Arbitrage

6. Sur mobile, comment rendre un bouton de contact le plus efficace ?

Le masquer pour gagner de la place Le lier avec « tel: » pour appeler en un clic Écrire « Cliquez ici » sans préciser l'action Le mettre en tout petit

Un lien « tel: » déclenche l'appel en un clic sur mobile — idéal pour un artisan joignable par téléphone ; le texte doit annoncer l'action.

1.3 · Rappel

7. Dans quel onglet règle-t-on les marges et paddings ?

Contenu Style Avancé Aucun : il faut du CSS

Marges et paddings sont dans l'onglet Avancé (avec positionnement et responsive).

1.3 · Rappel

8. Que trouve-t-on dans l'onglet Style ?

Le texte et les liens Les marges et paddings Le nom du widget L'apparence : couleurs, typographie, bordures

Style regroupe l'apparence : couleurs, typographie, arrière-plan, bordures, ombres.

1.3 · Application

9. Nadia veut changer le texte d'un bouton. Quel onglet ?

Contenu Avancé Style Responsive

Le texte et le lien d'un élément sont dans l'onglet Contenu (le « quoi »).

1.4 · Rappel

10. Quelle est la bonne pratique pour les couleurs d'un site ?

Les régler élément par élément à chaque fois Les définir en global (réglages du site) et les réutiliser Utiliser le plus de couleurs possible Éviter toute couleur

Définir couleurs et polices en global assure la cohérence et permet de les modifier en un seul endroit.

1.4 · Application

11. Pourquoi vérifier le contraste texte/fond ?

Pour alourdir la page Cela n'a aucune importance Pour la lisibilité et l'accessibilité Uniquement pour l'impression papier

Un contraste suffisant rend le texte lisible sans effort, y compris pour les personnes malvoyantes et en plein soleil.

1.4 · Arbitrage

12. Le client hésite sur la couleur de marque et pourrait la changer. Comment s'y préparer ?

Éviter toute couleur de marque Coder la couleur en dur dans chaque bouton Refaire toutes les pages à la main si besoin Définir la couleur en global pour la changer partout en une fois

En définissant la couleur de marque en global (Site Settings), un seul changement se répercute sur tout le site.

1.5 · Rappel

13. Un réglage fait en mode mobile affecte-t-il le desktop ?

Non : il s'applique au point de rupture mobile (et plus petits) Oui, toujours Seulement si on recharge la page Il supprime la version desktop

Les réglages par point de rupture s'appliquent au mode choisi (et aux plus petits) sans casser les autres.

1.5 · Application

14. Comment alléger une page sur mobile ?

Ajouter encore plus d'images Masquer les éléments inutiles (ex. grande image décorative) sur mobile Mettre tous les titres en H1 Désactiver le responsive

On peut masquer sur mobile les éléments décoratifs/lourds via Avancé → Responsive, pour une page plus légère et lisible.

1.5 · Arbitrage

15. La page est parfaite sur l'aperçu Elementor. Peut-on livrer ?

Oui, l'aperçu suffit toujours Oui, si le desktop est beau Non : il faut aussi tester sur un vrai téléphone avant de livrer Non : il faut d'abord acheter Pro

L'aperçu aide, mais on teste toujours sur un vrai téléphone (tailles, boutons au pouce, vitesse réelle) avant de livrer.

Et après ?

Score ≥ 80 % : passez au Niveau 2 (design & contenu riche).
Score < 80 % : revoyez 1.1 à 1.5 et refaites les défis 48h.