To find the Slider module, Please go to “Pages > Add New”, click “BM Content Builder”
The Slider module supports classic slider, tab slider, carousel slider, and Before/After
Classic Slider
Select the 1st of Style – Classic Slider,
Add image
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 define the slider elements color(Text, Number, Arrow) for each slide item.
You could also define the Logo or Menu color(Default or Alternative) of each slide item what it is for the a hero Slider normally. To make it works, please enable “Content From Page Top” and “Transparent Header Background” in the Page options, place the Slider as at the top of this page.
PS: Please config the Logo & Menu Default and Alternative color value in the Theme Option:
Slide height
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.
You could set showing/font/align/spacing for slider title/caption.
Text position:
Slider arrow
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>
Elements Spacing
The padding/spacing for the slider elements:
Transition(animation)
You could set animation for the slider.
If you want to set the Fadein/out animation time, please use the custom CSS:
/*default is 900*/
.owl-carousel .fadeOut{
-webkit-animation-duration: 300ms; animation-duration: 300ms;
}Enable Mousewheel
If you enable this option, the visitors can navigate the slider by the mousewheel.
Show Scroll-down Button
If this option is enabled, there is a scroll-down button will be shown. When the button is clicked, The page will scroll through this group. There is the same option in the Group module, you could check the guide here.
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.
Carousel slider
You could set the arrow position.
Before / After
The Before&After options were add from BM content builder version 3.14, check how to create a Before/After here.
Enable link
It is possible to add like for Classic(1st style) and Tab slider(2nd style) layout. 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“:
