✓ In this article, we'll look at how to use the tab tool when starting a project from scratch, and how to set its parameters.
Creating a Tab in Kehio Editor
To integrate a Tab into your creation with Kehio Editor, follow these detailed steps to select the appropriate style and define its layout:
Style selection
Go to the project creation section of Kehio Editor.
Choose a Style: Click on the “Create” button on the home page. Once inside the editor, select the “Tab” style, which is usually displayed by default when a new project is created.
Set the layout
Tab purpose: Determine what function the tab will serve in your creation. This will influence how and where it will be displayed on your site.
Product block: Choose this option if the Tab is intended to present information about a product.
Left section: Select this view if you wish to position the Tab on the left with additional content (such as an image) on the ri
Right section: Choose this configuration if you prefer to place the Tab on the right with additional content on the left.
Full Width: Use this option if the Tab needs to fill the entire width of the section on your site, ideal for FAQs or detailed information.
Layout selection: Once you've decided on the position and function of the tab, select the corresponding view in the application header. Make sure that the layout you have chosen matches the intended purpose of the Tab.
Tab’s title block
Customize the block titles of your Tabs to improve the readability and visual appeal of your content. Here's how to do it step by step:
Edit title block
Access the title: ◦Click on your Tab title to select and modify it.
Add an Icon to the Title : ◦ If necessary, add an icon to your title to give it a more visually engaging feel.
Note: Add an icon here only if you wish to have different icons from one title block to another. If you prefer to use the same icon for all tabs, use the option available in Settings > Tab title > SVG icon. This icon will be automatically applied to all your Tab's title blocks.
Type your title : ◦ Enter the appropriate title for each tab.
Mobile adaptability: You have the option to add a different title for mobile versions, which is relevant when the title on the computer is too large and needs to be adapted for greater visual consistency on mobile devices.
Set Content Position : ◦ Adjust the position of the content within the title block to perfectly align the text or icon according to your design preferences.
Using the CSS Grid System : ◦ Define the CSS grid function with the grid system to divide your content as you wish within the Tab.
📖 To learn more about the grid system, you can read article dedicated to this subject to better understand how to use it effectively.
Advanced Customization
Go to Settings :
Once you've completed the above steps, go to the settings section by clicking on the cogwheel. This will allow you to start modifying the design of your tab, including color options, fonts, and other aesthetic elements to align the tab with the overall design of your site.
Setting: Tab
In the tab section, you can choose the alignment of your tab titles on the computer. This option is particularly useful when you're creating a tab on a half-section, with an image placed on the right or left, and the tab on the opposite side (for example, as in the template Fulgurance Powersuit V3).
Setting: Tab title
Here you can customize the title section of your tabs. Here are the options available to optimize the look and functionality of your titles:
Title color
Text: Choose the color of your title text, the hover color, and the color when the tab is open.
Background: Select the background color for the title, the hover color, and the color when the tab is open.
Font style
Weight options: Use the drop-down menu to choose between Light, Normal, Medium, Semi-bold, Bold, Extra-bold. This option helps you accentuate the importance of specific texts.
Font size: Adjust font size by clicking on the arrows in the size box. Values are expressed in “rem”, ensuring proportional scaling. Adapt text size for computers and mobiles, as well as for all screen resolutions thanks to media queries.
Margins between titles
Margin: Adjust the spacing between your tab titles. You can customize this spacing independently for desktop and mobile versions, to optimize the user experience on each device.
Underline
In this section of the title tab settings, you can customize the line below your title. You can configure the color, the hover color, the length, the spacing between the title and the line, as well as the thickness of this line, both when hovering and when the tab is active (selected by the customer).
SVG Icon
Icon usage: You can add an icon to all your tab title blocks. If you use the same icon throughout, this optimizes performance, as the icon will only be loaded once in your CSS, rather than repeating its call in HTML. This is particularly useful for decorative images, which will be ignored by search engines, thus improving site performance.
Icon Customization: Choose the size, margins and alignment of the icon to ensure it effectively complements the title text.
These options give you complete control over the presentation of your Tab titles, allowing you to create a consistent, attractive user interface while optimizing site performance.
Setting: Tab content
In this tab, you can define several aspects of the content of your Tabs, such as background color, padding and the color and thickness of the content block border.
Background color
Color selection: Use the dot to select the appropriate color for the background of your content. This color will be visible around the content inside each Tab.
Paddings management
Padding definition: Padding refers to the space between the internal content of a block and its borders. This parameter is essential for improving the readability and visual appeal of your content.
Customization on all devices: With Kehio Editor, you can adjust paddings to meet the specific needs of different devices using media queries. This ensures that your content is optimized for comfortable viewing on devices of all sizes, from phones to desktops.
Applying media queries: Using media queries, you can specify different padding values for specific screen sizes, enabling sharper adjustments and greater design responsiveness.
Margin management
Margin definition: The margin represents the space outside a content or block and its borders. It is used to visually separate different elements, creating better readability and a nicer layout.
Applying media queries: Using media queries, you can specify different margin values for specific screen sizes, enabling sharper adjustments and greater design responsiveness.
Adding content to your tab
Kehio Editor is designed to offer unlimited creativity, allowing you to compose Tabs perfectly adapted to your needs and integrating all aspects of your marketing. Here's how you can take advantage of this flexibility to add content to your Tabs:
Freedom of composition
Tailor-made creation: unlike other applications that may offer pre-configured sections, Kehio Editor gives you the freedom to build your Tabs from scratch. This means you're not limited by predefined configurations and can organize your content exactly as you wish.
Adding content: To add content to your Tab, simply access the content block in the editor. You can insert any type of content you like, whether text, images, videos or other interactive elements.
Item customization: Set up each item to suit your needs. Kehio Editor offers a range of customization options for each item type, allowing you to adjust details such as color, size, alignment, and much more.
📖 Discover all our items and learn how to configure them by reading this article.
Preconfigured solutions
Preconfigured Templates: If you'd rather not start from scratch, or if you're not yet comfortable with independent design, explore our various demo stores. You can import pre-configured Tabs and easily adapt them to your store in just a few minutes. This allows you to benefit from professional designs while customizing them to suit your specific needs.
By using Kehio Editor, you have all the tools at your disposal to create Tabs that not only meet your expectations in terms of design and functionality, but also effectively support your overall marketing strategy.
If you need help understanding or modifying your Tab, feel free to contact our support team at any time by e-mail ou live chat