In this video you'll create a fresh new site in your students sandbox.
Activate the cafe pro theme and populate it by importing the sample content file.
We'll check out how the themes home page layout provides for scrolling navigation buttons uses widgets
to populate the custom home page and makes use of a layout configuration pattern for raging content.
You'll be able to see possibilities for using this theme for any type of web site because it's home
page layout is so modular.
Let's get started.
Let's check out the cafe pro themed demo.
First of all I've got it open here at Demo dot studio press dot com slash cafe and the first thing you
notice if you open it up and then start to scroll is that it's got this fixed background image where
the content scrolls over the top of it.
Pretty neat effect as well as the menu coming up from down below goes up and then fixes itself to the
very top.
There's more than one widget area that's populated by a fixed background image like that.
And there's another colored area right here for a nice mission this is the mantra here.
Another Square area in front of a fixed background image and then a series of footer widgets with which
we're probably familiar by now.
If you scroll back up a couple of the features you can figure out and play with or there there's a highlighted
area up top here.
This is a widget area that's designed to appear on every page of the Web site at the very top to have
a call out to something important as well.
All of these menu items here are scrolling menu items.
If you click the about menu item it scrolls to the About section of the home page widget area and if
you click menu if you roll over it you can see down at the bottom left of my screen.
There's a hash tag after the Web address and then it says front page to.
This one is from page 3.
This one is front page four.
These are anchor tags that are built in so that you can use these menu items to scroll up and down on
this scrolling home page.
And then the logo at the top left is clickable back to the home page itself as well as this text based
logo link right here.
I'm going to show you around my studio press member area just a little bit.
You don't have access to these interior themed set up pages unless you're a member of studio press and
have bought a theme from them.
But there's one page about CAFE pro themed shows you all the lay out areas on the home page the widget
areas.
This one is a call to action banner at the top.
And then there's home page areas one two three and four and then three footer areas down here.
At the same time there's also an interesting layout configuration setup that several themes by Studio
press utilize if you can see this layout configurations graphic.
It actually has nine different layout configurations.
This gray is a little bit hard to see but I will have this file available to you inside of the resources
zip file for the themes and you can see that the first.
If there's one item it shows it in the middle that's just like the mantra right down here.
That's one item which has it right in the middle.
If you have two items it shows it side by side three items.
It shows all three side by side four items.
It shows four in a grid and so on.
So you can choose by how many items you have within the widget area how many widgets that will lay it
out in this certain way.
Let's get started getting our cafe pro theme activated and a new fresh site set up inside the student
sandbox area.
When you log in into your students sandbox if you go to my sites and click through to your your sites
that you have already you can use the Add New button as usual to go ahead and sign up for another site.
Choose a unique name for the your l like your name and then the name of the theme if you like.
And then I'm just going to call this one.
My cafe and I'll click Create say as usual and then I can go ahead and log in of course and relaxing
into this one.
And so I type my password again.
There we go.
And I am inside of the my cafe.
Now of course it's going to open up the default parallax as usual and your challenge now is to go back
to the dashboard activate the cafe pro theme and either download the theme demo files or go and open
up the theme demo files that you had downloaded before and find the import ex-MIL file for the cafe
pro theme.
Import it using the import tool here.
And make sure that cafe pro is activated and then come back and we'll restart the video then as you
do.
Were you able to activate the theme OK and then use tools import to go ahead and use the Wordpress importer.
And did you find the SML file from the theme demo files and important.
Well when you did your your site should look like this.
I've just done that and I'm opening the customized now.
And because in our original default site in parallax I had some of the home page widgets enabled with
content.
You can see that the home page is there and then as you scroll down I've got this white background and
there are some of my content content.
Of course it's not called parallax pro anymore.
We're going to have to revise this content and then using one widget inside of this widget area.
Here is a text widget inside of here.
And again one widget inside of this home page area and just one widget inside of the footer area which
is designed to take three of them.
If you open up widgets inside the customize or you can see all those places the before header is way
up here at the top not activated at this point.
But then from page 1 2 3 and 4 and then footer 1 2 and 3 while we're here let's just place a little
text inside of the before header widget so that everything's populated with something we can rearrange
it in the next video.
I'm just going to say Here's the before or content.
You can have that be a link or have a color like it is in the demo but I'll just place that right there
and then save and publish in the customize or you go over to the site.
If you have it open in another tab and refresh it it should come up like that.
Now we don't have any navigation yet and we'll take care of that in subsequent videos.
And our Web sites looking pretty good already.
In this lesson you created a new sandbox Web site activated the cafe pro theme and imported the demo
content from the theme demo content file.
In the next video we'll set up two navigation menus one for the home page anchor tags and scrolling
home page feature and one for the footer near the bottom of the Web site pages and we'll check out what
interior pages look like in the theme and customize their layout