How Can We Help?

Search for answers or browse our knowledge base.

< All Topics
Print

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.
Previous Configuration
Table of Contents