Login
Download

How to Use the Pre-Designed Patterns

Easy Tabs Block includes a variety of pre-designed tab patterns, helping you quickly create professional-looking tabbed content in your WordPress site without any coding.

We are going to show you how to use a pattern for your website-

Steps to Use Pre-designed Patterns

Add Tabs Block:

To add Easy Tabs to your WordPress page or post, start by opening the page or post where you want to insert the tabs. Next, click on the plus icon (+) to add a new block. In the block search bar, type “Easy Tabs” and select the Easy Tabs Block from the results.

add-the-easy-tabs-block-to-the-editor
Add the Easy Tabs Block

Select a Pattern:

After adding the block, click on the “Choose Pattern” button. This will open a modal displaying multiple pattern options. Browse through the available designs and click on the one that best suits your needs to insert it into your page.

Open Easy Tabs Block Patterns Modal
Choose Pattern

Customize Content:

Each tab can contain any Gutenberg block, including text, images, videos, or shortcodes. Simply click inside each tab to replace the placeholder content with your own custom content.

This is a screenshot of available gutenberg blocks
Use the + icon to add any block inside the tab

Adjust Styling:

Use the block sidebar settings to customize colors, typography, spacing, and other styling options to match your design. You can also define styles for the active and hover states of the tabs directly from the sidebar for better visual control.

This is a screenshot of style section
style section

Available Patterns

Horizontal Tabs: Perfect for main content areas, displaying clear, easy-to-navigate tabs horizontally.

Vertical Tabs: Ideal for sidebar navigation, making content accessible in a vertical format.

Edge-aligned Tabs: Provides a modern look with tabs aligned neatly to the page edges, suitable for highlighting specific content.

Key Benefits

Fast Setup: Choose from over 30+ free, ready-to-use tab patterns and insert them instantly into your page.

Flexible Content: Integrate text, images, videos, buttons, or shortcodes seamlessly.

Full Customization: Adjust colors, fonts, spacing, and borders directly from the block settings, no CSS required.

Responsive Design: Patterns automatically adapt to mobile, tablet, and desktop devices.

Performance Optimized: Lightweight patterns that keep your site loading fast.

Use Cases

  • Organizing FAQ sections
  • Creating feature comparisons
  • Displaying pricing tables
  • Showcasing product features or testimonials

With icons in your tabs, you can create more engaging, user-friendly navigation that guides visitors to key content at a glance!