Gold Penguin Logo with Text

Creating an Individual Blog Post Template in Breakdance Builder

Want to create a unique blog template in Breakdance that suits your branding style? Follow these easy steps in our tutorial to help you get started!
Updated September 2, 2023

Breakdance comes with beautifully designed post templates that you can use right out of the box.

But sometimes, these generic templates don't always capture the unique style or branding we want for our blog.

Perhaps, you want to establish a strong brand identity for your blogging business. You want to add event-specific posts. Or you just want to create different templates for your diverse content types, like new articles, tutorials, and personal product reviews.

Creating custom blog post templates can help address these specific use cases.

This guide aims to help you have a good starting point in creating your custom template in Breakdance. I’ll explain the step-by-step process and introduce additional plugins you might find helpful in your journey.

By the end, you should be able to create a professional-looking blog template in Breakdance - complete from the header to the footer.

Breakdance custom blog post template

Let’s get started!

How to Create an Individual Blog Post Template in Breakdance

1) Create a Header 

In this guide, we’re going to create a simple header that displays a logo, navigation menu, and CTA button.

Navigate to your WordPress dashboard. Select Breakdance > Headers. Click 'Add Header.’ Provide a name for your header template. Set it to posts and enter a priority value (it must be higher than the other header templates you have, if any). Then, click ‘Save.’ 

breakdance header template

To edit, click ‘Edit in Breakdance’ beneath the header name.

On your Breakdance editor, add a ‘Header Builder’ element. Note that you don’t need to add a section here.

Breakdance header builder

Our header will contain three parts - first for the logo, second for the menu, and third for the CTA button. There are many ways to create a layout for your header. But in this tutorial, I’m going to use three Divs to house each element.

breakdance header divs

Now, we want the Divs to display horizontally next to each other and not stack up vertically. To fix this, click the ‘Header Builder’ element and go to the Style tab > Layout. On the ‘Stack Vertically at’ dropdown menu, tap ‘Never.’

breakdance header builder settings

Let’s now add a logo to our header. Click the first ‘Div’ element, add ‘Image,’ and tap ‘Choose.’

header logo

At first, you might find the image too large for your header. Go ahead and adjust the size as desired. Tap the Style tab and then Image. Enter the image width in px.

header logo style

Next, add a ‘Menu Builder’ on the second element.

breakdance menu builder

Edit the text links and remove the rest that you don’t need. Here, we only added the About, Blog, and Contact links as these are some of the basic elements of a header. But feel free to add more as you like.

breakdance menu builder links

Let’s add a button on the third ‘Div’ element. Here, I used a ‘Glue Button’ from Elements Hive because it allows me to add a simple animation on my CTA button. 

Elements hive glue button

Elements Hive is a Breakdance extension. We’ve created a separate tutorial about this, so check this out if you want to learn more. But if you prefer not to install this plugin, you can just use Breakdance’s native button element.

Once you have your button, click the element and edit the text, size, and style. 

For example, I want a simple square button with rounded corners. To do this, navigate to the Styling tab. Click Button > Custom and tap ‘Custom.’ You should see other options here to modify the button’s attributes like the size, background color, typography, etc. Within the ‘Corner’ section, tap ‘Custom’ and enter a ‘Corner Radius’ value.

breakdance style button

Now, you’re almost done with your header! But let’s add some styles to make it look nicer.

First, you can start by changing the header’s background color. In this example, I used a dark gray background and adjusted the opacity.

style header background

Then, I changed the font color of the text links to white.

breakdance header font

I also want the header menu to stick on the top as I scroll down. This is optional. But if you want to add this effect, navigate to the Settings tab > Animations and tap ‘Sticky. Choose a position to stick your header (here, I’ve chosen ‘Top’). 

breakdance sticky header

Note that you have the option to disable your sticky header on other screen sizes. For example, I disabled it in the ‘Phone Portrait’ view, as shown.

Breakdance disable sticky

Once you’re satisfied, you can finalize the layout of your header. 

Adjust the width and spacing of your Divs as desired. Make sure that they look nice on different screen sizes. Tap the screen icon on top of the editor to view your header on different devices. On the left side, adjust the spacing and sizes to your liking.

breakdance header phone view

Note that we didn’t add any links to our logo, menu text links, and button yet. Let’s leave it as is and come back to it later when you have the other pages to link to your website.

Breakdance text link

Finally, save your header.

2) Create a Footer

A website footer contains information and links that are relevant to your entire website, depending on your site’s purpose and design.

Here, we’re going to create a simple footer that includes your business information, links to the main sections, sitemap, newsletter signup, article categories, copyright information, legal pages, and social media icons.

Just like the header, we’re going to create a new footer template on Breakdance. Go to Breakdance > Footers and  tap ‘Add Footer.’ Set it to posts and enter a priority number.

Breakdance footer template

Then, edit your new template in Breakdance. Start with a new section. Here, we’ll add two parent Divs - one for the blog information and another for the copyright section. 

breakdance footer div

