Rich text

Overview #

The Rich Text block is designed to allow users to add and format text content within various sections of a theme. It supports basic text formatting, color customization, and visibility settings, making it versatile for different design needs.

Key components and functionality #

Content

This setting allows you to add and format text content using a rich text editor. You can include links and apply basic formatting such as bold and italic to enhance the text's appearance.

• Default content: "

  Add relevant text content with the richtext editor. Note that you can also include <a href="#">links and basic formatting in this content, e.g. bold and italic.

  "

Text size

This setting lets you choose the size of the text within the block. It offers several options to fit different design requirements.

• Options:
  1. Small
  2. Medium (default)
  3. Large
  4. Extra large

Text color

This setting allows you to customize the color of the text, enabling you to match the block's appearance with your theme's color scheme.

Background color

This setting lets you set a background color for the block, providing a way to highlight or differentiate the text area from other content.

Background gradient

This setting allows you to apply a gradient background to the block, adding a dynamic visual effect.

Alignment settings

These settings control the horizontal alignment of text within the block for both desktop and mobile views, ensuring optimal readability across devices.

Visibility

This setting determines the block's visibility on different devices, allowing you to hide or show the block on desktop or mobile as needed.

• Options:
  1. Do not hide (default)
  2. Hide on desktop
  3. Hide on mobile

Available in sections #

• Featured product
• Footer navigation
• Product information
• Logo list
• Hero

Usage notes #

• Responsive design: Ensure text size and alignment settings are optimized for both desktop and mobile views to maintain readability.
• Performance: Use background colors and gradients judiciously to avoid impacting page load times.
• Accessibility: Ensure text color contrasts sufficiently with the background to meet accessibility standards.

Usage examples #

1. Featured product section: Use the Rich Text block to provide detailed descriptions or promotional content for a featured product.
2. Footer navigation: Add a Rich Text block to include additional information or links in the footer area.
3. Product information: Enhance product pages with rich text descriptions or specifications.
4. Logo list: Use the Rich Text block to add context or descriptions to a list of logos.
5. Hero section: Incorporate a Rich Text block to deliver impactful messages or calls to action at the top of a page.