Customizing Widget area settings for Altitude Pro

First set up a new WordPress site as described in my basic set up tutorial. Then watch this video to learn how to customize the content of your new site.

The most important points from the video are…

The front page is built from text widgets. To change the content on the front page you must change the content inside these text widgets.

The widget areas are labeled Front Page 1 to Front Page 7.

Look at the text on the home page of the site you set up using the widget importer plugin. You will see that each section of the home page is labeled. So you can easily see which part of the front page is affected by which text widget.

Each section of the front page is clearly labeled with the number of the widget area

Changing the content of the widget areas.

In the WordPress Dashboard go to…

  • Appearance > Widgets
  • Click the down arrow to open the widget areas, then the text widgets.
  • Carefully change the text inside the text widgets. Do not delete any of the HTML computer code.
  • Some of the text widgets contain button or link code etc. You will need to carefully edit this too.

Front Page 1 widget area: text widget content

Altitude Pro Front Page 1 screen shot

Altitude Pro Text Widget 1 code

Altitude Pro Front Page 1 text widget content

You don’t need to change any of the code in Front Page 1. Just carefully change the text.

Front Page 2 – the big image

The large image in Front Page 2 widget area of Altitude Pro theme By StudioPress

To add an image in the Front Page 2 widget area of Altitude Pro theme by StudioPress, follow these steps…

  • Go to Dashboard > Media > Library
  • Upload the image you want to display in the Front Page 2 widget area.
  • After uploading the image, in the media library, click the image to select it.
  • A new window opens. The image is shown full size on the left. On the right you can see the image’s URL. Copy the URL.

Copy the images URL

Now open the text widget in Appearance > Widgets > Front Page 2 (widget area)

Carefully delete the # and replace it with the URL you just copied. Do NOT delete the “double quotes”.

In Front page 2 widget area of Altitude Pro theme. Paste the URL here

Front Page 3 – the small icons

Front Page 3 contains three text widgets. Two of these text widgets contain code that makes the Dashicon icons display.

Altitude Pro theme Front Page 3 widget area the icons

Changing these icons is easy.

Altitude Pro Dashicon code will look like this

Which widget area does the icon code go in?

Front Page 3: widget area contains three text widgets. The Dashicon code goes at the top of the Content: area in the second and third text widgets.

The first text widget contains a title in the Title: box and a h2 heading in the main content box.

Altitude pro Front Page 3 text widget 1

The second two text widgets do not have text in the Title: box. The content area of the text widgets contains…

  • The Dashicon code.
  • A h4 headline.
  • A paragraph of text.

Altitude pro Front Page 3 text widgets 2 and 3

Front Page 4: widget area – The Pricing Tables!

Altitude Pro front page 4 the pricing table screen-shot

This widget area uses quite a lot of easy to understand HTML tags.

But, if you just don’t want to mess with HTML or you don’t need the pricing tables, you can use a single text widget with a heading and a paragraph of text. Just like you’ve used in the other text widgets.

If you do want to use the pricing tables this is what you have to do…

  • Open each text widget in Front Page 4: widget area, one at a time.
  • Carefully change any text in the Title: and Content: boxes. Such as the price and List Item #1 etc.
  • Do not delete any HTML code. HTML is inside the <angle> brackets.

To make the buttons link to any web page.

  1. Visit any web page e.g. www.mysite.com/about-us
  2. Copy the URL website address (www.mysite.com/about-us). This is in the box at the very top of your browser.
  3. Paste that URL in the button code, replacing the # sign. Do not delete the “double” quotes.

Altitude Pro Front Page 4 pricing table HTML

Front Page 5: widget area – the testimonial

Altitude Pro Widget Area 5 the testimonial

Just replace the text in this text widget. Be careful not to delete any of the HTML in the <angle> brackets.

Altitude Pro Front Page 5 the testimonial

Front Page 6: frequently asked questions

This widget area contains three text widgets.

In the first text widget, the Title: box is empty. The Content: box contains a headline in h4 HTML tags.

The second and third text widgets do not use the Title: box either. In the Content: box they have two h5 headlines in strong tags. Followed by two paragraphs of text. This is arranged as headline-paragraph, headline-paragraph.

This layout can be confusing. Because it appears to be made from five text widgets. It’s not. The headline is in one text widget followed by headline-paragraph,  headline-paragraph on the left and headline-paragraph  headline-paragraph on the right.

Altitude Pro Front Page 6 widget area layout

The second and third text widgets look like this…

Altitude Pro Front Page 6 text widget code

Front Page 7: call to action and big blue button

Altitude Pro FrontPage 7 call to action screen shot

Just replace the text in the text widget in Front Page 7: widget area.

To make the button work, replace the # with a URL. Do not delete the double quotes around the # sign. Just replace the # with any URL.

Altitude Pro Front Page 7 call to action code

Wow. That was quite a marathon. But it was worth it. If you have installed the StudioPress demo content, there’s one more step. You’ll need to set the menu.

Go to…

  • Appearance > Menus.
  • Click the Manage Locations tab.
  • In the Header Navigation drop down, select Primary Menu.
  • In the Footer Navigation Menu drop down select Footer Menu.

That’s it. Your front page is set up just like the demo.