Pullquote Block

Go back to the list of Blocks

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.

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.

In this video, you can see how you can use the pull quote block and the different settings to modify how your pul quote will appear.

Block Toolbar

In order to reveal the block toolbar, you can click on the block and the toolbar will display.

Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.

The Pullquote block shows standard five buttons:

• Transform to
• Moving handles
• Change alignment
• Text Editing options (bold, italics, add a link, and drop-down for more text editing options)
• 更多选项

Transform to:

When you click on the “Transform” button you can convert the Pullquote block into another block type, using the existing content.

You can transform the PullQuote block into a “Paragraph” block, “Group” block, “Quote” block, “List” block, or “Heading” block. The “Group” would give you the ability to change the background color around the Quote.

You can also transform the style of your Pullquote block

The pullquote block includes two styles, ‘Default’ and ‘Solid’ color.

The ‘Default’ pullquote is a simple style that looks like this:

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

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

Moving handles:

The up and down arrow icons can be used to move a block up and down in your document.

Detailed instructions on moving a block within the editor can be found here

Change Alignment:

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.

Text Editing Options:

Bold and Italics

Used quite frequently, Bold and Italics formatting have their own buttons on the Toolbar. The shortcuts are CTRL+b (or Command+B) for bold and CTRL+i (or Command+i) for italics.

Insert Hyperlinks

Use the chain link icon to insert a hyperlink to your highlighted text. Or use the CTRL + k (or Command+k) keyboard shortcut.

The Search mentioned in the text box relates to searched on your own website. If you start typing a keyword, if will offer you a list of post and page titles from your own website for on-site link building.

Open in new tab

The toggle switch allows you to control where the new page should open:

• off in the same browser tab
• on in a new browser tab

By default the switch is set to off, as your site visitors should control how she wants to read your linked page.

Tip: If you already have the URL of the website you want to link to in the clipboard, highlight the text, you want to make into a link and use CTRL + V to add the hyperlink to the text.

More Text Editing Options

Inline Code

Use inline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.

Inline Image

The inline image feature allows you to add an image into your paragraph. It has one option: enter the desired pixel width for your image.

Strikethrough

Using the “Strikethrough” option adds a line through your highlighted text.

SubscriptandSuperscript

• 

• 

The “Subscript” option allows you to add subscript to your highlighted text.

The “Superscript” option allows you to add superscript to your highlighted text.

Text Color

Using the colors from the inline Text Color tool allows you to change the color for highlighted text.

More Options:

Hide Block Settings

TheHide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Move To

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

TheEdit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the Remove Block option, you can delete the selected block from your content.

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, simply click the ‘cog’ icon next to the Publish button.

The block styles can also be found in the sidebar settings along with the color settings and advanced options.

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.

Advanced

The “Advanced” tab lets you add HTML anchor and CSS class(es) to your block.

“HTML anchor” allows you to make a unique web address for a particular “Video” block. Then, you’ll be able to link directly to a “Quote” block of your page.

The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.