Tip:
Highlight text to annotate it
X
Genesis Minimum Pro Theme Tutorial Hello, Iím MaAnna with BlogAid, and in this
video Iíll show you how to build out the home page of the Genesis Minimum Pro theme
to look like the demo on the StudioPress site. It requires you to install a special plugin
and work with code just a bit. And Iíll show you an super easy way to do that. Plus, youíll
definitely want to know the tricks to getting that big, beautiful background image to display
correctly on this fully responsive theme. So letís get started.
Iím on a sandbox site that I set up just for this tutorial, and this is how the home
page of the Minimum Pro theme appears immediately after you install it on a site with only the
default content that comes preloaded with WordPress.
Doesnít look a thing like the demo, does it? Thatís the way all StudioPress themes
are. The home pages are comprised of multiple widget-ready areas. And you have to put widgets
in them to build out the home page the way you want it.
Letís jump over to the demo and see the end result of what we are going to build.
By the way, this theme is designed and currently being used by Genesis founder Brian Gardner.
And it has a new page type for a portfolio layout.
It has recently been updated to be HTML5 compliant, hence the name change to Minimum Pro.
Okay, letís have a look around so you can more easily identify the different widget-ready
areas later. The background image option is set to fixed
in the demo, so when you scroll down, the rest of the page rides over the image. You
could set this for the image to scroll too, and weíll be looking at that a little later.
The first widget-ready area is to the right of the site tagline area, where you see the
black button with a link to view my portfolio. The next widget-ready block is comprised of
four widget-ready areas. You can put anything you want in these four areas, but weíll be
building out what you see here with social media links.
The blog post section is actually not a widget-ready area. So, you donít have to use the Genesis
Featured Post widget to display these blog posts here. How many are displayed is under
the native controls in WordPress, and Iíll show you that in a moment too.
Below that is the footer widget-area block, and surprisingly, they donít show anything
in the three widget-ready areas that are available for this block. But, we will fill at least
one of them during this tutorial so you can see it.
Okay, letís jump back to our sandbox and get to work.
Weíre going to add a big background image. It doesnít matter exactly what size it is
because this theme, and a lot of the new StudioPress themes, use what is called backstretch to
set a focal point so that the image can dynamically change size based on the viewing device.
I borrowed their demo image for this tutorial and sized it at 1600 x 680 pixels.
To upload it, go to Appearance > Background. Click the Browse button and locate the image
on your computer. Then click the Upload button.
It will likely appear as a little square that is tiled.
Scroll down to the Display Options. As non-intuitive as it sounds, I had better
luck getting it to display properly when the position was set to left instead of center.
Select No Repeat if itís one big image. If you have a block background image, like a
texture, then select how you want it to tile. For the Attachment, if you select scroll,
then the image will move up the page. If you select Fixed. Then the page will appear to
scroll over the image, which is the way it is set in the demo.
Then click the Save Changes button. Letís go have a look.
Iím going to refresh this page. Thereís our big image.
Now Iím scrolling down and you can see that it stays fixed as the rest of the page moves
over it. Letís jump back to the demo and see whatís
next. Iím scrolling down and the next item is the
View my Portfolio button to the right of the tagline.
Letís jump back to our sandbox. The text in the tagline is in Settings > General.
Keep in mind that Google indexes this and the Site Title, so be sure to fill them out
with that in mind. Letís see where that button is.
Go to Appearance > Widgets. In the right column youíll see a widget-ready
area titled Site Tagline Right. Click the down arrow to expand it.
The Text widget is used for this. Click and drag it over from the Available
Widgets area and start typing in the content area what you want to show.
Do not put a title on this widget. Click Save on the widget.
Now letís jump over to the site and see what that looks like.
Iím scrolling down, and as you can see, it is just plain text. So, you could use it like
this if you just want to put some extra text in this area, or even an image. Let me show
you a trick to get WordPress to do all the heavy lifting on coding what displays here,
including the button look and links. Letís jump back to the admin pages.
And go to Pages > Add New. You always want to do this on a page rather
than a post, just in case you accidently hit Publish. You canít take that published post
off your RSS feed. Okay, weíre going to create a draft here
to save all of the content weíll be creating for this step.
So, title this page something like Button Code.
Since weíre following the demo example, Iíll type in the text I want to show in the button.
Highlight the text. Then click the link button.
Enter the link to your Portfolio page. If you donít have one yet, go ahead and enter
what the link will be. Iíll show you a trick for that. Click on
Or link to existing content. That brings up all of the content you have
on the site. Click on one of them, doesnít matter which.
That inputs all of the URL for you. Now you can just change the slug and the title.
Iím highlighting the slug. And typing portfolio.
Then highlighting the Title and typing Portfolio into that too.
Click the Add link button. Now, click the tab to go to the Text view
mode of the editor. Thereís the code you will need for your Text
widget. You could simply highlight it and then copy
and paste it to your text widget. But, to get that button look, you have to
add a class so that it brings up the style from the themeís style sheet to put that
button look around the text. Click your cursor once after the a and hit
space. Then type class=îcta-buttonî and then another
space. Save this page as a draft.
Then highlight the code. And copy. I use the shortcut keys of Cntl+C.
Then go to Appearance > Widgets. Expand the Site Tagline Right widget area.
And paste your code into the content area. I use Cntl+V to paste.
Then save the widget. Now letís have a look at our site.
Iím refreshing the page. And thereís the button.
Okay, letís jump over to the demo page and see whatís next.
Here we have the social media links. And letís talk about how this area works so that youíll
know where to put the code for each one of these.
This whole area is a block that is comprised of four widget-ready areas.
Letís jump back to the widget page on our sandbox site so you can see them.
They are the Home Featured 1, 2, 3, and 4 widget ready areas.
Letís return to the demo. Just like your sidebar, you can stack multiple
widgets in each widget ready area. And thatís exactly what theyíve done here in the demo.
This circle is one widget. Both lines of the text are a different widget.
And they are stacked one above the other. To get this circle, youíll need to install
a special plugin. The text comes from the regular Text widget, like we used for the
Portfolio button. And note that the text is not linked in this
demo. You can create one if you want, just know that it will have a dotted underline
it by default. Letís return to our sandbox and build this
thing. Go to Plugins > Add New
In the search box, type in Simple Social Icons and click the Search Plugins button.
It should be at the top of the list. Click Install Now.
And then Ok. Then Activate the plugin.
All the settings are in the widget. So go to Appearance > Widget.
Expand the Home Featured 1 widget-ready area. Click and drag the Simple Social Icons widget
in. Do not input a title.
Click the checkbox to open link in a new window. You can see that there are a lot of style
choices here. Weíll come back to that in a moment. For now, we just want to get the
whole thing built. We can paint it later. The only one weíre going to change now is
the alignment. Set it to Center.
Scroll down and you will see fields for popular social media platforms. Input the link to
your profile on the one that you want to use. Iím going to input my G+ profile link.
Iím jumping to a page where I Googled myself so I can grab it.
And you can see all of the other nice folks talking about me on G+. Powerful stuff, especially
with the Rich Snippets and all. And then jump back to our sandbox.
And paste that in. Now scroll down and save.
And close. Now, letís have a look at our site.
You can see that it gave us a square image instead of a circle. Iíll show you how to
change that in a moment. But whatís important is that you can see
it is a link and changes color when I hover over it.
Now for the text that goes below it. Letís jump back to the demo to show you the
two lines of text. One is the platform, and then below that is
the content text. You donít have to have both, in fact, you donít have to have either.
If all you want to show is this image, then youíre already done. But letís finish building
it out as itís shown in the demo. This first line is actually the title of the
Text widget weíre going to use. And then this second line is the text in the
content area of that widget. Okay, letís do it.
Go to Appearance > Widgets. Expand the Home Featured 1 widget.
Then drag in the Text widget. In the title, type in the name of your social
platform. Then in the content area, input your text.
And save the widget. Letís go have a look at the site.
Iím refreshing the page. And thereís our text.
Now, before we get into styling the icons, letís quickly see one last setting youíll
want to check, and thatís for how many blog posts to display on the rest of the page.
Iím jumping back to the sandbox. And then going to Settings > Reading.
Here is the setting for how many blog posts to display. Youíll want to use an even number,
since they are laid out in a two column fashion. Okay, letís jump back over the widgets and
quickly show you the footer widgets that are not shown in the demo.
You have three footer widget-ready areas available. They are just like the block area for the
social widgets we just made. If you put anything in one of these, then the whole block becomes
visible. For now, letís expand the first one.
Then drag the calendar widget into it. Save that.
And then jump over to the site and refresh the page.
Iím scrolling down and you can see the first footer widget.
You have two more widget-ready areas you can use here.
Okay, now for the fun part, letís go style the social icon so that it looks like the
demo theme with those big circles. So, weíre already on the Widgets page.
Open the one that we created in the Home Featured 1 widget-ready area.
Standard icon sizes are 24, 36, and 48, but you can use any size you want.
The border radius incrementally takes the icon from square to round. Meaning that the
bigger the radius, the more round the icon becomes.
The default radius is 3, letís bump that up to 10.
Then weíll scroll down and save. Then have a look at the theme.
You can see that it rounded the corners a bit more.
Now letís jump back to the widget and make it really big and round.
Weíll make the size 80 pixels. And give it a border radius of 80 too.
Then save it. And have a look.
That totally chops off the corners. Now, notice that when you hover, it changes
colors. So, you have two color choices to make.
Letís jump back to the widget.
Iím going to leave the text white. And then change the static background color
to BlogAid blue. And then the hover color to BlogAid red.
Now letís have a look. When I hover, it changes from blue to red.
You can have a lot of fun customizing these things to fit the look of your site.
And, youíre not stuck with just this plugin either. You can actually use any social media
icon plugin that you want. There are some that allow you to import your own icon set,
or have more choices for shapes and customization. I hope youíve enjoyed this video on how to
customize the Genesis Minimum Pro Theme. Youíll find more Genesis videos in the BlogAid Video
Tutorial Library that also covers WordPress, SEO, and more. Helping folks find the right
theme and customizing options is part of my 1-on-1 consulting and training services too.
Be sure to visit BlogAid.net for more tips, tutorials, and resources to make your site
better.