How to add global content to the blog sidebar

This guide assumes you have already created and are using a child theme.

Blog sidebars in Act3 don't include global content by default (except Blog 4, which includes a generic sidebar with common blog widgets). This is intentional, since the same template can be used across multiple blogs, the sidebar content is more likely specific to a particular blog rather than shared across all of them.

This guide explains how to create a global partial with a drag and drop area for your blog sidebar, and how to clone your blog template to include it. For each blog that needs a different global sidebar, you will need a separate cloned template with its own global partial, but the process is the same each time.

Blog 1, Blog 2, and Blog 3 have sidebars only on the post view, not the listing view, so you only need to clone the post template. For Blog 4, you will need to clone both the listing and post templates.

Starting with Version 16, the blog templates include HubL comments marking where to add your global partials. These are referenced later in this guide.

TL;DR: Here is a quick video demonstrating the full process.

1Clone the blog template to your child theme

Clone your desired template (e.g. blog-2-post.html) to your child theme. Go to the original template in the parent theme at @marketplace/Neambo/Act3/templates, right-click and select Clone to child theme:

2Create a `partials` folder in your child theme

If you don't already have the partials folder in your child theme, create it by right-clicking the theme's main folder and choosing to create a new folder:

3Create a new global `partial` in your partials folder

Right-click your partials folder and create a new file:

Make sure HTML + HubL is selected:

Select the Template partial and Global partial options, and give your new file a name (e.g. my-blog-sidebar.html):

4Add the global partial to your blog template

Edit your file and replace everything inside with this code:

<!--
  templateType: global_partial
  label: My Blog Sidebar
-->
{% dnd_area 'blog_sidebar' %}{% end_dnd_area %}

<!--
  templateType: global_partial
  label: My Blog Sidebar
-->
{% dnd_area 'blog_sidebar' %}{% end_dnd_area %}

Replace My Blog Sidebar with any name you prefer, then publish your changes.

5Include the global partial in your blog template

Edit the blog template you created at Step 1, then press Cmd/Ctrl + F to search the code for sidebar content:

There will be two occurrences:

{# >>> SIDEBAR CONTENT: BEFORE <<< #}

{# >>> SIDEBAR CONTENT: AFTER <<< #}

To add your global content before the current sidebar content (e.g., before the post aside on Blog 1, Blog 2, or Blog 3; or before the widgets sidebar on Blog 4), replace the {# >>> SIDEBAR CONTENT: BEFORE <<< #} line with this code:

{% global_partial path='../partials/my-blog-sidebar.html' %}

{% global_partial path='../partials/my-blog-sidebar.html' %}

To add your global content after the existing sidebar content, replace the {# >>> SIDEBAR CONTENT: AFTER <<< #} line with the code instead.

6Replace your blog template (if not the same)

Edit your blog settings and replace the template with the new one if it doesn't have the same file name. Otherwise the new template will automatically be used.

7Edit and publish your sidebar global content

Edit any blog post and open the sidebar in the global editor. The name of your global sidebar may differ (Step 4).

Once in the global editor, you can add modules in the sidebar:

This works like any other drag and drop area. Make sure to remove the large padding applied by default to the section:

Since the space is limited, avoid adding multiple columns or content that doesn't fit.

Once ready, publish your changes. This content will appear live on all your blog posts. Example:

Video demonstrating the process

Here is a quick video demonstrating all this process.