# Block slider with page builders

A page builder is basically a WordPress plugin or theme component that allows users to build responsive pages directly using them. Many sites are created using page builders other than gutenberg, Therefore, Some users may want to integrate the slider in their page builder.

### How to copy block slider shortcode?

There are two ways to copy the shortcode of an existing block slider.

* **Slider Post Type**: Block slider post type table contains a shortcode field, You can use this field to copy the shortcode.

<figure><img src="/files/d2yT8SXT6jazN0Ol67OQ" alt=""><figcaption></figcaption></figure>

* **Frontend Preview**: When previewing block slider, You can copy the shortcode from the toolbar above.

{% embed url="<https://share.getcloudapp.com/DOuK0rE0?collection_id=nlfk6Dv>" %}

Currently, Blockslider supports these page builders:

* Divi
* Elementor
* Beaver
* Visual Composer

Lets see how we can integrate block slider in each of the page builders listed above.

### 1. Divi

Divi builder is a great tool for streamlining your web design process and improving team collaboration.

## How to insert a block slider in Divi builder?

For inserting block slider in divi, Simply paste the block slider shortcode in divi text module.

{% embed url="<https://share.getcloudapp.com/X6u7PQy7?collection_id=nlfk6Dv>" %}

## 2. Elementor

Elementor is a drag-drop website editor with a wide range of powerful features. elementor is available as a plugin for WordPress that allows you to edit your whole website or individual pages by adding and manipulating all kinds of content like text, images, videos, contact forms, maps, sliders, and more.

### How to insert a slider in Elementor builder?

For inserting block slider in elementor, drag and drop the shortcode widget and paste the block slider shortcode.

{% embed url="<https://share.getcloudapp.com/mXuGL2L4?collection_id=nlfk6Dv>" %}

## 3. Beaver Builder

Beaver Builder is an intuitive WordPress website builder works in real-time on the front end of your page.

### How to insert a slider in Beaver builder?

For inserting block slider in the Beaver Builder, launch beaver builder and drag and drop the text editor widget. Paste the shortcode in the text settings.

{% embed url="<https://share.getcloudapp.com/qGu6mx2k?collection_id=nlfk6Dv>" %}

## 4. Visual Composer

Visual Composer is the most modern WordPress page builder on the market. You will work with cutting-edge technologies, like ReactJS to create robust solutions with outstanding performance.

### How to insert a slider in Visual composer?

For inserting block slider in the visual composer, use the shortcode widget. Paste the shortcode in the element settings.

{% embed url="<https://share.getcloudapp.com/JrueJ8K0?collection_id=nlfk6Dv>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wpblockslider.com/guides/block-slider-with-page-builders.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.