Skip to content
Sites

How to Use Rich Text Elements in Funnels & Websites

Learn how to use List Item Spacing in GHL Customer Care Page Builder to control the space between bullet list items for cleaner, more readable pages.

5 min read1,032 words7 explained images
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of Using the Rich Text Element
  2. Advanced Formatting Features
  3. Switch Between Paragraph and Headings
  4. Create Block Quotes
  5. Inline Code Blocks
  6. Full Code Blocks
  7. Advanced and Nested Lists
  8. Highlighting Text with Background Color
  9. Keyboard / Markdown Shortcuts
  10. Sidebar Styling Options
  11. List Item Spacing (Rich Text & Bullet Lists)
  12. How to Add a Rich Text Element
  13. Frequently Asked Questions
  14. Related Articles

Create headings, quotes, code blocks, colorful highlights, and perfectly nested lists - no HTML blocks or third-party hacks required. This article shows you how to drop the Rich Text Element into any funnel or website page and start writing with word-processor-style controls right inside the Builder.


TABLE OF CONTENTS


What Is the Rich Text Element?

The Rich Text Element empowers you with advanced formatting capabilities directly within the editor. The all-in-one text box brings advanced formatting including headings, block quotes, inline code, multi-level lists, and highlight colors.

Because everything lives in a single element while using  the same sidebar as the Paragraph element, you can style content faster. Unlike basic paragraph elements, it allows you to seamlessly switch text styles, add block quotes, highlight text, and insert code blocks without needing custom HTML or CSS.


Key Benefits of Using the Rich Text Element 

Enhance your content creation experience with these major advantages:

  • Easy Formatting: Effortlessly switch between paragraphs, headings, and styles

  • Advanced Lists: Create organized content with various bullet styles (disc, circle, square), and numbering formats (numeric, alphabetic, Roman numerals)

  • Highlighting and Quotes: Emphasize important content with customizable highlights colors and block quotes

  • Markdown-Style Shortcuts: Type >, `code`, or ``` to auto-create quotes and code blocks
  • No Coding Required: Eliminate the need for third-party tools or HTML blocks, improving workflow efficiency

  • Zero Learning Curve: The sidebar matches the existing Paragraph element, so styling feels familiar

Advanced Formatting Features

Explore powerful formatting features within the Rich Text element to elevate your website content:

Switch Between Paragraph and Headings

Instantly change text from paragraph to headings (H1-H6) directly within the floating toolbar:

  1. Highlight the text in the Rich Text element

  2. Click the Paragraph dropdown

  3. Select your preferred heading style from the dropdown list

Switch Between Paragraph and Headings (image 1 of 7) What this shows Highlight the text in the Rich Text element Click the Paragraph dropdown Select your preferred heading style from the dropdown list What this shows Illustrates the "Switch Between Paragraph and Headings" section of "How to Use Rich Text Elements in Funnels & Websites". This screenshot appears in the "Switch Between Paragraph and Headings" section of "How to Use Rich Text Elements in Funnels & Websites". The text alongside this image reads: Highlight the text in the Rich Text element Click the Paragraph dropdown Select your preferred heading style from the dropdown list. This part of the guide covers 1 field, listed below. Immediately after, the guide continues: Highlight important quotes or customer testimonials clearly. Image 1 of 7 What to chooseHighlight the text in the Rich Text element Click the Paragraph dropdown Select your preferred heading style from the dropdown list
Fields in this part of the guide Highlight the text in the Rich Text element
Buttons and menus referenced Paragraph
Next stepHighlight important quotes or customer testimonials clearly:
All 3 steps in this procedure
  1. Highlight the text in the Rich Text element
  2. Click the Paragraph dropdown
  3. Select your preferred heading style from the dropdown list

Create Block Quotes

Highlight important quotes or customer testimonials clearly:

  1. Type the greater-than symbol (>) within a Rich Text element
  2. Hit enter to create the Block Quote
  3. Add your text to the Block Quote
Create Block Quotes (image 2 of 7) What this shows Type the greater-than symbol (>) within a Rich Text element Hit enter to create the Block Quote Add your text to the Block Quote What this shows Illustrates the "Create Block Quotes" section of "How to Use Rich Text Elements in Funnels & Websites". This screenshot appears in the "Create Block Quotes" section of "How to Use Rich Text Elements in Funnels & Websites". The text alongside this image reads: Type the greater-than symbol (>) within a Rich Text element Hit enter to create the Block Quote Add your text to the Block Quote. Immediately after, the guide continues: Clearly display inline code snippets within your content. Image 2 of 7 What to fill inType the greater-than symbol (>) within a Rich Text element Hit enter to create the Block Quote Add your text to the Block Quote
Buttons and menus referenced greater-than symbol (>)enter
Next stepClearly display inline code snippets within your content:
All 3 steps in this procedure
  1. Type the greater-than symbol (>) within a Rich Text element
  2. Hit enter to create the Block Quote
  3. Add your text to the Block Quote

Inline Code Blocks

Clearly display inline code snippets within your content:

  • Surround the desired text with single backticks (`) within a Rich Text element

