Tabbed Panel

Create effective, stylish tabbed panels in Architect with this clever widget. Tabbed panels allow you to display large amounts of text while using categories to stay compact and organized. Extensive customization options allow for full control over styling, including content area images and link text.

Demo: https://demo.wocode.com/tabbed-panel

Tutorial Video

Setup

WIDGET PLACEMENT

  • Drop the Tabbed Panel widget on your site.
  • Place the widget where you would like your panel to appear on your page.
  • Resize the widget container as needed.
  • For a full width panel, enable “Full Bleed Row” in the parent row’s settings.

WIDGET OPTIONS (CONTENT)

  • Open the widget option panel.
  • Tab Alignment: This setting aligns the tabs left, center, or right, along the top of the content panel.

Tab 1/2/3/4/5/6 sections offer all of the content input for each tab and content areas. Each tab section has the exact same options.

  • Enable Tab: This setting enables the tab. Enable only the exact amount of tabs you plan to use.
  • Tab Label: This field applies a text label to the tab itself.
  • Tab Headline: This text is the headline of the content area.
  • Tab Description: This text makes up the description within the content area.
  • Enable Tab Image: This enables an image that will be seen in the content area. Enabling this toggle opens up a number of new parameters. Use this section to select an image, edit the image (if needed), enter alt text.
  • Tab Alignment: Choose left or right alignment for your image. The image shares the same space within the content area as the text, so consider the fact that the text will be offset from the image alignment.
  • Note that the way the image is sized will play a very important role in the look of your layout. Once you’ve chosen an image, visit the Design section, and navigate to Content Styling > Description Image to adjust the size of the image. The key is to balance the image size with the amount of text used in the description.
  • Enable Tab Link: This enables a link below the description text. Enabling the link toggle opens up a number of new parameters. You may then set the link destination and enter the link text.

Repeat the above steps for each of the tabs you plan to use.

WIDGET OPTIONS (DESIGN)

Extensive styling options are available for the gallery, header, text, and thumbnail descriptions. Individual settings in this area are labeled with their exact function, and will not be described here in detail.

You may find yourself bouncing back and forth quite a bit between various design and content settings in order to achieve a perfect layout. This is normal. Many settings impact other settings, and this widget has extensive options.