{"id":29440,"date":"2023-08-05T12:00:00","date_gmt":"2023-08-05T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29440"},"modified":"2024-10-30T15:42:35","modified_gmt":"2024-10-30T13:42:35","slug":"creating-a-single-page-template-with-the-container","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/creating-a-single-page-template-with-the-container\/","title":{"rendered":"Create a single page template using Flexbox containers"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

What is the Single Page Template<\/h3>\n\n\n\n

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<\/a>.<\/p>\n\n\n\n

[callout type=”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 \u201cSorry, the content area was not found in your page\u201d error message<\/a> when attempting to create or edit pages in Elementor.[\/callout]<\/p>\n\n\n\n

Hello Theme users<\/h3>\n\n\n\n

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<\/a> to the theme.<\/p>\n\n\n\n

Create a new Single Page template<\/h2>\n\n\n\n

To add a new template:<\/p>\n\n\n\n

    \n
  1. From WP Admin, navigate to Templates>Theme Builder<\/strong>.
    \"\"
    This opens the Theme Builder.
    \"\"<\/li>\n\n\n\n
  2. In the panel, click Single Page<\/strong>.
    \"\"<\/li>\n\n\n\n
  3. Click Add New<\/strong> in the upper right to create a new template.
    The Template Library opens.
    \"\"<\/li>\n\n\n\n
  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.<\/li>\n<\/ol>\n\n\n\n

    Add a Page Title Container<\/h2>\n\n\n\n
      \n
    1. In the canvas, click the + icon.
      \"\"
      You can now create a container.
      \"\"<\/li>\n\n\n\n
    2. Select Flexbox container.
      \"\"<\/li>\n\n\n\n
    3. Choose a single container layout using rows.
      \"\"<\/li>\n\n\n\n
    4. In the container properties, we’ll use Boxed Width<\/strong> with a Minimum Height<\/strong> of 100 pixels.
      Setting the minimum height to 100 pixels will allow for some padding.
      \"\"<\/li>\n\n\n\n
    5. Set the Justify Content<\/strong> property to Space Between. This will position the content to the edges of the container
      \"\"<\/li>\n\n\n\n
    6. In the Items<\/strong> section, set Align items<\/strong> to center.
      Now we’ll set a background color for the container. For more information about adding a background color, see       Create a background<\/a><\/strong>.<\/li>\n<\/ol>\n\n\n\n

      Add widgets to the page title container<\/h3>\n\n\n\n
        \n
      1. From the Panel, drag the Post Title<\/strong> widget to your container.
        \"\"
        \"\"
        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.
        \"\"
        \"\"<\/li>\n\n\n\n
      2. Drag the Share Buttons<\/strong> widget to the container.<\/li>\n<\/ol>\n\n\n\n

        Add the body layout container<\/h3>\n\n\n\n
          \n
        1. In the main Editor window, click the + icon, select Flexbox and a container layout.
          \"\"
          For this tutorial a two container layout is selected to create the \u201cSidebar\u201d
          This actually creates three containers, a parent container and two child containers.
          \"\"<\/li>\n\n\n\n
        2. Select the parent container.
          \"\"<\/li>\n\n\n\n
        3. Go to the Advanced tab and add a top and bottom margin of 34px.
          \"\"<\/li>\n\n\n\n
        4. Select the left-hand child container by clicking its handle.
          \"\"<\/li>\n\n\n\n
        5. In the Panel, set the width to 75%.<\/li>\n\n\n\n
        6. Select the right-hand container and set the width to 25%. This container becomes the sidebar.<\/li>\n<\/ol>\n\n\n\n

          Add content to the template<\/h3>\n\n\n\n

          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.<\/p>\n\n\n\n

            \n
          1. In the canvas, select the left-hand container.
            \"\"<\/li>\n\n\n\n
          2. In the Panel, open the Additional Options<\/strong> field.
            \"\"<\/li>\n\n\n\n
          3. Use the HTML tags dropdown to select Main<\/strong>. This will be used in the Table of Contents widget added later.<\/li>\n\n\n\n
          4. From the Panel, drag and drop the Post Content<\/strong> widget into the left-hand container.
            \"\"
            This automatically populates the content of the latest created page on your website.
            (Optional) You can populate the content with a different page:<\/li>\n\n\n\n
          5. Click the page settings icon.<\/li>\n\n\n\n
          6. Open the Preview Settings field.<\/li>\n\n\n\n
          7. Use the text field to enter the name of the page you want to use.<\/li>\n\n\n\n
          8. Click the Apply and Preview<\/strong> button.<\/li>\n<\/ol>\n\n\n\n

            The content of the selected page is displayed.<\/p>\n\n\n\n

            Adding Sidebar widgets<\/h3>\n\n\n\n

            The Table of Contents Widget<\/h4>\n\n\n\n
            \"\"<\/a><\/figure>\n\n\n\n
              \n
            1. From the Panel, drag the Table of Contents<\/strong> widget to the right-hand container.
              \"\"
              You can optionally include and exclude tags from the table of contents. For details, see               Table of Contents widget<\/a>.
              \"\"<\/li>\n\n\n\n
            2. In the Panel, in the Container<\/strong> text box, enter Main. This way, the Table of Contents will only use the headers in the main container.<\/li>\n<\/ol>\n\n\n\n

              Additional Widgets<\/h4>\n\n\n\n

              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<\/a> and Form widget<\/a>. <\/p>\n\n\n\n

              Responsive Settings<\/h2>\n\n\n\n

              Since the Container widgets use Flexbox CSS to do much of the \u201cheavy lifting,\u201d you may only require minor edits to your design for responsive views.\u00a0 For details, see Responsive editing for mobile and tablets<\/a> and Create responsive design with containers<\/a>.\u00a0<\/p>\n\n\n\n

              Setting the Display Conditions<\/h2>\n\n\n\n

              Once you are satisfied with your template’s design, you’ll want to save it. <\/p>\n\n\n\n

              To save your template<\/strong>:<\/p>\n\n\n\n