Beautiful Pro is a WordPress child theme that runs on the Genesis Framework.
It’s got all the bells and whistles you’d expect from a StudioPress theme, including:
- mobile responsive
- HTML5 markup
- custom header
- custom menus
- page templates, including a landing page
This theme is purely for bloggers — if you need a non-blog-style homepage, look elsewhere. But if you want to blog, Beautiful Pro is worth more than a second glance.
Its look is clean and uncluttered, so readers can focus on what you have to say. That doesn’t mean it’s bland or boring, though!
Recently I put Beautiful Pro through its paces.
I Started with a Clean Slate
For this review, I started with a clean install of WordPress on my sandbox site. The only plugins I installed were for security.
After installing WordPress and the plugins, I installed the Genesis Framework, then the theme. Here’s what my Manage Themes page looks like at this point.
At this point, the site looks pretty bland.
Begin Customizing
To start the customization, I clicked the customize link on the Manage Themes page. It brings up a sidebar that looks like this.
I had already filled in the site title and tagline, so I ignored this choice.
To choose the background color for the site, click the Colors button to expand it so it looks like this:
This is a standard color-picker tool. If you know the code for the color you want to use, you can type it in directly. Or you can choose one of the preset colors at the bottom, or use your mouse with the tool to find the exact color you want.
I’m going to choose a white background for now.
Expand the Background Image tool. In this theme, the background they’re referring to is this shaded area under the Title of the website.
You can choose a color, or you can upload an image. I’m going to upload the WordPress Building Blocks logo.
I’ll select No Repeat, Center and Fixed.
Look what happens to this background image area as you scroll down the page. There’s a parallax effect. The image area appears to slide under the next page element. This adds some unexpected visual interest for your readers.
For now, I’ll deselect the Static Page option for the homepage.
Save and close.
Now the homepage looks a little more interesting, but we still have a long way to go.
The Header
The out-of-the-box header size is quite small, only 320×120 px. If you upload a header, it replaces the text at the top. Personally, I don’t much like it, so I’m going to remove it but leave the header banner in the “background image” area.
If you want to move the header to the left, as shown in the Beautiful Pro Theme demo, you can add a custom menu via the Header Right widget area. Here’s what it looks like:
Menu
Beautiful Pro lets you create a Custom Menu. Here’s what the header area looks like after I add it.
Widgets
Beautiful Pro includes the following widgets:
- Header right
- Primary sidebar
- Before header
- Welcome message
- After entry
- Split sidebar left
- Split sidebar right
- Bottom sidebar
- Footer 1, 2 and 3
The only one that affects only your homepage has is the Welcome Message. That’s because Beautiful Pro is a blogging theme, so your homepage shows a traditional blog format.
Header Right
Use this widget to add a search box, or maybe an advertising banner on the right-hand side of your header area. Here’s what it looks like now.
Before Header
This widget area gives you space above the entire header to add a narrow, full-width message or ad, like this.
Welcome
Want to have a message at the top of your homepage that doesn’t change? The Welcome widget provides a more elegant solution than just creating a post and making it “sticky.”
After Entry
The After Entry widget lets you place a piece of text, an opt-in box or whatever else you want at the bottom of each and every blog post.
Split Sidebar
One interesting feature of Beautiful Pro is the split sidebar Notice how the sidebar changes from one column to two. . . that’s the split sidebar at work.
In your widget area, you’ll notice the Primary Sidebar, along with the Split Sidebar Left and Split Sidebar Right.
Bottom Sidebar
Just as its name says, this widget stays at the bottom of your sidebar so you can place content there on every page. Use it for a copyright notice, for example.
Summary
Beautiful Pro is an attractive theme for bloggers. It’s got a bit of non-standard functionality, and is easy to set up.
If you want an easy blogging theme without a lot of fancy bells and whistles, Beautiful Pro might be just what you’re looking for.
Great tutorial. I’m planning on using this theme. How did you get the title blocks over the widgets?
Hi Clarra,
Most widgets have a Title field, where you can type in whatever you want. For example, the testimonials widget is officially named “HMS Testimonials,” but I titled it “Happy Clients.”
The styling (background color, font) is custom CSS.
Susanna
I’m using Beautiful and I love it. One problem: the guy who installed it has disappeared and I need to edit my byline. Is that possible? Can you tell me where I find that? Thank you in advance 🙂
Not sure what you mean by “byline.” Are you referring to “By Melissa Henig” above each blog post? Or do you mean the WordPress tagline (the one for this site is “Creating your WordPress site one block at a time).
If it’s the site tagline, just go to Settings/General and change the tagline (2nd item down).
If that’s not it, please email me.
Cheers,
Susanna
Hi,
I can´t put the “continue reading” in the homepage. It shows only […] after the extract of the text but I would like to give the opportunity tu continue reading with a link (like the site in your video). How can I do it please?
Regards
Are you using the Beautiful Pro theme? If so, you set that up in the Genesis settings. Log into your StudioPress account and check instructions here for the default settings.
If you are using a different theme, you won’t have the option for that “continue reading” bar across the bottom.
How do I change the color of the headings in the right side bar?
That’s a change you’ll need to make in the theme’s CSS. It’s not an option that’s built into the theme.
Hi,
My background Image doesn’t fit on my mobile phone screen…
Also how do I reduce the space of the header and make it fix on the screen as i scroll down the page ?
I want to load a background image but have no idea what size to make it. This theme gives no size recommendations. I’d rather not keep playing around with images and just make it the right size and load it right in.
Hi Heidi,
Here’s what StudioPress says about the background image size:
If you haven’t yet discovered it, you’ll find extensive theme documentation when you log into your account at StudioPress. Select the theme from the list of purchased themes, and click the Theme Setup button.
Hope this helps,
Susanna