Adding and Styling Quote Blocks

A Quote Block is an effective way to highlight important text or testimonials on your page. Here's how to use them effectively:

Adding a Quote Block:

1. Click Add Block or find an insertion point
2. Select Quote Block
3. Enter the quote in the first field
4. Add the source in the second field

Customizing the Style:

Font Customization

1. Open Site Styles
2. Navigate to Fonts > Assign Styles
3. Locate Quote Block section
4. Modify text and source styles

Color Settings

1. Go to Site Styles > Colors
2. Click the pencil icon on your color theme
3. Find Quote Block section
4. Adjust text and source colors

Design Options

• Shape: Choose solid or dashed outline
• Stroke Color: Select border color
• Thickness: Adjust border width
• Blend Mode: Set transparency
• Blur: Apply blur effect to element or background

Animation Effects:

• None: No animation
• Site Default: Matches site settings
• Fade In: Text fades into view
• Slide Up: Text slides from bottom
• Focus: Blurred to clear transition
• Reveal: Text slides from center

Alternative Quote Styles:

Text Block Quotes

• Highlight text and click quote icon
• Creates indented quote with optional styling

Wrapped Text

• Create magazine-style quotes
• Wrap text blocks around each other

Image Overlay Quotes

• Fluid Editor: Place Quote Block over Image Block
• Classic Editor: Use image block with text overlay

Heading Style Quotes

1. Add quote to text block
2. Format as Heading 2 or 3
3. Customize appearance in Site Styles

These options provide flexibility in presenting quotes while maintaining your site's visual coherence.

Related Articles

Previous Articles