😍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.

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

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.

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.

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.

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.

Last updated