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