Elementor is most popular to build wordpress website in today’s ere.
When Elementor’s “regenerate CSS” feature isn’t working (css not working), it typically stems from a few common issues. Here’s a step-by-step guide to troubleshoot and resolve the problem:
1. Clear Browser Cache
Sometimes, the issue is on the browser side. Clear your browser cache to ensure you are not seeing a cached version of your site.
2. Clear Site Cache
If you are using any caching plugins (like W3 Total Cache, WP Super Cache, or others), clear the site cache. Also, clear any server-side caches if your hosting provider offers such features.
3. Regenerate CSS in Elementor
- Go to Elementor > Tools.
- Under the “General” tab, click on “Regenerate Files & Sync Library”.
4. Check File Permissions
Ensure that your WordPress installation has the correct file permissions to write the CSS files. The typical permissions are:
- Directories: 755
- Files: 644
5. Check for Plugin Conflicts
Deactivate all plugins except Elementor and Elementor Pro. If the issue is resolved, reactivate the plugins one by one to identify the conflicting plugin.
6. Update Elementor and WordPress
Ensure that you are using the latest versions of Elementor, Elementor Pro, and WordPress.
7. Check for Theme Conflicts
Switch to a default WordPress theme (like Twenty Twenty-One) to check if the issue is related to your theme.
8. Enable Debug Mode
Turn on WordPress debug mode to see if any errors are being logged:
- In your wp-config.php file, set define(‘WP_DEBUG’, true);.
- Look for any errors or warnings that might indicate the problem.
9. Server Configuration
Ensure that your server meets Elementor’s requirements, such as having sufficient PHP memory limit and execution time. Recommended values are:
- Memory Limit: 256M or higher
- Max Execution Time: 300 seconds or higher
10. Regenerate CSS Manually
As a last resort, you can manually delete the old CSS files:
- Use an FTP client or File Manager to navigate to /wp-content/uploads/elementor/css/.
- Delete the files in this directory. Elementor will regenerate them when you make changes or regenerate CSS from the Elementor tools.
11. Check Console for Errors
Open the browser’s developer console (F12 or right-click > Inspect, then go to the Console tab) to see if there are any JavaScript errors that might be preventing the CSS regeneration.
If none of these steps resolve the issue, you may need to contact Elementor support for further assistance, providing them with details of the steps you’ve already taken and any error messages you’ve encountered.