Creating a Static Webpage

1 Menus & Pages - Adding a page
2 Menus & Pages - Adding a menu group
3 Enabling a Template Page pre v17
- 3.1 For v12 to v16 Websites
- 3.2 For v9-11 Websites
4 Refining the Template Page
5 Inserting Content
6 Linking the new page
- 6.1 Header/Footer
  - 6.1.1 Template 19+
    - 6.1.1.1 Drop Downs
- 6.2 Hyperlink
- 6.3 Image With Hyperlink
- 6.4 Adding Pages to the Header Pre V14 Template

Menus & Pages - Adding a page

Go to Content Management > Menus & Pages to view a list of all editable pages. Add a new one by selecting Add New.

Each Field Name has a tool-tip to explain what data is required. You can use the below example if you were adding an “About Us” page that you wanted to be shown in the footer.
When you are happy with the structure of the page, select Save and it will now be available in Edit Website.

Menus & Pages - Adding a menu group

To add a parent menu for pages to be the children of, change Type to Create Menu Group.
Fill in the fields shown and click Save.

To add a page to this new menu, navigate to your page and select the appropriate group name from Existing Group.
When done click Save.

Enabling a Template Page pre v17

This article will guide you through the process of how to create a static web page and link it into the header and footer of your website.

A static web page can be used to display text, images, and videos and will contain an edit region allowing you to utilise the Edit Website functionality.

This article describes how to repurpose our existing static web page templates.

Website versions 11 or later have ten template pages at their disposal as standard

Website versions 9 & 10 have five template pages at their disposal as standard

Should you require more template pages, please contact support and we can provide them for you.

IMPORTANT: This article is not written with earlier template versions in mind, please contact us on 1300 136 456 to request an upgrade

To create a page it must first be 'turned on' in the CMS:

Go to Content Management > Web Pages and search for site/config/menu_parameters
Click on this and scroll down to the first page # that is not in use, in the examples below it is Page 3

For v12 to v16 Websites

IMPORTANT: If site/config/menu_parameters does NOT look like the below, please refer to the instructions for v9-11 websites

Note: a page not in use will have all its value settings set to false

Change all the false values to true
- If you don't want a link to the new page in the header you can leave the first two values as false
- If you don't want a link to the new page in the footer you can leave the last two values as false
Define a Page Name value and a URL value, in the example below:
- Page Name value is set to Our Partners
- URL value is set to site/pages/our_partners

Note: the URL value should be the Page Name value in lower case and _ in places of spaces. DO NOT CHANGE OR DELETE the site/pages/ segment.

Click Save

For v9-11 Websites

IMPORTANT: If site/config/menu_parameters does NOT look like the below, please refer to the instructions for v12+ websites

Note: a page not in use will have all its value settings set to FALSE

Change all the FALSE values to TRUE
- If you don't want a link to the new page in the header you can leave the first two values as FALSE
- If you don't want a link to the new page in the footer you can leave the last two values as FALSE
Define a Page Name value and a URL value, in the example below:
- Page Name value is set to Our Partners
- URL value is set to site/pages/our_partners

Note: the URL value should be the Page Name value in lower case and _ in places of spaces. DO NOT CHANGE OR DELETE the site/pages/ segment.

Click Save

Refining the Template Page

The template page has been activated however this page still needs to be configured with the correct URL and Title, and the lorem ipsum text removed.

