June 16, 2023

Modern Gutenberg Tabs Design with Essential Blocks and GenerateBlocks

Play Video

Create a modern Gutenberg Tabs Design using Gutenberg, GenerateBlocks, and a free plugin called Essential Blocks for Gutenberg. The Essential Blocks plugin offers more than 30 different blocks, including fully responsive tabs with the ability to add icons or even custom images to the tab titles. By following Build That Website‘s tutorial, you’ll learn how to install and use Essential Blocks, how to style your tabs, and how to add content to them.

Steps For A Modern Gutenberg Tabs Design

  1. Install Essential Blocks Plugin
    Go to Plugins > Add New and search for Essential Blocks. Install and activate the plugin.
    Install Essential Blocks Plugin
  2. Create a New Page and add a Row
    After activating the plugin, create a new page where you’ll build your tabs. Adding a row will help you control your spacing on the page.
    Create a New Page and add a Row
  3. Add Tabs Component
    Click on the plus icon and start typing “tabs”. Select “Advanced tabs”.
    Add Tabs Component
  4. Add Images to Tab Titles
    By default, the tabs use icons. You can change this to images by selecting “image” in the tab settings.
    Add Images to Tab Titles
  5. Style the Tabs
    Go to the style tab and adjust the typography, padding, background color, icon size, and other settings to match your desired design.
  6. Add Content to the Tabs
    Add your desired content to each tab. You can add headlines, paragraphs, images, and even buttons.
    Add Content to the Tabs
  7. Finalize the Styling
    After adding your content, go back to the tabs and finalize the styling. This includes adding padding to the content, getting rid of the border, and turning off the triangle under the tabs.
    Finalize the Styling
  8. Add Custom CSS
    If necessary, you can add custom CSS to further style your tabs. Essential Blocks has a custom CSS panel for each block.
    Add Custom CSS

Benefits of A Modern Gutenberg Tabs Design with Essential Blocks

Learning how to build modern tabs with image or icon titles using Essential Blocks can greatly enhance the visual appeal and user experience of your website. It allows you to break away from the standard designs and create something unique and engaging.

Enhance User Experience

Tabs are an excellent way to organize and present content in a neat, compact, and systematic manner. They allow users to quickly navigate through different sections of content without having to scroll through long pages.

Increase Engagement

By using images or icons in your tab titles, you can make your tabs more visually appealing and engaging. This can attract more clicks and interactions, leading to increased user engagement.

Improve Website Aesthetics

Modern tabs with image or icon titles can significantly improve the aesthetics of your website. They can give your website a stylish, modern feel and help it stand out from the crowd.

Common Issues

  1. Images not showing properly
    If your images are not showing properly, make sure you have added SVG support for WordPress. You can do this by installing a free plugin like SVG Support.
  2. Tabs not stacking properly on mobile
    If your tabs are not stacking properly on mobile, you can adjust the responsive styling in the style tab of the Essential Blocks plugin.
  3. Spacing not showing up in the back end
    If you adjust the typography and the spacing is not showing up in the back end, you can wrap everything in a container block. This should make the spacing controls work fine.
  4. Tabs overflowing the container
    If your tabs are overflowing the container, you can fix this by adding a line of CSS in the custom CSS panel of the Essential Blocks plugin.

Required Resources

Credit to Build That Website
BuildThatWebsite YouTube Channel is a valuable resource for anyone interested in website development, particularly with WordPress. The channel offers a wide range of tutorials and guides
Modern Gutenberg Tabs Design with Essential Blocks and GenerateBlocks
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.