Brickspace Lab
Contact usContact ShopifyTry a theme
Space
Space
  • Space documentation
  • Getting started
    • Selecting theme colors
  • Theme typography
  • Guides
    • Using color and option swatches
    • Using device specific visibility
  • Dynamic discount popups
  • Adding product subtitles
  • Adding product badges
  • Replacing "Add to cart" for a product
  • Disable "quick add" for a product
  • Templates
    • Collection template
  • Product template
  • Blog template
  • Article template
  • Sections
    • Sections
      • Announcement
      • Header
      • Cart drawer
      • Menu drawer
      • Search drawer
      • Footer
      • Tooltip
      • Fixed menu
      • Featured product
      • Footer
      • Fixed menu
      • Slideshow
      • Email sign-up
      • Video
      • Alt collection grid
      • Banner
      • Block reveal
      • Blog posts grid
      • Collage
      • Collapsible content
      • Collection list grid
      • Collection list slider
      • Collection slider
      • Comparison table
      • Contact form
      • Countdown
      • Custom liquid
      • Discount
      • Featured collection grid
      • Icon grid
      • Image hotspot
      • Logo list
      • Marquee
      • Navigation slider
      • Product list
      • Recently viewed
      • Rich text
      • Search banner
      • Slider
      • Split banner
      • Static chat
      • Store locater
      • Tabs
      • Testimonial grid
      • Testimonial slider
      • Text highlight
  • General
    • Changelog
      • v2.0.0
      • v1.2.1
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
      • v2.0.0
    • Cloning a demo theme
      • Shimmer
Powered by GitBook
On this page
  • Section Overview
  • Section Settings
  • Block Settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Sections

Text highlight

Section Overview

The Text Highlight section creates interactive text that gradually reveals content as users scroll down the page, with words lighting up sequentially.

Common Use Cases

  • Creating engaging storytelling experiences that capture user attention

  • Highlighting key brand messaging or value propositions in a memorable way

  • Building creative landing pages that reward scrolling behavior

  • Showcasing testimonials or quotes with visual emphasis

Usage Tips

  • Keep text concise for maximum impact - shorter content works best with this effect

  • Consider using the sticky layout option for a fixed-position experience

  • Use complementary colors that maintain legibility when words transition from faded to highlighted

  • Test on mobile devices to ensure the scrolling experience is smooth across all viewports

Section Settings

Setting
Description

Top spacing

Controls the amount of padding above the section (0-500px)

Bottom spacing

Controls the amount of padding below the section (0-500px)

Color scheme

Sets the background color of the section from theme presets

Custom color

Defines a custom background color when "Custom" is selected

Text color

Determines text color appearance (Default, Force light, Force dark)

Border color

Sets the color for any borders (Subtle, Strong)

Enable color fade

Changes the background color of the page when scrolling to this section

Border position

Determines where borders appear (None, Top, Bottom, Top and bottom)

Column width

Controls the width of the content column (20-100%)

Horizontal alignment

Sets the horizontal alignment of section content (Left, Center, Right)

Enable margin

Applies horizontal margin from global theme settings when enabled

Enable sticky layout

Makes the section stay fixed on screen while scrolling through content

Visibility

Controls when the section is visible (All devices, Mobile only, Desktop only)

Block Settings

Heading

A large heading that reveals words as the user scrolls.

Setting
Description

Content

The heading text that will be revealed word by word

Horizontal alignment

Sets the text alignment within the block (Left, Center, Right)

Content

Regular paragraph text that reveals words as the user scrolls.

Setting
Description

Content

The paragraph text that will be revealed word by word

Horizontal alignment

Sets the text alignment within the block (Left, Center, Right)

Buttons

Adds interactive buttons below the text content. Limited to 1 block per section.

Setting
Description

Button label

Text displayed on the primary button

Button URL

Destination link for the primary button

Button color

Styling preset for the primary button appearance

Secondary button label

Text displayed on the secondary button

Secondary button URL

Destination link for the secondary button

Secondary button color

Styling preset for the secondary button appearance

Last updated 25 days ago

Was this helpful?