In this video you'll configure the executive pro home page widget areas each Genesys theme from Studio
press treats the home page differently.
But many use Widget areas to make the home page modular and editable by the end of this video you'll
have a working home page inside the executive pro theme in the sandbox and you'll understand how a specialized
home page template inside a theme can work.
Let's start by opening the customize or.
And look at what we're working with inside the customize or we can look under widgets and we can see
that this theme has a number of widgets for the home page.
The header right is where the menus are located just like in the parallax theme.
But then we have the home slider home top home call to action and home middle sections.
In addition to 3 footer widgets available to us within the theme.
Now let's just start by opening up the existing content that we have a custom menu is fine to leave
in the header right.
And let's take what we have out of the actual widget areas we don't need to save any of these widgets
that have a certain content in them so let's just click Remove on each one and then I'll save and publish
the site with nothing on the home page.
One more inside the footer the Connect with me and the simple social icons.
I think I'll just get rid of these as well.
There we go.
Now that there's nothing inside of the home page area what we have is a site that displays the latest
blog posts in reverse order just like a standard WordPress theme might go into your own executive pro
dashboard and do the same.
Let's empty all the widget areas out and start from scratch.
Then you can follow along with how I configure the homepage using the simple content that we've imported.
Before we get to customizing the home page widget areas let's look at some widgets inside.
Say we wanted to use the home type widget area and click Add a widget.
Genesis allows us to use featured pages or posts within widget areas and these widgets have certain
image sizes.
They use a 300 by 100 300 by 200 and a slider image size 11 40 by 445.
And if we already have images inside the media library which we know we do we imported them as a part
of that XML import file.
They're just grey images inside of the media library.
But we need WordPress to generate these sizes that are defined within the Genesis executive pro theme
before we can get them to be resized and displayed correctly without distortion or pixellation the way
we do that is go back into the Wordpress dashboard and run a plug in called regenerate thumbnails.
This is a great plug in to have and to know how to use if we go into plug ins we need to activate the
regenerate thumbnails plug in.
I have it already installed into the multi-site set up in the student's sandbox but regenerate thumbnails
is a very popular plug in to be able to resize and regenerate the thumbnails off of a larger image so
that they work correctly for your media library and your theme settings.
Now that I have regenerate thumbnails activated I can go to tools and region thumbnails and I could
click regenerate all thumbnails it will take just a few minutes with all these images that we have.
Theres not that many in the media library and its resizing and regenerating the thumbnails off the larger
images and saving them within the media library uploads folder those settings are defined within settings
media where it will generate images that we define here the medium size the large size and the thumbnail
size images and then that the theme itself defines some specific image sizes that we could see inside
of the Genesis widget settings there.
So now that weve regenerated all the thumbnail sizes from the existing images inside the media library
according to the theme we can go and customize the theme home page widgets so from anywhere inside the
dashboard just click the Customize button or might be under appearance customize or you saw me hit the
Customize button under the active theme there.
I'll go under widgets and let's start with the home slider widget.
If I add a widget I can see that oops I don't have the Genesis responsive slider plug in activated.
So let's go back into the Wordpress dashboard and under plug ins.
I'm going to activate the Genesis slider.
Great now that I have that activated I can go under appearance customize and I'll go into the widgets
area now when I go under Slider I can add a widget and add a Genesys responsive slider widget to that
area.
Now that I've added any widget to the home page widgets areas that that reverse order blog home page
is now deactivated and I have a slider active inside of the widget area.
Now I have three pages that are inside the widget here but you can tell that they're not configured
exactly right.
We can go to the slider settings page to configure the Genesis responsive slider.
I could click this link here.
But I can also show you after I published that inside the dashboard there are some settings under Genesis
when you activate that slider plug in.
You can click slider settings under the Genesis menu.
Let's go through the slider settings and set it up like the demo in the executive Parow demo.
They've got posts set up to be displayed inside the slider and each of them has a featured image with
a little bit of content.
And then the slider itself will supply a continue reading link and the image will also link to the post.
Let's look at those settings inside the slider settings.
You can choose a post type from whatever post types are displayed and being used inside the theme in
here you can see that there's posts pages and also that additional post-white that the executive pro-team
uses portfolio.
For now let's leave it at the Post's settings and we can choose a term we could use categories or tags
for the slider to select certain categories or tags with which to display the posts.
If we just have all categories there we can then include or exclude categories or posts themselves by
IDs.
The post ID down here or the taxonomy ID for a category or tag or a portfolio ID could be included or
excluded in these areas here.
You can choose to include or exclude any of these post ID's the easy way to find the ID number of a
post page or other post type is to go that posts page.
And if you look at each of the posts here when you roll over the post it's you Arel inside the Wordpress
dashboard that you can see at the bottom left hand side as I hold the mouse over this one.
You can see that the the number as post equals 4:59 and the return the next one as post equals 4:58.
If you do click any of the posts you can look at the address bar up here where it says.
After the question mark.
Post equals and then a number.
That's the post ID if you want to use that number to either include or exclude any post page or even
a portfolio item category or tag ID's are found in a similar way.
If you go to the categories or the tags page and roll over the category link or click on that category
in order to edit the category information up in the URL is a an ID ID equals three on this one in the
case of the executive pro-team demo.
They're using just the most recent three posts in any taxonomy and term and they're going to be displayed
by date and they're showing three slides and the offset means that if you want to go down into the list
of posts that are defined by these categories are these characteristics.
You could skip one or two or three posts and then start below.
For now let's just leave it at 3.
The default is for the effect to slide from right to left or left to right instead of fade.
In terms of the default settings we can leave the settings here as they are.
The display settings have the right size for the way the theme is set up and you can choose to display
the previous and the next arrows and the pagination is the dots here.
One two three.
Now if we compare that to what our site looks like at the moment let's refresh the page on our site.
It looks like I have that one is fine.
The second post is showing doesn't have much.
And the third post looks fine.
So let's figure out what's wrong there.
If we look at our posts list it's first to show the last three posts.
I see I think it's holding showing the hello world post which obviously was more recent than any of
these posts.
When the document was created that we imported.
So I'm just going to throw that.
Hello.
Hello world post away.
And the threaded comments post whether it's sticky or not only applies to the blog page or when you
have a post listing page like an archive page and so I can leave that how it is and I think by doing
that I've probably fixed my slider to show the last three posts in that list.
There we go and there's the third grade.
Shows me that I'm using the featured images that are in each one of those posts and if I click through
to one it's going to show that post itself without showing the featured image.
Now back inside the Wordpress dashboard under Gen. slider settings you can see that there are many options
and different configurations that you could have for the executive pro slider.
In this case they've shown the last three posts with no offset.
And so when the user creates any new posts will be front and center on the home page and clickable right
through to the new posts.
However you could choose to show pages here or even portfolio items here and have them click through
to those fixed pages like we have down here.
Let's go to the next section in the next section.
This one is called Home Page 1 and I'm just going to go to a Pierrots customize that way I can see what
my results are on the right hand side while I make edits on the left.
So if I open widgets I can go to Home top and I'm going to add a certain kind of widget here that again
is part of the premium Genesis framework featured pages.
Now if I had that featured page widget it's going to show a single page for every featured page widget
that I bring in here.
So which page.
Let's see let's look at the executive pro demo development design and consulting.
For now we'll go with the same ones that they are using.
So if I use development page I want to show the featured image I want to use the featured image size.
I can leave alignment none and I want to show I believe they're showing me the page title and some of
the content.
That's right if we show the page title and the page content.
I'm starting to see what this might look like.
Now for the content limit I don't want to show all the content in that little block.
And so if I want about this much content and I want that image to be shaped like that
let's say I'm going to use about
200 characters.
Sure.
Maybe I'll go 150
I'll put Read more.
Now we're getting somewhere.
I've got a nicely sized image here.
I've got an excerpt with only 150 characters and then I've got a read more link.
Maybe I want to put a couple of little carrots after that.
That looks great.
All right I'll save and publish.
And then what you can do is follow along with what I've just done and add two more of the featured pages
that are appropriate from this theme demo the design page and the consulting page and configure them
just like this just like we've done in this first section great how they go for you.
It looks pretty good for me if I look over at the demo site I can see there is a slight difference.
The title is above the image and it's also a little bit smaller and in all caps in the demo design.
What's the difference here.
Ah the title is below potentially because we've left the title out.
So under consulting.
I'll just put consulting as the title in that title area and you can see it displays it up here.
So I'll do that for all three.
Let's save and publish and see how that looks.
And of course since I'm showing the title as a custom title here I need to uncheck show page title in
each of the widgets as well.
Now we're looking good.
You should be getting the idea now that you don't have to put featured page widgets inside of this home
widget area on the homepage.
You can actually customize that with anything you like or any type of widget that you could put inside
that widget area you might do something with posts and now the featured post widget looks a little bit
different and because feature pages are one off widgets they show one featured page per widget inside
the widget areas.
Posts can be sort of automatically can self configuring by listing posts more than one of them from
categories specific categories that you have or some different types of posts just like we talked about
inside of the slider area there.
For now I'm just going to go back to the home page and go to the next section.
The call to action.
You may have noticed that I put an accidental WordPress post inside of that home top area because I
don't want that featured.
I don't want that feature posts widget to be there so I'm going to delete that and leave yes.
Leave the home top widget area populated with just these three pages.
The next one is called Home call to action and in the executive pro theme demo you can see that it's
got a different background and is designed to put a button and a suggestion to do something.
While visitors are coming down scrolling down the home page and reading the site this is a good place
to write something like.
Contact us through the contact page or something like that.
And this button could be clickable to the Contact Us page where there's a nice forum where they could
ask a question.
So let's go ahead and set that up using a text widget.
Scroll to the bottom of the list.
That's where the text widgets are
and there's a title and a content area.
We've played with text widgets before for this area.
Just go ahead and make a title.
In fact I'm going to write Contact Us
and put some content within the content area.
I'm sure you've seen how configuring the home page can work.
For now we're going to leave just a title and some content in text inside of the call to action section.
And what I'd like you to do is fill out the rest of the home page configuration by following what you
see in the executive pro demo.
Place another three featured pages and configure them to go below the call to action banner.
That would be inside of home middle and then configure the footer to have a set of 3 widgets of your
choice across here.
How do you do.
We are able to figure out how to add the next sections to the home page.
Here's what mine looks like now that I have refresh the page inside a new tab.
Of course it would look better with real images but I can tell it's going to look great in this video.
You configured the specialized home page of the executive pro theme using the provided widget areas
you discovered how Genesis themes can use predefined image thumbnail sizes featured pages and post widgets
and a slider built for Genesis themes in the next lesson.
You'll finish the call to action widget by using some special CSSA classes built into Genesis and add
a pre-designed button as well.