Slideshows using Beaver Builder

Beaver Builder is an optional plugin available on UCI Sites. Beaver Builder includes a Slideshow module that cycles through a gallery of images one image at a time. You can cycle through images automatically at a speed you choose or you can let your visitors use navigation controls to cycle through the images. If you need to add text or link to a different page or website, try the Content Slider instead.

Building a Slideshow

You will need to have Beaver Builder enabled on your website. It is not on by default, but you can request it using our Optional Plugin request form.

  1. Create a new page or edit an existing page where you want to display a slideshow.
  2. Select Beaver Builder as the editor.
    1. If you are using the Classic Editor, you will see a tab called Beaver Builder.
    2. If you are using the Block Editor, you will see a button called Launch Beaver Builder.
  3. Select Slideshow from the Modules. It is in the Media section. Drag it to the location where you want your slideshow to appear.
    Slideshow module picker in Beaver Builder
  4. In the General tab, select Media Library as the Source.
  5. Click Add Photos in the Photos area to choose your slideshow photos.
  6. Select the photos from your Media Library by either selecting ones you have already uploaded or upload new ones. Click Add to gallery and then Update gallery.
  7. Select the height you want your photos displayed. The default is 500px.
  8. Choose if you want a light or dark skin on the slideshow.
  9. Choose if you want to crop your photos. If you choose No, the photos will be the height you specify, but the width will be proportional to the photo. If you choose Yes, the right and left will be cropped to fit both height and width. This works better if you have photos with different dimensions.
  10. Under the Playback tab, you can decide if you want to Auto Play the slideshow, the speed that the photos will change, the transition style, the transition speed, and if you want the photos to appear in random order.
  11. Under the Controls tab, you can choose if you want navigation arrows and if you want any navigation shown. You can choose from buttons or thumbnails.
  12. Click Save to add the slideshow to your page.
  13. Click the Done button at the top when you are ready to publish your slideshow and select Publish. You can also click Save Draft and finish the work later. Click Discard if you do not want to save your changes.

Adding Captions

One feature that the Slideshow plugin had was the ability to show the slide title below the image. Beaver Builder does not have this feature. However, you can add captions and show the captions by displaying an icon below your slideshow.

  1. Edit your slideshow and add captions to the images you want captions displayed. You can do this by Editing the Gallery and adding a caption to each image.
  2. In your Slideshow module, click the Controls tab.
  3. For Nav Type, select Buttons
  4. Make sure Captions Button is set to "Yes". (You can toggle the other options to suit your needs.)
  5. Click Save to save your changes.

When your viewers click the "i" icon they will see any captions you have added. The icon is only clickable for images that have a caption.

Video Tutorial - Adding a Beaver Builder Slideshow

Example Slideshow

Using Beaver Builder on Posts

By default, Beaver Builder is only available on Pages. However, you can enable it for Posts, too.

  1. Go to Settings > Beaver Builder in your Dashboard.
  2. Select Post Types from the options on the left.
  3. Under Post Types, select Posts.
  4. Click Save Post Types.
  5. You will now be able to use all of Beaver Builder's modules in Posts, too!

Beaver Builder Post Types

Using Beaver Builder Slideshows in Widgets (Advanced)

Using Beaver Builder modules in Widgets is possible, but complicated. Use the steps below to add a slideshow module to a widget area using a WordPress shortcode.

Step 1: Create a new Slideshow module

  1. Go to Beaver Builder > Add New
  2. Create a title for your Slideshow so you can identify it later.
  3. From the Type menu, select Saved Module
  4. From the Module menu, select Slideshow
  5. Click Add Saved Module

Add New Module


If you already have a slideshow built on a Page, you can also save that slideshow and re-use it on other areas of the site. Simply, click the Save As button when editing the module and give it a title. Skip to Step 3 if you already have one saved.

Save a Module for other use


Step 2: Create the Slideshow

After completing the steps above, you will be able to edit the new Slideshow Module and add your photos.

  1. Click the Launch Beaver Builder button.
  2. Click on the body of your page. When you hover over it you will see a blue box around the area and a wrench tool. This will launch the Slideshow settings.
  3. Click Add Photos and follow the directions above that explain how to create a slideshow.
  4. Click Done at the top and select Publish.

Step 3: Get the ID of the module to be used in a shortcode

By saving a module, you can use the saved ID to create a shortcode to display in a widget.

  1. Get the Slideshow ID by going to Beaver Builder > Saved Modules
  2. Hover over the slideshow you saved earlier and note the ID number in the URL. It should be displayed in the footer of the browser as part of the URL. Look for something like "post=123". The "123" is the ID number we need.
  3. If you click on "Edit" link underneath the name of the slideshow, the URL will also be displayed in the address bar of your browser.

Step 4: Add a Text Widget with the Shortcode to display your Slideshow

  1. Go to Appearance > Widgets or use the Customizer to create a new widget.
  2. Select the widget area to display your slideshow and add a Text Widget.
  3. Paste in the following shortcode, but replace the ID with the number from Step 3. You will need the unique ID from your slideshow.
    [fl_builder_insert_layout id="123"]
  4. Save your Text Widget and view your site to see if the slideshow is displaying correctly.

Slideshows using Content Slider

If you need to add captions or link the slides to a different page or website, try the Content Slider instead. The difference between the Content Slider module and the Slideshow module is that the Slideshow module just has images in the foreground, like a series of sliding photos, whereas the Content Slider modules are really more like a set of sliding rows.

  1. Using Beaver Builder, select the Content Slider module and drag it to the area you want to display the slider.
  2. Click the Edit Slide link in Slide 1.
  3. Add a Slide Label to identify the slide in the Slides tab. This will help you tell the slides apart.
  4. For Type, choose Photo and click the Select Photo link. This will put a large photo in the background. You have more options with the Content Slider. You can also put an image on one side and text on the other.
  5. Choose your photo from your Media Library or upload a new one. Click the Select Photo button to add it.
  6. If you want the text to overlay the photo, select Text under Content Layout. Add your text and heading.
  7. Select the Style tab and adjust the settings.
  8. Click the Link tab if you want the slide to link to another page on your site or a different website.
  9. Click Save to save this slide.
  10. Continue adding slides.
  11. Click the Slider tab to choose the display settings. This is where you can choose how the slider will appear and the transition style and speed.
  12. Click the Style tab to choose the slider height and maximum width.
  13. When you are done, click Save to save this module and preview your slider.

Content Slider Example

Baby Anteater

Isn't she cute?

Having fun!

You can also align your content on the right or in the center.


Make sure to leave enough time for studying!

You can also opt to use Text & Photo and have your content on one side and your image on the other.

Woman sleeping on coffee beans