Elementor is a powerful and user-friendly page builder that allows you to create stunning websites with ease. It’s widely used across WordPress websites due to its flexibility and design freedom.
Before you begin designing, it’s important to configure Elementor correctly to ensure it works seamlessly with your theme.
📘 Getting Started with Elementor #
We recommend exploring Elementor’s official resources before diving in:
🔧 Basic Settings (Disable Defaults) #
By default, Elementor loads Roboto as the font and uses its own color scheme for elements. This can cause your website to look different from the demo or your theme’s intended styles.
To inherit your theme’s styles (fonts and colors), follow these steps:
- Navigate to: Elementor > Settings from your WordPress dashboard.
- Under the General tab:
- ✅ Disable Default Colors – This allows your theme’s color palette to take effect.
- ✅ Disable Default Fonts – This ensures your site uses the fonts defined in your theme.
📌 Recommended: Enable both options for better compatibility with custom or premium themes.
🛒 Enable Elementor for Products #
By default, Elementor is only activated for Posts and Pages.
To use Elementor with WooCommerce Products:
- Go to Elementor > Settings > General.
- Check the box next to Products under Post Types.
This will enable Elementor editing for product pages, allowing you to create beautifully customized WooCommerce layouts.
🖼️ Refer to the screenshot above to see where these settings are located.
✅ Summary #
| Setting | Recommended Action | Why? |
|---|---|---|
| Disable Default Colors | ✅ Enabled | Inherit your theme’s color scheme |
| Disable Default Fonts | ✅ Enabled | Use your theme’s typography |
| Enable Elementor for Products | ✅ If using WooCommerce | Edit product pages with Elementor |
If you have any questions or run into styling issues, feel free to reach out to Theme Support or explore Elementor’s Knowledge Base.