✓ In this article, we'll look at how to use the accordion style when starting a creation from scratch, and how to set it up.
Creating an accordion in Kehio Editor
To integrate an accordion into your creation with Kehio Editor, follow these detailed steps to select the appropriate style and define its layout:
Select Style
Go to the creation section of Kehio Editor.
Choose a Style: Click on "Create" from the home page. Once inside the editor, select the "Accordion" style, which is usually displayed by default when creating a new project.
Preview
Accordion purpose: Determine what function the accordion 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 accordion is intended to display product information.
Left Section: Select this view if you wish to position the accordion on the left with additional content (such as an image) on the right.
Right Section: Choose this configuration if you prefer to position the accordion on the right with additional content on the left.
Full Width: Use this option if the accordion needs to occupy the entire width of the section on your site, ideal for FAQs or detailed information.
Select View: Once you've decided on the location and function of the accordion, select the corresponding view in the application header. Make sure that the chosen layout corresponds to the accordion's intended purpose.
These steps will help you set up an accordion correctly, ensuring that it fits in well with your overall site and performs its function effectively, whether displaying detailed product information or providing answers in an FAQ section.
Select your template
1- Analyzing the Objective: Each accordion model is designed with a specific opening structure that may be better suited to certain functions on your site.
Template 1: Ideal for detailed product information, this template facilitates the structured presentation of product features.
Template 12: Best suited for FAQ footers, offering easy navigation and quick reading of questions and answers.
2- Choose from Templates: Kehio Editor offers 12 different accordion templates, each with customization options to perfectly match your corporate design.
Access the drop-down menu "Template ".
Browse the 12 available templates to find the one that best matches your objectives and desired structure.
Accordion block title
Customize the block titles of your accordions to improve the visibility and visual appeal of your content. Here's how to do it step by step:
Edit Block Title
Access Title :
Click on the title of each tab of your accordion to select and edit it.
Add Icon to Title:
If necessary, add an icon to your title to make it more visually appealing.
Enter Your Title:
Enter the appropriate title for each tab.
Adapt for mobile: You have the option of adding a different title for mobile versions, which is relevant when the title on the computer is too large and requires adjustment for better visual harmony 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.
Use CSS Grid System:
Define the CSS grid function with the grid system to divide your content according to your wishes inside the accordion 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
Access 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 accordion, including color options, fonts, and other aesthetic elements to align the accordion with the rest of your site design.
Setting : Accordion
The Accordion tab gives you access to the main functions and modifications of your accordion. Please note that some settings may vary slightly depending on the template you've chosen, according to the specific options of each template.
1. Number of columns
Option only available on mobile**: Due to the proportions of mobile screens, this function is recommended only for a full-page accordion.
Choose number of columns: You can choose to display your accordion in 1 or 2 columns.
Gap management**: If you select 2 columns, you can adjust the gap between them for better visual organization.
2.Opening style:
Single or multiple tabs**: Choose whether only one tab can open at a time (the others close automatically) or whether several tabs can remain open and must be closed manually.
3. First Display Opening Choice
First tab open or closed: Decide whether the first tab of your accordion should be open or closed when the page first loads.
4. Title block weight
Adjust thickness: Choose the weight of your accordion's title block to visually emphasize section titles.
5. Tab Margins
Tab margins: Define the margins between your accordion's tabs to ensure clear, aesthetic separation between elements.
6. Icon Element
Icon customization**: Modify your accordion's opening icon by choosing from over 2000 icons available in our library. Choose chevrons, +/- signs, or other special icons to energize and harmonize your accordion.
Icon size and color**: adapt icon size for computer and mobile versions, select icon color, hover color and color when tab is open.
Icon Background Color**: Modify the icon background color, hover color and color when the tab is open for perfect integration with your site design.
These options allow you to thoroughly customize the look and function of your accordion, ensuring that it fits perfectly with the user interface and overall experience you want to deliver on your site.
Setting : Accordion title
This tab lets you customize the title section of your accordion. Here are the options available to optimize the appearance and functionality of your accordion titles:
Title color
Text: Choose the text color for your title, 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 emphasize the importance of certain 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, and for all screen resolutions thanks to media queries.
Alignment
Alignment options: Choose from Left-align, Center, Right-align or Justify. This allows you to position your text according to the design of your page.
Adaptability: Alignment can be adjusted separately for mobile devices and computers, thanks to media queries.
Line height
Height adjustment: Set the height of the line so that your title block is perfectly proportioned to the rest of the content.
SVG Icon
Icon use: You can add an icon to all the title blocks of your accordion tabs. 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 accordion titles, allowing you to create a consistent, attractive user interface while optimizing site performance.
Setting : Accordion content
In this tab, you can define several aspects of the content of your accordion 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 accordion 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 for all media: 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 finer adaptation and better design responsiveness.
Borders
Border weight: Set the weight of the border of your content when the tab is open. This border adds a visual demarcation that can help distinguish content from background or other elements on the page.
Color choice: Select the border color to match or contrast with the background color and overall style of your accordion. This consistency or contrast can enhance the visual impact of your design.
Add content to your accordion
Kehio Editor is designed to offer unlimited creative freedom, allowing you to compose accordions perfectly tailored 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 accordions:
Freedom of Design
Tailor-made creation: unlike other applications which may offer pre-configured sections, Kehio Editor gives you the freedom to build your accordions 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 accordion, 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.
Pre-configured solutions
Pre-configured 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 accordions 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 requirements.
Using Kehio Editor, you have all the tools at your disposal to create accordions 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 accordion, feel free to contact our support team at any time by e-mail or live chat .