Advanced Accordion Content

Content Controls


The controls in this section allow you to customize the main content of the Accordion Content Element. You can set the title and specify which HTML tag is used for the title.

  • Title – This is where you can enter the text for the title of the accordion section. It provides a brief header for the content that will be expanded upon.
  • Title Tag – Choose the appropriate HTML tag for the title from a dropdown list. This affects how search engines interpret the importance of the title.

Design Controls


This section offers controls for the overall look and spacing of the Accordion Content Element’s container. You can select a background color and adjust the padding around the content.

  • Background – Pick a color for the background of the accordion container. This can help your accordion stand out or blend in with your website’s design.
  • Padding – Define the spacing between the edge of the container and its content.
    • Padding – Adjust specific values for padding like top, bottom, left, and right. This provides a more detailed customization of the container’s spacing.


The controls here allow you to modify the alignment and spacing of the Accordion Content Element. Adjust the horizontal and vertical positioning, and set specific gaps between elements.

  • Align – Set the horizontal alignment of the content inside the accordion, like centering or aligning it to the left or right.
  • Vertical Align – Determine the vertical alignment of content, whether it’s at the top, middle, or bottom of the container.
  • Gap – Define the space between different accordion items, ensuring content is neatly separated.
  • Horizontal – Customize how content is aligned and positioned horizontally.
    • Align – Choose from a dropdown how content should be lined up horizontally inside the accordion.
    • Vertical Align – Select the vertical alignment for the content when the layout is set to horizontal.
    • Vertical At – Determine at which screen size or breakpoint the vertical alignment settings should be applied when in a horizontal layout.

Text Colors

These controls enable you to fine-tune the colors of various text elements within the Accordion Content Element. Set distinctive colors for headings, general text, links, and any branded content.

  • Headings – Choose a color specifically for the headings inside the accordion. This ensures they stand out and are easily readable.
  • Text – Pick a color for the general body text in the accordion, ensuring it contrasts well with the background.
  • Link – Set a distinct color for any links within the accordion content to make them easily identifiable.
  • Brand – If you have specific brand-related text or elements, you can assign them a unique color with this control.