Page Builders

Use shortcodes when you want to place calculators inside a page builder instead of the standard block editor.

Where This Works Best

Lite calculators usually work well in:

• Elementor shortcode widgets
• Other builders that offer a shortcode widget or shortcode module
• Widget areas that process WordPress shortcodes
• Template areas that call WordPress shortcodes correctly

Recommended Setup Pattern

1. Add the builder’s shortcode widget or module
2. Paste a valid Lite shortcode
3. Start with width="100%"
4. Publish or preview the live page
5. Recheck the layout on desktop and mobile

Example Shortcodes

[vareon type="loan"]
[vareon type="mortgage" theme="dark"]
[vareon type="percentage" width="100%"]

Common Builder Issues

Nothing renders

• Confirm the builder field actually executes shortcodes
• Test the same shortcode in a standard Shortcode block
• Recheck that the type slug is valid

The width looks wrong

• Start with width="100%"
• Check the parent column or container width
• Use a fixed width like 620px only when the layout calls for it

The preview looks different from the live page

• Check the published frontend, not only the builder canvas
• Clear cache and reload
• Recheck the builder container width and spacing

Related Guides

• Using Shortcodes
• Calculator Library
• Troubleshooting