Add Tabbed Content

Learning How

Add an Accordion Add a Carousel Add Columns Add a Full Width Slider Add a Horizontal Bargraph Add a Masonry Layout
Add Tabbed Content Add a Timeline Add a Widget Row

View a PDF for actual theme settings for the tabbed content layout shown here. (Please note: some settings may have changed with recent updates).

CSS Tab Designs Pure CSS Tabs BBWP Tabs More Info

CSS Tab Designs For A More Organized And Professional Looking Website

Tabs are used to navigate and display different content on your website. The Basic Build WordPress theme uses a tabbed content layout to manage space and to make the website more attractive.

Using Pure CSS Tabs

Pure CSS tabs are defined as navigator and preferably used in sole page websites to view the multiple information in limited space and help to switch tab quickly. Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown.

Basic Build WordPress Theme Tabs

The BBWP theme tabs are perfect for website applications. Different subjects can easily be displayed with tabs UI design. You will love these simple and well designed tabs and managing the styling is a breeze. These are CSS only tabs and are compatible with modern browsers. No JavaScript required.

Multiple Tabs Allowed

You can add as many tabs as you want. However, you should keep in mind that while the tab container is responsive, too many tabs could be an issue on smaller devices.

Set the max-width of the tab container accordingly to accommodate the number of tabs included.

Select the Additional Options tab.
Select Yes to add additional options.
Select the Add Tabbed Content checkbox. Please note, you can only have one tabbed content per page.
Select Yes to Use a Tabbed Content Layout.
Set the top and bottom margin for the tabbed content wrapper.
Set the full tab container max-width.
Select the color of the active tab background.
Select the border color for the active tab.
Select the title color for the active tab.
Click the Add Tab button in the lower right corner. You can add as many tab items as desired.
Add a title for the current tab item. This is the tab name.
Add the content for the active tab. It will display when the tab in the layout is clicked.
Color transparency allowed for all color options.
If desired, you add content after the columns, as seen here. It is basically a second WordPress WYSIWYG editor.
1. If adding content after the tabbed content wrapper, set the top and bottom padding for the wrapper.