Customizing widget area settings for Atmosphere 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 widgets. Most of these widgets are text widgets. But! Front Page 3 widget area contains three Genesis Featured Page widgets.

To change the content on the front page, you must change the content inside these widgets.

Front Page 1

The first widget area, Front Page 1, uses a text widget to place text and a button over the large black and white photo at the top of the home page.

Text displaying over a large background image in Front Page 1 widget area of Atmosphere Pro theme

In the dashboard go to Appearance > Widgets and open the Front Page 1 widget area.

Edit the text in Front Page 1 widget area of Atmosphere Pro theme

Carefully change the title and content text. You don’t need to change the button code or text.

Front Page 2

The Front Page 2 widget area contains 7 text widgets.

The first text widget only contains a title. This title text appears as the title above the other six text widgets. Type your title in the Title: box.

The other six text widgets in Front Page 2 widget area contain…

  • Icon code
  • A heading in h4 tags
  • A short paragraph of text in p or paragraph tags

Carefully open each of the six text widgets. Type a title between the h4 tags. Type a short paragraph of text between the p tags.

If you want to change the icons you will need to…

  1. Go to… http://ionicons.com/
  2. Click one of the icons and copy the code. It will look something like this,
    ion-laptop
  3. Paste that code in to the icon code in your widget area.

Only replace the code that-has-hyphens.

Replace Ionicon code

Front Page 3

This is the section of the home page that has three large featured images that alternate between the right and left hand side.

Atmosphere Pro theme Genesis featured page widget

Choosing the pages you want to appear in this section

Go to Appearance > Widgets > open Front Page 3 widget area.

Open each of the three Genesis Featured Page widgets and choose which page you want to display.

Atmosphere Pro theme Genesis featured page widget

Featured Pages Need Featured Images

You need to assign featured images to each page that you display using Genesis Featured Page widget.

So if your theme is set to use the About Us, FAQ and Services pages in the Genesis Featured Page widgets, you need to assign featured images to these three web pages.

This is what to do…

View the front page of your website while you’re logged in.

Scroll down to Front Page 3 widget area. It shows a list of pages with buttons that say Read More…

Click the button to view the page.

In the black bar at the top of your WordPress editor window click the button that says Edit Post. It has a pencil icon.

In the right hand sidebar of the WordPress editor look for the Featured image option. Click the link that says Set featured image. Use an image that is at least 640 pixels wide and high.

If you can’t find the featured image option, look in the screen options tab and make sure the Featured Image box is ticked. Screen options is at the very top right of your editor.

Choosing the page to display in Front Page 3 widget area of Altitude Pro using Genesis Featured Page widget

Front Page 4: the Fun Facts section

The demo site has five text widgets in this widget area.

The first text widget only uses the Title: box. It says Fun Facts.

The other four text widgets have a headline in a span tag. This is followed by a br (break) tag and then a sentence of text.

If the boxes are too narrow, just remove the last two text widgets. This will give a title and two 50% wide boxes.

This is the code that makes the big headlines in the Front Page 4 widget areas.

This code makes the big headlines in the fun facts section. Carefully change the text.

Footer 1 widget area

The very last widget area on the front page is Footer 1.

This is a simple text widget. It has a title in the Title: box. Content in the Content: box. there is also a piece of HTML for the button.

To add a link to the button, replace the # with a web page URL. To change the button text just type your new text to replace text that’s already there.

StudioPress Button Text

Set the navbar or menu

In the WordPress dashboard go to Appearance > Menus

Select the Manage Locations tab.

In the Header Menu drop down list, choose Header Menu.

Activate the menu in Atmosphere Pro theme

You now have a fully functioning site that you can build upon one page or post at a time.