Written by The Visual Editor is a drag-and-drop publishing experience!
You can use it to create media-rich pages and posts and to control their layout with ease. Instead of worrying about the alignment and organization of text, quotes, and images, now every element on a post or page has its own block — and you can focus on creating. Move, edit, and customize each block, and the editor will display visual elements the way they’ll look on your actual site, saving you the time you may have previously spent previewing and double-checking your content before clicking the Publish button.
Watch our Video about the Visual Editor Below
Continue Scrolling to Learn More
How Does It Work?
Blocks
The Visual Editor is available within the pages and posts of your site. It is the tool you will use to edit the content on that page. You’ll use blocks to add and edit the content and media on the page. A block is essentially a block of information on the page that has been sectioned off for a specific purpose, whether that be adding media, embedding a video, including a table, or adding a full-width image on the page. You don’t have to be a techie to add these features. The Visual Editor gives you the ability to do this without ever touching code by using blocks with an easy-to-tweak structure.
This new editor brings with it a new, effortless page and post building experience. With blocks, you can quickly add and customize multiple media and visual elements that used to require shortcodes, custom HTML code, and embeds.
Adding a Block
There are many block types for you to choose from, which you’ll see organized by recent use and then by category. Click here for a complete list. Each block is its own entity and you can edit or move each block independently of other blocks. So, if you want to add an image of a property and then a button to call you, you’ll want to add an image block and a button block. Each part of your page will have its own block (sort of like a Lego kit will have a piece for every section of the thing you are building).
There are multiple ways to add a block and choose the block type you need.
1. Click ⊕ at the right of any empty block.
2. Click ⊕ at the top left of the editor.
3. Hit the Enter/Return key from a selected block to create a new block below it.
4. Click ⊕ at the top center of an existing block to add a block above it.
5. Click on the three dots just above a selected block and choose to add a block above or below the current block.
We recommend option 4 when editing an existing page because it will insert it exactly where you want the block,
without you having to move the block up or down to your desired placement.
You can drag blocks around by clicking and holding the six-dot-grid near the top-left corner of each block, or use the up and down arrows to move a block one spot in the direction you want.
The default block is a paragraph — which you’ll use for regular text — but you can choose a different block type from any of the ⊕ buttons. You can also search blocks by typing in the block name.
Block Settings (2 Areas)
Most blocks have their own settings you can use to personalize that area of the site. This includes colors, text sizes, alignment, and more. To find them, select a block by clicking it. You’ll see two settings areas.
Please note, there are blocks that do not have additional settings, such as the shortcode block.
Block Settings – Toolbar
A setting toolbar is available at the top of the block with your basic settings. To access a block’s toolbar, you’ll need to click the block and a bar will appear above the block with icons. These icons represent available settings within that block.
Paragraph Toolbar
List Toolbar
Image Toolbar
Click on the three dots to the right of the block toolbar for additional options.
- Hide Block Settings closes the settings menu on the right (discussed below)
- Duplicate creates a second block on the same page with the same content
- Insert Before/After adds a new block before or after the current block
- Edit as HTML switches the block to the HTML version of it so you can edit the HTML directly. When editing as HTML, this option changes to Edit Visually.
- Add to Reusable Blocks allows you to create a block that can be used on other pages that retains the exact content and styling of the block.
- Group allows you to have multiple other blocks nested inside of blocks.
- Remove Block deletes the block from your page/post.
Block Settings – Sidebar
Additional block settings can be found in the sidebar to the right of the editor. The Block settings on the right of your editor will provide different options based on what block you’re using. Your sidebar settings are on by default. However, if you do not see them, you’ll go to the top of the page and click the gear icon to open the settings sidebar.
To the left, you will find an example of the block’s sidebar settings. These are typically related to styling, sizing, and colors.
You’ll see whites, grays, blacks, and your main brand colors in your color selection settings. The brand colors are automatically taken from your site’s design settings and include a light and dark variation of your site’s primary, button, and link colors. Find out how to update colors using this tutorial.
In the screenshot to the left, the active block is a Paragraph, so there are options for changing the styling of the font. You can leave it at normal browser fonts, smaller, large, or larger. Drop cap will emphasize the first letter (much like you see older books having a large styled letter to begin a chapter). Color settings give you the option to change background colors and/or text colors.
Last is the advanced section. You will see this in all blocks. That section is reserved for adding additional classes. It is best used by someone with coding knowledge.
Removing a Block
To remove a block, select the block and click the three dots within the toolbar above it. The last option in the drop-down is to remove that block.
Changing a Block Type
What if you’d like to change a block type? No problem: you can transform each block to another similar or related block type. For example, change a paragraph to a heading, a list, or a quote.
Document Settings
To the right of the Block Editor the Document Settings menu is where you can add tags and categories, choose a featured image, see and change the status of your post, and more — these are options that apply to the page or post as a whole.
If you don’t see the document settings to the right of the Visual Editor, click the gear icon on the top right to open the Document Settings.
Click the down arrow next to each header in Document settings to edit those specific options.
- Status & Visibility – can choose to have the page as a public, private, or draft
- Permalink – updates the link of your page. This is usually what follows the “/”
- Categories – *posts only* sets a category for your posts to be organized by a keyword
- Tags – *posts only* sets a tag for your posts to be organized by tags
- Featured Image – is the image seen when the page/post is shared on social media
- Excerpt – *posts only* allows you to choose the excerpt shown on your posts (/blog) feed
- Discussion – sets a comment box at the bottom of the page/post
- Post Format – *posts only* standard or video. Video posts allow you to transcribe the video
- Page Attributes – can set parent pages and choose to hide sidebar
- Override Market Settings – can set an override for your market state, city, and zipcode on a single page
- Social Buttons – hides the share and tweet buttons on the page/post
- Layout Settings – can hide sidebar, footer, header, and menu
