This tutorial will show you how to add a 100% responsive, halfscreen 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.
The halfscreen slider will always occupy 50% of the height of the screen the slider is being viewed on.
This tutorial will also show you how to customize the height of your halfscreen slider to make it taller or shorter. "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 halfscreen slider!
Tips and additional information
To make your halfscreen slider taller or shorter, simply change the number of the CSS codes from Step 4 as shown below in orange.
So by default, the codes from Step 4 are set to "50", which means the halfscreen slider will occupy 50% of the screen height. To make it taller, you would increase this number, and to make it shorter, you would decrease this number.
For this example, we're going to make the halfscreen slider a bit taller, so we're change the numbers from "50" to "70". This means the halfscreen slider will now always occupy 70% of the height of the screen it's being viewed on:
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, 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.