Getting Started with the Long Story Short Parallax Theme

A quick tutorial on how to recreate the Long Story Short Parallax demo page. This tutorial assumes you have already installed the theme.

final-result.png

Adding a new page

The Long Story Short Parallax theme has been designed for creating one-page websites and presentations. We'll start adding a new page to our site and applying the theme to it.

Our new page should look like this:

screenshot1.png

Don't be afraid of the blank page :) Once you have finished the tutorial, your new page will look like this.

Editing the page

To edit the page, simply click on the "Edit" button. The page will change to Edit mode. You'll see the page has four different areas: Site Name, Main, Footer Left and Footer Right.

By default, the Site Name and Footer areas display the name of your site and a link to concrete5.org. To change this, simply click on an area and add a new block. The new block will replace the default content.

The Main area is the area that will contain our slides. Every block you add to this area will automatically become a new slide.

screenshot2.png

Adding the first slide

To add the first slide, click on the Main Area and choose "Add block". Next, select the "Content" block. You will be presented with a text editor. Add the following text:

Long Story Short Parallax

Check out the new features in version 1.2!

Format the first line as Heading 1 and make all the text white. For better readability, choose the "text-shadow" style from the Styles drop-down.

Click "Add" and the new slide will appear on the page.

Using Background Images

Adding a background image to a slide is actually very easy. Simply click on the block we've just added and choose "Design". Go to the "Background" tab and select a file to use as a background image.

You can download the background images used in the demo here.

Adding more slides

Now it's time to add all the slides to the page.

2n slide:

Add a Content block to the Main area, just below the first slide, and copy the following text:

Google Fonts

Choose any Google font for your headings and body text!

Remember to format the first line as Heading 1.

3rd slide:

Add a Content block and leave it blank (we only want to add a background image to this slide). You can insert two line breaks to increase the height of the slide and make it easier to click on it.

Once you've added the new block, click on it and choose "Design". Go to the "Background" tab and select the background image.

4th slide:

Add another Content block and copy the following text:

Centered Slides

You can now choose any height for your slides, in pixels or as a percentage, and center them vertically.

Format the first line as Heading 1.

5th slide:

Add a Content block and leave it blank (we only want to add a background image to this slide). You can insert two line breaks to increase the height of the slide and make it easier to click on it.

Once you've added the new block, click on it and choose "Design". Go to the "Background" tab and select the background image.

6th slide:

Add another Content block and copy the following text:

Exclude from Navigation

You can now exclude any slide from the navigation and make only the most relevant slides appear in the menu.

Format the first line as Heading 1.

Last slide:

Add another Content block and copy the following text:

Purchase

You can buy this theme in the concrete5 marketplace

Format the first line as Heading 1 and make all the text white.

Using Background Colors

We will change the background color of the last slide. Click on the last block and choose "Design". Go to the "Background" tab and select a background color, for example: #778691.

Changing the name of the menu items

If you take a look at the navigation bar, you'll notice that every new slide you've added to the page appears in the navigation bar as "Slide 1", "Slide 2", "Slide 3"... You can change the name of the menu items by opening the "Custom Template" dialog. 

Simply click on a block, choose "Custom Template" and enter the "Block name". This name will be used in the navigation bar.

Activating parallax backgrounds

After installing the theme, you will find a set of new page attributes called "Long Story Short Options".

screenshot3.png

Simply open the Page Properties dialog, go to the "Custom Attributes" tab and select the attribute "Parallax Background Images".

Hiding the footer

While still in the "Custom Attributes" tab, select the attribute "Hide Footer".

You can also use the "Bottom Arrow Settings" attribute to change the design of the bottom arrow.

Using Google Fonts

You can choose any Google Fonts combination for your headings and body text thanks to the Google Fonts attributes.

Select "Google Font (headings)" and enter the name of the first font: Lobster Two

Select "Google Font (body text)" and enter the name of the second font: Merriweather

You can choose any font from Google Fonts.

Activating parallax backgrounds

Select the attribute "Parallax Background Images" to activate the parallax effect for background images.

Changing the height of the slides

By default, every block you add to the Main area becomes a full-height slide. However, we can change the height of the slides by selecting the "Slide Height (in pixels)" o the "Slide Height (as a percentage)" attributes.

To get the same result as in the demo, we want to set the height to 50%. Select the "Slide Height (as a percentage)" attribute and enter 50.

We also want our slides to be centered vertically in the viewport. To achieve this, simply select the "Centered Slides" attribute.

Once done, save your changes and refresh the browser.

Making certain slides extend to full height

Now we have changed the height of our slides, but we still want our first slide to extend to full height. To achieve this, click on the first slide and choose "Design". Go to the "CSS" tab and type "full-height" in the CSS Class Name field.

Excluding certain slides form the navigation

We're almost done. We only need to exclude the third and fifth slides from the navigation. These slides only contain background images, so we don't want them to appear in the menu.

Click on these blocks and choose "Design". Go to the "CSS" tab and type "exclude" in the CSS Class Name field.

Save your changes and refresh the browser. Now you page should look exactly like the demo.

comments powered by Disqus