Step 1a: Check to see if they have the SEO template added to the site.

1. Login using the box in the bottom right-hand of the site footer

2. Click the “Pages” button under the DNN logo on the left-hand side of the screen

3. A menu will pop out that looks like this

4. If you DO NOT SEE a grayed-out page called “SEO Landing Page Template” you will need to add it (Refer to Step 1b)

5. If you do see a page called “SEO Landing Page Template” skip to Step 2

Step 1b: Add the SEO layout template

1. In the list of pages, you should see a page labeled “Custom Content Template”

2. Hover the ellipses to bring up the menu for the page and click “Duplicate”

3. After the new page pops up, you will need to name it “SEO Landing Page Template”, take a moment to update the title as well.

4. Click the blue “Add Page” Button

5. Once the page reloads, you will see the default custom content page - We need to get rid of the content that is already there

6. Click the edit button (the pencil) at the top right-hand corner of the content module to bring up the wysiwyg and click “Source”

7. Delete everything inside and replace it with the following code (Blue text), then click the blue “Save” button

...

Template

<p><img alt="" class="opening-banner" src="//a.nd-cdn.us/img/banners/opening-banner-default.jpg" /></p>

<div class="content-section">

<h3>Section 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ex consequat, eleifend risus sit amet, rutrum augue. Nulla feugiat orci id sagittis finibus. Phasellus id magna consequat, ultrices felis a, lacinia mi. Nulla et arcu nec libero lobortis pretium. Nullam at neque a purus rutrum posuere sit amet eget mauris. Vestibulum tristique ac quam vel cursus. Etiam tortor odio, hendrerit ac nibh a, consectetur vulputate ex. Curabitur auctor justo vel tellus lacinia interdum. In quis mi ultrices, dapibus mauris a, tristique erat. Aenean tincidunt tortor sagittis est sodales, ut mattis est gravida. Fusce id nulla eu purus malesuada faucibus. Cras finibus diam tortor, ultrices placerat eros mattis vel.</p>

<p>Sed ultrices ligula fringilla pulvinar dictum. Vestibulum sit amet laoreet felis, consequat consectetur nibh. Quisque mattis metus pretium augue porta, sit amet porta nisi varius. Donec venenatis nunc vel tortor bibendum, ut laoreet tortor fermentum. Proin euismod vehicula dolor quis suscipit. Curabitur sodales vitae tortor et pharetra. Nulla fermentum tellus ante, non molestie ipsum finibus a. Pellentesque pharetra urna sed nisi sollicitudin dictum. Morbi congue dui neque, at iaculis ex laoreet eget. Proin venenatis, mauris nec aliquet egestas, sapien nisl gravida tellus, eget vehicula elit nunc nec nibh.</p>

<p>

    <a class="ndcb ndcustomcolorclass" href="#"><span class="ndicon-tire4"></span>Contact Us</a>  

    <a class="ndcb ndcustomcolorclass" href="#"><span class="ndicon-repair2"></span>Other Services</a>

</p>

</div>

...

Step 2:

IF they already have the SEO Landing Page Template or you just added it, proceed with the following steps:

1. Click on the “Pages” button right under the DNN logo on the left hand side of the screen and hover the ellipse to the side of the “SEO Landing Page Template” and click “Duplicate” 

2. Once the page reloads, give it a proper name, title, and meta description.

3. You will need to click the “Permissions” tab making sure that view is checked active for both All Users and Registered Users.

4. Then you will need to click on the “Details” tab once more and check whether or not you would like the page to display in the navigation or not

5. Once all the above updates are complete click the blue “Add Page” button

6. The page will reload

7. You can then edit the page as you normally would using the WYSIWYG

8. Go to the homepage and reset the CF Cache

Landing Page Basic Rules:

Images:

When adding images, you will need to make sure that the image is responsive, and will flex based on screen size.

Image from the code above:

<img alt="" class="opening-banner" src="//a.nd-cdn.us/img/banners/opening-banner-default.jpg" />

How the image code should look:

<img style=”width:100%; height:auto;” alt="" class="opening-banner" src="//a.nd-cdn.us/img/banners/opening-banner-default.jpg" />

 The style tag above will make the image span across the entire page/screen and scale the height accordingly. This makes it so the original aspect ratio of the image is kept and will prevent the image from running off the page or being stretched/smooshed. 

Buttons:

When editing the buttons, do it in the code so as to not alter the base structure.

Below is the base code for one of the buttons on the page. Its parts consist of a href  (where the link to the other page should go), an icon, and the button text. All of which can be edited. 

...

<a class="ndcb ndcustomcolorclass" href="#"><span class="ndicon-tire4"></span>Contact Us</a> 

...

• Href - Should only include everything past .com in a web address. Using a full path URL will cause the buttons to disappear.

• Icons - The code for the different icons we will have access to are located in the top left hand corner of the page under the “CUSTOM ICONS” tab in the top navigation. Just copy the code and paste it between the quotation marks as indicated above.

• Button text -  can be edited as normal

Headings:

• Use proper capitalization - Title

• After you paste the content in and try to highlight a heading and it changes the whole paragraph, hit enter twice and try again. That will break the text into two sections and allow you to edit them independently

• Refer to the main headings training to see how to edit and add H1 tags. 

• This page will automatically have an H1 and all subsequent headings should be in descending order: H2 > H3 > H4 > ECT...