Omni Panels Mode: Vertical Tabs

This example is set to show the tabs vertically. When viewed on a phone, or in a narrow window, the widget will convert to an accordion. Wondering about the multi-colored tabs? Aha! We knew you were. The Omni Panel interface allows you set custom classes on individual tabs and individual content panels!

The skinny on Omni Panels...

Omni Panels is the most powerful and most responsive panels widget for Dreamweaver. It magically adapts to all screen and window sizes automatically. Not enough room for your horizontal tabs? No problem. If you want, Omni Panels will convert your horizontal tabs to vertical tabs. Of course, you can set your Omni Panel widget to display vertical tabs by default, as we've done with this instance.

When viewed on a smartphone, your Omni Panel tabs will automatically convert to an accordion... unless you've set your widget to display in Carousel mode!

Omni Panels is the most powerful and adaptable panel ever made for Dreamweaver.

Automation

Omni Panels comes with a fully automated interface that opens within Dreamweaver.

Features...

There are no words to adequately describe the power packed inside PVII Omni Panels. Let the features speak for themselves...

  • Automated UI in Dreamweaver
  • Add, delete, or move panels at will
  • Assign custom classes in the UI to either Triggers (tabs) or Content Panels. We used this feature to give each of the tabs in this example a different color!
  • Turn off content padding inside individual panels
  • Works flawlessly with Layout Builder Magic when you need to divide your panels into multiple columns. See Tutorial:
    Using Layout Builder Magic Inside Omni Panels
  • Panel flow is infinite.
  • Choose from several Operating Modes:
    • Normal Tabs
    • Tabs with Vertical Conversion
    • Vertical Tabs
    • Carousel (tabs are hidden)
  • Add a Toolbar and/or a Paginator when using Carousel mode, and set them to either a light or dark style
  • Add Previous and Next arrows in any mode
  • Enable or disable swiping for touch devices
  • Enable or disable phone conversion to an accordion. Omni Panel's accordion mode (for small screens) is programmed for usability. When you open a panel, it will smoothly scroll the viewport to the top of its content area!
  • Set any of your panels to be the default panel shown on page load
  • In Carousel Mode, set your Omni Panel to play automatically, the timing between panel changes, and whether to end on the first or last panel. You can also set play mode to continuously or a specific number of cycles
  • Choose from 5 animations:
    • None
    • Fade
    • Horizontal Slide
    • Vertical Slide
    • Zoom
    • Fold
  • Choose from 7 Style Themes, each of which are designed coordinate smartly with Layout Builder Magic pages
  • Set rounded corners

Enough? If you think of a feature you'd like to see, shoot us an email and we'll let you know if its feasible.

Omni Panel Mode: Normal Tabs

For this example, we have a minimal number of tabs, which take up very little horizontal space, eliminating the need for a conversion to vertical tabs. As a result, this example will bypass the vertical conversion, but will still convert to an accordion on smartphones. You can simulate the accordion transformation on your laptop or desktop by reducing the width of your window to 700 pixels or less.

Powerful

PVII Omni Panels is the most powerful responsive panel widget ever made for Dreamweaver. There is simply nothing like it. View the demos on this page and we're sure you will quickly agree.

 

Easily make animated headings...

Assign a special CSS class, included in the OPM style sheet to elements in your panels such as headings and images, and they will glide into view with a smooth choreographed slide.

Incredibly Versatile...

Choose from several style themes, then use the automated Omni Panels interface to set visual and behavioral options. You can configure your OPM widget to display tabs (or triggers) horizontally or vertically. Horizontal tabs can be set to convert to vertical tabs when the system detects that there is no longer sufficient space to display your tabs on the same line. More magic occurs when your tabs are viewed in a smartphone (or narrow viewport), as the entire widget converts into an accordion! And this accordion is no ordinary accordion. It has some smarts built in that will ensure that whenever a panel is accessed, its top smoothly scrolls into view. Yes, this is one powerful piece of work.

Art in Motion

A Ferrari wouldn't be a Ferrari if were only fast. It must be beautiful, too. And so it is with Omni Panels. Need we say more?

Omni Panel Mode: Tabs with Vertical Conversion

When in this mode, Omni Panels (OPM) will detect when your horizontal tabs run out of room, and before they wrap to a second line, your tabs will convert to a vertical presentation, ensuring that all of your tabs are neatly displayed and accessible.

If you are viewing this page in a fairly wide window, the tabs will all appear horizontally, on a single line. Make your window narrower and watch as the entire widgets transforms into a vertical tabs presentation. Of course, you can also set your Omni Panel to display vertical tabs by default, as we've done in the first example on this page.

The long and short of it...

Tab text can be as long or as short as you need them to be. You never have to worry about how they will fit in your visitors' windows, nor will you need to worry about them wrapping to multiple lines and spoiling your pristine design. When the device or browser window is too narrow to display your tabs on a single horizontal line, and you have chosen the Tabs with Vert Conversion display mode, your Omni Panel tabs will automatically convert to a vertical configuration!

The bottom line...

When all is said and done, PVII Omni Panels is the most adaptive, responsive, mobile-friendly, and powerful panel widget for Dreamweaver. Period.

Get yours today!

Omni Panel Mode: Carousel

Omni Panels can be configured as a true infinite Carousel. Your Carousel can then be optioned with any combination of previous/next arrows, a toolbar, or a paginator. Further, the carousel can be set to auto-play on load. Pause/Play controls can be included on a toolbar or paginator bar.