Configuration

Basic configuration

---

Width

Field type: Select

Available values: • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Example value: Container-Max-Width (Full-width-boxed)

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Basic configuration"

Technical name: twt-footer-width

Select the sizing mode of the footer.

---

Padding top (Columns) @Tablet/Desktop (≥768px)

Field type: Number field

Example value: 20

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Basic configuration"

Technical name: twt-footer-columns-padding-top

---

Padding right (Columns) @Tablet/Desktop (≥768px)

Field type: Number field

Example value: 1

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Basic configuration"

Technical name: twt-footer-columns-padding-right

---

Padding bottom (Columns) @Tablet/Desktop (≥768px)

Field type: Number field

Example value: 1

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Basic configuration"

Technical name: twt-footer-columns-padding-bottom

---

Padding left (Columns) @Tablet/Desktop (≥768px)

Field type: Number field

Example value: 1

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Basic configuration"

Technical name: twt-footer-columns-padding-left

---

Column alignment

Field type: Select

Available values: • align center • space-between • space-around

Example value: space-between

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Basic configuration"

Technical name: twt-footer-justify-content

Select the desired horizontal alignment.

left Items are positioned at the beginning of the container.

right Items are positioned at the end of the container.

center Items are positioned at the center of the container.

space-between Items are positioned with space between them.

space-around Items are positioned with space before, between, and after them.

Colour configuration

---

Text colour

Field type: Color picker

Example value: #333333

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Colour configuration"

Technical name: twt-footer-column-color

---

Link colour

Field type: Color picker

Example value: #333333

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Colour configuration"

Technical name: twt-footer-column-link-color

---

Link colour @hover

Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Colour configuration"

Technical name: twt-footer-column-link-color-hover

---

Background colour

Field type: Color picker

Example value: rgba(0, 0, 0, 0)

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Colour configuration"

Technical name: twt-footer-columns-background-color

---

Text colour (Headline)

Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Colour configuration"

Technical name: twt-footer-column-headline-color

---

Border colour (Headline)

Field type: Color picker

Example value: #ffffff

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Colour configuration"

Technical name: twt-footer-column-headline-border-color

Background-image

---

Background image

Field type: Media selection

Example value: ``

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Background-image"

Technical name: twt-footer-main-section-background-image

---

Show background image

Field type: Select

Available values: • don't show • show

Example value: show

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Background-image"

Technical name: twt-footer-main-section-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 "Footer" => Block "Main section" => Section "Background-image"

Technical name: twt-footer-main-section-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 "Footer" => Block "Main section" => Section "Background-image"

Technical name: twt-footer-main-section-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 "Footer" => Block "Main section" => Section "Background-image"

Technical name: twt-footer-main-section-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 "Footer" => Block "Main section" => Section "Background-image"

Technical name: twt-footer-main-section-background-image-attachment

Scroll: The background image scrolls with the page.

Fixed: The background image stays fixed relative to the viewport.

Typography

---

Text alignment

Field type: Select

Available values: • align left • align center • align right

Example value: align left

Path to the configuration: Tab "Footer" => Block "Main section" => Section "Typography"

Technical name: twt-footer-column-text-align