Switcher

Switcher Widget

A Switcher consists of a number of navigation toggles and their related content items. Switchers are useful for realizing little tabbed navigations and similar.

  • Beautiful Design

    Beautiful Design

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Read more

  • Content Management

    Content Management

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Read more

  • Fully Responsive

    Fully Responsive

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

    Read more


Thumbnail Navigation

Use thumbnails of each item to navigate through Switcher items. You can set thumbnail width and height and position the navigation at any side of the content.

  • Brandon Cooper
  • Dillan Smith
  • Ethan Brooks
  • Susan McKenzie
  • James Bell
  • Brandon Cooper

    Brandon Cooper

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  • Dillan Smith

    Dillan Smith

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  • Ethan Brooks

    Ethan Brooks

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  • Susan McKenzie

    Susan McKenzie

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  • James Bell

    James Bell

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Vertical Navigations

All navigations can be aligned vertically to the left or right of the content, in addition to top and bottom. An option will then be provided to set the width of the nav in percent.

  • Easy To Use

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    Easy To Use
  • Theme Support

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    Theme Support
  • Fast & Lightweight

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    Fast & Lightweight
  • Beautiful Design

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    Beautiful Design
  • Image Management

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    Image Management
  • Fully Responsive

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    Fully Responsive

Tabs and Positions

You can also apply a tabbed navigation to the Switcher, which can be positioned at any side of the content. Tabs can be justified or aligned to the left, right or center.


The Switcher includes different navigations, like text, navs, tabs or thumbnails, to toggle Switcher items. Each navigation provides different position and alignment options.

  • Shop

    Shop

    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua.

    Read more

  • Lifestyle

    Lifestyle

    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua.

    Read more

  • University

    University

    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua.

    Read more

  • Brandon Cooper

    Brandon Cooper

    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua.

    Read more

  • Ethan Brooks

    Ethan Brooks

    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua.

    Read more

  • James Bell

    James Bell

    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua.

    Read more


Additional Fields

Some of the elements that you can display inside a Switcher widget need to be defined first by creating an additional field inside the Content Manager.

Field Description
Social Links Available social fields are Email, Facebook, Google Plus and Twitter.

Switcher Options

Layout Options Settings Description
Navigation Navigation Text, Divider, Nav, Tabs, Thumbnail, Dotnav Select the navigation for your Switcher.
Navigation Position Top, Bottom, Left, Right Define the position of the navigation.
Navigation Alignment Left, Center, Right, Justify (Only Tabs/Thumbnails) Alignment of the navigation.
Items Panel Add whitespace to your content.
Items Animation None, Fade, Scale, Slide Horizontal, Slide Left, Slide Right, Slide Vertical, Slide Top, Slide Bottom The animation that will be applied upon switching between items.
Media Options Settings Description
Media Display Display the image or video of all items.
Media Image [Number] Set the width and height of the image in pixels.
Media Alignment Above Title, Below Title, Left, Right Define the image alignment.
Media Border None, Circle, Rounded The appearance of the images inside the Switcher.
Overlay None, Link, Icon, Image, Social Buttons Define what will be displayed inside the overlay or hide the overlay.
Overlay Animation Fade, Slide Top, Slide Bottom, Slide Left, Slide Right The animation that will be applied to the overlay when being displayed on hover.
Overlay Image Animation None, Fade, Scale, Spin, Grayscale The animation that will be applied to the image on hover.
Content Options Settings Description
Text Display Show or hide title, content and social buttons.
Text Title Size Default, H1, H2, H3, H4, Extra Large Define the font size of the title.
Text Alignment Left, Right, Center Define the text alignment.
Link Display Display the Read More link. The link URL is added to each item in the Content Manager.
Link Style Text, Button, Button Primary, Button Large, Button Large Primary Set the style of the Read More link.
Link Text [Text] Define the link text.
General Options Settings Description
Custom HTML Class [Text] Set a custom HTML class that will be added to the widget element in the rendered output.
Custom Link Target Open all links in a new window.