Search Divi Modal Popup Documentation
Search for answers or browse our knowledge base.
Divi Modal Popup Design Customization
- Once you’re done customizing the modal content, move to the design tab for further modal appearance customization.
- Trigger Alignment: To change alignment of the modal trigger, go to Alignment in the design tab >> and choose alignment Left/Right/Center.
- Custom Style Trigger Button: If you want to customize the trigger button, then go to Trigger Button >> and apply customize according to your needs.
- Customize Trigger Icon: If you want to customize the appearance of the modal trigger icon, go to Trigger Icon >> customize size and color of the trigger icon.
- Customize Trigger Text: Go to Trigger Text >> apply customization for the appearance of the trigger text.
- Modal Title: To customize the Module Title Text, go to Modal Title Text settings >> and customize heading level of modal title, font style, color, and more.
- Body Text: To customize Modal Body Text, go to Modal Body Text settings >> and customize body text appearance.
- Close Icon: To change the size of the close icon and its color, go to Modal Close Icon >> apply customizations.
- Modal Close Button: To apply custom styling on the close button, go to Modal Close Button settings >> apply required customizations such as change the font size & color of the close button text. You can also change the background of the close button, and apply other appearance customization.
- Box Shadow: To apply shadow on the modal, trigger element, header and footer of the modal, go to Box Shadow settings >> and do the required customizations.
- Border: To apply border customization on trigger element and modal, go to Border settings of the design tab, and apply borders accordingly.
- Modal Sizing & Alignment: To place your modal on different locations on the page, go to Modal Sizing & Alignment >> apply available placement options TopLeft/Top Right/Top Center/Bottom Left/Bottom Right/Bottom Center, and Center. Along with these, using this setting, you can also make changes in the modal Width and Height.
- Spacing: To apply spacing customization on the Modal, Modal header, Modal Body, and Modal Footer, go to Spacing settings >> and values accordingly.
- Animation: To apply animation style on modal with all the other animation customizations such as Animation Duration, Starting Opacity, and Speed, go to Animation settings in the Design tab >> and apply tweaks as needed.