How to Style Your Blogs

This is a quick tutorial on how to set up your blog articles.

We have set your website up using a “Flexible Content Blocks” paneling  system that gives you much more flexibility where styling any page is concerned. The available panel functionalities are well exemplified on the home page where you see things like a “Hero Slider” at the top of the page as well as “Call to Action Carousels” for exploring your conditions and services.

For your blog articles, you’ll see that all of these flexible blocks or panels are available for use. As you get more comfortable with the system, you’ll be tempted to “spread your design wings” and use a couple different panels to make your blog articles more interesting. Go for it!


Creating a New Blog Post

Please refer to the screen below in order to create a new blog post.

  • Under Posts in the content management panel, click “Add New.”
  • Title your blog where it reads “Add Title.”
  • To have an image accompany the blog when viewed in a blog feed, add an image to the Featured Image block, and complete the “Excerpt” block to show any highlight copy that will give user an idea of what the article is about. (See sample feed below.)

  • Once you have completed the initial blog set up, click “Save Draft.”

The Page Framing

For blog articles, I’m going to recommend the following framework:
  • Header Image with the Blog Title over the image
  • Blog article beneath the Header Image

With this being the recommended layout, you will now create the necessary Flexible Content Blocks in order to achieve this layout.

Add these blocks in this order:

  1. Background Section
  2. One Column
  3. Background Section
  4. One Column

Yes, there are now 4 content blocks that you will use to create this page.  It should look like the following:


Add Header Image

BLOCK #1: Add Header Image (Background Tab)

BLOCK #1: Style the Block (Style Tab)


Add Text Over Header Image

BLOCK #2: Add Blog Title under Content


The Divider

BLOCK #3: Divider Block

We use this block to separate the Header Image from the Blog Article. You need not do anything to this block, however it is required.


The Blog Article

BLOCK #4: The Actual Blog Article (Content Tab)

You will use this block under the content tab for the actual blog content.

BLOCK #4: Padding between header image and the article (style Tab)


Button Links

To make a button on the page:

  1. Make sure you’re on a new line, type the text out, highlight the text and make it a link.
  2. Then make sure the cursor is inside the new link, or highlighting it in any way, go to the Formats dropdown in your toolbar and select “Button” at the bottom.

TEST BUTTON HERE

If you are NOT seeing the “Formats” dropdown menu, Click the toggle button to open the toolbar into 2 lines. You should now see formats.