# WordPress Page Builders – Embed Guide

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

<figure><img src="https://2845098317-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4jXdYra1roPbWLdqrOHI%2Fuploads%2F6JkJ8fgwECwr0Y1Jdrpi%2FCleanShot%202024-12-14%20at%2009.04.20%402x.png?alt=media&#x26;token=dbc88ac9-4d38-494b-890d-ff6283defa92" alt=""><figcaption><p>The Embed Widget code provided in the CrowdWork Dashboard</p></figcaption></figure>

### 👾 Getting Your Widget Code

First, let's grab your widget code from CrowdWork:

1. Log in to your CrowdWork Dashboard
2. Navigate to [**Theatre > Embeds**](https://www.crowdwork.com/dashboard/embeds) in the left sidebar
3. Choose your widget type (Shows or Classes)
4. Select your preferred view (Calendar or Cards)
5. Customize with any filters if needed (by tag, start date, etc.)
6. Copy the code snippet provided in the box

{% hint style="info" %}
**Quick Access:** Jump directly to your [**widget customization page**](https://www.crowdwork.com/dashboard/embeds) to get started immediately!
{% endhint %}

{% hint style="info" %}
**Pro Tip!** Calendar views give a comprehensive monthly overview, while Cards create a more visual, gallery-style presentation perfect for highlighting featured events!
{% endhint %}

***

## 🏗️ Page Builder Specific Instructions

### Elementor

{% hint style="info" %}
**Elementor Tip:** Need fresh widget code? Get it from your [**Theatre > Embeds Dashboard**](https://www.crowdwork.com/dashboard/embeds) anytime.
{% endhint %}

Elementor is the most popular WordPress page builder, making it super easy to add custom code:

#### Method 1: Using the HTML Widget (Recommended)

1. **Open Elementor Editor**
   * Edit your page with Elementor
   * Make sure you're in the visual editor
2. **Add HTML Widget**
   * From the left sidebar, drag the **"HTML"** widget to your desired location
   * OR search for "HTML" in the widget search bar
3. **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
4. **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

1. **Add Shortcode Widget**
   * Drag the **"Shortcode"** widget from the sidebar
2. **Paste Full Code**
   * In the **Content** tab, paste your complete CrowdWork embed code
   * Make sure to include the entire `<script>` tag

{% hint style="warning" %}
**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.
{% endhint %}

***

### Divi Builder

{% hint style="info" %}
**Divi Tip:** You can always get updated widget code from your [**Theatre > Embeds Dashboard**](https://www.crowdwork.com/dashboard/embeds) if you need to refresh your setup.
{% endhint %}

Divi has its own unique approach but is just as straightforward:

#### Using the Code Module

1. **Open Divi Builder**
   * Click **"Use The Divi Builder"** on your page
   * Choose **"Build From Scratch"** or edit an existing layout
2. **Add Code Module**
   * Click the **grey "+" icon** to add a new module
   * Search for and select the **"Code"** module from the library
3. **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
4. **Save and Preview**
   * Click **"Save"** to apply your changes
   * Exit the Visual Builder to see your widget live

{% hint style="info" %}
**Divi Note:** JavaScript won't be visible until you save and exit the Visual Builder. This is normal behavior for Divi's Code module.
{% endhint %}

***

### Beaver Builder

{% hint style="info" %}
**Beaver Builder Tip:** Get the latest widget code from your [**Theatre > Embeds Dashboard**](https://www.crowdwork.com/dashboard/embeds) for the best results.
{% endhint %}

Beaver Builder keeps things clean and simple:

#### Using the HTML Module

1. **Open Beaver Builder**
   * Click **"Launch Beaver Builder"** on your page
2. **Add HTML Module**
   * From the **Basic Modules** tab, drag the **"HTML"** module to your page
   * Drop it in your desired location
3. **Enter Your Code**
   * Click the HTML module to edit it
   * Paste your CrowdWork widget code in the **HTML** field
   * Click **"Save"**
4. **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](https://docs.crowdwork.com/the-academy/crowdwork-academy/wordpress-embed-guide#method-1-using-a-custom-html-block-block-editor)

***

## 💄 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

{% hint style="info" %}
**Quick Fix:** Most issues can be resolved by getting fresh widget code from your [**Theatre > Embeds Dashboard**](https://www.crowdwork.com/dashboard/embeds) and re-embedding it.
{% endhint %}

### 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:

1. **Check your page builder's documentation** for HTML/code element usage
2. **Test with a simple widget first** before adding complex configurations
3. **Disable other plugins temporarily** to rule out conflicts
4. **Contact our support team** with details about your specific page builder and issue

Need further assistance? [Reach out to our Support Team](https://docs.crowdwork.com/contacting-support) - we're always happy to help!