In this video you'll open the cafe pro theme home page layout document and use it to arrange the home
page of the site.
Inside the student's sandbox by customizing the home page and matching its content with appropriate
navigation you'll see how the theme can work for any kind of business or web site.
You'll learn how to use themes by Studio press that use layout configurations for awesome looking home
page content.
Let's start by taking a look at our Cafe site and comparing it to the studio press demo site which I
have open in another tab.
If we look at one that I called my cafe it's got the title here and that scrolling background image
that's fixed and the menu comes up as we saw.
And then we've got some home page areas here front page widget areas.
There's one widget here in this zone there's one widget in the zone with the next background image one
widget in this green background image zone one widget.
In this third photo zone and then this is a 3D widget area footer.
We go back to the Wordpress dashboard and open up under a perience customize the cursor Mizer will show
us what's what.
It opens a live preview of our site and let's open up the widgets panel and look at front page one.
Is this one right here one text widget et cetera.
This from page 1 2 3 and 4.
And then there's footer one to three across the bottom in the black.
If I go back one and look at background images you can see that these are the three default background
images.
Basically the one at the top header and then one more and then third right before the bottom area.
Now on the word press dashboard you may have already downloaded and unzipped the theme.
Demo files.
Zip file.
But if I open it up in Windows Explorer can see that inside there there's a folder called Genesys layout
configurations and there's 5 different PTF documents that show those layouts.
You can see that there's a few different studio press themes on the Genesis framework that have these
specific front page layouts alt. pro atmosphere pro author pro interior pro cafe pro digital pro and
workstation Pro.
You can experiment with any or all of those inside the student's sandbox and you can look at the home
page layout documents by opening these Adobe PTF.
Here's the cafe pro one.
And the way it's laid out is you can see depending on how many widgets you have inside of any widget
area in these front page or home page layout areas it will display them in these certain ways.
One widget two widgets three widgets for splits it up into a four grid five has three across the top
and two across the bottom.
And then there's six in a grid seven shows three across the top under it a full width widget area and
then three more widgets below.
If you have eight widgets in the widget area shows them into stacks of four and then nine is obviously
a nine item grid.
Depending on which of these documents you have open you can see that they are actually slightly different
depending on how many widgets you have in each widget area you open up one of the next ones say the
altitude and the atmosphere pro layouts.
It will open up that PTF and you can compare the two for instance the pro and atmosphere pro show 2
widgets top and bottom whereas cafe shows two widgets side by side three widgets side by side for the
cafe pro widget areas but in altitude and atmosphere Pro 3 is shown with one full width and then two
side by side below so depending on which theme you're using these lay out areas work the widgets and
their display slightly differently.
We're working working with the cafe pro layouts PTF so I'll leave that open as I go into my website
to try and arrange the front page in different ways.
Let's look at the cafe pro demo site at demo that studio press com slash cafe and try and look at what
they're doing here.
There's one widget in the front page area one there's three text widgets in front page area too and
you can see if you have a text widget here.
If I look under front page two widget area in the theme settings you can see that these three menu items
here are three text widgets and if you just put the text in here it centers the content so that it looks
nice and centered within each of the widget areas.
Also depending on how long the content is within each widget area it's a fixed width as a percentage
of how wide this is.
But it's also lengthens each widget depending on how much content there is.
If I look at the Mobile responsiveness here if I pull the width of the site down.
These widgets will fit three across and then they'll rearrange the a different screen size say for a
tablet and then they'll rearrange themselves for a narrower screen.
Finally they'll make themselves readable top to bottom if the screen is narrow enough say on a smartphone.
Bring that back out to forward on my desktop here.
Below we have one more widget here and there's a little icon.
This is a dash icon.
If you look inside of the studio press instructions area under front page 3 widget area you can see
that they've got just a text widget with some text and then a code showing these dash icons dash icons
carot we open dash icons page inside of Wordpress dot org.
You can see that there's a whole bunch of icons that are part of a fun brought into WordPress automatically
they're using this one which is Dasch icons Dasch carrot.
And if you just copy the HTL Mal Control-C to copy and hit OK.
What I've done back inside of my cafe site that are making inside the student's sandbox
I refresh the page.
I added that little carrot icon just below the text like they recommended in the studio press instructions
and you can see if I open the customize or and I open widgets and I go down to front page 3 which is
that area in the green here placed that pasted that little piece of code and then saved it.
Let's take a look at two sites that I've made for clients using the cafe pro theme.
This is a site for my local recreation center.
You can see it's got a nice fall with image.
No call out at the top in the big forehead or widget area.
But then I've got a single widget in the front page one area.
And then what we've set up are a series of six of the latest blog posts in the next front page section.
And like we learned in a previous video I've got these so that there's a featured post widget for each
one of these areas and I've got a zero offset and then a one offset to offset and so on.
Three four and five.
So we've got the latest six posts in this area.
And then in the greenery here I've got a single widget with a soliloquy slider shows a slide show that
they can go in and create and put new photos up whenever they want to.
Down here there's two more blog posts in that same list of reverse order blog posts.
So these are single featured posts with an offset of six and an offset of seven making for eight total
blog posts on the entire site that repopulate themselves whenever the site owners make a new blog post.
None of the bottom we've just got the three different properties of the rec center in the town of Breckenridge
and then a convenient menu at the bottom.
If we look at a single blog post in the interior of the page we go to the header.
Image is a little bit smaller and across the top behind the logo here and as you scroll down I've got
a two column layout and I've got an interactive map in the sidebar and then their Facebook page indicated
there and they've got all of their categories and a tag cloud here on the right side as well as an after
entry widget that shows just an about page after each of the single pages and posts that they have on
the Web site.
Our navigation doesn't actually use the scrolling home page navigation but they wanted to call out all
their different categories of posts inside of their blog.
If we move over to the next one method snowboard academy you could see that I've got it a little bit
different instead of the square text based logo and header image that's created just from the words
and the title of our site and the tagline.
I've got a custom image that's got some transparency and shows through the background just a little
bit.
It's also a little bit larger than the one that you can see over here.
This one goes as wide as the actual words go over here with method.
I've had to make a little bit of customisation that I'll show you.
And I made this an custom header image a little bit wider than the recommended 350 pixels wide.
In fact this one is 750 pixels wide to fit that nice big logo we are using.
One of the scrolling buttons to the next section of the Web site and then Methot Academy has six different
programs.
These are featured pages within the Genesys system.
And they stay static and go over the second.
So it's a group of six here's a group of three widgets three widgets in that area and I've had that
change of green over to a bright red that matches the logo.
And finally I've got just a single widget in the last part of the Web site and then in the three footer
areas a Facebook follow us button and display as well as a fancy little social icons that I customized
using some of the code from a different genesis theme and pulled in this neat rotating effect in the
social sharing icons.
I've got a form so that athletes and parents can sign up for an email list which goes to a MailChimp
list that we can manage and send out bulk e-mails.
And then I've got a premium Instagram feed where you can click on any of the images and it opens it
in a light box into a slideshow display if you like.
And this pulls in from our Instagram account directly up onto the Web site with that display using one
of the premium Instagram themes from smashed balloon so with that said let me just show you how I edited
this image to be a little bit larger and changed it from what the standard was from the brokerage recreation
and what cafe does I have both of the customizes open between each of these sites the method site and
the Brekke Rec Center site.
If you look under a rock there's a header image.
Now I don't have a custom image I'm just using the standard black box with white copy but it recommends
ahead or size of 350 by 140.
I found over at method that that was not enough room to get our nice logo in here.
And I changed it so that it would accept a header image of 750 by 180.
Now how did I get that.
I had to edit just a little piece of code inside the functions dot THP file inside of Cafe pro.
Now you might remember that I don't really recommend changing the functions that BHP inside of a theme
unless it's a child theme.
Now this is a child theme of the Genesis framework.
And so I can't really make a grandchild theme here.
So potentially instead of editing one line inside the function's ph P file I could have used code snippets
plug in or the WP clips plug in that we went over in a previous chapter in order to make this so that
if studio press does update the cafe pro theme I'd be able to update it without remembering what I need
to customize.
In any case I just made the change inside of functions that.
Just scroll down to where I found a add support for a custom header and it was 350 by 140 I think and
I just changed it to 750 by 180 which caused the customized it is customized to change and it enabled
the site to display a larger and wider image which I made inside of Photoshop used it as a transparent
PLG file or a ping file so that it would roll over and have that neat transparent effect.
So here's your challenge for the next section.
Go to your cafe pro theme design and edit each of the widget areas for the front page and using the
cafe pro layouts PTF to lay out some of the front page areas on the home page to have more than one
widget and some different configurations here and experiment a little bit using putting pages in or
featured posts in different configurations.
Feel free to embed a soliloquy slider in one of the front page areas just like we created in a previous
chapter and in the next video I'll show you how I will go through and put some different pieces together
for this home page at the same time.
You should also create three different widgets for the three widget areas that go across the footer.
Good luck.
In this video you opened one of the Genesis home page layout documents from the theme demo files that
you downloaded from the student's sandbox.
I showed you around two different client sites I made using the cafe pro theme and challenge you to
customize your own cafe pro-se within the student sandbox in the next lesson I'll walk you through the
steps I took to make the home page look great.
See there