1.3Les 3 onglets : Contenu, Style & Avancé
L'essentiel en 30 secondes
- Contenu : le quoi (texte, lien, options fonctionnelles de l'élément).
- Style : l'apparence (couleurs, typographie, arrière-plan, bordures).
- Avancé : le technique (marges/paddings, positionnement, responsive, CSS).
Mini-cas filé — Nadia s'y retrouve partout
Nadia panique un peu : chaque widget a plein de réglages. Puis elle remarque que c'est toujours la même organisation — trois onglets. Une fois la logique comprise, elle règle n'importe quel élément sans chercher : le contenu dans Contenu, l'allure dans Style, les marges dans Avancé.
Suite de 1.2 — la clé pour ne jamais se perdre dans les réglages.
1. Trois onglets, toujours
Presque tout élément (widget ou conteneur) se règle via trois onglets. L'onglet Contenu porte le contenu et les options fonctionnelles : le texte d'un titre et son niveau, le lien d'un bouton, les images d'un carrousel. L'onglet Style gère l'apparence : couleurs, typographie, arrière-plan, bordures, ombres. L'onglet Avancé réunit les réglages fins et techniques : marges et paddings, positionnement, visibilité responsive, classes et CSS personnalisé.
Cette organisation est systématique : on sait toujours où chercher. Nadia gagne un temps fou — plus besoin de fouiller.
2. La bonne question au bon onglet
Le réflexe : se demander « qu'est-ce que je veux changer ? ». Le quoi (texte, lien) → Contenu. L'allure (couleur, police) → Style. L'espace et le technique (marge, padding, masquer sur mobile) → Avancé.
Pour le bouton de devis : le texte et le lien dans Contenu, la couleur rose de la marque dans Style, le padding et la marge du bas dans Avancé.
🔎 Exemple concret — Régler le bouton de devis (cas Nadia)
Onglet Contenu : texte « Demander un devis », lien /contact.
Onglet Style : couleur rose de la marque, coins arrondis.
Onglet Avancé : padding confortable, marge en bas de 24px.
→ Même méthode pour n'importe quel élément.Résultat : on règle tout sans chercher.
Leçon : une question → un onglet.
Vocabulaire de la section
- Les 3 onglets
- L'organisation systématique des réglages de presque tout élément : Contenu, Style, Avancé.
Exemple simple : titre, bouton, image, conteneur : tous ont ces 3 onglets.
Ce que ce n'est pas : croire que chaque widget a une interface unique.
Réflexe : nouvel élément ? chercher dans les 3 mêmes onglets.
- Onglet Contenu
- Le contenu et les options fonctionnelles (texte, niveau, lien, images…).
Exemple simple : le texte et le lien du bouton de devis.
Ce que ce n'est pas : y chercher la couleur (c'est dans Style).
Réflexe : le quoi → Contenu.
- Onglet Style
- L'apparence : couleurs, typographie, arrière-plan, bordures, ombres.
Exemple simple : la couleur rose de la marque sur le bouton.
Ce que ce n'est pas : y chercher les marges (c'est dans Avancé).
Réflexe : l'allure → Style.
- Onglet Avancé
- Les réglages fins : marges/paddings, positionnement, responsive, classes, CSS.
Exemple simple : le padding du bouton et sa marge basse.
Ce que ce n'est pas : y chercher le texte de l'élément (c'est dans Contenu).
Réflexe : l'espace et le technique → Avancé.
- Logique systématique
- La même organisation partout : on sait toujours où trouver un réglage.
Exemple simple : Nadia règle 10 éléments différents sans jamais fouiller.
Ce que ce n'est pas : réapprendre l'interface pour chaque widget.
Réflexe : une seule logique à mémoriser, valable partout.
En pratique — Maîtriser les 3 onglets
- Sélectionnez un bouton : dans Contenu, changez son texte et son lien.
- Dans Style, changez sa couleur et sa typographie.
- Dans Avancé, ajustez son padding et sa marge basse.
- Refaites l'exercice sur un titre et une image : constatez la même logique.
Script prêt à dire — rassurer un client qui veut « tout changer » (20 s)
« Tout est modifiable facilement : le texte et les liens, les couleurs et les polices, les espacements. Comme l'outil range toujours les réglages de la même façon, je peux ajuster chaque élément rapidement si vous voulez un changement. »
Montrer que la cohérence de l'outil = réactivité pour le client.
Modèle copier-coller — où régler quoi
JE VEUX CHANGER : _______________
→ LE QUOI (texte, lien, options) : onglet CONTENU
→ L'ALLURE (couleur, police, bordure) : onglet STYLE
→ L'ESPACE/TECHNIQUE (marge, padding, responsive) : onglet AVANCÉDébutant
Mémoriser la règle « quoi / allure / espace » avant d'explorer les options avancées.
Gain de temps
Se poser la question « qu'est-ce que je change ? » évite de fouiller les mauvais onglets.
Conteneur
Même logique : arrière-plan dans Style, padding/responsive dans Avancé.
Reproduire un style
Copier le style d'un élément et le coller sur un autre (clic droit) pour aller plus vite.
✓ Bonnes pratiques
- Se demander « quoi / allure / espace » pour trouver le bon onglet.
- Mémoriser que marges/paddings sont dans Avancé.
- Copier-coller un style pour gagner du temps.
✗ Pièges fréquents
- Chercher les marges dans Style.
- Chercher la couleur dans Contenu.
- Réapprendre l'interface pour chaque widget.
Points clés à retenir
- Contenu = le quoi ; Style = l'allure ; Avancé = l'espace/technique.
- Marges et paddings → onglet Avancé.
- La logique est la même pour tout élément.
- Une question → un onglet.
Défi 48h — appliquez demain
Prenez un bouton et modifiez-le dans les trois onglets : texte+lien (Contenu), couleur (Style), padding+marge (Avancé). Reproduisez sur un titre pour constater la même logique. 15 minutes.
- Je sais ce qui va dans Contenu, Style, Avancé.
- Je trouve les marges/paddings dans Avancé.
- J'applique la même logique à tout élément.
Questions fréquentes
Où règle-t-on les marges et paddings ?
Dans l'onglet Avancé (avec le positionnement et le responsive), pas dans Style. Style regroupe l'apparence (couleurs, typographie, bordures).
Tous les widgets ont-ils ces 3 onglets ?
Presque tous les éléments (widgets et conteneurs). Le contenu des onglets varie selon l'élément, mais la logique reste la même, ce qui fait gagner du temps.
Puis-je copier le style d'un élément ?
Oui : clic droit → Copier, puis « Coller le style » sur un autre élément. Pratique pour harmoniser rapidement plusieurs boutons ou titres.
Nadia veut augmenter l'espace sous son bouton. Dans quel onglet règle-t-elle la marge ?