Options in "Appearance" tab
Container: Containers Limit the maximum width of content. Your website has a default maximum width, for example 1280px. When browser windows is larger, the content is horizontally centered and margins left and right applied:
- Default: Container for default maximum width
- No Frame: Use this options when you insert this Element into a Grid or another Component, for Example Panel or Section. Note: When you choose "No Frame" all other Settigns form the appearance tab are ignored
- Narrow: Container with smaller maximum width. It might be uses to create single-column Lead Texts or CTAs
- Wider: Sometimes you want to break out of the regular maximum width.
- Fullwidth: The content will expand to 100% width but have some padding left and right
- Fullwidth (no Paddings): The content will expand to 100% width and have no padding at all.
- Empty: This options is rarely needed.
Background color: Add a Background color to your content-Element. If you need more options, for example Backorung Image, Parallax or Video use the Q3i Component: Section
Panel: Here you have some presets for Panels that can be applied. If you need more options use the Q3i Component: Panel
Outer space before & after: They correspond with the css property "margin"
Inner space before & after: They correspond with the css property "padding"
The Difference between both is, that the Inner space is applied within the optional backround and outer space is not. In order to illustrate the difference we have added alternating Light grey and Dark grey background to the elements below.
Content Appearance Example (HTML-view)
<div class="section section_narrow section_bg-dark-grey dark section_padding-before-large section_padding-after-large"> <div class="section__inner"> <div class="panel panel_padding-small panel_bg-black dark"> <h5>Here comes the contents<h5> <p>At vero eos et accusam et justo duo dolores et ea rebum.<p> </div> </div> </div>
Content Appearance Example (Visual Result)
Here comes the contents
At vero eos et accusam et justo duo dolores et ea rebum.
Inner space before & Inner space after
Inner space before: None, Inner space after: None
Inner space before: Medium, Inner space after: Medium
Inner space before: Large, Inner space after: Large
Outer space before & Outer space after
Outer space before: Medium, Outer space after: Medium
Outer space before: Large, Outer space after: Large
Background options
none
white
light-grey
medium-grey
dark-grey
black
primary
secondary