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.
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
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
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.
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”.
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.
Changing these icons is easy.
- Go to: https://developer.wordpress.org/resource/dashicons/
- Click any icon to select it.
- Click the link that says Copy HTML
- Copy the code that displays and paste it into your text widget.
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.
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.
Front Page 4: widget area – The Pricing Tables!
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.
- Visit any web page e.g. www.mysite.com/about-us
- Copy the URL website address (www.mysite.com/about-us). This is in the box at the very top of your browser.
- Paste that URL in the button code, replacing the # sign. Do not delete the “double” quotes.
Front Page 5: widget area – the testimonial
Just replace the text in this text widget. Be careful not to delete any of the HTML in the <angle> brackets.
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.
The second and third text widgets look like this…
Front Page 7: call to action and big blue button
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.
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.
- 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.