Blog Post Editor
How a blog post’s settings screen and its full-screen design editor work together, from the post details and the Post body card to laying out the body, previewing and saving.
Every blog post has two parts, each with its own screen. The settings screen holds the post’s details, such as its title, publishing, categories, tags and SEO. The body is laid out in the design editor, a full-screen drag and drop editor. Open My Website, switch to Blog, and click a post on the Posts tab to reach its settings screen.
The Settings Screen
The buttons across the top work on the whole post.
- Preview: Opens the post on your website in a new tab, with the details on this screen as they are now, even before you save them, and the body as it was last saved in the design editor. To check the body while you design it, use Preview in the design editor.
- Save post: Saves the details on this screen. The first time you save a new post, the design editor opens straight afterwards.
- Delete post: Only on saved posts. It asks before deleting anything.
- Back to posts: Goes back to the Blog tab without saving.
Below them are the post’s fields, in this order: Title, Slug, Author, Status, Publish at, Featured image, Excerpt, Feature this post, Categories, Tags, SEO title and SEO description. A post needs a title and an excerpt before it will save. Creating a Blog Post explains each field.
The Post Body Card
The Post body card at the bottom of the settings screen is where the design editor opens from.
- Before the first save: The card says Save the post, then lay it out with blocks in the editor, because the body can only be designed once the post exists. Choose Save post and the design editor opens.
- Edit design: Opens the design editor for a saved post. Save any changes on the settings screen first, because they aren’t kept when you leave it.
- Preview template: Chooses which of the website templates the Preview button on this screen shows the post in, so you can try another look without changing your website.
The Design Editor
The design editor fills the screen, with a panel on the left and the post in the middle. It is the same drag and drop editor used for website pages, so blocks, sections and settings work the same way in both.
The Top Bar
- Back: The arrow on the left goes back to the post’s settings screen, asking first if you have unsaved changes.
- Post name: Click it to rename the post. The new name becomes the post’s Title when you save.
- Undo and Redo: Step back and forward through your changes. Ctrl+Z and Ctrl+Shift+Z do the same, or Cmd+Z and Cmd+Shift+Z on a Mac.
- Save status: Says Unsaved changes while there is something to save, and Last saved with the time once you have saved.
- Computer and Phone: Show the post at the width of a computer or a phone screen.
- Preview: Opens the post on your website in a new tab, in your website template, with the body as it is in the editor now, including changes you haven’t saved.
- Save: Saves the body and keeps you in the editor. Ctrl+S, or Cmd+S on a Mac, does the same.
- Save & quit: Saves the body, then takes you back to the post’s settings screen.
Saving
The body saves when you choose to, not as you go, and each save goes straight onto the post. If the post is published, visitors see the change as soon as you save. A scheduled post shows it when it goes live, and a draft keeps it hidden until it is published. Going back, or opening another screen, with unsaved changes asks Leave without saving? first: Stay keeps you in the editor and Leave without saving throws the changes away. Closing the browser tab warns you too.
Building the Body
- A new post: Starts with a heading and a paragraph to write over, in your brand’s colours and fonts.
- Content: The Blocks tab has Title, Text, Image, Button, Logo, Social, Divider, Spacer, HTML, Table, List, Quote, Video and Navigation. Sections has ready-made sections, and Saved has the sections you have saved, shared with your website pages. Drag one onto the post, or click it to add it at the bottom.
- Text: Click any text on the post to type straight into it. The text toolbar across the top has fonts, sizes, colours, links, alignment and lists.
- Arranging: Click a block or section to select it and see its settings in the panel. Its toolbar moves, duplicates and deletes it, and a section’s toolbar can also save it to use again.
- Style: Sets the fonts, colours, links, buttons and tables for the whole post. Apply brand fills them in from the brand library in Organisation Information, and Undo puts them back.
- Computer and Phone: Columns stack on a phone, and Content visibility in a block’s or section’s settings can show it only on computers or only on phones.
Images
- Choose an image: On an Image block, opens the Media library popup with your Blog Media. Search by name or alt text, and click an image to use it.
- Upload image: Adds a new image from your device. It also goes into Blog Media, ready for featured images and your other posts.
- Alternative text and Caption: Typed on the Image block itself. The alt text saved in Blog Media isn’t copied onto the post, so describe the image here for people who can’t see it.
- Deleting from the popup: The bin on an image deletes it from Blog Media altogether, and any post still using it shows a broken image.
Why the Post Is Split in Two
The settings screen controls how the post is found, grouped and published. The design editor controls how it reads. Each one saves on its own: saving the settings doesn’t touch the body, and saving the body doesn’t change the settings, apart from the title when you rename the post in the editor. That makes it easy to change the SEO or the publish date later without opening the body at all.
Related articles
- Creating a Blog Post: Filling in the details for a new post.
- Editing a Blog Post: Changing a saved post, and what each change affects.
- Blog Media: The images available in the editor.
- Website Page Editor: More about the drag and drop editor’s blocks, sections and settings.
- Saved Sections: Saving sections to reuse across your blog posts and website pages.
- Branding and Business Details: The brand colours, fonts, logo and social pages the editor uses.