Block reveal

Section overview

The Block Reveal section is a dynamic content display that reveals different content blocks when a user hovers, clicks, or scrolls through a list of titles. It creates an interactive experience by seamlessly transitioning between content blocks.

Common use cases

• Product feature showcases where each title reveals detailed information about a specific feature

• FAQ sections where clicking on questions reveals the answers

• Step-by-step guides or processes where each step is revealed in sequence

• Portfolio showcases where different projects can be browsed through titles

Usage tips

• Keep title text concise for better readability, especially on mobile devices

• Ensure content blocks have similar heights for a consistent user experience

• Consider using the hover reveal option for desktop but rely on click actions for mobile

• Use complementary colors for titles and content to create visual hierarchy

• For scroll-based reveals, ensure the section has sufficient vertical space to properly trigger transitions

Section settings

Setting	Description
Enable hover reveal	When enabled, hovering over a title will reveal its content (default: disabled)
Top spacing	Sets the padding at the top of the section (default: 100px)
Bottom spacing	Sets the padding at the bottom of the section (default: 100px)
Color scheme	Controls the background color of the section (default: body)
Custom color	Sets a custom background color when custom color scheme is selected
Text color	Forces text to be light or dark, or uses the default based on the background
Border color	Controls the color of the section border (options: subtle or strong)
Enable color fade	Enables smooth color transitions as user scrolls through the section
Border position	Controls where borders appear on the section (options: none, top, bottom, or both)
Column width	Sets the width of the content column as a percentage (default: 50%)
Enable margin	Applies horizontal margin from global theme settings (default: enabled)
Enable swapped columns	Reverses the position of the titles and content columns (default: disabled)
Visibility	Controls whether the section appears on all devices, mobile only, or desktop only

Block settings

Content

The Content block represents each individual item in the reveal section, consisting of a title that triggers the display of its associated content.

• Block limit: 50 blocks

Setting	Description
Title	The title text shown in the list of clickable/hoverable items
Heading	The heading text displayed in the content area
Content	Rich text content to display when this block is selected
Button label	Text for the optional button
Url	Link destination for the button
Image	Optional image to display with the content
Show image as background	Displays the image as a background instead of inline
Video	Optional video to display with the content
Enable autoplay	Automatically plays the video when the block is revealed (default: enabled)
Enable mute toggle	Shows a mute/unmute button for videos (default: enabled)
Enable loop	Continuously loops the video playback (default: enabled)
Minimum height	Sets the minimum height for the content area in pixels (default: 250px)
Enable padding	Adds padding inside the content block (default: enabled)
Color scheme	Controls the background color of the content block
Border color	Controls the color of the content block border
Text color	Forces text to be light or dark, or uses the default based on the background
Button color	Selects from various button styles (primary, secondary, outline, etc.)
Enable gradient	Applies a gradient effect to the block background
Title size	Controls the font size of the title in the list
Text position	Positions text above or below media (image/video)
Vertical alignment	Aligns content vertically (top, middle, bottom)
Horizontal alignment	Aligns content horizontally (left, center, justify, right)