Collapsible tabs
How to display necessary information under collapsible tab style with Sleek theme?
Last updated
How to display necessary information under collapsible tab style with Sleek theme?
Last updated
Collapsible tabs help break up longer descriptions and make them more visually appealing.
This comes in handy when you want to show important notice or information without taking up too much space.
In this article, we will show you how to add a Collapsible tabs section.
Steps
In the theme editor (Customize),> click Add section.
Select Collapsible tabs.
Make necessary changes.
Save the settings.
Adjust the Container (Fixed width/Narrow) for this section.
Select your preferred Layout for the section:
Add the content you want in the Heading to attract customers' attention
Leave it blank if you do not want to display it
You can also change the Heading size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
to make the content look balanced on your website.
Use the provided text fields to add a suitable Subheading and Description.
Leave them blank if you do not want to display them
You can also change the Text size to Small/ Base size/ Large to make the content look balanced on your website.
The call-to-action button will get the link from the provided Button link field.
Give the button a label, and a specific Button style:
Primary button
Secondary button
Underline button
You can also control the suitable spacing between the blocks by selecting Column gap and Row gap options.
Column gap: Extra large/ Large/Medium/Small/ Extra small/ None
Row gap: Extra large/ Large/Medium/Small/ Extra small/ None/ Same as the column gap
Select your preferred Style for the Collapsible tab blocks:
Adjust the Color scheme for the Collapsible tab blocks.
Moreover, you can also change the Font family to Body font/ Headings font and Heading size to Heading xs/ Heading sm/ Heading md/ Heading lg/ Base size for the Collapsible tab blocks.
Adjust the Icon size (Extra small/ Small/ Extra medium/ Medium/ Large) to make it look well-proportioned with the Collapsible tab heading.
You can add more blocks to the collapsible tabs (Collapsible tab/ Heading/ Image card).
You can choose a wide range of icons to display in the heading - Icon.
For content, add the needed message/info into the provided fields such as Heading, Collapsible tab content, and Custom liquid.
You can enable Default open if you want the tab always to open when entering the page.
Then you can credit content from a page to the collapsible tab by Tab content from the page section.
Fill in the suitable Heading, Subheading and change the Heading size (Heading 1/ Heading 2/ Heading 3).
Adjust the Color scheme for the image card block.
a) Block settings
This setting allows you to adjust the Desktop image position to the Left or Right and Vertical alignment to the Top/ Middle/ Bottom.
Moreover, you can use the slider to change the Desktop image width of the Image card block between 30% and 70%.
b) Image
Click Select image to assign the image to the banner on the desktop and use the slider to change the Image overlay opacity.
c) Content
Add some text for the banner’s Heading, Subheading, and Description. Leave them blank if you do not want to display them.
You can also change the Heading size (Heading 1/ Heading 2/ Heading 3) to make your image card block look more balanced.
Add a call-to-action button that directs customers to the target page specified in the Card link field. Add a Label then choose a Button style (Primary button/ Secondary button/ Underline button).
Furthermore, you can also modify the look as well as the position of the content by changing these properties:
Content position: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
Content alignment: Left/ Center/ Right
Content spacing: Small/ Medium/ Large
d) Mobile settings
Especially, if you want to display a different card image on the mobile device, you can insert another image to the Image field.
You are able to display the content below or above the collapsible tabs by enabling/disabling the Display the card above collapsible tabs checkbox.
