🚀 Pro version launching soon! Be among the first 100 subscribers to get 50% off. Subscribe now

Login

|

Ldogin
Download

Responsive Tab Settings

Ensure your tabs look and behave beautifully across all devices with Easy Tabs Block’s responsive controls. Use these settings to fine-tune how tab buttons and content display on desktop, tablet, and mobile—no coding required.

1. Accessing the Responsive Settings

  1. In the Gutenberg editor, select your Tabs block.
  2. In the block sidebar, open the Responsive panel.
  3. You’ll see three toggles for customizing mobile and tablet behavior.

2. Enable Scrollable Tabs

  • What it does: Allows horizontal scrolling of tab buttons when they exceed the container width (especially useful on narrow screens).
  • When to use: If you have many tabs or long tab labels that don’t fit in one row.
  • How to apply:
    1. Toggle Enable Scrollable Tabs to On.
    2. Preview on mobile/tablet; swipe left or right on the tab buttons to scroll.

3. Display Scroll Arrows

  • What it does: Shows “‹” and “›” arrows at each end of the tab list to navigate through scrollable tabs.
  • When to use: For better discoverability of hidden tabs on touch and non-touch devices.
  • How to apply:
    1. Ensure Enable Scrollable Tabs is already on.
    2. Toggle Display Scroll Arrows to On.
    3. Use the arrows or swipe to move between tabs.

4. Hide Tab Content on Mobile

  • What it does: Collapses all tab panels on mobile by default, showing only the active tab’s header. Users tap to reveal the content.
  • When to use: To conserve screen space and improve page load UX on small devices.
  • How to apply:
    1. Toggle Hide Tab Content on Mobile to On.
    2. On mobile view, only the selected tab label appears; tap it to expand the content.

5. Best Practices

  • Combine scrollable tabs with arrows for both touch and keyboard users.
  • Shorten tab labels where possible to minimize scrolling.
  • Test on real devices to confirm touch and click behavior.
  • Use nested tabs sparingly on mobile to avoid over-complex layouts.

With these responsive tab settings, you can craft mobile-friendly, no-code tabbed layouts that adapt perfectly from desktop to smartphone—right inside Gutenberg.