1.3The 3 tabs: Content, Style & Advanced
The essentials in 30 seconds
- Content: the what (text, link, functional options of the element).
- Style: the appearance (colors, typography, background, borders).
- Advanced: the technical side (margins/paddings, positioning, responsive, CSS).
Through-line — Nadia finds her way everywhere
Nadia panics a little: each widget has loads of settings. Then she notices it's always the same organization — three tabs. Once she gets the logic, she sets any element without searching: content in Content, look in Style, margins in Advanced.
Continues 1.2 — the key to never getting lost in the settings.
1. Three tabs, always
Almost every element (widget or container) is set via three tabs. The Content tab carries the content and functional options: a heading's text and its level, a button's link, a carousel's images. The Style tab handles the appearance: colors, typography, background, borders, shadows. The Advanced tab gathers the fine and technical settings: margins and paddings, positioning, responsive visibility, classes and custom CSS.
This organization is systematic: you always know where to look. Nadia saves a huge amount of time — no more digging around.
2. The right question to the right tab
The reflex: ask yourself "what do I want to change?". The what (text, link) → Content. The look (color, font) → Style. The space and the technical (margin, padding, hide on mobile) → Advanced.
For the quote button: the text and link in Content, the brand pink in Style, the padding and bottom margin in Advanced.
🔎 Concrete example — Setting the quote button (Nadia's case)
Content tab: text "Request a quote", link /contact.
Style tab: brand pink, rounded corners.
Advanced tab: comfortable padding, 24px bottom margin.
→ Same method for any element.Result: you set everything without searching.
Lesson: one question → one tab.
Section vocabulary
- The 3 tabs
- The systematic organization of almost every element's settings: Content, Style, Advanced.
Simple example: heading, button, image, container: all have these 3 tabs.
What it is not: thinking each widget has a unique interface.
Reflex: new element? look in the same 3 tabs.
- Content tab
- The content and functional options (text, level, link, images…).
Simple example: the text and link of the quote button.
What it is not: looking for the color there (it's in Style).
Reflex: the what → Content.
- Style tab
- The appearance: colors, typography, background, borders, shadows.
Simple example: the brand pink on the button.
What it is not: looking for margins there (it's in Advanced).
Reflex: the look → Style.
- Advanced tab
- The fine settings: margins/paddings, positioning, responsive, classes, CSS.
Simple example: the button's padding and bottom margin.
What it is not: looking for the element's text there (it's in Content).
Reflex: the space and the technical → Advanced.
- Systematic logic
- The same organization everywhere: you always know where to find a setting.
Simple example: Nadia sets 10 different elements without ever digging.
What it is not: relearning the interface for each widget.
Reflex: a single logic to memorize, valid everywhere.
In practice — Mastering the 3 tabs
- Select a button: in Content, change its text and link.
- In Style, change its color and typography.
- In Advanced, adjust its padding and bottom margin.
- Redo the exercise on a heading and an image: notice the same logic.
Ready-to-say script — reassuring a client who wants to 'change everything' (20 s)
"Everything is easily editable: the text and links, the colors and fonts, the spacing. Since the tool always organizes the settings the same way, I can adjust each element quickly if you want a change."
Show that the tool's consistency = responsiveness for the client.
Copy-paste template — where to set what
I WANT TO CHANGE: _______________
→ THE WHAT (text, link, options): CONTENT tab
→ THE LOOK (color, font, border): STYLE tab
→ THE SPACE/TECHNICAL (margin, padding, responsive): ADVANCED tabBeginner
Memorize the "what / look / space" rule before exploring the advanced options.
Time-saving
Asking "what am I changing?" avoids digging in the wrong tabs.
Container
Same logic: background in Style, padding/responsive in Advanced.
Reproducing a style
Copy an element's style and paste it onto another (right-click) to go faster.
✓ Best practices
- Ask "what / look / space" to find the right tab.
- Memorize that margins/paddings are in Advanced.
- Copy-paste a style to save time.
✗ Common pitfalls
- Looking for margins in Style.
- Looking for the color in Content.
- Relearning the interface for each widget.
Key takeaways
- Content = the what; Style = the look; Advanced = the space/technical.
- Margins and paddings → Advanced tab.
- The logic is the same for every element.
- One question → one tab.
48h challenge — apply tomorrow
Take a button and modify it in all three tabs: text+link (Content), color (Style), padding+margin (Advanced). Reproduce on a heading to confirm the same logic. 15 minutes.
- I know what goes in Content, Style, Advanced.
- I find margins/paddings in Advanced.
- I apply the same logic to every element.
Frequently asked questions
Where are margins and paddings set?
In the Advanced tab (with positioning and responsive), not in Style. Style gathers the appearance (colors, typography, borders).
Do all widgets have these 3 tabs?
Almost all elements (widgets and containers). The tabs' content varies by element, but the logic stays the same, which saves time.
Can I copy an element's style?
Yes: right-click → Copy, then "Paste Style" onto another element. Handy for quickly harmonizing several buttons or headings.
Nadia wants to increase the space below her button. In which tab does she set the margin?