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
Padding left/right @Phone (<576px)
Field type: Number field
Example value:
7
Path to the configuration: Tab "Layout" => Block "Layout" => Section "Container"
Technical name:
twt-container-padding-left-right
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
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
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
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
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
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
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
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
Last updated