On the first Div, I’ll add four Div children for the brief blog information, links to the site’s main sections, blog categories, and community. Set the parent Div’s horizontal alignment to  ‘Space Between’ so the children Divs are displayed horizontally next to each other.

set Breakdance div position

Let’s go ahead and add the logo, blog name, blog’s brief description, and social media icons. 

You can follow the hierarchy I’ve made. Below the first child Div, I added another grandchild Div to wrap the logo and blog name. I find this easier to control the alignment of my elements.

Breakdance div

Then, I entered some dummy texts in the description. I also added the social media icons. You can do so by searching ‘Social Icons’ on the search bar, and then click to add the element.

footer description

Style the elements on the first child Div as desired. Adjust the size, layout, and colors. 

Here, I changed my social icons to a dark gray base color and a background to white. I also adjusted the size, padding, space, scale on hover effect, and opacity. Feel free to experiment with your own styling.

Breakdance social icons

Next, populate the second child Div with a section title and text links. Here, I’ve added a ‘Heading’ and ‘Basic List’ element. I edited the title and content. I also modified the font size and spacing as shown below. 

Breakdance footer texts

Now, we’ll do the same for the third and fourth child Divs. 

Note that Breakdance allows you to copy the elements and its styling so you won’t have to add everything all over again. Just right-click the element to copy and paste it anywhere you want.

So, go ahead and copy the second child Div and paste. Then, edit the title and text links, as shown.

Breakdance copy div elements

Finally, let’s add the copyright information on the lower parent Div. A copyright section can vary but it commonly looks like this:

© Your Website Name. All rights reserved.

In our Breakdance editor, we can simply add a text element and enter the information above. Then, edit the style as we want. Here, I’ve also added a ‘Fancy Divider’ element to separate the copyright section from the other footer content.

breakdance footer layout

Make sure to adjust the space and size of your elements to look nice on different screens.

breakdance footer phone view

Once you’re satisfied with the overall appearance of your footer, click ‘Save.’ 

3) Create a New Post Template in Breakdance

A blog post template can have several key components, depending on how you want to structure and organize your content.

In this guide, we’ll create a single post template containing these elements:

  • Blog title
  • Featured image
  • Blog body
  • Section for the author’s name and date the article is written
  • Table of content
  • A short bio section about the author
  • Comment section
  • A section containing other related content
  • Subscription box
  • Share buttons

Let’s go through the step by step process of creating each section below.

a) Create a section for the blog title and featured image.

Create a new template by navigating to Breakdance > Templates > Add Template. Enter the name of your template, choose ‘posts’ and enter a priority number.

Breakdance blog post template

Let’s say we want to overlay the blog title on a featured image. To do so, we can click the section element and add the featured element as the background. Go to the style tab and click ‘Background.’ 

Instead of choosing a color, we’ll tap the image within the ‘Type’ section. We want Breakdance to dynamically fetch the featured image of our blog posts. So, go ahead and tap the ‘dynamic’ icon beside the image label.

Breakdance dynamic featured image

On the pop-up window, choose ‘Featured Image’ under the ‘Post’ option.

Breakdance dynamic featured image

Next, add a ‘Heading’ element for the blog post title. Again, we want this to be dynamic, so click the little icon beside the text label and choose ‘Post Title.’

Breakdance dynamic post title

Again, feel free to style the heading to your liking. For instance, you can add text shadows as I did to differentiate the text from the background, as shown below.

set heading text shadows

b) Add a section for the blog content.

Instead of a single column, we’ll divide this section into two parts. The first part will wrap the author’s name, date written, and table of contents while the second part will have the blog’s content.

To implement this layout, I added two columns to the section. 

In the first column, I’ve wrapped the author’s avatar on a Div. I also did the same for the author’s name and the date written. Note that all of these are added dynamically.

I added another Div to house the ‘Table of Contents’ element. Doing it this way would be easier to control the layout of my elements. But feel free to explore other options to organize your elements.

breakdance div structure

Then, I changed the width of my columns, making sure that the second column gets most of the space to display the blog content.

Breakdance set column width

It’s time to fetch our blog content. On the second column, simply add the ‘Post Content’ element. Don’t forget to save your work.

Breakdance post content

c) Add an author’s bio section.

Adding an author’s bio section to your blog post can have a lot of benefits. It establishes credibility and authority, building trust among your readers. So, let’s go and create one.

First, you’ll need to add a new section. I wanted to add a light-colored border around my author’s bio, so I added a Div. I’ve set the color to light gray and the corner radius to 10 px. You can experiment with other styling options for your container, as shown here.

Breakdance div border color

Within the Div, a added two columns to wrap the author’s image, name, and a short bio. You’re free to add any styles you want here. 

For instance, I used a ‘Dual Heading’ for the author’s name title. Here, I modified the primary and secondary texts to achieve this look.

Breakdance dual heading

The short bio should be an easy one. Just add a text element and insert  dynamic ‘Author Bio’ data. Adjust the layout, text, and color to your liking. Save your work and you’re done.

author bio description

d) Add a comment section.