Return to Content Management > Web Pages and search for site/pages/page_3 (page number will vary depending on what # you activated)
Click on this and you should see something similar to the below:

IMPORTANT: If the "PageNamePage[n]" variable is assigned anything other than Page n, it may be in use by custom functionality and should not be changed

Edit the Name to match the URL value we defined earlier (site/pages/our_partners)
Edit the Title to match the Page Name value we defined earlier (Our Partners)
Edit the page= value to match the URL value we defined earlier (site/pages/our_partners)
Delete the <p> </p> tags and everything in between, it should look similar to the example below:

Click Save

Inserting Content

If you view this page on your website now it will be a blank page with a heading of the page name you defined:

To insert content to this page you will need to utilise the Edit Website functionality from the CMS
In Edit Mode you will see an Edit Text window that will allow you to insert text, images, and videos:

You can follow our guide on how to use the Edit Text functionality if you are not familiar with it.
Once complete, you will have created a new static page and populated it with content:

Linking the new page

Now that you have created your new page, you need to link the page somewhere so that Customers can access it. In the below examples i have created a static page called example.

Header/Footer

Template 19+

For Template 19 and higher. Adding a page to the Header and or footer is simple.

In the StraightSell CMS >> Content Management >> Menus & Pages, Click “View” on the page.

Here you can tick “Active” and “Add Link In Header” “Add Link In Footer” boxes. which will make sure the page is active and show in the Header and Footer.

Header-

Footer-

Drop Downs

You may have noticed that in the Header of the previous example you can see “Page Examples”, This provides a dropdown showing more pages and can help organise your Header.

To create a dropdown, Follow the same steps as creating a new header link however, this time change the Type to “Create Menu Group”, then add the Display Name and Group Name. Remember to also set the tick boxes at the bottom.

To add your Page into this new group, Simply click “View” on the page in the Menu & Pages section and change the Existing Group from “None” to your new group.

Header-

Footer-

Hyperlink

(Note that this method cannot be done on individual Products, Please use the “Attached Documents” Section of the Product in CMS.)

In this example, im going to add a link to my Example page from another static page.

Go to CMS >> Edit Website

Find the page you want to add the Hyperlink to and click edit.

In the edit window, highlight the text you wish to add the link to, Right click and press “Link”

You can now add the information for the link. Once your done remember to click Ok and Save to apply the changes.

Image With Hyperlink

In Edit mode, Place an image onto the webpage, Now right click the image and click Link.

From there you can add the link similar to the previous example.

Adding Pages to the Header Pre V14 Template

Templates before Version 14 require a little more effort to display onto the header.

In this example I will create a Header dropdown called “Test” and place the page “Our Partners” inside. The Our Partners page is page 3 in the CMS.

First ill go into site/config/menu_parameters and ensure that “Show Page 3 in Main Menu” Is set to yes and save the change.

Ill then go into site/widgets/menu_mainnav and make sure that page 3 has a section at the top called “getGlobalVariable”. If you do not find this for your page, you can copy the layout of another page and change the page number to the same as the page you are adding to the header.

This section can be a bit tricky as we need to find where the Header code is. Since i know i want the dropdown to be next to the Register box, In site/widgets/menu_mainnav Ill search for Register using ctrl+f. then find the section where I want the code to go. this will be just after the {/if} so that my new page isn't overlapping with the Register page.

Now that we know where to place the dropdown, we can now create the Dropdown. You can copy the code within the Red Box. The numbers highlighted in Yellow will need to be changed to the page number you wish to display on the website.

					{*<!--Custom Dropdown-->*}
						<li {if $URLPage3|stristr:$page->PageName} class="active"{/if} class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Test Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
									<li {if $URLPage3|stristr:$page->PageName}class="active"{/if}><a href="{$URLPage3}">{$PageNamePage3}</a></li>
							</ul>
                                               </li>

If you were looking to add more then one link into the dropdown, below is an example of how the code would look. This can be expanded to add as many pages as needed. Highlighted in yellow is what needs be added to the existing code for each new page. The red box shows how new dropdowns would be brought in.

					{*<!--Custom Dropdown-->*}
						<li {if $URLPage3|stristr:$page->PageName || $URLPage4|stristr:$page->PageName} class="active"{/if} class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Test Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
									<li {if $URLPage3|stristr:$page->PageName}class="active"{/if}><a href="{$URLPage3}">{$PageNamePage3}</a></li>
									<li {if $URLPage4|stristr:$page->PageName}class="active"{/if}><a href="{$URLPage4}">{$PageNamePage4}</a></li>
							</ul>
                                               </li>

After publishing these changes. The website now displays the new “Test Dropdown” Dropdown with the “Our Partners” and “Page 4” in the dropdown.