Switcher Panel
Switcher Panel Widget
The Switcher Panel displays a static teaser image inside a panel. The navigation to transition through Switcher items, is placed on top of the main image.
-
About Us
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 nisi ut aliquip ex ea commodo consequat. -
Bar & Cocktails
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -
Restaurant
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 nisi ut aliquip ex ea commodo consequat.
Navigations
The Switcher Panel includes different navigations, like text, navs, tabs or thumbnails, to toggle Switcher items. Each navigation provides different position and alignment options.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Additional Fields
Some of the elements that you can display inside a Switcher Panel 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 Panel Options
| Layout Options | Settings | Description |
|---|---|---|
| Panel | Blank, Box, Box Primary, Box Secondary | Choose a panel styling for the item. |
| Image | [Image URL] | Select the main image and define the width and height. |
| Navigation Navigation | Text, Divider, Nav, Tabs, Thumbnail | Select the navigation for your Switcher Panel. |
| Navigation Alignment | Left, Center, Right, Justify (Only Tabs/Thumbnails) | Alignment of the navigation. |
| Color | Use a high-contrast color inside the overlay. | |
| 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 | Top, Left, Right | Define the image alignment. |
| Column Width | [Number] | Define the column width in percent. |
| Border Width | None, Circle, Rounded | The appearance of the images. |
| 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. |
| Link Target | Open all links in a new window. |
Posted in Uncategorised