All pages
Powered by GitBook
1 of 1

Loading...

Configuration

Arrow navigation


Layout type

Field type: Select

Available values: • Rectangle (default) • Square/Circle

Example value: Rectangle (default)

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-style

In the "Shopping Experiences" tab, you can individually configure various sliders.


Field type: Select

Available values: • not rounded • rounded corners (default) • round corners

Example value: rounded corners (default)

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-corner-type


Field type: Select

Available values: • no effect (default) • fade in

Example value: fade in

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-hover-type


Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-color


Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-border-color


Field type: Color picker

Example value: transparent

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-background-color


Field type: Color picker

Example value: $sw-color-brand-secondary

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-color-hover


Field type: Color picker

Example value: darken($twt-base-slider-controls-border-color, 10%)

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-border-color-hover


Field type: Color picker

Example value: darken($twt-base-slider-controls-background-color, 7.5%)

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Arrow navigation"

Technical name: twt-base-slider-controls-background-color-hover


Field type: Select

Available values: • Rectangle • Square/Circle (default)

Example value: Square/Circle (default)

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"

Technical name: twt-base-slider-navigation-dots-style


Field type: Select

Available values: • not rounded • rounded corners • round corners (default)

Example value: round corners (default)

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"

Technical name: twt-base-slider-navigation-dots-type


Field type: Select

Available values: • default • scale up • stroke • fill in • dot stroke

Example value: default

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"

Technical name: twt-base-slider-navigation-dots-hover-type


Field type: Select

Available values: • align left • align right • align center (default)

Example value: align center (default)

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"

Technical name: twt-base-slider-navigation-dots-alignment


Field type: Color picker

Example value: #bcc1c7

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"

Technical name: twt-base-slider-navigation-dots-background-color


Field type: Color picker

Example value: #798490

Path to the configuration: Tab "Content" => Block "Sliders" => Section "Dots navigation"

Technical name: twt-base-slider-navigation-dots-background-color-active

Corner type

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.

Hover effect

Text colour

Border colour

Background colour

Text colour @hover

Border colour @hover

Background colour @hover

Dots navigation

Layout type

Corner type

rounded corners Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

round corners Uses a predefined radius for round corners.

Hover effect

Horizontal alignment

Colour (Primary)

Colour (Secondary) @active/hover