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

The icon appears in the header.

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

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. Click the gear icon > Page Builder > Header.
2. Add or edit a Page Builder page.
3. Click Widgets.
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 Advanced.
8. Check Open content in modal. This will allow the Section widget to display its content in a side modal.
   
9. Click Template.
10. Select the Button template.
11. Click Save Widget.
12. Drag another widget into the Section widget. In this example, we'll add a People widget.
13. On the People widget, click the gear icon > Edit properties.
14. Configure the widget 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.

Layout of the example page:

How to Edit the Side Modal

You can add, edit, or remove the widgets in the side modal.

1. Click the gear icon > Page Builder.
2. Edit the page or header.
3. On the Section widget, click the gear icon > Expand.
4. Add, edit, or remove the widgets in the Section widget.
5. Click Save Widget.
6. Click Publish changes.
7. Click Go to page.