How to Create a Side Modal | Communifire Documentation

Add a button to the header or on a Page Builder page that opens content in a side modal.

Header example

Page Builder example

How to create a side modal for the header

In this example, we'll add a button to the header that opens a list of required reading in a side modal.

1. Go to Control Panel > System > Page Builder > Header.
2. Edit the header.
   
   
3. Click the Widgets tab.
   
4. Drag a Section widget onto the page.
   
5. On the Section widget, click the gear icon > Edit properties.
   
   
6. Update the widget title.
7. Click the Advanced tab.
   
8. Set an Icon. This icon will appear in the header.
   
9. In Custom CSS class, enter ax-diamond-notifications .
10. Uncheck Show header.
    
11. Check Open content in modal.
    
12. Click Save Widget.
    
13. Drag a Content List widget into the Section widget.
    
14. On the Content List widget, click the gear icon > Edit properties.
    
    
15. Update the widget title.
16. Set Required reading type to Only Unconfirmed.
    
    
17. Set Total items.
18. Click the Template tab.
    
19. Select a template for the widget. We recommend using the Icon List Template .
20. Click Save Widget.
    
21. Click Publish changes.
    
22. Click Go to page.
    

The icon appears in the header.

Clicking the icon opens the required reading list in a side modal.

Editing a side modal in the header

To add or edit widgets in the side modal, expand the Section widget.

How to create a side modal for a Page Builder page

In this example, we'll add a button to a Page Builder page that opens a People widget in a side modal.

1. Go to Control Panel > System > Page Builder.
2. Edit a Page Builder page.
   
   
3. Click the Widgets tab.
   
4. Add a Section widget onto the page.
   
5. On the Section widget, click the gear icon > Edit properties.
   
   
6. Update the widget Title. This title will appear on the page.
7. Click the Advanced tab.
   
8. Check Open content in modal. This will make the Section widget appear as a button.
   
   
9. Click the Template tab.
   
10. Select the Button template.
11. Click Save Widget.
    
12. Drag a People widget into the Section widget.
    
13. On the People widget, click the gear icon > Edit properties.
    
    
14. Configure the People widget's settings.
15. Click Save Widget.
    
16. Click Publish changes.
    
17. Click Go to page.
    

The Section widget we added appears as a button.

Clicking the button opens a side modal containing the People widget.

Editing a side modal on a Page Builder page

To add or edit widgets in the side modal, expand the Section widget.