Inline Code Blocks (image 3 of 7) What this shows Surround the desired text with single backticks (`) within a Rich Text element What this shows Illustrates the "Inline Code Blocks" section of "How to Use Rich Text Elements in Funnels & Websites". This screenshot appears in the "Inline Code Blocks" section of "How to Use Rich Text Elements in Funnels & Websites". The text alongside this image reads: Surround the desired text with single backticks (`) within a Rich Text element. Immediately after, the guide continues: Effectively present larger code segments. Image 3 of 7 What this coversSurround the desired text with single backticks (`) within a Rich Text element
Buttons and menus referenced single backticks (`)
Next stepEffectively present larger code segments:

Full Code Blocks

Effectively present larger code segments:

  1. Type triple backticks (```) within a Rich Text element
  2. Hit enter to create the Full Code Block
  3. Add your text to the Full Code Block
Full Code Blocks (image 4 of 7) What this shows Type triple backticks (```) within a Rich Text element Hit enter to create the Full Code Block Add your text to the Full Code Block What this shows Illustrates the "Full Code Blocks" section of "How to Use Rich Text Elements in Funnels & Websites". This screenshot appears in the "Full Code Blocks" section of "How to Use Rich Text Elements in Funnels & Websites". The text alongside this image reads: Type triple backticks (```) within a Rich Text element Hit enter to create the Full Code Block Add your text to the Full Code Block. Immediately after, the guide continues: Improve content structure and readability with advanced list types. Image 4 of 7 What to fill inType triple backticks (```) within a Rich Text element Hit enter to create the Full Code Block Add your text to the Full Code Block
Buttons and menus referenced triple backticks (```)enter
Next stepImprove content structure and readability with advanced list types:
All 3 steps in this procedure
  1. Type triple backticks (```) within a Rich Text element
  2. Hit enter to create the Full Code Block
  3. Add your text to the Full Code Block

Advanced and Nested Lists

