Add Spoiler Text

Hiding and showing spoilers or other text is quick and simple with the Spoiler component. To get started, drag the component to a page of your site. 
 

First, click on the button in the component. This will unhide your spoiler text so you can click in it to edit it. It supports all the formatting options available for most editable text. You should also see the component options panel is now shown on the side of the editor. It has the following options:

• Spoiler Label - Edit this field to change the text shown on the button.
• Button - By default the button is styled to match what you have set in your site settings, but you can customize it further with the following options:
  • Button Text Color - Change this to custom to choose a color other than the default.
  • Button Background - In addition to a color, you can also set a gradient or image as the background.
  • Button Border - With this option you can change the width of the border from none to extra large.
  • Shape - As with the other options, by default this inherits the default of your site. You can change this to a different shape.
• Design - The options within the design options group affect the styling of hidden text and the component itself.
  • Text Color - Change this option to customize the hidden text to something other than your site default.
  • Font - As with the previous option, you can use this option to customize the font used by hidden text.
  • Border - With these options you can customize the look of the border around the hidden text of the component.
  • Opacity - Changing this option to a percentage will adjust how transparent your spoiler text is. This can be useful with hover options listed below.
• Spacing - Both of the options in this group affect spacing around the hidden text of the component. You can also set both separately for large and small screens by clicking the desktop/mobile icon for each option.
  • Margin
  • Spacing
• Hover - Several settings can be customized to look different when a visitor hovers over the component with a mouse. To change this, click on Hover at the top of the options panel.
  • Border
  • Button Background
  • Border Color
  • Button Scale
  • Text Color
  • Scale