> For the complete documentation index, see [llms.txt](https://modernpress-io.gitbook.io/modernpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modernpress-io.gitbook.io/modernpress/widgets/tabs.md).

# Tabs

### **Introduction**

The **Tabs Widget** in **ModernPress** allows you to display static content in an organized and interactive way. Unlike the **Category Tabs Widget**, this widget is designed for **manually added content**, making it perfect for feature descriptions, product details, FAQs, and structured information.

***

**Key Features:**

\
✅ 5 Unique Tab Styles\
✅ Manually Add Custom Content (WYSIWYG Editor)\
✅ Custom Icons for Tabs\
✅ Fully Customizable Layout & Styling\
✅ Smooth Animation Effects

***

### Adding the Tabs Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.

{% endstep %}

{% step %}
Edit a page with **Elementor**.

{% endstep %}

{% step %}
Search for **"Tabs"** in the **ModernPress Widgets** panel.

<figure><img src="/files/vVfOQoV3TwRz4aQHpWva" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Drag and drop the widget into your section.

{% endstep %}

{% step %}
Add tab titles, content, and customize the layout.

<figure><img src="/files/y6gRrgYd8XCuA3wy9CRg" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### **Layouts Overview**

#### **Layout 1 - Standard Tabs**

📌 Simple and clean horizontal tabs with clear text.\
🎨 Best for **structured content and information sections**.

<figure><img src="/files/pBHlKXH4K6SyuYCqfb06" alt=""><figcaption></figcaption></figure>

#### **Layout 2 - Underline Tabs**

📌 Tabs with an animated underline effect on selection.\
🎨 Ideal for **modern and professional websites**.

<figure><img src="/files/5v5MUwnX8q6lgCPYgsDf" alt=""><figcaption></figcaption></figure>

#### **Layout 3 - Pill-Style Tabs**

📌 Rounded, button-like tabs for a sleek appearance.\
🎨 Great for **interactive and stylish content displays**.

<figure><img src="/files/nfy6QoHOwT5qqvqXi6BJ" alt=""><figcaption></figcaption></figure>

#### **Layout 4 - Boxed Tabs**

📌 Each tab is enclosed in a box for a card-like effect.\
🎨 Works well for **eCommerce product details or feature highlights**.

<figure><img src="/files/whNKeZTvlyUprkzsKsBm" alt=""><figcaption></figcaption></figure>

#### **Layout 5 - Vertical Tabs**

📌 Tabs are aligned vertically for a unique layout.\
🎨 Perfect for **side navigation and content-heavy sections**.

<figure><img src="/files/5fapGAtFbx4L23X5pG8d" alt=""><figcaption></figcaption></figure>

***

### **Customization Options**

#### **Content Settings**

📌 **Add Multiple Tabs** – Set a title and content for each tab.\
🔄 **Custom Icons** – Assign icons to tabs for better visual appeal.\
🖋 **WYSIWYG Editor** – Add text, images, or any rich content inside tabs.

<figure><img src="/files/AaZ6ULkoaAlHsedvr1le" alt=""><figcaption></figcaption></figure>

#### **Style Settings**

🎨 **Tab Styles** – Choose from standard, underlined, pill, boxed, or vertical styles.\
📏 **Typography & Colors** – Customize text, background, and hover effects.\
🔲 **Spacing & Alignment** – Adjust tab positioning and layout gaps.\
⚡ **Animation Effects** – Enable smooth transitions when switching tabs.

<figure><img src="/files/IOc2AvoP6qcH6w4CAW6D" alt=""><figcaption></figcaption></figure>

#### **Advanced Features**

📱 **Responsive Adjustments** – Optimize tab display for mobile and tablet views.\
✨ **Hover & Click Effects** – Add animations for better user interaction.

***

### FAQs

<details>

<summary>Can I set a default open tab?</summary>

Yes! In the **Content Settings**, you can choose which tab is active by default.

</details>

<details>

<summary>Can I add images or videos inside the tab content?</summary>

Absolutely! The widget supports rich content, including **text, images, videos, and shortcodes**.

</details>

***

### **Need Help?**

For support, contact us at <support@modernpress.com>.