Learn how to use the Tabs Block in Grigora Website Editor to organize and present your content in a clean, user-friendly way. Tabs make it easy for visitors to switch between multiple pieces of content without leaving the page, improving both engagement and user experience. Whether you're building a blog, business website, or portfolio, Tabs Block helps you structure your content better and make your site more interactive.
Adding the Tabs Block
Open the Grigora editor and click on "Add Elements" to access the component library. Search for "Tab" and drag and drop the tab block into the editor where you want your tabbed content to appear.
By default, you'll see three tabs in your new tab block. You can click the plus icon to create more tabs as needed for your specific content organization requirements.
Setting Up Tab Content
Renaming Your Tabs
Let's rename the tabs to match your content. Double-click on each tab title and enter your new titles that clearly describe what content each tab contains. Use descriptive, concise labels that help users understand what they'll find in each section.
Adding Content Inside Each Tab
Now let's add content inside each tab for a complete user experience:
Open an inner tab to access its content area. Add a container as the foundation for your tab content. Add a text block inside the container for your primary content. Repeat this process for all tabs so each tab has its own organized content container
This systematic approach ensures consistent content structure across all your tabs.
Customizing Tab Settings
General Settings Configuration
In the general settings, you can customize how your tabs behave:
Trigger: Change trigger to "Mouse Over" so tabs switch on hover for more responsive user interaction
Default Tab: Set "Initially Open" to the tab you want displayed by default (for example, "Customer Success")
Layout: Enable "Full Width Titles" so tab titles span the entire width of the tab element for better visual balance
Adding Icons to Tabs
In the title section, toggle "Logos" on to display icons for each tab title, making your tabs more visually appealing and easier to identify.
Assign a different logo icon per title that represents each tab's content. Set icon position to "Top" for clear visual hierarchy. Adjust icon size and set title text size for optimal readability and visual impact.
Advanced Layout Settings
In advanced settings, configure the visual structure:
Content Border: Set content border to zero for a clean content area without visual distractions
Title Border: Open title border settings and set bottom border to create clear separation between tabs and content
Title Layout: Open title layout and set padding for proper spacing around tab titles
Style Customization
Normal State Styling
In title normal settings, establish your default appearance:
Text Color: Set text color to dark gray for good readability
Border: Set border to light gray for subtle definition
Hover Effects
For title hover state, create engaging interactions:
Text Color: Set text color to pink (or your brand color) for visual feedback
Border Color: Set title border color to pink to match the text
Transitions: Add transition timing for smooth color changes when users hover
Active State Styling
For title active state, clearly indicate the selected tab:
Text Color: Set text color to pink to maintain consistency
Background: Set background to light pink for clear active state indication
Border: Set title border to pink for complete visual coherence
Content Area Styling
In content settings, set the content background color to match your overall theme and ensure visual consistency across your website design.
Final Optimization
Publishing Your Tabs
Finally, save and publish your website to make your new tabbed content live. Your tab layout is now ready with:
-
Renamed tabs with descriptive titles
-
Custom icons for visual appeal and clarity
-
Hover and active styles for interactive user experience
-
Optimized content containers for clean presentation
Benefits of Using Tabs
This approach gives you clean, responsive tabs that look professional and provide several key advantages:
-
Improved User Experience by organizing related content in an accessible format
-
Space Efficiency by allowing multiple content sections in a compact area
-
Enhanced Navigation with clear visual indicators and smooth interactions
-
Professional Appearance with customizable styling that matches your brand