Simply Popups Pro introduces extended styling capabilities that give you pixel-perfect control over your modals without writing custom CSS.
Extended Design Controls
When using Simply Popups Pro, you will see additional options in the Block Settings sidebar under the Styles tab.
Advanced Color Palettes
Pro provides a granular color control system:
- Overlay Gradients: Instead of solid colors, apply gradient backgrounds to the page overlay.
- Button States: Define separate colors for
Hover,Focus, andActivestates for your trigger buttons. - Link Colors: Specifically style text links within your popup content.
Typography Control
Gain full control over the typography hierarchy within your modal:
- Font Families: Access Google Fonts or system font stacks directly.
- Line Height & Letter Spacing: Fine-tune text readability.
- Text Transform: Options for Uppercase, Lowercase, or Capitalize.
Spacing & Dimensions
- Custom Widths: Set exact pixel or percentage widths for your modals (e.g.,
600pxor80%), bypassing the standard Small/Default/Large presets. - Responsive Padding: Set different padding values for Desktop, Tablet, and Mobile views to ensure your content looks great on all devices.
- Border Control: Add borders with custom width, style (solid, dashed, dotted), and colors to the modal container.
Shadow & Corner Effects
Add depth to your popups:
- Box Shadows: Configure X/Y offsets, blur radius, and spread for the modal window.
- Corner Radius: Set individual corner radii (e.g., round top corners but square bottom corners).
Custom CSS Classes
For developers who need even more control, every element of the Simply Popups block supports standard WordPress Advanced CSS class fields.
- Select the Simply Popups block.
- Expand the Advanced section in the sidebar.
- Add your class to Additional CSS Class(es).
You can then target your popup in your theme’s stylesheet:
.my-custom-popup .simply-modal-content {
border-top: 5px solid #ff0000;
}