Frequently Asked Questions
Answers to the most common questions about WPStylo: compatibility, exports, the companion plugin, free plan and more.
Getting started
What exactly is WPStylo?
WPStylo is a free web app that lets you configure a visual design system - colors, typography, buttons and global elements - and preview everything live on a full dummy page before exporting to WordPress, Elementor, FSE or Tailwind.
Do I need to know how to code?
Not at all. WPStylo is entirely visual. You pick colors with a color picker, choose fonts from Google Fonts, and adjust sliders for sizes and spacing. The CSS, PHP and JSON outputs are generated automatically behind the scenes.
Can WPStylo generate a palette for me?
Yes. Randomize creates an accessible, semantic palette (and a curated font pairing) in one click - a starting point you can refine.
Is WPStylo free?
Yes, completely free. No account required, no subscription, no credit card, no trial period. Just open the app and start configuring.
Do I need to create an account?
No. WPStylo works directly in your browser without any registration. Your configuration is saved locally (localStorage) and can be exported as a JSON file at any time.
Can I preview more than a landing page?
Yes. The live preview includes a landing page, a blog post layout and a dedicated style guide view. Switch between them in one click.
Compatibility
Does WPStylo work with Elementor?
Yes. WPStylo exports a complete Elementor Kit (colors, typography and button settings) ready to import into Elementor's Kit Manager. Compatible with Elementor 3.0 and later. The WPStylo Companion Plugin automates the import directly from WordPress. WPStylo is also fully available with the new Elementor Atomic elements (v4+).
Does it work with Full Site Editing (FSE) / block themes?
Yes. WPStylo exports a valid `theme.json` v3 file that merges seamlessly with any FSE or block theme. Colors and font sizes are exported with full `clamp()` support: no value conversions needed.
Does it work with any WordPress theme, not just Elementor and FSE?
Yes. The CSS Custom Properties export (`--wps-color-primary`, `--wps-font-h1`, etc.) works with any theme or custom build. You can paste the generated `:root { }` block into your child theme's stylesheet.
Exports
What export formats does WPStylo support?
WPStylo currently supports two export formats: CSS Custom Properties and WPStylo JSON. The json file can be used with WPStylo Companion Plugin for WordPress which allow you to import your designs into FSE, Elementor and CSS.
How does it work with Elementor?
WPStylo uses the Companion Plugin that injects your colors, fonts and buttons directly into Elementor's Kit Manager API. It's a one click process.
Elementor v3+ : Responsive values are converted to separate desktop, tablet and mobile values.
Elementor v4+ (Atomic design) : Responsive values are using `clamp()` natively.
How does it work with FSE and theme.json?
WPStylo Companion plugin generates a `theme.json` v3 file using your color palette (as named palette entries) and font sizes (with `clamp()` values). You can either merge it with your actual theme.json file, or generate a new file in one click.
Can I import a configuration I exported previously?
Yes. Any WPStylo JSON file can be imported back into the app at any time. All your colors, fonts, buttons and element settings are restored exactly as you left them.
Companion Plugin
What is the WPStylo Companion Plugin?
The Companion Plugin is a free WordPress plugin that connects your WordPress site to WPStylo. Instead of copy-pasting code snippets, you export your design system from the app and import it directly into WordPress with one click in the plugin's admin panel.
Is the Companion Plugin free?
Yes, completely free. It's available to download from the WPStylo website or directly from the WordPress.org plugin repository (coming soon).
Which WordPress import methods does the Companion Plugin support?
Once you exported your wpstylo.json file on the app, just import it on the plugin.
The plugin will allow you to use the json file for: CSS Custom Properties (injected via `wp_head`), Elementor Kit (via the Kit Manager API), and theme.json (merged with your active theme's file via the WP_Filesystem API).
Can I still edit my styles in WordPress or Elementor after importing with the plugin?
Yes. The plugin imports your configuration as a starting point. You can then fine-tune everything directly in Elementor's Site Settings or your theme's editor, the plugin doesn't lock anything.
Does the plugin require any specific WordPress or PHP version?
The plugin requires WordPress 5.9 or later and PHP 7.4 or later. For the Elementor import, Elementor 3.0 or later is required.
Responsive & typography
How does responsive typography work in WPStylo?
For each typographic role (H1, H2, Body, etc.), you set a desktop size and a mobile size, both in rem. WPStylo automatically calculates the `clamp(min, preferred, max)` formula that scales smoothly between your breakpoints (default: 375px mobile, 1080px desktop).
What base font size does WPStylo use for rem calculations?
16px by default. This is configurable in the app settings.
Can I change the breakpoints used for clamp() calculations?
Yes. The min-viewport and max-viewport used in the clamp formula are configurable in the app.
Still have a question?
Open the app and explore or drop us a message on the contact page.
Open WPStylo →