This tutorial will show you how to add a 100% responsive, fullscreen slider on the homepage of your Weebly site. No jQuery will be used, as the Weebly 'Slideshow' element we all know and love, will be employed.
This tutorial will show 3 different height options of the fullscreen slider for your site's specific needs (i.e., natural, dynamic, and custom). The natural height slider will be the slider's natural height, the dynamic height slider will always occupy 100% of the given device's height, and the custom height slider allows you to choose a height for the slider.
Note: Regardless of which slider height option you want for your site, you will need to install the natural height slider first. Instructions for creating a dynamic or custom height slider are at the end of the tutorial.
"Paper" is the Weebly theme used in this tutorial, but you can use any.
Step 1. open weebly's html/css editor
Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.
Step 2. create a new page layout
To create a new page layout, on the left, click on "HEADER TYPE>New Header Type", and name this page layout "slider.html".
Now, on the left, click on the "no-header.html" page layout, on the right, select and copy all of the HTML code in this file, on the left, click on your new "slider.html" page layout, on the right, select and delete all of the HTML code in this file, and paste the HTML code you copied from the "no-header.html" page layout.
Step 3. create slider <div>
Now while in the "slider.html" page layout, on the right, scroll down and find your main content area's <div>. Copy and paste the code below directly above your main content area's <div>:
step 4. add css code
On the left, access your CSS file by clicking on "main.less". On the right, scroll down and find your theme's main content CSS code, and paste the slider's CSS codes below, directly above the main content CSS code.
Once back in the Weebly editor, apply your new slider page layout to your homepage. To do this, go to "Pages" at the top, on the left, select your homepage -- or any page of your choosing -- and under "HEADER TYPE", select "slider".
Note: If the "Slider" page layout is not available to choose, simply just refresh your Weebly editor.
Step 6. Add "Slideshow" element
Select "Build" at the top, and on the left, grab the "Slideshow" element and drop it into the northern most drag and drop area. This drag and drop area will span the entire width of your site, and is not your main drag and drop area.
When the "Slideshow" element's slideshow style option appears, click on "Simple Slideshow" and then click "Continue".
Add your images and make sure their dimensions are 1920x1070.
Once your images are uploaded, click on the slideshow, click on "Spacing", and set the top and bottom margins to "0".
You're done! Publish your site to see your new Natural height slider!
Slider height option 2: Dynamic height slider
To turn your natural height slider into a dynamic height slider, in which the slider will always occupy 100% of the height of the screen it's being viewed on, add the orange codes below to the CSS codes you added in Step 4:
If your theme has a fixed header at top that occpies height space, you will need to perform this additional step to the codes above so the slider will occpy 100% of the height exactly.
To find your header's height, simply right click on your header, click "Inspect" or "Inspect Element", with the window that appears, hover your mouse over your header's <div> -- you should see the width and height dimensions appear on the header itself -- and grab the height dimension.
For this exmaple, let's say the height of the header is "70px" -- add the orange coding below to the code above, and the "70" as shown in bold.
Also note that the header of your site may reduce in size for mobile view, and if you don't have dynamic mobile codes, the slider height will no longer be dynamic for mobile view. For this example, the header height reduces from 70px to 60px for the mobile view (make sure to check your mobile header height as well). Add the orange code below to the CSS codes you added in Step 4 as well and add "60" as shown in bold below:
To turn your natural slider into a custom height slider, simply add the orange codes below to the CSS codes you added in Step 4. Adjust the bold codes to give your fullscreen slider a custom height and be sure to keep all 3 codes the exact same number.
For example, if I wanted my fullscreen slider to occupy just 30% of the height available on the screen it's being viewed on, I would add "30" to all 3 codes as shown below in bold.
Weebly Tricks is a third-party Weebly 'after market' site providing themes, tutorials, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.