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
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. -
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. -
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.
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.
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.
-
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.
-
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.
-
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.
-
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.
-
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.
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.
Navigations
The Switcher includes different navigations, like text, navs, tabs or thumbnails, to toggle Switcher items. Each navigation provides different position and alignment options.
-
Shop
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. -
Lifestyle
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. -
University
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
-
Brandon Cooper
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. -
Ethan Brooks
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. -
James Bell
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
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. |