Page Sections Selectors
COMPONENT SELECTOR GUIDE
On This Page:
General Page Section Selectors (Classic and Fluid Engine)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .page-section | Selects all page sections - both Fluid Engine and Classic Editor. |
|
| .page-section:not([data-fluid-engine-section]) | Selects Classic Editor page sections only. |
|
| .page-section[data-fluid-engine-section] | Selects Fluid Engine page sections only. |
|
HTML Structure Explanation
A page section element with the class name “page-section”. This page section is a Classic Editor section because it does not have the attribute “data-fluid-engine-section”.
A page section element with the class name “page-section”. This page section is a Classic Editor section because it does not have the attribute “data-fluid-engine-section”.
A page section element with the class name “page-section”. This page section is a Fluid Engine section because it has the attribute “data-fluid-engine-section”.
A page section element with the class name “page-section”. This page section is a Fluid Engine section because it has the attribute “data-fluid-engine-section”.
Specific Pages Sections Using “data-section-id” (Classic and Fluid Engine)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .page-section[data-section-id="SECTION_ID_GOES_HERE"] | A page section with the specified data-section-id attribute |
|
HTML Structure Explanation
Each page section has a “data-section-id” attribute attached to it. This gives each page section a unique way of being identified with CSS.
The <section> element with a “data-section-id” attribute.
Page Sections by Color Theme (Classic and Fluid Engine)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .page-section .section-background | The element inside of a page section that is used to style the background color |
|
| .page-section.white | Page sections using the "Lightest 1" color theme |
|
| .page-section.white-bold | Page sections using the "Lightest 2" color theme |
|
| .page-section.light | Page sections using the "Light 1" color theme |
|
| .page-section.light-bold | Page sections using the "Light 2" color theme |
|
| .page-section.bright-inverse | Page sections using the "Bright 1" color theme |
|
| .page-section.bright | Page sections using the "Bright 2" color theme |
|
| .page-section.dark | Page sections using the "Dark 1" color theme |
|
| .page-section.dark-bold | Page sections using the "Dark 2" color theme |
|
| .page-section.black | Page sections using the "Darkest 1" color theme |
|
| .page-section.black-bold | Page sections using the "Darkes 2 color theme |
|
HTML Structure Explanation
Each <section> element will have a class name that reflects which theme from your site’s color palette is being used to style it. The page section shown in the screenshot below happens to have the class name “bright” which corresponds to the “Bright 2” color theme.
The <section> element that marks the beginning of a new page section.
Page Sections by Content Width (Classic Editor Only)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .page-sections.content-width--narrow | Page sections using the narrowest content width setting. |
|
| .page-sections.content-width--narrow .content-wrapper | The content wrapper inside of the "narrow" page sections. |
|
| .page-sections.content-width--medium | Page sections using the medium content width setting. |
|
| .page-sections.content-width--medium .content-wrapper | The content wrapper inside of the "medium" page sections. |
|
| .page-sections.content-width--wide | Page sections using the widest content width setting. |
|
| .page-sections.content-width--wide .content-wrapper | The content wrapper inside of the "wide" page sections. |
|
HTML Structure Explanation
Each <section> element will have a class name that reflects which content width setting is being applied to it.
The <section> element that marks the beginning of a new page section.
Page Sections by Content Height (Classic and Fluid Engine)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .page-sections.section-height--small | Page sections using the smallest section height setting. |
|
| .page-sections.section-height--small .content-wrapper | The content wrapper inside of the "small" page sections. |
|
| .page-sections.section-height--medium | Page sections using the medium section height setting. |
|
| .page-sections.section-height--medium .content-wrapper | The content wrapper inside of the "medium" page sections. |
|
| .page-sections.section-height--large | Page sections using the largest section height setting. |
|
| .page-sections.section-height--large .content-wrapper | The content wrapper inside of the "large" page sections. |
|
HTML Structure Explanation
Each <section> element will have a class name that reflects which section height setting is being applied to it.
The <a> elements with the class name “header-icon” which target the social media icon links that have a specified href attribute.