Design customization

Divi Modal Popup Design Customization

1. Once you’re done customizing the modal content, move to the design tab for further modal appearance customization.
2. Trigger Alignment: To change alignment of the modal trigger, go to Alignment in the design tab >> and choose alignment Left/Right/Center.
3. Custom Style Trigger Button: If you want to customize the trigger button, then go to Trigger Button >> and apply customize according to your needs. 
4. 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.
5. Customize Trigger Text: Go to Trigger Text >> apply customization for the appearance of the trigger text.
6. 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.
7. Body Text: To customize Modal Body Text, go to Modal Body Text settings >> and customize body text appearance. 
8. Close Icon: To change the size of the close icon and its color, go to Modal Close Icon >> apply customizations.
9. 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.
10. 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.
11. Border: To apply border customization on trigger element and modal, go to Border settings of the design tab, and apply borders accordingly.
12. 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.
13. Spacing: To apply spacing customization on the Modal, Modal header, Modal Body, and Modal Footer, go to Spacing settings >> and values accordingly.
14. 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.