Pro Tabs Installation

1.0 Docs created October 29th 2013

There are two ways of installing Pro Tabs. Manually using FTP or automatically through the concrete5 marketplace.

Automatic installation through the concrete5 marketplace is the recommended way to install any concrete5 add-on or theme.

This offers 1 click installs and upgrades.

This method also helps keep you up to date. When a site is connected to the concrete5 community, a message is displayed in the concrete5 dashboard letting you know when an update for an add-on or theme is available. 

Automatic Install

1) Start by connecting your site to the concrete5 community. In your concrete5 dashboard, in the intelligent search on the top right, type the word "connect". This will bring up the page "connect to the community" Visit this page.

2) On visit  My Account > Projects

3) View the project that was automatically created when you connected your site to the concrete5 community.

4) Attach the license for Pro Tabs to your project.

5) In your concrete5 dashboard visit  Dashboard > Install

6) Install Pro Tabs 

Manual Install

1) On visit  My Account > Transactions > Licenses

2) Click "download archive" on the right side of Pro Tabs

3) Unzip the archive on your desktop

4) Upload the package to your /packages directory in the root of concrete5

5) In your concrete5 dashboard visit  Dashboard > Install 

6) Click install Pro Tabs 

Add to page

1) Put your page in edit mode

2) Click on the editable area that you would like to add Pro Tabs to and select "add block"

3) Scroll down to the bottom and select "Pro Tabs"

4) Inside the blocks settings input a unique name for the block. (This name will be used for the stacks that pro tabs automatically creates)

5) Select how many tabs you would like displayed in your tabs or expand/collapse 

6) Select which tab you would like as the "active" tab when the page loads.

7) Click add block

Set Custom Template

There are four custom templates included with Pro Tabs.

  • Two Non-Bootstrap based templates (tabs, expand/collapse)
  • Two Bootstrap 3 based templates (tabs, expand/collapse) (require bootstrap 3.x based theme)

The default template, which does not have to be set, is the Non-Bootstrap Tabs template.

8) After the block is added to the page, click on the Pro Tabs block and from the pop up select "custom template".

9) From the pop up select one of the bootstrap custom templates then click save.

Configure Stacks

Once Pro Tabs is added to your page and configured, exit edit mode and publish edits.

Once your edits are published, Pro Tabs will automatically create it's stacks using the unique name that you gave the block. 

1) In your concrete5 dashboard go to Dashboard > Stacks

On this page you will find the stacks that were created using the unique name you gave them.

Each tab is made of 1 "header" and 1 "body" stack.

The "header" stack is where the the tabs name is input. The "body" stack is where the tabs content is input.

In the example provided we used the name "protabs"

"protabs Header1" goes with "protabs Body1", "protabs Header2" goes with "protabs Body2", etc, etc.

This is the same way it will work with your custom name. 

2) Click on the stack that you would like to configure

3) On the stacks window click add block

4) Any type of block can be used in the tabs title area. In this example we are adding a content block to add text for the tabs title

5) After you add a block to the stack, click "approve changes". This is an important step to not miss. Each time a stack is edited, it will need to be "approved".

Once all header and body stacks are configured, the tabs are fully configured.

You may find it easier to open two browser windows when working with Pro Tabs.

One with the stacks window and one with the page that you added the tabs block to. This way if you need to make adjustments, you can easily refresh the page without the need to go back and forth between the stacks page and the page the tabs block is added to.


Can multiple expand/collapse blocks be used on the same page?

Yes, multiple Pro Tabs blocks can be added to the same page.

Can both types of expand/collapse templates be used on the same page?

No, both types of expand/collapse templates can not be used on the same page.

Multiple expand collapse templates of the same kind can be used on the same page.

Can both types of tabs templates be used on the same page?

Yes, both types of tabs templates can be used at the same time on the same page.

© 1998-2014 HostCo Inc. All Rights Reserved

powered by concrete5