How to: Create a landing page using a custom template

In this tutorial we will show you how to create a custom landing page without the default styling like the header and the footer. This could be helpful when the landing page needs to highly customized with a different style than the main web site.

To create our landing page we will use Flat Pages. Ordinarily when creating new Flat Pages the header and the footer are displayed along with the content supplied by the Flat Page. To create a Flat Page that's highly customized we will need to create a custom DB template and set the Flat Page to use this new template.

 

a) Create a custom DB Template.

b) Create a Flat Page that will use the custom DB template instead of the default flatpages/default.html.

c)  Add an Image, CSS or JavaScript file to your Landing Page.

 

a) Create a custom DB Template

 

1. Click on the CMS tab.

crm_1.png

 

2. Click on the Templates menu items.

Screen_Shot_2013-02-08_at_11.25.28_AM.png

 

3. Click on the Add template button.

Screen_Shot_2013-02-08_at_11.26.13_AM.png

 

4. Set a name/path for your template.

Screen_Shot_2013-02-08_at_12.31.19_PM.png

 

5. Add {{ flatpage.content }} Django template tag into the Content  text box. 

Screen_Shot_2013-02-08_at_11.27.04_AM.png

 

6. Select the site for this template.

Screen_Shot_2013-02-08_at_11.27.22_AM.png

 

 

 

 

b) Create a Flat Page that will use the custom DB template instead of using the default flatpages/default.html.

 

1. Click on the CMS tab.

Screen Shot 2013-01-10 at 11.45.16 AM.png


2. Click on the Pages then on the Flat pages menu items. 

Screen_Shot_2013-02-08_at_11.48.02_AM.png

 

3. Click on the Add flat page button to create a new flat page.

Screen_Shot_2013-02-08_at_11.48.32_AM.png

 

4. Set the URL for your landing page. 

Screen_Shot_2013-02-08_at_11.48.52_AM.png

 

5. Provide a title.

Screen_Shot_2013-02-08_at_11.49.14_AM.png

 

6. This is where we write all the HTML code needed for this landing page.

Screen_Shot_2013-02-08_at_11.50.09_AM.png

 

7. Click on the Show link.

Screen_Shot_2013-02-08_at_11.50.44_AM.png

 

8. In the Templates name provide the path to the DB Template created at step a).

Screen_Shot_2013-02-08_at_12.11.02_PM.png

 

 

c) Add an Image, CSS or JavaScript file to your Landing Page or custom DB Template

 

To add an Image, CSS or a JavaScript file to your landing page the file must be first loaded to the server using the Media Upload. Once loaded copy and paste the Embed Code into your page.

 

1. Click on the CMS tab.

Screen Shot 2013-01-10 at 11.45.16 AM.png

 

2. Click on the Pages then on the Uploaded Files menu itemes.

Screen_Shot_2013-02-08_at_2.26.50_PM.png

 

3. Click on the Add Uploaded File button. 

Screen_Shot_2013-02-08_at_2.27.04_PM.png

 

4. Click on the Choose File to upload your Image, CSS or JavaScript file.

Screen_Shot_2013-02-08_at_2.28.04_PM.png

 

5.  Save.

Screen Shot 2013-01-11 at 12.43.21 PM.png

 

6. Copy the Embed Code and paste it into your Flat Page.

Screen_Shot_201302-08_at_2.31.30_PM.png

 

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk