Wix Editor: Designing Your Collapsible Text

3 min read
Once you've added and set up collapsible text, you can customize the design and settings to match your site. Adjust the font, formatting, and spacing to suit your site's look and alignment, and to match your site and brand.
In this article, learn how to:

Customizing the design of your text

After setting up your collapsible text, you can customize the design including the formatting, alignment, and fonts.

To customize the design of your text:

  1. Click the text box.
  2. Click Change Design.
  3. Click Customize Design.
  4. Select Text from the dropdown menu, and customize it with the following options:
    • Themes: Select the text theme from the dropdown menu to quickly apply a font and size to your text.
    • Fonts: Choose how your text looks from the dropdown menu.
    • Font size: Make your text as small or as big as you want.
    • Formatting: Further customize your text by applying settings such as bold and italic. You can also choose a text, highlight, and outline color.
    • Alignment: Change how your text is aligned, and the direction it goes in. 
    • Character and line spacing: Make the spacing between your characters and lines smaller or more prominent.
    • Shadows: Add a shadow to give your text a 3D effect. You can customize different aspects of the shadow to make it more or less dramatic.
The design panel of collapsible text. The cursor is hovering over the font dropdown menu.

If you chose to collapse the text, you can design the expand and collapse buttons. If your text goes to a link, you can also change the link button to look exactly as you want. 

There are 3 states that you can customize:
  • Regular: How the button looks before a visitor interacts it.
  • Hover: How the button looks when a visitor hovers their cursor over it.
  • Disabled: How the button looks when it is disabled.
Adjust the button for each of these states separately, or apply your settings to all of the states so it looks the same throughout by clicking the Apply design to other states icon .

To customize your text box button:

  1. Click the text box.
  2. Click Change Design.
  3. Click Customize Design.
  4. Select Button from the dropdown menu.
  5. Click either the Regular, Hover, or Disabled tab to customize the design for each state with the following settings:
    • Themes: Select the text theme from the dropdown menu to quickly apply a font and size to your button.
    • Fonts: Choose how the text looks from the dropdown menu.
    • Font size: Make the button text as small or as big as you want.
    • Formatting: Further customize your button by applying settings such as bold and italic to its text. You can also choose a text, highlight, and outline color.
    • Alignment: Change how the text is aligned, and the direction it goes in.
    • Character and line spacing: Make the spacing between your characters and lines smaller or more prominent.
    • Shadows: Add a shadow to give your button a 3D effect. You can customize different aspects of the shadow to make it more or less dramatic.
The design panel of collapsible text. The cursor is hovering over the font size slider.

Did this help?

|