1 Page Landing Page Overview

Here's a short video to review some of the new components within the 1 Page Landing Page.

Instructions

Animated Landing Page with Curtain.js

In this tutorial, we’ll demonstrate how to update Nav buttons at the top of your 1 page landing page.

Nav Buttons – Rename

Skip the reading, watch the video:

To rename the buttons, open your ( index, or intro page ) and switch to code view. Normally we could just use the ‘Hyperlink’ tool to update the menu, but this is a specially scripted menu so the Hyperlink tool doesn’t work too well, best to just change the text in Code view, it’s easier.

1. Open your page, switch to Code view, and scroll down to the <!– LANDING MENU –> section:

2. You’ll see the name of your menu buttons, in the ‘black text’

3. To change a button name, select the black text, and change it!

That’s it!

Nav Buttons – Remove

Skip the reading, watch the video:

The menu buttons at the top of the page, link to a ‘section’ within the page itself, these are not site wide, they only server to link to the content in your landing page. You can of course, add your own links within the page, to link to pages within your website.

When removing a button, you’ll probably want to remove the section is links to as well.

Removing a button is a simple as selecting the <li> tag wrapper, and deleting, in this example we’ll remove the ‘Services’ button, and section

1. Open your page, switch to Code view, and scroll down to the <!– LANDING MENU –> section:

2. Select the button you want to remove, in this example the ‘Services’ button

**NOTE** when deleting a button, you’ll probably be deleting the section it links to as well, make ‘note’ of the ID for the button your removing, in the exmple below, the ID is #curtain4. The section this button links to uses the same ID or #curtain4.

3. Then ‘delete’ on your keyboard, or right click and ‘delete:

Next, you may want to delete the corresponding ‘section’ from the page, hopefully you’ve made note of the button ID, so you know which section to delete. Or just switch back to Design view, and locate the section you want to remove that way.

Switch back to ‘Design’ view now, and locate the section you want to delete. In this example, the Services section.. we scroll down until we find the ‘Services’ heading in the page.

