What “Regenerate Files” Does

When you use the “Regenerate Files” function in Elementor’s tools section, here’s what happens:

1. Data Update: Elementor updates all page information that might have changed since the last version, including layouts, colors, and widget settings.
2. CSS Refresh: Elementor refreshes the “style instructions” (CSS) for your website.
3. On-Demand Generation: New style files are created when someone visits a page, rather than all at once. This prevents overwhelming your website, especially if you have many pages.
4. Potential Display Issues: Temporary display problems may occur, particularly if you’re using caching.

Why This Matters

• Running “Regenerate Files” after updating Elementor or making significant changes helps ensure correct display.
• Odd appearances after updates are often due to this process and are usually temporary.
• Site owners using caching may need to clear their cache after regenerating files or updating Elementor.

Caching Considerations

WordPress Caching Plugins

Different caching plugins (e.g., WP Rocket) offer settings to prevent layout issues after updates:

1. Automatic cache clearing after plugin/theme updates
2. Exclusion of certain pages from caching
3. Cache preloading to regenerate content after updates

Recommendations:

• Check your caching plugin’s documentation for Elementor-specific settings.
• Look for options to clear cache after plugin updates.
• Consider temporarily excluding Elementor-edited pages from caching after major updates.
• Test your site after updates, especially if you’ve changed caching settings.

Best Practice for Major Edits:

It’s crucial to clear your cache both before and after making any significant edits to your site:

1. Before Editing: Clear your cache using your caching plugin (e.g., WP Rocket) before starting major edits. This ensures you’re working with the most current version of your site and prevents any cached elements from interfering with your changes.
2. After Editing: Once you’ve completed your edits and are satisfied with the changes, clear your cache again. This step ensures that your visitors will see the updated version of your site immediately.

By following this practice, you minimize the risk of working with outdated content during your editing process and ensure that your changes are immediately visible to your site visitors.

CDN Caching

If using a CDN like CloudFlare:

1. CDN Cache Persistence: CDNs store copies of your site globally, which can persist after changes.
2. Manual Purging: You may need to manually purge CDN cache after major updates.
3. Selective Purging: Some CDNs allow purging cache for specific files/pages.
4. Automatic Cache Rules: Advanced setups might have rules for automatic cache clearing.

Steps to Take:

1. Clear local WordPress cache
2. Regenerate files in Elementor
3. Purge CDN cache (e.g., via CloudFlare dashboard)

Clearing Browser Cache

Browser caching can prevent you from seeing the latest version of your site. Here’s how to clear cache in common browsers:

1. Google Chrome:
   • Menu (three dots) > More tools > Clear browsing data
   • Select “Cached images and files” and clear
2. Firefox:
   • Menu > Options > Privacy & Security > Cookies and Site Data > Clear Data
   • Ensure “Cached Web Content” is checked
3. Safari:
   • Safari > Preferences > Advanced > Show Develop menu
   • Develop > Empty Caches
4. Microsoft Edge:
   • Settings > Privacy and services > Clear browsing data
   • Select “Cached images and files” and clear

Quick Tip: Use “hard reload” to bypass cache:

• Windows/Linux: Ctrl + F5
• Mac: Cmd + Shift + R

Testing in Incognito Mode

Benefits of using incognito/private browsing:

1. Fresh Cache: Starts with a clean slate each session
2. No Extensions: Closer to typical visitor experience
3. No Saved Logins: Easy to test non-logged-in user view
4. Multiple Account Testing: Test different user roles easily
5. Consistency: Provides a consistent testing environment

When It’s Most Useful:

• User experience testing
• Troubleshooting
• Responsive design checks
• After updates
• E-commerce process testing

How to Open Incognito Mode:

• Chrome/Edge: Ctrl+Shift+N (Windows/Linux) or Command+Shift+N (Mac)
• Firefox: Ctrl+Shift+P (Windows/Linux) or Command+Shift+P (Mac)
• Safari: Command+Shift+N

Remember: Incognito mode is a useful tool but doesn’t replace comprehensive testing across different browsers and devices.

Common Issues and Troubleshooting

Discrepancies Between Elementor Editor and Live Site

If you notice that what you see in the Elementor editor is different from what appears in a live browser, this is almost always due to a caching issue. Here’s what you need to know:

1. Nature of the Problem: The Elementor editor shows you real-time changes, while the live site may be showing a cached version.
2. Common Symptoms:
   • Layout differences
   • Missing new elements
   • Old content still visible
   • Styling changes not reflected
3. Why It Happens: Caching is designed to make your site load faster by serving stored versions of your pages. However, this can sometimes prevent the latest changes from being immediately visible.
4. How to Resolve:
   • Clear your browser cache
   • Purge your WordPress caching plugin (e.g., WP Rocket)
   • Clear CDN cache if you’re using one
   • Use the “Regenerate Files” function in Elementor
   • View the page in an incognito/private browsing window
5. Prevention: Follow the best practice of clearing caches before and after making major edits, as mentioned earlier in this guide.

Remember, if you’re seeing the correct version in the Elementor editor but not on the live site, it’s rarely an issue with Elementor itself. Instead, focus on clearing the various layers of caching to ensure your latest changes are visible.

By understanding these processes and tools, you can ensure your Elementor-built site always displays correctly and reflects your latest changes accurately.