Live Front-end Theme Customizer

With Styles Pro Add-On, it is now easier than ever to customize the styles of your Gravity Forms themes using the new real-time customizer. You may open any page in the live preview and see changes applied instantly to the page, giving you more power and control over the form styling than ever before. All changes you make to your styles, including from the color picker will be shown immediately in the preview. Fine-tune confidently without the need for any guess-work.

To use Styles Pro Realtime Customizer, embed your Gravity Form (that has Styles Pro activated on it) on any page or post (or custom post-type) and visit the page URL. Now hover over the Gravity Forms admin bar menu to open the flyout. Click on Styles Pro Customizer to open the link as the preview in the customizer. Not that this feature will not appear for Category or Archive URLs, but for all single posts, pages, and singular links for other post-types.

Once inside the previewer, it will automatically select the theme for you that is found on the Gravity Form on the page. If you have more than themes present on your preview page, no theme will not be auto-selected, and the theme selection will be defaulted to the last theme edited. You can use the theme dropdown to select the theme you want to customize. Other than that, you may use the customizer just like before, customizing multiple themes at once. You may also open pages with multiple Gravity Forms with different themes and customize and save changes to those themes all at once.

You may experiment with your styles as much as you want, if you’re not satisfied with the changes, simply refresh the page to restart where you had last saved. Once satisfied, click on the Update All Settings button just like before and the settings will be saved.

One new notable feature that’s now available is the ability to find and use Google Fonts officially added custom weights. Available weights for each of the font will be highlighted in bold wherever you’re choosing a font weight. Styles Pro will automatically detect the weights available and highlights them. You may still use any other font-weights if you want to rely on browser’s interpretation of those font-weights.

Note: To make sure your previews show as expected, please do not forget to add CSS units in the fields which require them. If you leave numbers only, the preview will not show you what you expect but upon saving, the default unit of px will be added to reduce errors on the page.

Use the right collapse button to close the preview window, or the left collapse button to close the customizer and return to the page.

Since Version 3.0