Display expanded text with Accordion/Toggle block
1. How to Add Accordion #
To add the Accordion Block, click on the Gutenberg editor block inserter plus icon(+) and then find Accordion from the search option. Just click on the Block and it will be activated.
After completing the 1st step by clicking on the icon the accordion block will be inserted.
2. General Settings #
The general settings tab has the accordion item and tab icon change options. This panel setting description is added below.
- Presets: This setting has four preset styles. Users can use the default preset style
- General Settings: From general settings set the Accordion type like accordion or toggle options. Also you can add new items from here with the accordion item title and content.
- General Settings => Accordion Item Gap => Set the accordion item Gap.
- Title Tag: You can set the title-Tag from H1 – H5
- Tab Icon: From these settings, you can enable an icon for the tab and also set the icon, icon positions and icon size.
- Title Icon: From these settings, you can enable an icon for the title and also set the icon, icon position and icon size.
3. Style Settings #
The style tab has the accordion title, icon, and content style panel. This panel style description is added below.
- Tab Title: Set the title style from these settings like Title Typography, Title color, Title hover color, Title Alignment, Title Background, Margin & Padding, Border also Active Tab Color.
- Tab Icon: From these settings, you can set the icon color, Hover color, Margin & Padding, Border, and active colors.
- Tab Content: From these settings, you can set content typography, content color, content alignment, Background, Margin & Padding also border.
4. Advanced Settings #
The advanced tab has block wrapper style margin & padding, background, border, and shadow change options. This panel style description is added below.
- Wrapper Margin & Padding: You can set the wrapper margin and padding
- Background: From here you can set the wrapper background like normal color background or gradient color background also a hover background. You can set the wrapper background image with an overlay.
- Border: You can set wrapper border, border size and border color also border-radius.
- Shadow: From here you can set the wrapper shadow also hover shadow.
Final Outcome #
Following these basic steps and more customizing, you can style your Accordion block and your want and get your outcome.
