Paragraph

Use the Paragraph element to add, style, and format inline text.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

When you want to add long blocks of text to your project, you will either choose to use a Paragraph element or a rich text element. Here we’ll go over all you need to know about Paragraphs.

In this lesson:
  1. Add Paragraphs
  2. Style Paragraphs
  3. Adjust spacing between Paragraphs
  4. Format and style inline text

Add paragraphs

Paragraph icon thumbnail

You can add a Paragraph element from the Elements panel (shortcut: A). By default, the Paragraph element contains a block of placeholder text. You can double-click, select, and replace the text inside either by typing or pasting in your content. You can also enter text edit mode by selecting the element and pressing enter.

A paragraph element filled with lorem ipsum text.

Adding multiple Paragraphs

You may need to add multiple Paragraphs to a section on your page. Although you can do that by typing Enter between paragraphs within one paragraph element, it’s a better practice to use a separate Paragraph element for each Paragraph. This gives you more control over spacing. With the rich text element you can easily add multiple paragraphs by pressing enter.

Style paragraphs

There are many ways to style a paragraph. You can create a unique class and reuse this class for similarly styled paragraphs. You may style all paragraphs elements at once and leave it at that. Or you may want to set styles on the Body and let paragraphs inherit those styles.   

Styling with a class

You can style a paragraph element by selecting the paragraph and making your style changes in the Styles Panel. These changes will be saved under a class name. You can apply this class to other paragraphs as well:

  1. Select the paragraph you want to style
  2. Click into the selector field
  3. Type in the same class name
  4. Press Enter
  5. Style the paragraph
The selector field displays an active class named Bigger paragraph

Styling the All Paragraphs tag

The best way to start a project is to style the All Paragraphs tag, which holds the default styles for all paragraphs in your project:

  1. Select a paragraph
  2. Click into the selector field
  3. Select All Paragraphs
  4. Customize your styles
The selector field is clicked displaying a dropdown menu containing sections New class, HTML tag and existing classes.

Styling text on the Body tag

However, you may want to specify the typography styles, like font family and font size, for all your text elements, including paragraphs. To set default typography styles on the entire project you’ll want to edit the Body (All Pages) tag:

  1. Select the Body element
  2. Click into the Selector field
  3. Select Body (All Pages)
  4. Customize the typography styles
Step one on the left, select the body element from the navigator. Step two on the right, select the Body (all pages) class under the HTML tag section in the Selector field dropdown menu. These two elements are highlighted.

Adjust spacing between paragraphs

When you have separate paragraph elements, you can adjust spacing between those elements using the margin property:

  1. Select a paragraph
  2. Click into the Selector field
  3. Select All Paragraphs
  4. Add a bottom margin
Step one on the left, select the All paragraphs class under the HTML Tag. Step two on the right, add bottom margin to the paragraph in the Spacing section of the style panel.

And when you need to adjust the spacing for only a few paragraphs, you can apply a class. Now, any styling changes made on this class will apply to Paragraphs that have this same class.

Format and style inline text

In some cases, you may want to style a part of the text within the paragraph element. For example, you may want to italicize a word, or add a link to a phrase, or even underline a sentence. You can do that using the text formatting bar that appears when you double-click a paragraph element.

The word iterdum is highlighted within the paragraph text. A text formatting bar is hovering above the word with the 5 text formatting options, bold, italic, insert link, wrap with span and clear formatting.

Learn more about inline text formatting.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top