Configuration
Basic configuration
Basic layout
Field type: Select
Available values: • Full-width • Full-width Boxed • Boxed
Example value:
Full-width Boxed
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Basic configuration"
Technical name:
twt-container-layout
Select the sizing mode of the container.
Border radius
Field type: Number field
Example value:
2
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Basic configuration"
Technical name:
twt-border-radius
Background-image
Background image
Field type: Media selection
Example value: ``
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image
Show background image
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-show
Image size
Field type: Select
Available values: • Initial size (auto) • Cover background completely (cover) • Cover background completely (contain)
Example value:
Initial size (auto)
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-size
auto The auto keyword scales the background image in the appropriate direction to maintain the initial aspect ratio.
cover The image is sized to maintain its aspect ratio while filling the element's entire content box.
contain The image is sized to maintain its aspect ratio while fitting within the element's content box.
Position
Field type: Select
Available values: • left, top • left, center • left, bottom • right, top • right, center • right, bottom • center, top • center, center • center, bottom
Example value:
left, top
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-position
Repeat
Field type: Select
Available values: • No repeat (no-repeat) • Horizontal and vertical (repeat) • Horizontal (repeat-x) • Vertical (repeat-y)
Example value:
Horizontal and vertical (repeat)
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-repeat
Attachment
Field type: Select
Available values: • Background image scrolls with the page (scroll) • Background image stays fixed (fixed)
Example value:
Background image stays fixed (fixed)
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Background-image"
Technical name:
twt-background-image-attachment
Scroll: The background image scrolls with the page.
Fixed: The background image stays fixed relative to the viewport.
Container
Maximum width
Field type: Number field
Example value:
1400
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container"
Technical name:
twt-container-max-width
Outer spacing left/right @Phone (<576px)
Field type: Number field
Example value:
10
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container"
Technical name:
twt-container-padding-left-right
Set the outer spacing (left and right) of the main container on non-CMS pages.
default: 20
Container (Basic layout "boxed")
Margin bottom/top
Field type: Number field
Example value:
30
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"
Technical name:
twt-container-layout-margin-top-bottom
Just until "Container" > "Maximum width" reached.
Drop shadow
Field type: Text field
Example value:
0 0 30px
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"
Technical name:
twt-container-layout-box-shadow
Shadow colour
Field type: Color picker
Example value:
rgba(0, 0, 0, 0.3)
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Basic layout "boxed")"
Technical name:
twt-container-layout-box-shadow-color
Container (Non-CMS pages)
Margin top
Field type: Number field
Example value:
20
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-margin-top
Set the margin top of the main container on non-CMS pages.
Margin bottom
Field type: Number field
Example value:
20
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-margin-bottom
Set the margin bottom of the main container on non-CMS pages.
Padding @Phone (<576px)
Field type: Number field
Example value:
8
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-padding-phone-xs
Set the padding in the main container on non-CMS pages.
Padding @Phone (landscape) (≥576px)
Field type: Number field
Example value:
15
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-padding-phone
Set the padding in the main container on non-CMS pages.
Padding @Tablet (≥768px)
Field type: Number field
Example value:
20
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-padding-tablet
Set the padding in the main container on non-CMS pages.
Padding @Desktop (≥1200px)
Field type: Number field
Example value:
30
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-padding
Set the padding in the main container on non-CMS pages.
Border colour
Field type: Color picker
Example value:
#eeeeee
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-border-color
Select the border colour of the main container on non-CMS pages.
Background colour
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container (Non-CMS pages)"
Technical name:
twt-container-main-background-color
Select the background colour of the main container on non-CMS pages.
Last updated
Was this helpful?
