How to Create a Multi-Page Page Builder Page | Communifire Documentation

Display related Page Builder pages all on one page. Set up a multi-page Page Builder page, and users can view related pages with a click of a button.

Video Guide

How to Create a Multi-Page Page Builder Page Guide

Note: You should have two or more Page Builder pages already created.

1. Click the gear icon > Page Builder.
2. Click Add Page.
3. Enter a Name and Page URL for the page.
4. Click Layout.
5. Drag a layout onto the page. One column will contain buttons, and the other column will contain the display window. We recommend a 3 9 layout.
6. Click Widgets.
7. Drag a Button widget into the left column.
8. On the Button widget, click the gear icon > Edit properties.
9. Enter a name for the button.
10. Set the Button type to Content.
11. In Content, click Any type > Page Builder.
12. Select the page the button should display when clicked.
13. Click Advanced.
14. In Custom CSS class, enter btn-block . This will make the button span the entire width of its column.
15. Check Load into current page. This will tell the page to load the page on the current page.
16. In Current page load location class, enter  display-window . The class name is used to locate the display window.
17. Click Save Widget.
18. Add a Button widget for each Page Builder page that you want to display on this page. Configure the buttons exactly the same, only changing which Page Builder page the button opens.
19. Add a Raw HTML widget below the Button widgets.
20. On the Raw HTML widget, click the gear icon > Edit properties.
21. In the editor, add the following code.

    <script>
        window.onload = function onLoad() { $('.selected-button')[0].click(); };
    </script>

22. Click Save Widget.
23. Edit the Button widget for the page you want to display when the page first loads.
24. Click Advanced.
25. In Custom CSS class, add  selected-button . (e.g. btn-block selected-button )
26. Click Save Widget.
27. Click Layout.
28. Drag a 12-column layout into the right column. This is where the Page Builder pages will display.
29. On the 12-column layout, click the gear icon > Edit properties.
30. In Custom CSS class, enter the location class name you entered for the button widgets. This will tell the page to load the other Page Builder pages in this area.
31. Click Save Widget.
32. Click Publish changes.
33. Click Go to page.
34. Click a button to load that page.