It is possible to create a fullscreen hero section by the Page or Portfolio.
Step by step
- Page > Add New (or Portfolio > Add New)
- Enter title,
- Disable “Show Title Wrap”, disable “Show Footer”
- Enable “Transparent Header Background”, enable “Content From Page Top”
- Enable “Enable Footer Overlay” if the footer bar is enabled
- Click BM Content Builder
- Click Group to add a Group module
- The Group editing panel will popup. Click Advanced Settings, choose the “Image” from the Background selector, click Add new image to set a image
- To set a video, please choose the “Hosted Video”, enter the video file URL. The MP4 format is not supported for all browsers, please enter WBEM or OGG file URL also. You could convert the file format by Zamzar
- To set the pure color, please choose the “Color”.
- Too add Text above the background section, click “+” icon to add Text module
- Add some text into the Text editor, click Save of the Text module
- Click the pencil icon(blue) of the Group module, set the align
The Text will be centered
Video Guide
00:15 – Fullscreen image
01:15 – Fullscreen video(hosted)
01:40 – Fullscreen pure color
01:50 – Add Text above the Fullscreen section
PS:
Maybe you want to know how to create fullscreen slider(video 04:04).
Prevent Page Scrolling for iOS Browser
Sometimes, a page shows only one fullscreen section. The page cannot be scrolled except on the iOS device. Please try to add(replace 475) the Custom CSS to fix the bug on the iOS:
@media (orientation: portrait) {
.page-id-375 #wrap { max-height: var(--get-win-height); overflow-y: hidden; min-height: 0; }
.page-id-375 .bm-wrap > .module-inside { min-height:0!important; height: var(--get-win-height, 100vh); overflow-y: hidden; }
.page-id-375 .slider-mod-wrap,
.page-id-375 .owl-carousel,
.page-id-375 .bm-builder .module .slider-mod-wrap.slider-style2 .bm-tab-slider { max-height: var(--get-win-height); }
}Note: 375 is the unique page ID, please replace it as your page’s ID, refer to how to find the page ID