Slider module

To find the Slider module, Please go to “Pages > Add New”, click “BM Content Builder”

The Slider module supports classic slider, tab slider, and carousel slider.

Classic Slider

Select the 1st of Style – Classic Slider, click Add Slide, click Add new image upload image the current slide. Please keep on click Add Slide to add new slide item.

You could set Title, Caption, Arrow, and Page number show or hide. Set the style, color, spacing, and size.

You could set the slider elements color for each slide. Please set the Logo/Menu Alternative color in Theme Option.

You could define the Slider height:

If you set “100% of Screen Height”, the Slider will be the same height with the viewport. You could create a fullscreen hero slider with fullwidth layout.

If you active “Screen Height Minus Header and Footer”. There is not scrollbar if there is other elements in this page. The option will shown with “100% of Screen Height” is selected only.

The “Fit Image to Container” option is enable. The slider image will fit instead of fill into container.

You could set showing/font/align/spacing for slider title/caption.

Text position:

The “Text under Image” is added from BM Builder v3.6.8

You could set showing/uploading/size/position/spacing for slider arrow.

The Padding on Left/Right can be set with negative value, the arrow will be out of the image.

You could set showing/font/position/spacing for slider pagenumber.

Custom Mouse Cursor: It is for customize the mouse cursor on the slider Next/Prev navigation. If the “Show Arrow” is disable, the “Custom Mouse Cursor” is shown(this option was same as “Arrow Go with Cursor”, it was moved out from “Arrow position” SEA version 1.3.2) You could upload the 2 images to replace the mouse cursor.

Notice: If the mouse cursor is not shown, please check if the uploaded images size is less than 128 x 128px. Please make sure there is width and height value in SVG source code if you upload SVG format images(how to edit a SVG image file), like: <svg width="72" height="72" ...>..</svg>

The padding/spacing for the slider elements:

You could set animation for the slider.

Tab Slider

You could set the tab text style.

The padding/spacing for the tab text:

Align: you could set the Text area position on the slider: left/right/center/bottom left/bottom right

Highlight Effect for Activated Text: You could set the underline for the activated text

Text Display Inline: The text will be shown inline if you enable the option. check demo.

Enable Mask above Image: There will be a translucency dark color masked above the image if you enable the option.

Enable Ken Burns: There will be Ken Burns animation effect if you enable the option.

Mask Color: Set the mask color.

Transparent for Mask: Set the opacity value for the mask.

You could set the arrow position.

To open a URL when clicking a slider image, please active “Enable link”. 
Please go to “Media Library” to enter the URL for the image:

Quick creating

You could create a slider quickly by “Insert template“:

Was this article helpful?

Related Articles