Blocks, Text Blocks

Blocks » Pullquote Block

Table of Contents

If you want to add emphasis to a piece of text in your post or page, the pullquote block can quickly and easily make short snippets look beautiful.

Pullquotes are like blockquotes, but designed to draw attention.

To add one, click the Block Inserter icon when editing your post or page.

You can also quickly add one by typing /pullquote in a blank paragraph block and then hitting the enter key.

Detailed instructions on adding blocks can be found here.

Block Toolbar

In order to reveal the block toolbar, you can click on the block and the toolbar will display. Each block has its own block-specific controls that allow you to manipulate the block right in the editor.

The pullquote block has alignment and text formatting options.

The pullquote block offers the following options in its toolbar:

↑ Table of Contents ↑

Block Styles

The default pullquote styles are Regular (with borders) or Solid Color.

From the Transform icon, along with changing block type is the option to change the pullquote style. More about these in the Styles section below.

↑ Table of Contents ↑

Alignment

Like many other blocks, you can align the pullquote block itself to the left, right, and center from the toolbar. When using the left or right alignment, you can put another block beside the pullquote block.

The pullquote block also has a Wide and Full width alignment that is useful for creating unique headers and widescreen effects. These two options are only available if your Theme supports these alignments. 

📌

If you do not see the option to change the width of the block to wide or full-width and your theme supports these options, it is possible the block has been added to a Group block. You can learn more about the Group block here.

↑ Table of Contents ↑

Basic text formatting

  • Bold
  • Italic
  • Strikethrough
  • Hyperlinking

↑ Table of Contents ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog‘ icon next to the Publish button.

The block settings can be found in the sidebar.

↑ Table of Contents ↑

Styles

The pullquote block includes two styles, ‘regular’ and ‘solid color.’

A ‘regular’ pullquote is a simple style that looks like this:

An example of a pullquote with the regular style

Meanwhile, a ‘solid color’ pullquote is a little different, and looks like this:

A solid color pullquote with default color settings

While it looks like a variation on the ‘regular’ pullquote, the ‘solid color’ pullquote really shines when you use the block’s color settings to select colors (covered below).

A solid color pullquote with custom color settings

↑ Table of Contents ↑

Color Settings

Like the paragraph block, the pullquote block has color selection settings in the block’s sidebar settings.

The main color option allows you to set the color of the accent lines on the top and bottom of the ‘regular’ style and changes the background color of the ‘solid color’ style.

The text color option allows you to set the color of the pullquote’s text in both styles.

↑ Table of Contents ↑

Typography

Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:

  • Font size
  • Font family
  • Appearance
  • Line height
  • Decoration
  • Letter case
  • Letter spacing
Typography dropdown menu
Typography in the Block Settings sidebar, with the additional options expanded.

Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.

You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.

Typography font size settings

Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.

Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Decoration includes options for underline and strikethrough.

Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.

Decoration includes options for underline and strikethrough.

↑ Table of Contents ↑

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help