1
00:00:00,690 --> 00:00:04,730
In this video you'll create a fresh new site in your students sandbox.

2
00:00:04,860 --> 00:00:10,650
Activate the cafe pro theme and populate it by importing the sample content file.

3
00:00:10,680 --> 00:00:16,560
We'll check out how the themes home page layout provides for scrolling navigation buttons uses widgets

4
00:00:16,560 --> 00:00:23,190
to populate the custom home page and makes use of a layout configuration pattern for raging content.

5
00:00:23,580 --> 00:00:28,290
You'll be able to see possibilities for using this theme for any type of web site because it's home

6
00:00:28,290 --> 00:00:30,330
page layout is so modular.

7
00:00:30,330 --> 00:00:31,280
Let's get started.

8
00:00:32,660 --> 00:00:34,970
Let's check out the cafe pro themed demo.

9
00:00:34,970 --> 00:00:42,260
First of all I've got it open here at Demo dot studio press dot com slash cafe and the first thing you

10
00:00:42,260 --> 00:00:49,130
notice if you open it up and then start to scroll is that it's got this fixed background image where

11
00:00:49,130 --> 00:00:51,770
the content scrolls over the top of it.

12
00:00:52,610 --> 00:00:59,990
Pretty neat effect as well as the menu coming up from down below goes up and then fixes itself to the

13
00:00:59,990 --> 00:01:01,790
very top.

14
00:01:01,850 --> 00:01:07,220
There's more than one widget area that's populated by a fixed background image like that.

15
00:01:07,430 --> 00:01:15,720
And there's another colored area right here for a nice mission this is the mantra here.

16
00:01:15,820 --> 00:01:22,720
Another Square area in front of a fixed background image and then a series of footer widgets with which

17
00:01:22,720 --> 00:01:25,400
we're probably familiar by now.

18
00:01:25,600 --> 00:01:32,740
If you scroll back up a couple of the features you can figure out and play with or there there's a highlighted

19
00:01:32,770 --> 00:01:34,410
area up top here.

20
00:01:34,420 --> 00:01:40,810
This is a widget area that's designed to appear on every page of the Web site at the very top to have

21
00:01:40,810 --> 00:01:44,820
a call out to something important as well.

22
00:01:44,890 --> 00:01:50,430
All of these menu items here are scrolling menu items.

23
00:01:50,630 --> 00:01:57,860
If you click the about menu item it scrolls to the About section of the home page widget area and if

24
00:01:57,860 --> 00:02:03,230
you click menu if you roll over it you can see down at the bottom left of my screen.

25
00:02:03,470 --> 00:02:09,590
There's a hash tag after the Web address and then it says front page to.

26
00:02:09,860 --> 00:02:11,590
This one is from page 3.

27
00:02:11,630 --> 00:02:13,220
This one is front page four.

28
00:02:13,250 --> 00:02:19,640
These are anchor tags that are built in so that you can use these menu items to scroll up and down on

29
00:02:19,640 --> 00:02:23,150
this scrolling home page.

30
00:02:23,470 --> 00:02:31,090
And then the logo at the top left is clickable back to the home page itself as well as this text based

31
00:02:31,180 --> 00:02:33,150
logo link right here.

32
00:02:34,730 --> 00:02:39,650
I'm going to show you around my studio press member area just a little bit.

33
00:02:39,680 --> 00:02:46,460
You don't have access to these interior themed set up pages unless you're a member of studio press and

34
00:02:46,460 --> 00:02:48,020
have bought a theme from them.

35
00:02:48,110 --> 00:02:55,280
But there's one page about CAFE pro themed shows you all the lay out areas on the home page the widget

36
00:02:55,280 --> 00:02:56,060
areas.

37
00:02:56,090 --> 00:02:59,370
This one is a call to action banner at the top.

38
00:02:59,510 --> 00:03:09,190
And then there's home page areas one two three and four and then three footer areas down here.

39
00:03:10,760 --> 00:03:18,050
At the same time there's also an interesting layout configuration setup that several themes by Studio

40
00:03:18,050 --> 00:03:24,380
press utilize if you can see this layout configurations graphic.

41
00:03:24,380 --> 00:03:28,790
It actually has nine different layout configurations.

42
00:03:28,850 --> 00:03:35,690
This gray is a little bit hard to see but I will have this file available to you inside of the resources

43
00:03:35,870 --> 00:03:41,150
zip file for the themes and you can see that the first.

44
00:03:41,240 --> 00:03:48,380
If there's one item it shows it in the middle that's just like the mantra right down here.

45
00:03:48,380 --> 00:03:51,140
That's one item which has it right in the middle.

46
00:03:51,320 --> 00:03:54,980
If you have two items it shows it side by side three items.

47
00:03:54,980 --> 00:03:58,400
It shows all three side by side four items.

48
00:03:58,400 --> 00:04:01,960
It shows four in a grid and so on.

