How to Install & Use the StoryPage Add-on

Background Information

The StoryPage Add-on gives you the ability to create beautiful fullscreen parallax scroll pages such as what's seen here.

This tutorial uses images from the Oxygen theme, but the steps are the same for other Luminous-made themes as well.

How to Install StoryPage

Step 1. Download the StoryPage folder and extract its contents. You should see two folders inside, one called "header-types" and the other called "style."

Step 2. Open up your Weebly Website in the Weebly Editor, and Access the HTML/CSS Editor by Clicking on the "Theme" tab, and then clicking on "Edit HTML/CSS"

Step 3. In the HTML/CSS Editor, click on the "+" icon and then click on "Upload Header Type(s)"

Step 4. Upload All the Files Located Inside the "Header-Types" Folder That You Downloaded

Step 5: Wait until all the files have successfully uploaded. Then, in the editor sidebar, scroll down until you see "Styles." Click on the "+" icon next to styles and click on "Upload files."

Step 6. Now, navigate to your downloaded StoryPage folder and open the "style" folder. Click on "_storypage.less" and upload this file.

Step 7. That's it! You've successfully installed StoryPage. Click on the blue "Save" button in the top right corner of the editor.

How to Use StoryPage

StoryPage exists under the "header type" selector.

Create a new page (or click on an existing one) and in the pages sidebar, click on the "Header Type" dropdown selector.

Under "Header Type" you should see a series of StoryPage header types as illustrated below.

Each StoryPage has a number next to it which represents how many fullscreen slides/sections it has.

For example, if you wish to add a StoryPage layout with six fullscreen sections, you would select "StoryPage-6."

Once you successfully change the header type to a StoryPage layout, you should see something that resembles the following image.

It's first recommended that you add a background image. Click on the button called "Unlock background editing" once and then click on the screen. Upload your desired background.

When you're done changing the background, click the "Relock background editing" button once. This will lock background editing and let you drag 'n drop contents from the Weebly sidebar onto your slides.

To delete a background, click again on the "Unlock background editing" button. This will raise the background image. Hover over the background image until you see a little popup appear under it, and click on the delete icon.

Considerations

1). Parallax is disabled in the Weebly editor but enabled on your live published website.

2). Be wary of how much content you add, as on mobile devices too much content in each fullscreen page section may yield overflow errors and content will be cut off. It's recommended to stay on the minimal side when working with fullscreen page sections.

3). Adding background images with a dark overlay can help make your content stand out. A good tool to use is https://pinetools.com/darken-image

4). If you run into any errors or trouble, please feel free to contact us.

Happy Designing! Feel Free to Showcase What You've Built Down in the Comments Below.