Boxmode’s Blog functionality is a valuable addition to almost any site since it allows you to communicate with your users via long-form content, build your SEO, and aggregate more traffic. Here, we’ll explain how to use Boxmode’s blog editor to achieve the best, most attention-grabbing blog posts you can think of. 

To get an overview of Boxmode’s blog functionality and learn how to add a blog to your project, read the Blog Widget article. 

Blog editor navigation

There are three ways to access the blog post editor.

  1. Go to the dashboard and access project settings by clicking on the context menu next to your project.
  2. Go to the page menu in Boxmode’s editor, click on Blog, and on Manage posts.
  3. When on the blog’s feed page or blog post page in the editor, click on the container below the header, then click on Manage posts next to the settings.

Any three of these actions will take you to the blog management page and the tab with published posts. From here, you can click Create a post to open the editor. You can also click Edit post to open the editor with that post.

From the header, you can:

  • Exit the blog editor by clicking the Back or Cancel buttons;
  • See the name of the action you’re performing (Edit post or New post);
  • See the post’s status (Draft or Unpublished);
  • Undo changes made in the editor by clicking the navigation buttons;
  • Publish the post or update a post that you already published.

You can learn more about managing your blog in our Managing a Blog article. 

The Post settings button opens a window with general settings such as an input for the page URL, the excerpt used on the blog feed page, and cover settings. You can remove the cover entirely by using the toggle, upload your own, or use the Unsplash library to find a cover image. The window also includes a tab with SEO settings to set the meta title and meta description. You can learn more about the importance of SEO in our SEO Settings for Page and Project article.

Adding blocks in the blog editor

When creating a post in the blog editor, you must use different blocks, which are grouped under three categories:

  • Text blocks;
  • Media blocks;
  • Design blocks.

To add a block, click + on the canvas to the right of a block and select a block from the menu that appears. To get more options, click Browse all.

Editing different block types

Settings for all block types include:

  1. A crossed arrows icon, which allows you to drag the content block and place it anywhere in the body of the post when clicked and held.
  2. Upward/downward arrow icons, which do the same when clicked.

Block type settings also include a context menu with these options:

  • Hide block settings (Ctrl+Shift+,) and Show block settings.
  • Copy — to copy the code for that particular block.
  • Duplicate (Ctrl+Shift+D) — to create a copy of the block below.
  • Insert before (Ctrl+Alt+T) and Insert after (Ctrl+Alt+Y) — to add a block of the same type before or after the selected block.
  • Move to — to move the block to another location in the post’s body. To use it, select that option, click on a space in the body of the post, and press Enter on the keyboard to confirm.
  • Edit as HTML — to convert that block into HTML code. This removes the ability to see changes to the block’s style immediately. To revert, click on the context menu and select Edit visually.
  • Remove Block (Shift+Alt+Z) — to remove that block from the canvas.

Read on to learn what individual settings each block type holds.

Text blocks overview

There are three text blocks:

  • Paragraph — for regular text.
  • Heading — for header text in a larger font marked as H1–H6 in the page’s code.
  • List — for bullet and numbered lists.

Upon clicking on a text block in the editor, a menu will open containing settings for that block. Here you will find the following:

  1. A paragraph icon that will open a dropdown list that allows you to change the style of the block between Paragraph, Heading, and List.
  2. Settings for text styles, including bold, italics, and links. The button next to these options will open a menu with additional styles, including inline code, strikethrough, subscript, superscript, and change the text color.

Certain text block types have settings that do not appear in other types of text blocks:

  • Paragraph and Heading blocks can align left, center, and right.
  • In Heading blocks, it’s possible to change a heading from the default H2 to H1–H6.
  • List blocks can be modified from the default bullet list to a numbered one. There’s also an option to add indents to the list.

Media blocks overview

There are six media block types, each with its own purpose:

  • Image — for illustrating your blog post;
  • Gallery — for a collection of images displayed in a gallery;
  • Cover — for images with text on top of them that are used as the preview image on the blog post page;
  • File — for files that are available for download;
  • Media & Text — for images displayed alongside text;
  • Video — for videos embedded from third-party services or the project library.

Upon clicking on a media block in the editor, a menu will open containing settings for that block. Here you will find the following:

  1. An image icon that will open a dropdown list that lets you select a different media-type block to change the selected one to.
  2. Alignment settings: left, center, right, wide width, and full width.

Media & Text blocks have extra options unavailable in the other media-type blocks: media can appear on either on the left or the right side of the screen, and vertical alignment can change from the default top to middle and bottom.

Design blocks overview

There are three options for design elements you can add to the canvas.

  • Buttons — for placing calls to action and important links prominently in the text.
  • Separator — for adding a horizontal line in the post’s body to create a set amount of visual space.
  • Spacer — for adding negative space in the post’s body with no visible separator and in the amount the user sets.

Upon clicking on a design block in the editor, a menu will open containing settings for that block. 

The Buttons block has additional settings, including a setting for changing the design of the button (filled and outlined styles), as well as options to align right, left, or center. Additionally, new options appear when you click on each separate button, including adding a link the button will lead to and the settings for text styles (bold, italics, and more).

The Separator block’s additional settings include style settings that will change the look of the separator (default short line, wide line, and dots).

The Spacers block’s additional settings include a resize button that will change the block size. To do that, grab the bottom margin of the spacer and drag it up or down as needed until you get the desired effect. 

Try applying these tools to your blog posts to create rich posts that take full advantage of the capabilities modern HTML gives website owners.

Go to Editor