HOW TO ADD A BLOG ON MOBLE CMS 


S04 | E05 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  3 min read |  3 min video

Web School Series 4 Episode 5

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

A blog can be a key aspect of your website, allowing your team to have a voice within your industry. In this Episode we take a look at creating and editing your blog posts, plus the main banner of your blog page.

MOBLE CMS has a standard blog layout out of the box. However, this can easily be changed to a Grid or Portfolio if you prefer a grid layout rather than the traditional list/feed layout.


1. CREATE BLOG PAGES

  • In the Pages area, select 'Blog' and click 'Search'.
  • Notice that there is a Blog page waiting for you, as seen in the image below.
  • To add more Blog pages simply click the clone button and a new blog post will be cloned for you.
  • All Blog pages have the Tag, 'Blog'. This will ensure they automatically display in your Blog Widget
  • Keep your Blog pages in 'Draft' until you are ready to go 'Live'.
  • In the Page Settings area, you can also elect to choose a 'Publish Date' when you would like your article to automatically flip from 'Draft' to 'Live'.
MOBLE CMS Blog Page Cloned

Filter your Blog Pages and clone existing posts to remain consistent and preserve the formatting of each new post.


2. BLOG POST LAYOUT

  • Your Blog page does not need a clever design, you can simply use the default one that has already been prepared for you. This is because this page automatically injects into your default Blog that is already styled for you.
  • As an alternative, you might consider adding a 16px padding on all sides as seen in the image below:
MOBLE CMS Blog Page

A Blog Page with clean formatting. A single Row with a 16px wide container.

MOBLE Default Blog Page

Your Default Blog Page Layout, seen here on DirtyFeet.


CUSTOMISE YOUR BLOG LAYOUT

  • In the Layouts Drawer, open Base Layouts > Pages > Blogs.
  • Notice a selection of Layouts that work with your design, choose the ones that you like and drop them on to your page.
MOBLE CMS Blog Page Layout Drag

Choose from a range of MOBLE blog page Layouts or customise your own


SELECT YOUR BLOG WIDGET PREFERENCES

In your blog complete each item

  • Notice the 'Page Icon'. This is the image that appears at the top of your Blog Page, plus in your Blog feed.
  • You can also give your Blog page a Display Date, Author, Destination URL and most importantly, it's summary. All of these items will appear in your Blog feed automatically.
MOBLE CMS Blog Settings Widget

The Blog Page Settings area always you to add essential properties to describe your Blog page the Widget feed.


FINALLY, PICK A BANNER IMAGE FOR THE MAIN BLOG PAGE

Back in the Pages area:

  • Search for 'Hidden' pages and 'Blog'.
  • Edit the main Blog page.
  • Pick your preferred Banner image and position your Title text.
MOBLE CMS Landing Page

The main blog page is a 'Hidden' page. as you can see here.

MOBLE CMS Blog Banner

Customise your own banner or create your own custom Blog page.


CUSTOMISE YOUR OWN BLOG

You might choose to use the Default Blog page layout. Though of course, you can configure your blog with any MOBLE widget preferences. For DirtyFeet, in the end, we decided to design our own completely custom look. Their News items are short microblogs that do not require a full page as you can see below.

MOBLE DirtyFeet News Page

The DirtyFeet News page was designed as a custom feed. This can be done in the Editor as a Widget, or you can completely design your own Widgets with simply coding hacks which we'll cover in Series 9.