Rich text

The Rich Text block is a flexible tool designed to enhance text presentation with customizable options for alignment, icon positioning, and text size. It supports rich text formatting, allowing for the inclusion of links, bold, and italic styles. This block is ideal for creating visually appealing content across various sections such as Collage, Video with Text, Slideshow, Multicolumn, and Image with Text.

Key features include the ability to add headings, captions, and icons, as well as customize button styles and layouts. Background settings offer options for solid colors, gradients, images, and videos, while visibility settings ensure optimal display across devices.

Usage examples include creating promotional banners with call-to-action buttons, adding informational sections within a Multicolumn layout, and overlaying text on images for enhanced visual impact. By utilizing the Rich Text block's settings, users can craft engaging and informative content tailored to their specific needs.

Overview #

The Rich Text block is a versatile element designed to display text and icons with various customization options. It is used within sections like Collage, Video with Text, Slideshow, Multicolumn, and Image with Text. This block allows for flexible text presentation, making it suitable for a wide range of content needs.

Key components and functionality #

Text alignment

This setting allows you to align the text within the block. Options include left, right, center, and justify, providing flexibility in how text is presented.

Icon position

You can choose where the icon appears relative to the text. Options include top, bottom, center, left, and right, allowing for a variety of visual layouts.

Icon

This setting lets you add an icon to the block, enhancing the visual appeal and providing additional context to the text content.

Caption

The caption setting allows you to add a brief description or title to the block, which can be styled independently from the main text.

Heading

This setting enables you to add a heading to the block, which can be styled as a paragraph or as headings from H1 to H6. The default is H2.

Content

The content setting is where you add the main text for the block. It supports rich text formatting, including links, bold, and italic styles. The default content is a placeholder text that can be customized.

Text size

This setting allows you to adjust the size of the text within the block. Options include small, medium, large, and extra large, with the default being medium.

Button settings

Button settings provide options to customize the appearance and functionality of buttons within the block.

• Button icon: Add an icon to the button for visual emphasis.
• Button text: Customize the text displayed on the button.
• Button link: Set the URL the button will link to.
• Open link in a new tab: Choose whether the link opens in a new tab. The default is false.
• Button style: Select from primary, secondary, extra large, plain, small, and small secondary styles.
• Button layout: Choose the button layout, such as icon left, icon right, or icon only.

Background settings

Background settings allow you to customize the visual backdrop of the block, enhancing its aesthetic appeal.

• Background color: Set a solid color for the block's background.
• Background gradient: Apply a gradient to the block's background for a more dynamic look.
• Overlay color: Add a color overlay to the background.
• Overlay gradient: Use a gradient overlay for additional styling.
• Overlay opacity: Adjust the opacity of the overlay, with a default of 48%.
• Background image: Select an image to use as the block's background.
• Background video: Add a video as the background for a more engaging presentation.

Visibility settings

Visibility settings control the display of the block on different devices, ensuring optimal user experience across platforms.

Control the visibility of the block on different devices. Options include showing or hiding the block on desktop or mobile, with the default being do not hide.

Available in sections #

• Collage
• Video with text
• Slideshow
• Multicolumn
• Image with text

Usage examples #

1. Promotional Banner: Use the Rich Text block to create a promotional banner with a heading, icon, and call-to-action button. Customize the background with a gradient and set the button to open in a new tab.

2. Informational Section: Add a Rich Text block to a Multicolumn section to provide detailed information about a product or service. Use the text alignment and size settings to ensure readability and visual appeal.

3. Image with Text Overlay: In an Image with Text section, use the Rich Text block to overlay text on an image. Adjust the overlay opacity and background settings to ensure the text is legible.

By leveraging the Rich Text block's settings, you can create visually appealing and informative content that enhances the user experience across various sections.