Columns, Tabs, and More

Using Visual Shortcodes

The visual shortcodes help add content formatting within the main body of the page and interactive elements for displaying content. All visual shortcodes are represented in the third line of the toolbar above.

shortcode menu items

Column Formatting

You can use column formatting shortcodes to break your content into columns of varying page widths. For example:

One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue sagittis diam, ut interdum felis ultricies at. Proin neque magna, facilisis eget mollis et, commodo et odio.

One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue sagittis diam, ut interdum felis ultricies at. Proin neque magna, facilisis eget mollis et, commodo et odio.

See all the variations on column width shortcodes.

Tabs and Toggles

These dynamic content containers allow you to use larger amounts of content on a page without making the user scroll endlessly.

  • TAB tab1 CONTENT

    Tab 1 shows on page load by default. Mauris congue sagittis diam, ut interdum felis ultricies at. Proin neque magna, facilisis eget mollis et, commodo et odio.

  • TAB tab2 CONTENT

    When you switch to Tab 2, you no longer see the content under Tab 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue sagittis diam, ut interdum felis ultricies at.

  • TAB tab3 CONTENT

    Proin neque magna, facilisis eget mollis et, commodo et odio.

toggle1

TOGGLE toggle1 CONTENT

Toggles are closed by default. When you open a toggle, it stays open until you close it. Thus, all of the toggles could be opened by the site user at the same time.

toggle2

TOGGLE toggle2 CONTENT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue sagittis diam, ut interdum felis ultricies at.

toggle3

TOGGLE toggle3 CONTENT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue sagittis diam, ut interdum felis ultricies at.

Accordion1

ACCORDION Accordion1 CONTENT

Accordions will open one content area at a time. If accordion 1 is open and I select accordion 2, then #1 will close as #2 opens.

Accordion2

ACCORDION Accordion2 CONTENT

Opening this accordion closes any other accordion which was open. Mauris congue sagittis diam, ut interdum felis ultricies at.

Accordion3

ACCORDION Accordion3 CONTENT

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Slide1

    SLIDE Slide1 CONTENT

    Slide 1 content is visible on page load by default. Mauris congue sagittis diam, ut interdum felis ultricies at. Proin neque magna, facilisis eget mollis et, commodo et odio.

  • Slide2

    SLIDE Slide2 CONTENT

    I can add an image in a slider content area.

    small graphic of shortcode menu

  • Slide3

    SLIDE Slide3 CONTENT

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue sagittis diam, ut interdum felis ultricies at. Proin neque magna, facilisis eget mollis et, commodo et odio.