Improve content structure and readability with advanced list types:

  1. There are two ways to create a list within a Rich Text element:
    •  Type asterisk (*) then hit space
    • Highlight the text and within the floating toolbar, click Unordered List or Ordered List
  2. Click the dropdown next to the bullet to select the list type:
    • The options for unordered lists are:
      • • (Bullets)
      • â—‹ (Circles)
      • â–  (Squares)
    • The options for ordered lists are:
      • 1 2 3 (Numeric)
      • a b c (Lower Alpha)
      • A B C (Upper Alpha
      • i ii iii (Lower Roman)
      • I II III (Upper Roman)
  3. Press Tab to indent (create nested levels) or Shift + Tab to out-dent
Advanced and Nested Lists (image 5 of 7) What this shows There are two ways to create a list within a Rich Text element: Click the dropdown next to the bullet to select the list type: Press Tab… What this shows Illustrates the "Advanced and Nested Lists" section of "How to Use Rich Text Elements in Funnels & Websites". This screenshot appears in the "Advanced and Nested Lists" section of "How to Use Rich Text Elements in Funnels & Websites". The text alongside this image reads: There are two ways to create a list within a Rich Text element: Click the dropdown next to the bullet to select the list type: Press Tab to indent (create nested levels) or Shift + Tab to out-dent. This part of the guide covers 5 fields, listed below. Immediately after, the guide continues: Draw attention to key phrases or points. Image 5 of 7 What to fill inThere are two ways to create a list within a Rich Text element: Click the dropdown next to the bullet to select the list type: Press Tab to indent (create nested levels) or Shift + Tab to out-dent
Fields in this part of the guide The options for unordered lists are:The options for ordered lists are:1 2 3 (Numeric)A B C (Upper AlphaI II III (Upper Roman)
Buttons and menus referenced asterisk (*)Unordered ListOrdered ListTabShift + Tab
Next stepDraw attention to key phrases or points:
All 3 steps in this procedure
  1. There are two ways to create a list within a Rich Text element:
  2. Click the dropdown next to the bullet to select the list type:
  3. Press Tab to indent (create nested levels) or Shift + Tab to out-dent

Highlighting Text with Background Color

Draw attention to key phrases or points:

  • Select the desired text within a Rich Text Element

  • Click the Color Picker icon from the floating toolbar and choose your highlight color

Highlighting Text with Background Color (image 6 of 7) What this shows Select the desired text within a Rich Text Element Click the Color Picker icon from the floating toolbar and choose your highlight color What this shows Illustrates the "Highlighting Text with Background Color" section of "How to Use Rich Text Elements in Funnels & Websites". This screenshot appears in the "Highlighting Text with Background Color" section of "How to Use Rich Text Elements in Funnels & Websites". The text alongside this image reads: Select the desired text within a Rich Text Element Click the Color Picker icon from the floating toolbar and choose your highlight color. Immediately after, the guide continues: Action Keyboard / Markdown Shortcut Toggle Paragraph ↔ Heading Ctrl + Alt + 1-6 (Windows) or ⌘ + Option + 1-6 (Mac) Add Block Quote Type > + Space at line start Inline Code Wrap text with back-ticks `code` Code Block Type triple…. Image 6 of 7 What to chooseSelect the desired text within a Rich Text Element Click the Color Picker icon from the floating toolbar and choose your highlight color
Buttons and menus referenced Color Picker
Next stepAction Keyboard / Markdown Shortcut Toggle Paragraph ↔ Heading Ctrl + Alt + 1-6 (Windows) or ⌘ + Option + 1-6 (Mac) Add Block Quote Type > + Space at line start Inline Code Wrap text with back-ticks `code` Code Block Type triple back-ticks ``` then Enter Highlight Color Select text → choose color swatch
All 2 steps in this procedure
  1. Select the desired text within a Rich Text Element
  2. Click the Color Picker icon from the floating toolbar and choose your highlight color

Keyboard / Markdown Shortcuts

Action

Keyboard / Markdown Shortcut

Toggle Paragraph ↔ Heading

Ctrl + Alt + 1-6 (Windows) or âŒ˜ + Option + 1-6 (Mac)

Add Block Quote

Type > + Space at line start

Inline Code

Wrap text with back-ticks `code`

Code Block

Type triple back-ticks ``` then Enter

Highlight Color

Select text → choose color swatch


Everything you can tweak in a Paragraph block—fonts, size, line-height, shadows, animation—works here too, so your Rich Text stays perfectly on brand.

  • Typography: Choose font family, weight, size, and line spacing.
  • Spacing: Adjust margin and padding for desktop, tablet, and mobile.
  • Effects: Add drop shadows or entrance animations.
  • Visibility: Show or hide the element on specific devices.
  • Advanced: Apply a custom CSS class for theme-wide overrides.

List Item Spacing (Rich Text & Bullet Lists)

List Item Spacing controls the vertical space between individual list items, independent of text line height. Adjusting this value improves scannability for longer lists and ensures comfortable spacing on different devices.

Key benefits

  • Readability: Reduces visual clutter in dense lists.
  • Mobile comfort: Adds breathing room for small screens.
  • Precision: Fine-tunes spacing without altering paragraph line height.

How it works

  1. Select a Rich Text or Bullet List element on the page.
  2. Open the Style panel → locate List Item Spacing next to Line Height.
  3. Drag the slider or enter a value to increase/decrease space between list items.

Tip: Use Line Height for paragraph spacing inside a list item, and List Item Spacing for the gap between items.

Supported elements: Rich Text, Bullet List. *(Additional editors—Email/Blog—NEEDS CONFIRMATION before listing here.)


How to Add a Rich Text Element

Follow these three quick steps to get the element onto your canvas and start typing:

  1. Open the funnel or website Builder for your page
  2. In the left panel, click Quick Add → Rich Text
  3. Drag the element into any row or column and click once to begin editing
How to Add a Rich Text Element (image 7 of 7) What this shows Open the funnel or website Builder for your page In the left panel, click Quick Add → Rich Text Drag the element into any row or column… What this shows Illustrates the "How to Add a Rich Text Element" section of "How to Use Rich Text Elements in Funnels & Websites". This screenshot appears in the "How to Add a Rich Text Element" section of "How to Use Rich Text Elements in Funnels & Websites". The text alongside this image reads: Open the funnel or website Builder for your page In the left panel, click Quick Add → Rich Text Drag the element into any row or column and click once to begin editing. This part of the guide covers 1 field, listed below. Immediately after, the guide continues: Q: Can I convert an existing Paragraph element into Rich Text? Image 7 of 7 Where to goOpen the funnel or website Builder for your page In the left panel, click Quick Add → Rich Text Drag the element into any row or column and click once to begin editing
Fields in this part of the guide In the left panel, click Quick Add → Rich Text
Buttons and menus referenced Quick AddRich Text
Next stepQ: Can I convert an existing Paragraph element into Rich Text?
All 3 steps in this procedure
  1. Open the funnel or website Builder for your page
  2. In the left panel, click Quick Add → Rich Text
  3. Drag the element into any row or column and click once to begin editing

Frequently Asked Questions

Q: Can I convert an existing Paragraph element into Rich Text?

No. The text must be a Rich text element to switch between a heading and paragraph

Q: How do I create nested lists?

After creating your main list item, press "Tab" or use the indent option to create nested sub-items.

Q: Can I use the Rich Text element and Paragraph element interchangeably when writing paragraphs?

Yes, but Rich Text provides advanced formatting tools not available in the standard Paragraph element.

Q: Will global fonts and colors apply automatically?

Absolutely. The element inherits your global theme settings.


Was this guide helpful?

Related guides