Breakdance provides a comment form that you can easily integrate into your blog page. It comes with all the basic functions you’ll need for your comment section.

Breakdance comment form

But let’s level this up a bit. Here, we’ll use the popular wpDiscuz plugin

I highly recommend wpDiscuz if you want to:

  • implement a more engaging commenting experience for your users
  • have lots of customization options
  • want your comment section to support threaded and nested comments
  • integrate social media login options
  • maintain the quality of comments and avoid spam
  • moderate and control permissions

To install wpDiscuz, navigate to Plugins > Add New and search for the plugin. Then, click to install and activate. 

install wpdiscuz

The installation process should lead you on how to set up the plugin, from choosing a style to adding extra functionalities. 

Save your options and come back to the settings later if you decide to modify anything on your comment form.

wpdiscuz settings

Once the plugin is active, we can now integrate it into our Breakdance site. The easiest way to do this is by using shortcodes.

But first, let’s add a custom function to our theme. 

I highly recommend using the Code Snippets plugin as this is the safest way to manage custom code more effectively without the risk of breaking your site. Once you have installed and activated it, head over to Snippets > Add New. 

Enter a title for your code snippet. Tap the ‘Functions PHP’ tab and paste the following code:

function my_wpdiscuz_shortcode() {
    $html = "";
    if (file_exists(ABSPATH . "wp-content/plugins/wpdiscuz/themes/default/comment-form.php")) {
        ob_start();
        include ABSPATH . "wp-content/plugins/wpdiscuz/themes/default/comment-form.php";
        $html = ob_get_clean();
    }
    return $html;
}
add_shortcode("wpdiscuz_comments", "my_wpdiscuz_shortcode");

Below the editor, choose ‘Run snippet everywhere’ and save.

Breakdance wpdiscuz code snippet

Back to your Breakdance blog post template, add a new section and a shortcode block. Then, paste the following shortcode:

    
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
wpdiscuz shortcode

You should now see the WPDiscuz comment form on your page.

e) Add a ‘Related Posts’ section.

Related posts help your readers explore other content on your site that they might find interesting. Adding this section to your Breakdance page is a straightforward process. You’ll only need a heading for the title and a post list element to display a preview of your other articles.

Breakdance post list

Once you’ve added these elements, you can style the layout on the left-hand panel. 

In this example, I just want the featured image, blog title, and date displayed. So, I disabled the taxonomy and content. 

Breakdance post list settings

Then, I modified the query to display only 8 articles at a time.

Breakdance post list query

7) Add a subscription box.

Subscription boxes are one of the best ways to grow your blog’s audience. Here’s how you can create one.

Add a new section to your page, then insert a heading, text for the description, and a form builder element.

Breakdance form builder

Edit the fields of your form. As much as possible, limit your form to up to two fields - one for the name and the other for the email. You don’t want your reader to spend a lot of time filling up your form.

Breakdance form builder fields

Then, change the background color, field size, labels, and submit button to your liking.

Breakdance form builder style

Notice that you also have options to add actions after the form submission. This is where you can integrate other third-party apps to manage form submissions. 

Breakdance form actions

We have created a separate tutorial for adding apps like Slack, ConvertKit, ActiveCampaign, Drip, and MailerLite. So be sure to check them out.

8) Add social media share buttons.

Social media share buttons allow your readers to easily share articles they love on your site. This word-of-mouth promotion is incredibly useful in boosting your organic traffic without advertising expenses.

Click the section that wraps the content of your page. Then, on the left side, search for the ‘Social Share Buttons’ and add.

social share buttons

Next, edit the social media buttons you want to add. Here, I’ve added Facebook, Twitter, LinkedIn, Email, and Pinterest buttons.

style social share buttons

Let’s now go to the Styling tab > Position and modify the placement to ‘Floating.’ Then, choose the left alignment for the floating position. This will keep our buttons displayed on the left side of the page as we scroll down.

social share buttons position

Note that I’ve also modified the display and shape of the buttons. On the style tab, tap ‘Style’ to change the display. To achieve a square button with rounded corners, choose ‘Button,’ tap Border > Custom, and enter a radius value.

square social share buttons

Once everything is set, click ‘Save.’

7) Add a ‘Back to Top’ button

Tap the section that wraps your content. Then, search for ‘Back to Top’ and click to add.

On the left panel, feel free to modify the style of the button. Here, I’ve changed the icon and its background color. 

Breakdance back to top button

Then, I enabled the ‘Sticky’ and ‘Hide At The Top’ attributes. 

back to top button settings

Save your work. And you’re done!

Your final blog post template should look a bit similar to the one I’ve created below.

Breakdance custom blog post template

Here's what our blog page looks like in smaller screens.

Breakdance blog post template responsive

That’s a Wrap!

Congratulations - you’ve just created your first custom blog post template in Breakdance!

Keep experimenting with Breakdance’s awesome features. Who knows, you might come up with unique template designs worthy to be shared with the Breakdance community.

Feeling lost in any of the steps above? Drop a comment below - we’re here to help!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross