Your First Tabs

Step 1: Insert Block

insert-block.mp4

1. Open the page or post in the Block Editor.
2. Click the “+” Add Block button.
3. Search for “Tabs” and click it.

Step 2: Starting Point

1. Use a Design Pattern:

Pre-designed tabs ready to customise.

from-patterns.mp4

2. Use a Variation:

Blank tabs with a preset structure.

from-variation.mp4

3. Build from Scratch:

Start empty and add blocks yourself.

from-scratch.mp4

Tip

For Beginners

• Start with a pattern if you’re new; it’s faster and gives you a visual base.
• Use the List View to manage tabs more easily.
• Experiment with different core blocks inside tabs for creative layouts.

Step 3: Adding Tab

add-tab.mp4

• Select tabs: click on the tab title to select and make the toolbar visible
• To add a tab: click “+” in the block toolbar or use the list view.
• Add content: can contain any block images, headings, buttons, videos, testimonials, etc.

Step 4: Managing Tabs

manage-tabs.mp4

• Select tabs: click on the tab title to select and make the toolbar visible
• Reorder: click “<” or “>” arrow icons in the block toolbar or use the list view to re-order tabs.
• Deleting: on the select tab, click the three dots to access the delete option to remove the tab and its content

Step 5: Customisation

customisation.mp4

In the Block Settings Panel (right sidebar), you can:

• Select the Tabs block.
• Explore settings in the sidebar
• Adjust direction
• Adjust spacing.
• Styling

Customise tabs as needed.

Step 6: Responsive Behaviour

responsive.mp4

Currently, there are no out-of-the-box settings as tabs adapt to screen size. We may have responsive controls in the future.

---

The Blablablocks Tabs Block combines flexibility and familiarity. You can build anything from simple to rich content, all within the WordPress block editor.