Configration the Elementor

Elementor is a powerful page builder that provides full design flexibility for WordPress websites. Proper configuration ensures that your Themepul theme and Topper Pack plugin function seamlessly, and all widgets, templates, and demo content display correctly.

---

Step 1: Install and Activate Elementor

1. Ensure that Elementor is installed and activated.
2. Navigate to Plugins → Installed Plugins and confirm that Elementor is active.
3. If you have Topper Pack or Topper Pack Pro, Elementor must be active before activating these plugins.

---

Step 2: Elementor General Settings

1. Go to Elementor → Settings in your WordPress dashboard.
2. On the General tab:
   • Post Types: Enable for Pages, Posts, and any custom post types your theme uses.
   • Disable Default Colors / Fonts:
     • Check Disable Default Colors
     • Check Disable Default Fonts
     This ensures that the theme’s typography and color settings take precedence.

---

Step 3: Elementor Style & Layout Settings

1. Navigate to Elementor → Settings → Style:
   • Adjust the Content Width to match your theme design (commonly 1140px or full-width).
   • Set the Default Fonts and Colors to inherit from the theme if not disabled in Step 2.
2. Go to Elementor → Settings → Advanced:
   • CSS Print Method: Choose Internal Embedding for better compatibility with some themes.
   • Switch Editor Loader Method: Only enable if you face editor loading issues.

---

Step 4: Configure Topper Pack Widgets (Optional)

1. After activating the Topper Pack plugin, go to Elementor → Topper Pack Dashboard.
2. Enable the modules or widgets you want to use on your pages.
   • Example: Sliders, Carousels, Team Modules, Post Grids, WooCommerce widgets, etc.
3. Save the settings. Now, these widgets will appear in Elementor’s panel when editing pages.

---

Step 5: Global Fonts and Colors (Optional)

1. Navigate to Elementor → Site Settings → Global Fonts / Colors.
2. Set default Typography and Color Palettes to match your Themepul theme.
3. This ensures uniform design across all pages and improves workflow efficiency.

---

Step 6: Test Elementor Compatibility

1. Create a new page and click Edit with Elementor.
2. Add some Topper Pack widgets and ensure they display correctly.
3. If any widget or style does not load, clear your cache and regenerate CSS & Data in Elementor → Tools.

---

Tips for Smooth Elementor Experience

• Always use the latest version of Elementor to ensure compatibility.
• Disable conflicting plugins that modify the Elementor editor.
• Keep your PHP limits high (memory_limit ≥ 256M, max_execution_time ≥ 300) for heavy pages or large demos.
• Regularly check Elementor → System Info to verify server compatibility.