Appearance

Text Block ​

A versatile rich text content block with advanced typography options, visual effects, and responsive alignment controls for creating engaging written content.

Business Impact ​

Well-designed text content directly influences customer engagement and conversion by:

  • Clear Communication: Convey your message effectively with proper typography
  • Visual Hierarchy: Guide reader attention through strategic text styling
  • Brand Expression: Reinforce brand personality through typography choices
  • Accessibility: Ensure content is readable across all devices and abilities

Key Features ​

  • Rich Text Editor: Full formatting capabilities including bold, italic, links, and lists
  • Typography Styles: Preset options for consistent text hierarchy (Lead, Quote, Caption)
  • Visual Effects: Gradient, shadow, glow, and outline text effects
  • Responsive Alignment: Separate alignment controls for mobile and desktop
  • Custom Colors: Override theme colors for specific design needs

Settings Overview ​

Content Settings ​

  • Rich Text: Full WYSIWYG editor for text formatting
  • Desktop Alignment: Left, center, or right alignment for larger screens
  • Mobile Alignment: Independent alignment control for mobile devices

Typography Style ​

  • Normal: Standard body text styling
  • Large: Increased size for emphasis
  • Small: Reduced size for secondary information
  • Lead: Bold, larger text for introductory paragraphs
  • Quote: Styled blockquote with border accent
  • Caption: Small, muted text for image descriptions

Text Effects ​

  • Gradient: Color gradient backgrounds for eye-catching text
  • Shadow: Drop shadow with customizable color, size, and direction
  • Glow: Luminous effect with adjustable intensity and color
  • Outline: Text stroke for enhanced visibility over backgrounds

Layout Settings ​

  • Custom Colors: Override theme colors when needed
  • Padding: Control spacing around the text block
  • Visibility: Hide on mobile or desktop when appropriate
  • Advanced Settings: Add custom CSS classes and IDs

Best Practices ​

Content Strategy ​

  • Use typography hierarchy to guide reader flow
  • Keep paragraphs concise for better readability
  • Choose effects that enhance, not distract from, your message
  • Maintain consistency across similar content blocks

Visual Design ​

  • Use lead styling for important introductory text
  • Apply quotes for testimonials or highlighted statements
  • Use caption styling for supplementary information
  • Ensure sufficient contrast when using effects

Performance Considerations ​

  • Rich text blocks load efficiently with minimal impact
  • Visual effects are CSS-based for optimal performance
  • Responsive alignment maintains usability across devices

Common Use Cases ​

  1. Product Descriptions: Detailed information with proper hierarchy
  2. Brand Stories: Engaging narratives with visual emphasis
  3. Feature Lists: Organized content with consistent formatting
  4. Testimonial Quotes: Customer feedback with quote styling
  5. Instructions: Step-by-step guidance with clear formatting

Merchant Guidance ​

The Text block is your primary tool for communicating with customers through written content. Use the typography styles to create clear information hierarchy - lead text for introductions, normal text for details, and captions for supplementary information.

Visual effects should enhance readability and brand expression, not overwhelm your message. The gradient effect works well for headings, while shadows can improve text visibility over background images. Always test your text formatting on mobile devices to ensure optimal readability.