In this documentation, we will show you how to customize the EDD Tabs widget brought to you by the Element Pack Pro addon.

Inserting the EDD Tabs widget

Go to the Elementor editor page, search by the name of the widget “EDD Tabs” and it will appear on the bar. Just drag and drop on the page.

You will require both Elementor and Element Pack Pro addons installed on your WordPress site in order to use the widget.

Customize edd tabs using the Content Tab

EDD Tabs item exploration

Go to Content > EDD Tabs

By default, the edd tabs contain two items, “ Purchase History” and “Download History”. You can see that the Purchase History tab opened and showed a message.

Each item box lets you customize the Title, select a Tab Content from predefined EDD resources, and set an Icon for that specific tab item.

The predefined options pop up once you click on the Tab Content option. Then you can choose one option and the tab will display results from that.

Adding new items on tabs

Click on the add item button to add new tabs to the EDD Tabs widget.

Each time you can set the Title, select Tab Content, and set Icon for the new tab item.

Layout Tab Exploration

Go to Content > Layout

In the layout section, you can change the Layout (Top Default) of the tabs as well as customize the tabs Alignment (Left, Center, Right, and Full page). Nav spacing is for adjusting the space between the tabs. You can set the Content spacing also.

Customize the Additional section

Go to Content > Additional

In the additional section, you can set the Active Item No which will show one tab as active. Then select animation Transition (Fade, Scale Up, Scale Down, Scale Top, etc.) for the tabs.

Find Animation Duration option and Tabs Nav Sticky, Fullwidth Nav on Mobile, Swiping Tab on Mobile, Hash Location switchers below.

When the Tabs Nav Sticky switcher in on, you can set Offset for the nav.

Style Tab Customization

Customize the Style Tab

Go to Style > Tab

There are three subsections here; Normal, Hover, and Active.

You can customize the tab Background Color and Text Color, set a Box Shadow, adjust the Padding, Border, Radius, and Typography.

In hover, you can customize the Background Type and Text Color.

The Active subsection has identical options as the Normal section in order to hightlight the active tab item.

Content Section Customization

Go to Style > Content

Here, you can customize Background Type, Text Color, Link Color, Border Type, Border Radius, Padding, and Typography options.

Icon Customization

Go to Style > Icon

This section lets you customize the tab’s icons by Alignment, Color, and Spacing options.

Here, the Hover and Active subsections only offer icon Color customization.

Sticky section customization

Go to Style > Sticky

In case you turn on the Tabs Nav Sticky option from Content > Additional, you will be able to customize the sticky nav on this section.

Can customize the Background, Box shadow, and Border Radius.

More Options For Tabs Forms

The options displayed in above screenshot work with a Form type tabs item. For demonstration, we will add a new tab named profile editor.

Then select Profile Editor for the Tab Content option.

Label Customization

Go to Style > Label

In the profile editor section, you can customize the form Label color and Typography.

Input section customization

Go to Style > Input

In the input section, you can customization Placeholder Color, Text Color, Input Text Color, Background Color, Textarea Height, Padding, Border type color, Border radius, etc. options to decorate the form input fields.

Submit Button Customization

Go to Style > Submit Button

Submit button has two modes; Normal and Hover.

For Normal mode, you can customize the Text Color, Background Color, Border, Box Shadow, Padding, and Typography.

In the hover section, you can set the button Text Color and Background Color.

Profile Editor Additional section customization

Go to Style > Profile Editor Additional

The additonal pack of options for Profile Editor has Fullwidth Input, Fullwidth Textarea, and Fullwidth Button switchers along with Fieldset Color, Fieldset Width, and Padding options.

Like this, you can create the EDD Tabs widget looks more professional and fit for your website/theme.

Video Assist

Video tutorial for EDD Tabs widget coming soon. Please visit the demo page for examples.

Thanks for being with us.