Styling System
RedFox Thank You includes a powerful and intuitive styling system that gives you complete control over the appearance of your thank you pages. No coding knowledge required!
Overview#
The styling system is organized into control groups that appear in the Styles tab of the block inspector panel. The free version provides essential styling controls, while the Pro version unlocks advanced capabilities for professional-grade designs.
Free Styling Controls#
- Typography – Font size, line height, text color, and text alignment.
- Spacing – Margins and padding with linked/unlinked sides.
- Background – Background color.
- Colors – Text colors, border colors, and element colors.
Pro Styling Controls#
Everything in Free, plus:
- Extended Typography – Google Fonts, font weight, font style, text decoration, letter spacing, word spacing, and text transform.
- Extended Background – Background images, gradients, patterns, and overlays with blend modes.
- Border – Border width, style, color, and border radius.
- Box Shadow – Full shadow controls with offset, blur, spread, color, and inset toggle.
- Sizing – Width, height, min/max width, and min/max height.
- Enhanced Button Styling – Gradient backgrounds, typography, spacing, borders, and box shadows for buttons.
All styling controls are:
- Visual – See changes in real-time in the editor.
- Responsive – Set different values for desktop, tablet, and mobile.
- Intuitive – Easy-to-use interface with reset buttons.
- Powerful – Achieve professional results without writing CSS.
Typography Controls#
Control every aspect of text styling across your blocks. Typography controls appear in the Styles tab under sections like Title Text, Label Text, Block Text, etc., depending on the block.
Free Typography Options#
- Font Size – Adjusts the size of the text.
- Line Height – Controls the spacing between lines of text.
- Text Color – Sets the color of the text.
- Text Alignment – Defines how the text is aligned.
Pro Typography Options#
- Font Family – Manage the typography of your text with a searchable font selector that provides access to over 1,000 Google Fonts. Fonts are loaded dynamically, ensuring that only the selected typeface is enqueued on the front end for optimal performance.
- Font Weight – Set the font weight and available weight options update dynamically based on the selected Google Font’s supported variants.
- Font Style – Allows you to toggle text styles, including italic, underline, and strikethrough.
- Letter Spacing – Adjusts the spacing between characters in the text.
- Word Spacing – Adjusts the spacing between words in the text.
- Text Transform – Controls the capitalization style of the text (e.g., uppercase, lowercase, capitalize).
| Feature | Free | Pro |
|---|---|---|
| Font Size | ✅ | ✅ |
| Line Height | ✅ | ✅ |
| Text Color | ✅ | ✅ |
| Text Alignment | ✅ | ✅ |
| Font Family | ❌ | ✅ |
| Font Weight | ❌ | ✅ |
| Font Style | ❌ | ✅ |
| Letter Spacing | ❌ | ✅ |
| Word Spacing | ❌ | ✅ |
| Text Transform | ❌ | ✅ |
Spacing Controls#
Control the space around and inside blocks with margin and padding.
Margin#
External spacing around blocks:
Sides: Top, Right, Bottom, Left.
Modes:
- Linked – All sides use the same value (click the link icon).
- Unlinked – Set individual values per side.
Padding#
Internal spacing inside blocks:
Sides: Top, Right, Bottom, Left.
Modes: Same options as margin.
Background Controls#
Customize block backgrounds with colors, images, gradients, patterns, and overlays.
Free Background Options#
- Background Color – Specifies the background color.
Pro Background Options#
- Background Gradient – Define the gradient background.
- Background Image – Specifies the image displayed in the background. Upload or select an image from the media library.
- Background Size (This option is available if there is a Background Image): Cover, Contain, Auto, or Custom (with px, %, em, rem, vw, vh units).
- Background Position (This option is available if there is a Background Image): Center, Top, Bottom, Left, Right, and other combinations.
- Background Repeat (This option is available if there is a Background Image): No Repeat, Repeat, Repeat X, Repeat Y.
- Background Attachment (This option is available if there is a Background Image): Scroll, Fixed.
- Background Overlay – Add layer effects over your background.
| Feature | Free | Pro |
|---|---|---|
| Background Color | ✅ | ✅ |
| Background Image | ❌ | ✅ |
| Background Gradient | ❌ | ✅ |
| Background Overlay | ❌ | ✅ |
Border Controls (Pro)#
Add and customize borders on any block. Border controls are automatically available on all supported blocks when the Pro version is active.
Border Options#
Border Settings
- Width – Set border width in pixels or other units.
- Style – Solid, Dashed, Dotted, and more.
- Color – Full color picker.
- Individual Sides – Set borders per side (top, right, bottom, left) or all sides at once.
Border Radius
Round the corners of any block:
- Individual Corners – Set radius for top-left, top-right, bottom-right, and bottom-left independently.
- Linked Mode – Apply the same radius to all corners.
Box Shadow Controls (Pro)#
Add depth and dimension to blocks with box shadow. Box shadow controls are automatically available on all supported blocks when the Pro version is active.
Shadow Options#
- Color – Shadow color with full color picker. Set a color to make the shadow visible instantly.
- Horizontal Offset – Range: -100 to 100 (default: 0px).
- Vertical Offset – Range: -100 to 100 (default: 2px).
- Blur – Range: 0 to 200 (default: 4px).
- Spread – Range: -100 to 100 (default: 0px).
- Inset – Toggle to create an inner shadow.
Sizing Controls (Pro)#
Control the dimensions of blocks with precision. Sizing controls are automatically available on all supported blocks when the Pro version is active.
Available Options#
- Width – Set the block width.
- Height – Set the block height.
- Min Width – Set a minimum width.
- Min Height – Set a minimum height.
- Max Width – Set a maximum width.
- Max Height – Set a maximum height.
Button Styling#
Buttons appear in several blocks (Downloads, Banner, Products Grid, Products Slider). The free version provides basic button color controls, while Pro unlocks full button customization.
Free Button Options#
- Background Color – Solid background color with color picker.
- Text Color – Button text color with color picker.
Pro Button Options#
- Gradient Background – Apply gradient backgrounds to buttons.
- Typography – Full typography controls including Google Fonts, font size, weight, style, text decoration, text transform, line height, letter spacing, and word spacing.
- Spacing – Padding and margin for buttons (all sides).
- Border – Full border controls with border radius.
- Box Shadow – Complete shadow controls.
- Hover Effects – Background and text color on hover.
| Feature | Free | Pro |
|---|---|---|
| Background Color | ✅ | ✅ |
| Text Color | ✅ | ✅ |
| Gradient Background | ❌ | ✅ |
| Typography | ❌ | ✅ |
| Spacing (Padding/Margin) | ❌ | ✅ |
| Border & Radius | ❌ | ✅ |
| Box Shadow | ❌ | ✅ |
| Hover Effects | ❌ | ✅ |
Reset Functionality#
Every styling control includes convenient reset options:
- Individual Reset – Reset a single control back to its default value.
- Group Reset – Reset all controls within a group (e.g., reset all typography at once).
- Sub-group Reset – Reset controls within a sub-group (e.g., reset button spacing only).
Reset buttons appear only when values have been set, keeping the interface clean.
Browser Compatibility#
All styling controls generate standard CSS that works in:
- Chrome / Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Mobile browsers (iOS Safari, Chrome for Android)