Altitude Pro theme review and video set up guide

Making the code needed to set up Altitude Pro theme front page

You can make your own code by hand or use the StudioPress setup guide

This is the script I used for the Altitude Pro theme video guide, I hope you find it useful.

When you buy a StudioPress theme you receive a link to download your theme. When you log in to download your theme you will also see a link to the setup instructions on the StudioPres site.

All of the code used on the front page of the Altitude Pro theme demo site can be copied directly from these setup instructions. But it’s quite easy to make your own code using the WordPress editor.

This is how to make your own front page content formatted with basic HTML tags needed…

• Make a new page. Don’t click Publish, click Save Draft, because you are not going to publish this page, you’re only using this editor as an easy way to write the HTML code.
• Type in any headlines and paragraphs you want to appear on the front page of your site.
• Use the WordPress editor’s formatting buttons to add headings and list items etc to your text. When your text is formatted correctly click the Save Draft button, NOT the Publish button!
• Click the text tab above the edit box. Copy the formatted code including the HTML you made with the WordPress editor.
• Go to Dashboard > Appearance > Widgets.
• Drag a text widget in to one of the widget areas labelled front-page-1 to front-page-7.
• Paste your formatted content into the body of the text widget, click the box that says Automatically add paragraphs and then click the blue save button to save your changes to the text widget.

If you view your site’s front page you will see your new content has been added and formatted for you.

Styling the text links to look like buttons

The top widget area on the Altitude Pro theme home page has two buttons. When you click a button you jump or scroll to another section of the home page. To link to from one section of the front page to another, use this code… #front-page-7

You can make a jump link to any other section of the home page by changing the number that corresponds with that section of the page. For instance #front-page-2 jumps to the front-page-2 widget area of the home page.

To use these links to jump from one part of the front page to another just use the basic code #front-page-7. If you want add a jump link in the navigation bar, or you want to add a link from any other page that links back to a particular section of the home page, you need to use the full URL and the jump link. For instance…

http://mysite.com/#front-page-2

Setting up the large image in front-page-2 widget area

The demo site has an image in front-page-2 widget area. If you want to add an image to your site in the same place.

Use the WordPress editor to make the image code, then wrap the image code in a div with a class of bottom-image.

<div class=”bottom-image”></div>

The class of bottom-image removes the padding that would usually appear below the image.

Setting up the navigation bar with jump links

• Go to Dashboard > Appearance > Menus
• Click the Create a New Menu link. Then Save the menu you created.
• Click the Links tab.
• In the URL box paste in your URL followed by /#front-page-1 etc.
• In the link text box, type label you want to appear as your button text in the navigation bar.

Do this for all 7 sections of the front page.

Now, when someone clicks on a button in the nav bar, the page will scroll to that section of the home page. Don’t forget to add some links that take users to pages inside your site, such as to your blog listing page. Or they might think you have a one page site.

Changing the home page background images

You’ll need some 1600 x 1050 pixel images to replace the default background images with. Only use images that you have the right to use or you could get sued!

• Go to Dashboard > Appearance > Customize > Front Page Background Images
• The dialogue box opens to display all of the background images used on the Altitude Pro theme front page.
• Click the button that says Change Image. Upload an image or choose one form your media library.

There is a dark gradient applied over the background images. This makes it easier to read the text even if you use quite bright images. But it does darken the images and they will look different to the originals.

The combined file size of the four large background images on the Altitude Pro home page can be over a megabyte. If you want a smaller file size and quicker load times for your front page, use large one colour background images.

Adding Dashicons images to your page

How to add Dashicons to your page…

• Google: WordPress Developer Resources Dashicons
• Scroll down the page and click an icon you’d like to add to your page.
• The page scrolls back to the top and displays the icon you chose.
• Click the link that says Copy HTML then right click and copy the code.
• Paste the code into the WordPress editor in text view.

The Dashicon will display in your page at the point where you pasted the code.

The 9 front page layout configurations

The front page of Altitude Pro theme is built from 7 widget areas that stack on top of each other. This gives the appearance of 7 stripes with 7 blocks of content.

By adding more than one widget to any widget area you change the layout of that section.

For instance if you put 3 text widgets in one widget area, the top widget spans the full width of the page and the other two widgets sit side by side taking half of the page width each.

The best way to see what effect this has is to just experiment by adding 1 to 9 widgets to a widget area and looking at the results.

And don’t forget, you can add any type of widget to the front page widget areas; they don’t have to be text widgets.

More useful tips for Altitude Pro theme

Link to your main pages and the 7 homepage sections in one menu.
You can make a drop down list that links to the various sections of the front page and have links to the main pages of your site in one menu.

Sidebar and full width layouts.
Altitude Pro theme does have a sidebar, if you want to use it.

The footer is a big colored box (pick your own color using the customizer)
There is a prominent footer widget that you could use as a call to action box on every post and page.

Put email sign up box below content.
The after Entry Widget Area is a great place to put a sign up box for your mailing list using eNews Extended widget.

Easily add icons.
To add Dashicons just copy and paste the code from the Dashicons page on the WordPress website.

Altitude Pro theme quick start guide For WordPress power users 🙂

The front page is built form 7 text widgets.
Format your content using the WordPress editor then click the Text tab, copy and paste the HTML into text widgets named front-page-1 to front-page-7.

Change the background images in the customizer.
The background images are 1600x1050px, they have a dark gradient overlay. Change them in the Customizer.

Use jump links #front-page-2
To make the jump links in the buttons on the front page use #front-page-2 etc.

To make the jump links in the navigation menu use http://www.yoursite.com/#front-page-2 etc.

Other code snippets you need
class=”button” class=”button clear white”
<div class=”bottom-image”></div>
<span class=”small-disclaimer”></span>

There are 9 front-page widget layouts available.
You can add up to 9 widgets to each front-page widget area. Experiment with these to see how they look.

Have a good look at the Altitude Pro theme, it’s ideal for a digital business and it looks great too 😉