Pee-Aye Creative Divi 5 Plugins Demo & Admin Sandbox

Home $ Divi Tabs Maker $ Tabs Layout Options

Layout Option

This page demonstrates the layout and design options available in the Divi Tabs Maker module. These examples show how you can customize tab positioning, width, navigation behavior, shapes, and other layout features to create flexible tab designs.

Default Divi Tabs Module

This example shows the default Divi Tabs module. The built-in module provides basic functionality with limited design and layout customization options.

This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page.

This section contains example text that represents typical content inside a tab. It allows you to review how paragraphs will look and how the layout handles multiple lines of information. Using placeholder text helps during the design process before the final content is ready.

Here you can see a preview of how descriptive text may appear within the tab panel. The purpose of this content is only to simulate real information so the design can be tested properly. It helps evaluate spacing, readability, and overall presentation.

This is temporary demonstration content placed here to illustrate how information can be structured in this area. It gives a realistic idea of how text blocks will look when actual content is added later. Adjustments to styling and layout can be tested using this example text.

Divi Tabs Maker Module

This section introduces the Divi Tabs Maker module, which adds many advanced layout and design options compared to the default Divi Tabs module. The following sections demonstrate these features in different examples.

Tabs Position

This example demonstrates how you can change the position of the tabs and content. Tabs can be placed on the top, bottom, left, or right side of the content.

Tabs Top - Content Bottom
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.
Tabs Left - Content Right
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. It allows them to see how paragraphs flow within the available space. This type of content is useful when testing layout behavior and readability. Once the design is finalized, the placeholder text can easily be replaced with real information.
Tabs Right - Content Left
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. It allows them to see how paragraphs flow within the available space. This type of content is useful when testing layout behavior and readability. Once the design is finalized, the placeholder text can easily be replaced with real information.
Tabs Bottom - Content Top
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.

Fullwidth Equal Tabs

This example demonstrates the Fullwidth Equal Tabs option. When the tabs are positioned at the top or bottom, this setting allows all tabs to automatically resize and distribute evenly across the available container width.

Tabs Top - Content Bottom
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.
Tabs Bottom - Content Top
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.

Tab Width

This example demonstrates how the tab width can be adjusted when the tabs are positioned on the left or right side. By default, tabs take up 25% of the container width, but this value can be easily customized.

Default 25%
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. It allows them to see how paragraphs flow within the available space. This type of content is useful when testing layout behavior and readability. Once the design is finalized, the placeholder text can easily be replaced with real information.
Custom 15%
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. It allows them to see how paragraphs flow within the available space. This type of content is useful when testing layout behavior and readability. Once the design is finalized, the placeholder text can easily be replaced with real information.
Custom 50%
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.

Active Tab Pointer

This example shows how to enable a pointer indicator for the active tab. The pointer highlights the currently active tab to make navigation clearer.

Show Active Tab Pointer - Outside
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.

Show Active Tab Pointer - Inside

This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. It allows them to see how paragraphs flow within the available space. This type of content is useful when testing layout behavior and readability. Once the design is finalized, the placeholder text can easily be replaced with real information.

Tabs With Divider Line

This example demonstrates the vertical and horizontal divider line feature. Add a spacing between tabs and highlights the active tab pointer for better visual separation.

This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.

Auto Switch Tabs

This example demonstrates the auto switch tabs feature. Tabs automatically switch after a set time interval and display a progress bar. The auto switch stops when a user manually clicks a tab.

This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.

Hover Switch Tabs

This example shows tabs positioned on the left side with a customized tab container width of 15% and spacing of 5px between tabs. The tab switching method is changed from click to hover, so tabs switch when the user moves the mouse over them.

This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. It allows them to see how paragraphs flow within the available space. This type of content is useful when testing layout behavior and readability. Once the design is finalized, the placeholder text can easily be replaced with real information.

Tab Shape Style 1

This example demonstrates the Tab Shape 1 style and enables tab navigation buttons such as Previous and Next for easier navigation between tabs.

PrevNext
This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.

Tab Shape Style 2

This example demonstrates the Tab Shape 2 style and uses numbered navigation controls. Navigation controls can be displayed as dots or numbers, similar to slider navigation.

This is sample placeholder content used to demonstrate how text will appear inside this tab. It helps preview spacing, typography, and alignment within the layout. Designers often use temporary text like this while building the structure of a page. Once the layout is finalized, the real content can easily replace it.