Tabs
Tabs
Welcome to the “Tabs” documentation.
Looking to integrate tabs into your website? Our block helps you to organize and display content in an interactive and user-friendly way.
In this guide, we'll show you how to use the editor to customize your tabs block.
Step 1 : Open the Editor
2. Click on "Edit" after choosing your template.
class="flex justify-center items-start h-auto w-auto" alt="">Step 2: Add and customize Tabs
1. In this panel, you can easily add and remove your tabs as needed.
class="flex justify-center items-start h-auto w-auto" alt="">2. Customize each tab by editing its name, selecting an icon, uploading an image, and modifying the content to your liking.
class="flex justify-center items-start h-auto w-auto" alt="">Step 3: Configure settings
Here, you'll manage the Tabs settings.
1.In the view section, you can adjust the max width and reverse the block if desired.
class="flex justify-center items-start h-auto w-96" alt="">2. Choose to show or hide tags, then customize its opacity, roundness and border.
class="flex justify-center items-start h-auto w-80" alt="">3. Additionally, you have the option to show or hide the image and specify its width and round.
class="flex justify-center items-start h-auto w-80" alt="">4. When dealing with tabs, you can fine-tune tab and active tab background opacity, select their position and alignment. Additionally, you have the option to add icons and borders as desired.
class="flex justify-center items-start h-auto w-80" alt="">Step 4 : Choose Colors
1.Within this panel, you can change the background color or set it as transparent. Additionally, you can choose text and theme colors that seamlessly align with your website's design.
class="flex justify-center items-start h-auto w-auto" alt="">Step 5: Preview
Lastly, you can click on “Preview” to see how your tabs block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">