Page Builder Smart Areas

Page builder Smart Areas are predefined blocks of page builder elements you can insert in your website’s pages, globally or per page.

Some of the main problems Smart Areas is solving:

  • Load, append or prepend a Page builder section with content, either on single / multiple pages or globally into the entire website, with only few clicks;
  • Create custom Footers
  • Create custom Subheaders
  • Add Page builder content into the “Hidden panel” above the site header.

 

How to create a new Smart Area:#

To create a new Smart Area, either open this screenshot https://hogash.d.pr/1a111 or follow these steps:

  1. Go to Admin > Page Builder Smart Areas > Add new
  2. Add a custom title
  3. Enable the page builder by hitting the “Enable” button, right below the title field;
  4. Hide the Publish button on the right.
  5. You now have to add content and elements to this area, so hit the “Edit this Page with Page Builder” button.
  6. Add any Page builder content you want eg: https://hogash.d.pr/1G4H . If you don’t know how to use the Page builder, i recommend reading this article https://my.hogash.com/documentation/introduction/ or watching the video explainer at the end of it.

 

How to globally assign a Smart Area to the different parts of the website’s pages:#

So now you have created a Smart Area and you want to assign it globally into the website.

To assign the smart area, go to Admin > THEME

  1. Elements options

options > Smart Areas options  https://hogash.d.pr/1fpcv .

Here you can choose what to do ( eg: https://hogash.d.pr/161QR ):

  • Where to add it (the location)
    • Sub-header
    • Footer
  • What to do with it:
    • Add the smart area before the location (Append)
    • Add the smart area after the location (Prepend)
    • Replace the location with the smart area
  • Select which template to assign

Here’s for example a section element containing some Title, TextBox and ImageBox elements https://hogash.d.pr/1b6EM , and here’s the result of assigning a smart area before the footer https://hogash.d.pr/10rOg , as you can see the section appears right before the footer.

Another great use for this feature, is to link the Call to action button in the Site header, to a modal window with a form for example. Because the button is loaded everywhere, you’d also need the modal content too. So simply create a Smart Area, assign the section container as Modal window, add a Contact form inside and publish the Smart Area before the Footer. Here’s more on Linking to modal windows.

 

How to globally assign to assign to different post types (eg: shop, blog, portfolio):#

Another great advantage of this feature is that you can assign a smart area, to a specific post type, for example:

  • Blog posts (Single or Archive/Category)
  • Portfolio pages (Single or Archive/Category)
  • Shop pages (Single or Archive/Category)

So, to assign a smart area for a specific page type, access Admin > THEME options > Smart Areas options > Single page settings OR Archive page settings , and here you can assign to any Smart area location and select whatever Smart area you want, eg: https://hogash.d.pr/HNxb .

 

How to insert a Smart-Area in any page, through Page builder#

In case you want to insert a Page Builder Smart Area anywhere in a page, simply Edit that page with the Page Builder and in the Page builder tray, search for “Page Builder Smart Area” element ( https://hogash.d.pr/ORBc ) than drag the element to the canvas page. After adding the element, click on the gear icon (in the toolbar) to access its options. Inside the Options popup, select the area you want https://hogash.d.pr/14LhT .

If you want to add to more specific pages, repeat the steps above for any page you want.

 

Due to the high number of available page builder elements and their extreme customisability, we desperately wanted to make page builder elements available for the site’s Footer. Now this is possible with only a few clicks.

So, first create and publish a new Smart Area. Take advantage of the customizability options of the Section element or simply add any element you want (even widgets).

Access Admin > THEME options > Smart Area options and inside the General settings pane, in the Footer location row, select “Replace footer” and of course the smart area you want eg: https://hogash.d.pr/T8Pi . This will replace the generic widgetized Footer, with the smart area you just created. That’s it, footers are now again loved 🙂

 

How to create a custom page builder Site Sub-header#

Although the Custom Subheader Element, or even the Default Subheader have many, many customisability options, some may want to have custom global assigned sections of page builder elements, right after or under the site’s header. Now it’s possible with only a few clicks.

So, first create and publish a new Smart Area. Take advantage of the customizability options of the Section element or simply add any element you want (even a subheader). You may also assign a Custom Subheader element to specific post types (blog, portfolio shop etc.)

Access Admin > THEME options > Smart Area options and inside the General settings pane, in the Subheader location row, select “Replace subheader” and of course the smart area you want eg: https://hogash.d.pr/1039X . This will replace the generic subheader, with the smart area you just created. That’s it, subheaders FTW 🙂

 

How to add a smart area to the Hidden panel in Header.#

While there were hard times adding custom content to the Header’s hidden panel, now it’s very easy with only just a few steps.

So, first create and publish a new Smart Area. Take advantage of the customizability options of the Section element or simply add any element you want. I do want however to recommend adding content that’s not highly important, mainly because it’s hidden.

Access Admin > THEME options > General > Header options and locate the “Hidden Panel options ( “SUPPORT” button )” options section and in the “Support content type” select PageBuilder Smart Areas, and select the one you have just created eg: https://hogash.d.pr/1jDfq .

 

* This feature is only available on Kallays version 4.1+ .