help center

Search
Close this search box.
On this page

Create a single page template using Flexbox containers

Last Update: October 30, 2024

Introduction

In this example, you will learn to use the Container to design a Single Page Template. This design uses a traditional WordPress layout which includes a Page Title (H1) and a Sidebar.

While some modern designs do not use not use sidebars, many designers still prefer to utilize them as advertising space or to display content that is visible on all pages. On mobile devices, these sidebars should be stacked at the bottom of your page.

What is the Single Page Template

The Single Page template takes the place of the single.php or singular.php in your WordPress theme. You may learn more about it in this document.

Warning
When creating or editing a Single Page Template, the Post Content widget must be used in your template. This is one of the reasons you may see the “Sorry, the content area was not found in your page” error message when attempting to create or edit pages in Elementor.

Hello Theme users

While many WordPress themes may use one or more Sidebar widget options in their Customizer, the Hello theme does not use the traditional WordPress Sidebar template by default. Using the method in this example is simpler as it does not require adding code to the theme.

Create a new Single Page template

To add a new template:

  1. From WP Admin, navigate to Templates>Theme Builder.
    1 go to templates theme builder Create a single page template using Flexbox containers 1
    This opens the Theme Builder.
    2 click Single Page Create a single page template using Flexbox containers 3
  2. In the panel, click Single Page.
    3 clikc add new Create a single page template using Flexbox containers 5
  3. Click Add New in the upper right to create a new template.
    The Template Library opens.
    4 click the X to close Create a single page template using Flexbox containers 7
  4. We won’t be using the Template Library so click the X in the upper right corner to close it.
    The Elementor Editor opens.

Add a Page Title Container

  1. In the canvas, click the + icon.
    5 Click the plus sign 1 Create a single page template using Flexbox containers 9
    You can now create a container.
    6 Select Create a single page template using Flexbox containers 11
  2. Select Flexbox container.
    7 Select single container Create a single page template using Flexbox containers 13
  3. Choose a single container layout using rows.
    8 Boxed width Create a single page template using Flexbox containers 15
  4. In the container properties, we’ll use Boxed Width with a Minimum Height of 100 pixels.
    Setting the minimum height to 100 pixels will allow for some padding.
    10 justify Create a single page template using Flexbox containers 17
  5. Set the Justify Content property to Space Between. This will position the content to the edges of the container
    9 Align items Create a single page template using Flexbox containers 19
  6. In the Items section, set Align items to center.
    Now we’ll set a background color for the container. For more information about adding a background color, see Create a background.

Add widgets to the page title container

  1. From the Panel, drag the Post Title widget to your container.
    11 Post title widget Create a single page template using Flexbox containers 21
    12 title widget Create a single page template using Flexbox containers 23
    This will dynamically pull a random page title from your recently added pages (we will change this soon).
    You can add additional widgets to the container. For this example, we’ll add the Share Buttons widget.
    13 Share buttons Create a single page template using Flexbox containers 25
    13 with share buttons Create a single page template using Flexbox containers 27
  2. Drag the Share Buttons widget to the container.

Add the body layout container

  1. In the main Editor window, click the + icon, select Flexbox and a container layout.
    14 choose two contianer Create a single page template using Flexbox containers 29
    For this tutorial a two container layout is selected to create the “Sidebar”
    This actually creates three containers, a parent container and two child containers.
    15 Select the parent container Create a single page template using Flexbox containers 31
  2. Select the parent container.
    16 add a top and bottom margin Create a single page template using Flexbox containers 33
  3. Go to the Advanced tab and add a top and bottom margin of 34px.
    17 Select the left container Create a single page template using Flexbox containers 35
  4. Select the left-hand child container by clicking its handle.
    18 set the width to 75 Create a single page template using Flexbox containers 37
  5. In the Panel, set the width to 75%.
  6. Select the right-hand container and set the width to 25%. This container becomes the sidebar.

Add content to the template

Content in the template is dynamic, the information is pulled from individual pages. For example, when you add the page title, the title will change depending on what page is displayed.

  1. In the canvas, select the left-hand container.
    19 open additional options Create a single page template using Flexbox containers 39
  2. In the Panel, open the Additional Options field.
    20 select main html tag Create a single page template using Flexbox containers 41
  3. Use the HTML tags dropdown to select Main. This will be used in the Table of Contents widget added later.
  4. From the Panel, drag and drop the Post Content widget into the left-hand container.
    21 the post content widget Create a single page template using Flexbox containers 43
    This automatically populates the content of the latest created page on your website.
    (Optional) You can populate the content with a different page:
  5. Click the page settings icon.
  6. Open the Preview Settings field.
  7. Use the text field to enter the name of the page you want to use.
  8. Click the Apply and Preview button.

The content of the selected page is displayed.

Adding Sidebar widgets

The Table of Contents Widget

Adding The Table Of Contents Create a single page template using Flexbox containers 45
  1. From the Panel, drag the Table of Contents widget to the right-hand container.
    23 Table of contents displayed Create a single page template using Flexbox containers 47
    You can optionally include and exclude tags from the table of contents. For details, see Table of Contents widget.
    24 limit toc to Main Create a single page template using Flexbox containers 49
  2. In the Panel, in the Container text box, enter Main. This way, the Table of Contents will only use the headers in the main container.

Additional Widgets

You may now add additional widgets to your Sidebar. This is a good opportunity to use the Call to Action widget or a Form for collecting leads. For details about these widgets, see Call to Action widget and Form widget.

Responsive Settings

Since the Container widgets use Flexbox CSS to do much of the “heavy lifting,” you may only require minor edits to your design for responsive views.  For details, see Responsive editing for mobile and tablets and Create responsive design with containers

Setting the Display Conditions

Once you are satisfied with your template’s design, you’ll want to save it.

To save your template:

  • Click Publish in the upper right of the Editor bar.
    24 click publsih Create a single page template using Flexbox containers 51
    This brings up the display conditions window. With display conditions, you can determine when this template will be used. For example, you can set a display condition that this template will only be used only for the Front Page or only for pages marked with a specific category. For details, see Set conditions for site part templates.
Tip
If your website does use posts, or you wish to use the same template for your posts, you may use the “All Singular” option. The Singular template is a top level hierarchy template in WordPress. Pages and posts are children of the Singular. 
Single Page Conditions Create a single page template using Flexbox containers 53

Next steps

After you’ve learned how to create site part templates, let’s take a closer look at the advantage containers have over the traditional section and column design.

To get the most out of Elementor, check out the Elementor Academy for helpful learning resources. If you come across any issues or need help, please contact our Support Center.

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

Initial Site Setup

Unlock Your Elementor Website’s Full Potential

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!