Use laser background overlay: example background overlay color: RGBA (27, 18, 38, 0.74) Male image frame shadow image frame shadow: screenshot reference frame shadow horizontal position: – 8vw frame shadow vertical position: – 8vw frame shadow diffusion intensity: – 6.5vw shadow color: #cf1259 male title text title font: Montserrat title font thickness: very bold title text size: 5Vw (desktop), 40px (tablet and mobile) Male text font thickness: semi bold text text size: 16px body line height: 1.8em male button style button uses custom style: example button text size: 16px button background color: #cf1259 button border width: 0px button border radius: 0px button font thickness: bold button font style: TT button border: top 15 pixels, bottom 15 pixels, 30 pixels on the left and 30 pixels on the right
Slider height and content width content maximum width: 90% minimum height: if the minimum height is specified as 100vh maleslider, the slider will span the entire height of the browser window. This is the core of creating a full screen slider. Since the row width is 100%, the slider has crossed the total width of the browser window. On the slider arrow Advanced tab, add the following custom CSS to the slider arrow CSS box to update the size and position of the slider arrow: font-size: 8vw ! important;
margin-top: -4vw;
This will increase the slider arrow under the large screen size and shrink to a smaller size on the mobile device. Part 3: if there is a title on the page with the slider height minus the title height, the full screen slider actually extends slightly below the browser window. This is because the height of the slider is the current height of 100vh (100% of the viewport \/ browser height). To prevent the slider from sliding below the browser viewport, add the CSS calc() function to subtract the title height from the slider height. For it to work, you must know the height of the header (on desktop and mobile devices). If the default divi header is used, the height of the header is 80px. Therefore, the height of the slider must be 100vh – 80px.
To add a custom height, open the slider settings and add the following custom CSS for the basic elements of the slider and each individual slide: min-height: calc(100vh – 80px)! important; Male final result the following is the final result. Let’s see what the design looks like on tablets and mobile phones. In the final idea of divi, the main step of creating a full screen slider is to set sectors and rows according to the total width of the browser, and then specify the minimum height of the slider as 100vh. If you use headers, you can add custom CSS stitches to reduce the height of the header, avoiding the full screen slider from going beyond the bottom of the browser. After performing these main steps, all the powerful design features included in divi builder allow you to further customize sliders (and slides) as needed.
Use it to create a beautiful and effective slider for the hero section to fill all screens of all devices. Enjoy these useful additional features on the divi site. I will wait for your comments with comments. Cheers!
