Create a single page template using Flexbox containers

Introduction

In this tutorial you will learn to use the Container to design your Single Page Template. A traditional WordPress layout that uses the Page Title (H1) in a Container and a Sidebar will be created.

While many modern designs may not use a sidebar, it is still requested by many clients and a useful place to place advertisements and other content you wish to be visible on all pages. It should generally be stacked on mobile to the bottom below your content.

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.

Important: 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 this method to add Sidebar widgets is the least complex as it does not require adding code to the theme.

Getting started

From the Theme Builder select the Single Page link from the left panel. You may then click the Add New button to begin a new template.

Adding a Page Title Container

1. In the main editor window, click the + icon to add a new Container
2. In the container properties, the Boxed Width property is used for this tutorial
3. The Minimum Height property is adjusted to 100px to allow for some padding
4. Click to open the Items properties accordion
5. The Direction property will be set to Row
6.  Use the Align Items icon to Center all vertically
7. Set the Justify Content property to Space Between. This will position the content to the edges of the container
8. You may then set the background color of the Container in the Style Tab. Using global colors will save time and keep your branding consistent

Page Title Container Content

1. From the Widget Panel, drag and drop the Post Title widget to your Container. This will dynamically pull a random page title from your recently added pages (we will change this soon)
2. In the Style Tab of the Post Title widget, the color will be set to contrast the background of the container
3. Add additional widgets. For this example, the Share Icons widget is used. The widget will inherit the justified content property and be aligned with the opposite edge of the Container

Adding the body layout Container

1. In the main Editor window, click the + icon to add a new Container layout
2. For this tutorial a two container layout is selected to create the “Sidebar”
3. Select and edit the newly created Parent Container. A top and bottom margin is applied in the Advanced Tab (example:34px)
4. Select and edit the Widths of the Child Containers as desired (example: 25%/75%)
5. The Child Containers may then be reversed in the navigator.

Adding the Content

While not involving many steps, this is the most important part of the Single Page template. You will now add “The Content” to your design. 

1. In the main editor window select and edit the large Child-Container
2. In the HTML tags dropdown, select the “Main” tag. This will be used in the Table of Contents widget later in the tutorial
3. From the Widgets panel drag and drop the Post Content widget into the large Child-Container. This will automatically populate with the content of the latest created page on your website
4. To apply a different page in the Preview, click the cog icon in the lower corner of your screen
   1. In the Preview Settings you may select any publish page on your site by entering a few letters in the input field
   2. Once selected, click the Apply and Preview button. The page will then refresh and your Post Content and Page Title widgets will now show the selected page preview. 

Adding Sidebar widgets

The Table of Contents Widget

1. From the Widget panel, drag and drop the Table of Contents widget to the Sidebar Container
2. In the Anchors by Tags option only the H2 and H3 tags are selected. You may choose to use more if needed in your design
3. The Container field is where you may specify a specific container for the TOC to use. This is helpful to keep other template headings from displaying. Enter “main” in the field as we defined earlier
4. The Style Tab may be used to make additional customizations

Tip: For more information about the TOC widget, you may visit this article.

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 this tutorial, these two Global widgets were previously created and used. 

WordPress Widgets

WordPress has used Widgets for their sidebar in the Dashboard for many years. Some older plugins still use these for displaying data including WooCommerce. These widgets are all still available to be used in your templates. They are all located at the very bottom of your Widget panel. These widgets’ Style Tab options are not able to be edited by Elementor. Custom CSS is generally required.

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.  By using the Container’s Direction and Width properties, you may stack the sidebar to show below the content on tablet or mobile devices. 

Setting the Display Conditions

Once you are satisfied with your template’s design, you may publish the changes and set the display conditions. Select “Pages” from the dropdown list.

Note: 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. 

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.