csenfrdeitplptruskes

Popover Widget

With this widget you can position each item through coordinates on top of a main image and display content inside a dropdown. The main image is chosen in the widget settings.

Handlebar

Handlebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Saddle

Saddle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Gear Change

Gear Change

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  • Handlebar

    Handlebar

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  • Saddle

    Saddle

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  • Gear Change

    Gear Change

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Toggle Icon

    The Popover widget provides different toggle icons. You also have the option to display the panel on hover or click.

    Goatskin Leather

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Read more

    Wood

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Read more

    Table

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Read more


      Panels and Positions

      You can choose between different panel styles for the dropdown. The Popover widget also allows you to align the dropdown to the top, bottom, right or left.

      Flagship Store

      Flagship Store

      300 Huaihaizo
      Shani 200021
      China
      Store

      Store

      96 Hauptstraße
      21376 Berlin
      Germany
      Store

      Store

      436 Franklin Street
      Los Angeles
      90003 USA
      • Flagship Store

        Flagship Store

        300 Huaihaizo
        Shani 200021
        China
      • Store

        Store

        96 Hauptstraße
        21376 Berlin
        Germany
      • Store

        Store

        436 Franklin Street
        Los Angeles
        90003 USA

        Popover Options

        Layout Options Settings Description
        Width [Number] Define the popover width.
        Image [Image URL] Select the main image and define the width and height.
        Popover Position Top, Bottom, Left, Right Define the alignment of the dropdown.
        Mode Click, Hover Alignment of the navigation.
        Toggle Icon Eye, Info, Info Circle, Search, Search Plus, Plus, Plus Square, Plus Square Outlined, Plus Circle Choose your toggle icon.
        Color Use a high-contrast color inside the overlay.
        Panel Box, Box Primary, Box Secondary Select the Panel.
        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 Popover.
        Overlay None, Link, Icon, Image 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 and content.
        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.

        List Widget

        The List widget displays content inside a list of items. You can set different positions and styles for your content.


        List Options

        List Options Settings Description
        Line Seperate the items with lines
        Striped The list items are striped.
        Space Display the lines only with space
        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.
        Media Alignment Center content vertically.
        Media Border None, Circle, Rounded The appearance of the images inside the list.
        Content Options Settings Description
        Text Display Show or hide title and content.
        Text Title Size Default, H1, H2, H3, H4, Extra Large Define the font size of the title.
        Text Truncate [Number] Define the maximum number of characters.
        Link Display Display the Read More link. The link URL is added to each item in the Content Manager.
        Link Color Link, Muted, Same as text Set the color of the Read More link.
        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.

        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

          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.

          Read more

        • Bar & Cocktails

          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.

          Read more

        • Restaurant

          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.

          Read more


        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.

        • Jan
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        • Feb
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        • Mar
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        • Apr
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        • Dillan

          Dillan

        • Brandon

          Brandon

        • Susan

          Susan


        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.

        Slideshow Panel

        This widget publishes images in a slideshow and the item's content inside a panel instead of an overlay. Position the items left, right, above or below your slideshow.

        • Guitar Lessons
        • Crafts Workshop
        • Interior Design
        • Guitar Lessons

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

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
        • Interior Design

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        • Guitar Lessons
        • Crafts Workshop
        • Interior Design

        Navigations and Animations

        The Slideshow Panel includes different navigation positions and styles, like text, a nav or thumbnails. The widget provides different animations when switching between the items.

        • Chocolate Cheesecake
        • Chocolate Muffins
        • Chocolate Truffles
        • Chocolate Cheesecake

          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

        • Chocolate Muffins

          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.

          Read more

        • Chocolate Truffles

          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

        • 2012 / Letterheads

          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

        • 2014 / Corporate ID

          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.

          Read more

        • 2010 / Gates CD

          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


        Slideshow Panel Options

        Accordion Options Settings Description
        Panel Blank, Box, Box Primary, Box Secondary Choose a panel styling for the item.
        Navigation Navigation Text, Divider, Nav, Tabs, Thumbnail, Dotnav Select the navigation for your Slideshow Panel.
        Navigation Position Position the nav as media overlay.
        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.
        Fullscreen Extend to full viewport height.
        Min. Height (px) [Number] Choose a min. height for your Slideshow Panel.
        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.
        Content Options Settings Description
        Text Display Show or hide title and content.
        Text Title Size Default, H1, H2, H3, H4, Extra Large Define the font size of the title.
        Text Content Size Default, Text Large, H2, H3, H4 Define the font size of the content.
        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.
        Badge Display Show or hide the badge.
        Badge Style Default, Success, Warning, Danger, Text Muted, Text Primary Set the style of the badge.
        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.

        Další články...

        Novinky e-mailem

        Buďte informovaní! Zadejte svůj e-mail a my vás budeme informovat o novinkách a výhodných akcích.

        Kdykoliv se můžete z odběru novinek odhlásit.