You can also do this in code view, just look for the matching section ID to the button you’ve removed, ( our example was #curtain4 ):

<!– SECTION START –>
<section id=”curtain4″>

If using Design view, select the heading or any text within the section you want to remove.

Then on the ‘Quick Tag Selector Toolbar’ locate the < section#curtain…> and click it to select the entire section, you’ll see the section in the page hightlighted in ‘green’ when you do:

Now, press the delete key on your keyboard, or right click on the green highlighted section, and select Cut.

If viewing in code view, just right click on the <section id=”curtain#”>, click ‘Select Tag’ and the delete the selected tag

Nav Buttons – Add

To add buttons to the top nav, you’ll need to do 2 things.

  1. Add the button
  2. Add a section to link to

To add a new button, open your page, switch to code view and locate the <!– LANDING MENU –> section.

Copy an existing button

And paste back into the < ul > list

You’ll now have a duplicate button

Change the button name, change the #curtain.. ( use the next highest number ) and change the ( wrapper-curtain# ) to the next highest number as in:

Even though we are adding more buttons, they ‘do not’ need to be in sequence from 1-7, you can use any order, as long as they have a unique ID, and the ‘wrapper-curtain#’ matches the #curtain.. number. In this example we’ve used the number 7 for both, but have not placed the new button in sequential order, because we don’t need to be in order.

Next we need to create a new section in the page, something for our new button to link to!

We’ll just copy and paste an existing section, but before we do that, preview your page in your browser, and take a look at the different sections. You may see some ‘darker’ sections, and some lighter sections. Figure out which section you want to copy first, then go find that section in your page.

Just scroll up and down the page in ‘Design view’ find the section you want to copy, select something in that ‘section’ ( something like text ) .. then switch over to code view. If you had something selected in the Design view, then switch over to code view, you’ll be looking at that section of the page, no need to scroll up and down to locate it.

Select or click on the sections ‘id’

Right click on the selected ‘id’ and click “Select Tag”

Then ‘copy’ the selected tag or section

Now all that’s left to do, is find a place to ‘paste’ the copied section, and change the ID and content. Paste the copied content between 2 other sections, they are ‘labeled’ so just a matter of scolling to the area of the page you want to add your section to, then paste

Once we change the section ID to match the new button’s ID, when someone clicks on the new button, it will link them to the new section.

Animated Landing Page with Curtain.js

In this tutorial, we’ll demonstrate how to update Nav buttons at the top of your 1 page landing page.

Nav Buttons – Rename

Skip the reading, watch the video:

To rename the buttons, open your ( index, or intro page ) and switch to code view. Normally we could just use the ‘Hyperlink’ tool to update the menu, but this is a specially scripted menu so the Hyperlink tool doesn’t work too well, best to just change the text in Code view, it’s easier.

1. Open your page, switch to Code view, and scroll down to the <!– LANDING MENU –> section:

2. You’ll see the name of your menu buttons, in the ‘black text’

3. To change a button name, select the black text, and change it!

That’s it!

Nav Buttons – Remove

Skip the reading, watch the video:

The menu buttons at the top of the page, link to a ‘section’ within the page itself, these are not site wide, they only server to link to the content in your landing page. You can of course, add your own links within the page, to link to pages within your website.

When removing a button, you’ll probably want to remove the section is links to as well.

Removing a button is a simple as selecting the <li> tag wrapper, and deleting, in this example we’ll remove the ‘Services’ button, and section

1. Open your page, switch to Code view, and scroll down to the <!– LANDING MENU –> section:

2. Select the button you want to remove, in this example the ‘Services’ button

**NOTE** when deleting a button, you’ll probably be deleting the section it links to as well, make ‘note’ of the ID for the button your removing, in the exmple below, the ID is #curtain4. The section this button links to uses the same ID or #curtain4.

3. Then ‘delete’ on your keyboard, or right click and ‘cut:

Next, you may want to delete the corresponding ‘section’ from the page, hopefully you’ve made note of the button ID, so you know which section to delete. Or just switch back to Design view, and locate the section you want to remove that way.

Switch back to ‘Design’ view now, and locate the section you want to delete. In this example, the Services section.. we scroll down until we find the ‘Services’ heading in the page.

You can also do this in code view, just look for the matching section ID to the button you’ve removed, ( our example was #curtain4 ):

<!– SECTION START –>
<section id=”curtain4″>

If using Design view, select the heading or any text within the section you want to remove.

Then on the ‘Quick Tag Selector Toolbar’ locate the < section#curtain…> and click it to select the entire section, you’ll see the section in the page hightlighted in
a ‘blue’ border when you do:

Now, press the delete key on your keyboard

If viewing in code view, just right click on the
<section id=”curtain#”> in the Quick Tag Selector toolbar, then press the Delete
key on your keyboard.

Nav Buttons – Add

To add buttons to the top nav, you’ll need to do 2 things.

  1. Add the button
  2. Add a section to link to

To add a new button, open your page, switch to code view and locate the <!– LANDING MENU –> section.

Copy an existing button

And paste back into the < ul > list

You’ll now have a duplicate button

Change the button name, change the #curtain.. ( use the next highest number ) and change the ( wrapper-curtain# ) to the next highest number as in:

Even though we are adding more buttons, they ‘do not’ need to be in sequence from 1-7, you can use any order, as long as they have a unique ID, and the ‘wrapper-curtain#’ matches the #curtain.. number. In this example we’ve used the number 7 for both, but have not placed the new button in sequential order, because we don’t need to be in order.

Next we need to create a new section in the page, something for our new button to link to!

We’ll just copy and paste an existing section, but before we do that, preview your page in your browser, and take a look at the different sections. You may see some ‘darker’ sections, and some lighter sections. Figure out which section you want to copy first, then go find that section in your page.

Just scroll up and down the page in ‘Design view’ find the section you want to copy, select something in that ‘section’ ( something like text ) .. then switch over to code view. If you had something selected in the Design view, then switch over to code view, you’ll be looking at that section of the page, no need to scroll up and down to locate it.

Select or click on the sections ‘id’

Click on the selected ‘id’, then click <section #curtain… > tag in the
Quick Tag Selector Toolbar.

Then ‘copy’ the selected tag or section

Now all that’s left to do, is find a place to ‘paste’ the copied section, and change the ID and content. Paste the copied content between 2 other sections, they are ‘labeled’ so just a matter of scolling to the area of the page you want to add your section to, then paste

Once we change the section ID to match the new button’s ID, when someone clicks on the new button, it will link them to the new section.