help center

On this page

Create a sidebar template

Last Update: September 21, 2023

By default, the Hello Theme does not call the WP sidebar functionality. You can create a child theme and add a snippet of code as shown here to the functions.php file of a child theme.

If you would like to use the WP sidebar widgets along with Elementor widgets, without using code, you can do so by creating a sidebar in your Single Page, Single Post, and Archive templates in the Theme Builder. These templates will allow you to feature a custom sidebar on your site for each new page or post.

SideBarOne Create a sidebar template 1

Let’s Get Started

Create A New Single Page Template

From the Elementor Theme Builder, choose the Single PageSingle Post, or Archive Template and create a new one. For this document, we will be using the Single Page option. This will create a template for all pages on the website that use the Default Layout.

Theme Builder Single Page Create a sidebar template 3

Add A Two Column Section

From the + icon in the editor, choose the two column 70 / 30 layout. This will be the foundation of our template.

Two Coloumn Section Create a sidebar template 5

Add The Content Widget

In order for Elementor to call “the Content,” we must add a Post Content Widget to our template. This region will dynamically display the Page content, or the region we can add Elementor Widgets to in later steps. If creating an Archive Template, select the Archive Posts Widget rather than the Post Content Widget.

The Content Widget Create a sidebar template 7

Note: This is also often the cause of getting the Content Not Found Error in Elementor. The Single Page Template needs to have a Post Content Widget to work.

Preview Settings

When working with templates it is helpful to use the Preview Settings located in the settings for the page located by clicking the gear icon in the lower corner. Select a page already published on your website such as the Sample Page. Click the Apply and Preview button. 

Preview Settings Create a sidebar template 9

Adding WordPress Widgets To The Template

You may now add the traditional WordPress Widgets to your sidebar. They are all located at the very bottom of the Editor Widget Panel. If you have installed additional plugins that use widgets, they will be found here as well.

Tip: If using WooCommerce, you will find all the search and filtering option widgets in this region. Use these to create your Product Archive and Product Single Templates. 

Add Widgets Create a sidebar template 11

Adding Elementor Widgets

In addition to the WordPress Widgets, you may also add any Elementor widgets you wish to the sidebar. This adds unlimited possibilities to your design. 

Add Elementor Widgets Create a sidebar template 13

Styling Your Sidebar

When styling your WP widgets, you will find that most will use the H3 headings, lists, and link colors from your global styles. You can add background colors and styles to the WP based widgets in the Advanced Tab. Elementor widgets can use the widget controls and style tab.

StylingOne Create a sidebar template 15

Advanced CSS Tricks

If using the Hello Theme, some Custom CSS will often be needed for the desired results. You can modify the look of the list styles or fonts by adding custom CSS to the widget by selector, or adding to the Custom CSS in the Site Settings and giving your widgets the class name created.

Styling Two Create a sidebar template 17

Adding A Page Title Region

Often, you may wish to include a page title region for displaying the H1 and breadcrumbs (if used). This is good practice for SEO. You can do so by adding a section above the existing one.

Page Title Region Create a sidebar template 19

Setting Display Conditions

You may now set the display conditions for your template. Typically, you will choose the Pages > All condition here. You may additionally add more conditions if needed. If you choose “Singular,” this template will be used for pages, and posts as well as custom post types. If creating the Post Single or Archive Template, choose Posts > All here. 

Display Conditions Create a sidebar template 21

Create New Page(s)

Using The Block Editor For Content

When creating pages or posts on your website, you may wish to write your content in the WP editor. This may also be used for clients, or users with only editor privileges.

  1. Create Block Editor Page(s) in the WP editor.
    New Page One Create a sidebar template 23
  2. Add your verbiage, media, and other block editor content.
    New Page Two Create a sidebar template 25
  3. Publish your page using the WP Publish button. The page may be set to draft mode if needed.
  4. View your page. It will now show the Block Editor content with the template sidebar.New Page Four Create a sidebar template 27

Using Elementor For Content

If you wish to still edit the content with Elementor but use the sidebar on all pages it is now possible to do so easily. All Elementor widgets will use the 70% content region of the page template.

  1. Name your page, and publish it in the WP editor.
    New Page Elementor One Create a sidebar template 29
  2. Click the Edit With Elementor button
    New Page Elementor Two Create a sidebar template 31
  3.  Add your Elementor Widgets to “The Content” region. You will not be able to drag widgets into the sidebar region unless the template is edited.   New Page Elementor Three Create a sidebar template 33

Notes And Information

Note: Pages and Posts will need to use the Default Layout rather than Elementor Full Width, or Elementor Canvas for the theme builder Display Conditions to show. In reverse, if you wish to not have a sidebar on a page (example: Home), you may use Elementor Full Width and Canvas.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article