49
00:04:01,970 --> 00:04:07,670
So you can choose by how many items you have within the widget area how many widgets that will lay it

50
00:04:07,670 --> 00:04:10,500
out in this certain way.

51
00:04:10,500 --> 00:04:17,340
Let's get started getting our cafe pro theme activated and a new fresh site set up inside the student

52
00:04:17,340 --> 00:04:19,440
sandbox area.

53
00:04:19,440 --> 00:04:26,400
When you log in into your students sandbox if you go to my sites and click through to your your sites

54
00:04:26,400 --> 00:04:32,130
that you have already you can use the Add New button as usual to go ahead and sign up for another site.

55
00:04:33,550 --> 00:04:40,230
Choose a unique name for the your l like your name and then the name of the theme if you like.

56
00:04:40,540 --> 00:04:42,990
And then I'm just going to call this one.

57
00:04:44,470 --> 00:04:56,120
My cafe and I'll click Create say as usual and then I can go ahead and log in of course and relaxing

58
00:04:56,210 --> 00:04:56,990
into this one.

59
00:04:56,990 --> 00:05:01,020
And so I type my password again.

60
00:05:05,200 --> 00:05:05,850
There we go.

61
00:05:05,950 --> 00:05:08,650
And I am inside of the my cafe.

62
00:05:08,920 --> 00:05:18,460
Now of course it's going to open up the default parallax as usual and your challenge now is to go back

63
00:05:18,500 --> 00:05:26,500
to the dashboard activate the cafe pro theme and either download the theme demo files or go and open

64
00:05:26,500 --> 00:05:33,730
up the theme demo files that you had downloaded before and find the import ex-MIL file for the cafe

65
00:05:33,730 --> 00:05:35,090
pro theme.

66
00:05:35,090 --> 00:05:38,140
Import it using the import tool here.

67
00:05:39,070 --> 00:05:47,880
And make sure that cafe pro is activated and then come back and we'll restart the video then as you

68
00:05:47,920 --> 00:05:48,340
do.

69
00:05:48,370 --> 00:05:55,740
Were you able to activate the theme OK and then use tools import to go ahead and use the Wordpress importer.

70
00:05:55,870 --> 00:06:02,310
And did you find the SML file from the theme demo files and important.

71
00:06:02,470 --> 00:06:08,410
Well when you did your your site should look like this.

72
00:06:08,470 --> 00:06:11,880
I've just done that and I'm opening the customized now.

73
00:06:12,070 --> 00:06:19,450
And because in our original default site in parallax I had some of the home page widgets enabled with

74
00:06:19,450 --> 00:06:20,190
content.

75
00:06:20,410 --> 00:06:25,890
You can see that the home page is there and then as you scroll down I've got this white background and

76
00:06:25,940 --> 00:06:28,300
there are some of my content content.

77
00:06:28,300 --> 00:06:30,690
Of course it's not called parallax pro anymore.

78
00:06:30,700 --> 00:06:37,860
We're going to have to revise this content and then using one widget inside of this widget area.

79
00:06:38,050 --> 00:06:41,290
Here is a text widget inside of here.

80
00:06:41,410 --> 00:06:49,850
And again one widget inside of this home page area and just one widget inside of the footer area which

81
00:06:49,850 --> 00:06:52,110
is designed to take three of them.

82
00:06:52,220 --> 00:06:59,360
If you open up widgets inside the customize or you can see all those places the before header is way

83
00:06:59,360 --> 00:07:01,990
up here at the top not activated at this point.

84
00:07:02,000 --> 00:07:11,170
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

85
00:07:11,170 --> 00:07:18,220
text inside of the before header widget so that everything's populated with something we can rearrange

86
00:07:18,220 --> 00:07:21,030
it in the next video.

87
00:07:21,120 --> 00:07:29,810
I'm just going to say Here's the before or content.

88
00:07:29,820 --> 00:07:36,270
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

89
00:07:36,570 --> 00:07:41,940
and then save and publish in the customize or you go over to the site.

90
00:07:42,030 --> 00:07:48,420
If you have it open in another tab and refresh it it should come up like that.

91
00:07:48,420 --> 00:07:53,150
Now we don't have any navigation yet and we'll take care of that in subsequent videos.

92
00:07:53,400 --> 00:07:56,020
And our Web sites looking pretty good already.

93
00:07:57,040 --> 00:08:03,190
In this lesson you created a new sandbox Web site activated the cafe pro theme and imported the demo

94
00:08:03,190 --> 00:08:06,790
content from the theme demo content file.

95
00:08:07,210 --> 00:08:12,700
In the next video we'll set up two navigation menus one for the home page anchor tags and scrolling

96
00:08:12,700 --> 00:08:18,490
home page feature and one for the footer near the bottom of the Web site pages and we'll check out what

97
00:08:18,490 --> 00:08:21,790
interior pages look like in the theme and customize their layout