Do I have to leave the default content in the top feature area?

Absolutely not.  That’s provided as an example that you can work with to create your own feature area. You can use the format provided and just change the copy and images or you can create your own.

How do I change the top feature content?

The default content that you see after installing the theme comes from the feature.php file included in the theme files.  You can edit that file by going under the Appearance options and clicking the ‘Editor’ link. You’ll see the list of theme files on the right. Choose the feature.php file and you will see all the HTML code.

There are two “boxes” of content, and each one is wrapped in a div element with the class of “feat_box”.  The feat_box class just applies styling to the containers such as padding and width. In your theme options under the ‘Top Feature’ tab, there is an option called ‘Number of columns’. This controls the width of the “feat_box” divs. If you choose 1, the feat_box divs will be the full width of your feature area. If you choose 2, each feat_box div will be 1/2 the width, 3 will be 1/3 and so on.

The theme defaults to 2 columns, and the feature.php file has 2 feat_box containers. The top one is the left side content, the bottom one is the right side content.  If you change the columns to 1, you would then have two containers stacked vertically rather than side-by-side horizontally. If you change it to 3, you would see the two feat_box containers side-by-side, but you would have a blank area on the right side of your feature area because there are only 2 feat_box containers by default and they would both be set to 1/3 of the width. So you could add one more feat_box div under the second one to fill the third column.

Just make sure you include the closing </div> tag at the end of your added feat_box. Otherwise the box will not close and your layout will do funny things.

You can use widgets in the top feature area also!

The top feature area is widget-ready, so you can drag widgets into the Feature_top widget location and have them display. The ‘Number of columns’ option still applies if using widgets, so if you have 1 widget, you want to use 1 column. 2 widgets, 2 columns, etc. if you want them to display side-by-side.

How did you use the background image in the feature area on this site?

That’s done using some custom CSS code. Simply create the image you want to display in your feature area and upload it into WordPress using Media > Add New from the left menu. When the file has uploaded, copy the File URL for the image.

Now go into your theme options under the ‘Custom CSS Code’ tab and enter code like this:

#feature {background: transparent url() no-repeat center;}

Paste the file URL you copied after uploading your image between the  ( ) after url.  Save the theme settings and preview your site.

You may also want to add this:

#feature .topshadow {background-image:none;}

That will remove the top shadow effect from the feature area box.

The button shown in the feature area on this site is simply an image in a text widget. Number of columns is set to 1 and the image has inline CSS to float right. That way it aligns to the right side of the feature area. The other text is part of the background image.