WordPress Page Builders – Embed Guide
This page gives instructions for embedding CrowdWork widgets on WordPress sites using popular page builders like Elementor, Divi, Beaver Builder, and others.
Using a WordPress page builder like Elementor, Divi, or Beaver Builder? Perfect! This guide will show you exactly how to embed your CrowdWork widgets using the most popular page builders. The process is surprisingly similar across all builders once you know what to look for.
✅ What You'll Need
Before you begin, make sure you have:
Your CrowdWork account with shows or classes created
A WordPress site with a page builder installed
Your widget embed code from CrowdWork
About 5 minutes of your time
👾 Getting Your Widget Code
First, let's grab your widget code from CrowdWork:
Log in to your CrowdWork Dashboard
Navigate to Theatre > Embeds in the left sidebar
Choose your widget type (Shows or Classes)
Select your preferred view (Calendar or Cards)
Customize with any filters if needed (by tag, start date, etc.)
Copy the code snippet provided in the box
🏗️ Page Builder Specific Instructions
Elementor
Elementor is the most popular WordPress page builder, making it super easy to add custom code:
Method 1: Using the HTML Widget (Recommended)
Open Elementor Editor
Edit your page with Elementor
Make sure you're in the visual editor
Add HTML Widget
From the left sidebar, drag the "HTML" widget to your desired location
OR search for "HTML" in the widget search bar
Paste Your Code
Click on the HTML widget you just added
In the Content tab on the left, paste your CrowdWork widget code in the HTML Code field
The widget should preview immediately in the editor
Adjust Settings
Use the Style tab to add any custom spacing or styling if needed
The Advanced tab lets you set custom CSS classes or IDs
Method 2: Using the Shortcode Widget
Add Shortcode Widget
Drag the "Shortcode" widget from the sidebar
Paste Full Code
In the Content tab, paste your complete CrowdWork embed code
Make sure to include the entire
<script>tag
Elementor Tip: We've noticed that Elementor sometimes adds overflow-y: auto as an inline style, which can create unwanted scrollbars. If you see this, you can override it by setting overflow to "hidden" in the Advanced > Custom CSS section.
Divi Builder
Divi has its own unique approach but is just as straightforward:
Using the Code Module
Open Divi Builder
Click "Use The Divi Builder" on your page
Choose "Build From Scratch" or edit an existing layout
Add Code Module
Click the grey "+" icon to add a new module
Search for and select the "Code" module from the library
Configure the Module
The module settings will open automatically
In the Content tab, paste your CrowdWork widget code in the Code field
Leave the content as-is - no need to wrap in additional tags
Save and Preview
Click "Save" to apply your changes
Exit the Visual Builder to see your widget live
Beaver Builder
Beaver Builder keeps things clean and simple:
Using the HTML Module
Open Beaver Builder
Click "Launch Beaver Builder" on your page
Add HTML Module
From the Basic Modules tab, drag the "HTML" module to your page
Drop it in your desired location
Enter Your Code
Click the HTML module to edit it
Paste your CrowdWork widget code in the HTML field
Click "Save"
Publish Changes
Click "Done" > "Publish" to make your changes live
Other Popular Page Builders
Thrive Architect
Look for the "Custom HTML" element
Drag it to your page and paste your CrowdWork code
WPBakery Page Builder (Visual Composer)
Add a "Raw HTML" element
Paste your widget code in the content area
Oxygen Builder
Use the "Code Block" element
Paste your CrowdWork widget code
Gutenberg (Block Editor) with Page Builder Plugins
Look for "Custom HTML" blocks in your page builder's block library
The process is very similar to the standard Gutenberg approach
💄 Making Your Widget Look Amazing
Regardless of which page builder you use, here are some tips to make your widgets shine:
Layout Considerations
Full Width: Calendar widgets look best in full-width sections
Container Width: Card widgets can work well in narrower containers
Vertical Space: Calendar views need more height than card views
Mobile Testing: Always preview on mobile devices
Styling Tips
Spacing: Add adequate padding around your widgets
Backgrounds: Consider subtle background colors or patterns
Alignment: Center your widgets for the best visual impact
Integration: Match your widget's placement with your site's overall design flow
🔧 Troubleshooting
Widget Not Displaying
Check the code: Ensure you've pasted the complete embed code
Preview vs Live: Some page builders only show widgets on the published site
JavaScript conflicts: Try disabling other plugins temporarily to test
Theme compatibility: Some themes may conflict with embedded widgets
Performance Issues
Too many widgets: Limit the number of widgets per page for best performance
Caching: Clear any caching plugins after adding widgets
Optimization: Most page builders work well with CrowdWork widgets, but test load times
Mobile Display Problems
Responsive design: Most page builders handle mobile automatically
Container width: Ensure your widget container isn't too narrow on mobile
Touch interactions: Test that buttons and links work properly on touch devices
🎯 Advanced Tips
For Power Users
Dynamic Content: Some page builders allow you to dynamically insert widget codes
Global Widgets: Create reusable widgets that appear across multiple pages
Conditional Display: Show different widgets based on user roles or page types
Custom CSS: Fine-tune the appearance using your page builder's custom CSS options
SEO Considerations
Semantic HTML: Most page builders maintain good HTML structure with embedded widgets
Loading Speed: Test your page speed after adding widgets
Content Indexing: Embedded content may not be indexed by search engines
🔄 Updates and Maintenance
The beauty of CrowdWork widgets is that they automatically stay in sync:
Real-time updates: Changes in your CrowdWork dashboard appear immediately
No manual updates: Your widgets update themselves
Cache handling: Most page builders and caching plugins handle widget updates properly
Version compatibility: Widgets work with page builder updates automatically
🆘 When You Need Help
If you encounter issues:
Check your page builder's documentation for HTML/code element usage
Test with a simple widget first before adding complex configurations
Disable other plugins temporarily to rule out conflicts
Contact our support team with details about your specific page builder and issue
Advanced Customization
Ready for advanced styling? Check out our Widget Styling Guide for custom CSS examples and advanced techniques that work perfectly with WordPress themes.
Need further assistance? Reach out to our Support Team - we're always happy to help!
Last updated
Was this helpful?