1 00:00:00,000 --> 00:00:02,000 I am on the Executives page of our Web site. 2 00:00:02,001 --> 00:00:09,001 This is under the About section and right now this page is just a list of 3 00:00:09,002 --> 00:00:10,002 people and biographies. 4 00:00:10,003 --> 00:00:12,003 It's just one after the other. 5 00:00:12,004 --> 00:00:16,004 We can probably improve the look of this page by adding some photos of these people, 6 00:00:16,005 --> 00:00:20,005 but this is a young company and they haven't had the time to go out and 7 00:00:20,006 --> 00:00:23,006 take the photography that's required to put all these people up here. 8 00:00:23,007 --> 00:00:28,007 So what I am looking for is a way that I can add a little bit more interactivity 9 00:00:28,008 --> 00:00:30,008 and a little bit more fun to this page. 10 00:00:30,009 --> 00:00:36,009 One possible way of doing this is using Accordion Panels and you see Accordion 11 00:00:36,010 --> 00:00:39,010 Panels in a few places inside Joomla! 12 00:00:39,011 --> 00:00:44,011 One of them is for example where we add if we go to our Main Menu and we try 13 00:00:44,012 --> 00:00:49,012 to add a New menu item and we hit our Select button, these little items here 14 00:00:49,013 --> 00:00:55,013 where we click on the titles and then something drops down, these are Accordion Panels. 15 00:00:55,014 --> 00:01:00,014 What I could imagine would be a page that looks like this that has the names of 16 00:01:00,015 --> 00:01:04,015 all of the people who are the employees that are executives and when you click 17 00:01:04,016 --> 00:01:07,016 on their name, you get a biography for them that appears. 18 00:01:07,017 --> 00:01:09,017 That would be a little bit more interactive. 19 00:01:09,018 --> 00:01:13,018 So perhaps we can go ahead and add something like that to the Web site. 20 00:01:13,019 --> 00:01:19,019 That is in fact possible and I am going to show you how to go ahead and do that now. 21 00:01:19,020 --> 00:01:23,020 If you go to Content and you go your Article Manager, scroll on down and find 22 00:01:23,021 --> 00:01:27,021 that Executives article, and when you go into the Executives article, 23 00:01:27,022 --> 00:01:33,022 what you'll see is we formatted this so that we had some H2s that were the names of 24 00:01:33,023 --> 00:01:36,023 the people and then of course we have a paragraph of information here. 25 00:01:36,024 --> 00:01:41,024 So what I'd like to do now is I'd like to set these up with internal page breaks 26 00:01:41,025 --> 00:01:43,025 and this is the Page Break button here. 27 00:01:43,026 --> 00:01:49,026 So what breaking this up into page breaks will do is it will put little bits of 28 00:01:49,027 --> 00:01:54,027 information originally on individual pages and then Joomla! 29 00:01:54,028 --> 00:01:58,028 actually has a plug-in built-in that can display those individual pages as a 30 00:01:58,029 --> 00:02:04,029 full accordion, as opposed to a series of individual pages you actually have to flip through. 31 00:02:04,030 --> 00:02:08,030 So what I am going to do is, right before Simon I'm actually going to put in a 32 00:02:08,031 --> 00:02:13,031 page break right off the bat, and it's going to ask me for information 33 00:02:13,032 --> 00:02:15,032 a Page Title and a Table of Contents Alias. 34 00:02:15,033 --> 00:02:18,033 The easiest way to do this is just to copy his name. 35 00:02:18,034 --> 00:02:22,034 So Ctrl+C or Cmd+C to copy his name and then right before his name 36 00:02:22,035 --> 00:02:26,035 I'll click that Page Break button and I am just going to paste that information in 37 00:02:26,036 --> 00:02:28,036 twice and say Insert Page Break. 38 00:02:28,037 --> 00:02:32,037 Then I am going to go my next person, copy her information, click right before 39 00:02:32,038 --> 00:02:36,038 her name, click the Page Break button, and paste that information in twice. 40 00:02:36,039 --> 00:02:41,039 I am just going to do that here for the last two people as well. 41 00:02:41,040 --> 00:02:46,040 Copy that, click the Page Break, paste in, Insert Page Break. 42 00:02:46,041 --> 00:02:53,041 Then finally, for this last one, copy, click before, click Page Break, 43 00:02:53,042 --> 00:02:54,042 and Insert Page Break. 44 00:02:54,043 --> 00:02:57,043 Now, that's all I have done so far. 45 00:02:57,044 --> 00:03:01,044 If I just go ahead and say Save, just to save what changes I've made and 46 00:03:01,045 --> 00:03:03,045 I refreshed the Executives page. 47 00:03:03,046 --> 00:03:07,046 What will happen is I've actually got this set up with this sub-navigation set 48 00:03:07,047 --> 00:03:11,047 up over here on the side and I can click on the names of any of these 49 00:03:11,048 --> 00:03:15,048 executives and you see that they're sort of presented in their own page 50 00:03:15,049 --> 00:03:16,049 and tells you it's page 2 of 5. 51 00:03:16,050 --> 00:03:20,050 I can click on through the list here or I can click on all pages and show 52 00:03:20,051 --> 00:03:22,051 everyone together on one page. 53 00:03:22,052 --> 00:03:27,052 You might be wondering why on the top level Executives page I have no content. 54 00:03:27,053 --> 00:03:31,053 That's because I put my page break before the content even began. 55 00:03:31,054 --> 00:03:36,054 So if you are going to use this kind of layout, you might want to have some 56 00:03:36,055 --> 00:03:39,055 introductory text over here on the side that would say something along the lines 57 00:03:39,056 --> 00:03:43,056 of our executives are amazing, click on the navigation on the right in order to 58 00:03:43,057 --> 00:03:45,057 explore all of our fabulous people. 59 00:03:45,058 --> 00:03:48,058 But we are not going to stay with this particular layout. 60 00:03:48,059 --> 00:03:53,059 This is just Joomla's! default layout for an article that has page breaks in, a multipage article. 61 00:03:53,060 --> 00:03:55,060 We can make changes to this. 62 00:03:55,061 --> 00:03:59,061 I am going to go ahead and hit Save & Close and I am going to now go to 63 00:03:59,062 --> 00:04:04,062 Extensions>Plug-in Manager and here inside of the Plug-in Manager I am going to 64 00:04:04,063 --> 00:04:06,063 look for the plug-in called Content-Pagebreak. 65 00:04:06,064 --> 00:04:10,064 I am going to click on that to edit it. 66 00:04:10,065 --> 00:04:15,065 So this is the plug-in that drives the ability to break a single article into 67 00:04:15,066 --> 00:04:17,066 several pages, the way you just saw. 68 00:04:17,067 --> 00:04:23,067 Under the Basic Options, the Presentation style is what I'm most interested in. 69 00:04:23,068 --> 00:04:25,068 Right now that's set to Pages. 70 00:04:25,069 --> 00:04:29,069 If I change that to Sliders, sliders are Joomla's! word 71 00:04:29,070 --> 00:04:36,070 for Accordion Panels and if I say Save and I refresh this page, 72 00:04:36,071 --> 00:04:38,071 I now have my Accordion Panels. 73 00:04:38,072 --> 00:04:44,072 So I can click on Sally's name and get her information, click on June's name, 74 00:04:44,073 --> 00:04:47,073 click on Jason's name, and get all of these bios, which is great. 75 00:04:47,074 --> 00:04:50,074 That's a wonderful way of laying out this page. 76 00:04:50,075 --> 00:04:54,075 It's definitely looks a little bit better than what we had before. 77 00:04:54,076 --> 00:04:58,076 And if you're a CSS wiz, you could certainly add a little bit more styling to these, 78 00:04:58,077 --> 00:05:01,077 maybe some bars that go across the page or something that might look 79 00:05:01,078 --> 00:05:04,078 a little bit more clickable or little bit more accordion like. 80 00:05:04,079 --> 00:05:09,079 What I do want to do right now know though is I'd like to get rid of these 81 00:05:09,080 --> 00:05:14,080 big bold words, because I've already got their name here and now I've got it again here. 82 00:05:14,081 --> 00:05:17,081 What's happening is the big black words here are the H2s that are inside of the 83 00:05:17,082 --> 00:05:23,082 article and the blue clickable words, these are where we entered each of those 84 00:05:23,083 --> 00:05:27,083 page breaks, we put in two pieces of information, and that's where that 85 00:05:27,084 --> 00:05:29,084 information is coming from on the page. 86 00:05:29,085 --> 00:05:33,085 You'll notice also here inside of his Page Break plug-in down here under 87 00:05:33,086 --> 00:05:37,086 Presentation Style you also have the option of Tabs or Pages. 88 00:05:37,087 --> 00:05:41,087 Pages are what Joomla! uses by default, so you saw that one. 89 00:05:41,088 --> 00:05:44,088 Tabs would arrange this as a series of tabs going across the page. 90 00:05:44,089 --> 00:05:48,089 You can click on the tabs to flip between the types of content. 91 00:05:48,090 --> 00:05:53,090 But the styling really works if somebody has configured styling for tabs and 92 00:05:53,091 --> 00:05:55,091 this particular template is not styled for tabs. 93 00:05:55,092 --> 00:06:01,092 So I am not going to show you this, but you can take a look if you like on your own. 94 00:06:01,093 --> 00:06:05,093 I am going to go ahead and close this and I am going to go back to my Content, 95 00:06:05,094 --> 00:06:09,094 back to my Article Manager, and I am going to go to my Executives page again. 96 00:06:09,095 --> 00:06:14,095 Now I am going to edit this to get rid of the names of the executives' right here, 97 00:06:14,096 --> 00:06:17,096 those H2s that we originally created. 98 00:06:17,097 --> 00:06:20,097 Just like that I am just going to remove those h2s from the text. 99 00:06:20,098 --> 00:06:30,098 Remove that one and then one more and then I am going to Save & Close my article 100 00:06:30,099 --> 00:06:34,099 and now when I go back to my Executives page and I refresh, you'll see that by 101 00:06:34,100 --> 00:06:39,000 default I've got Simon Lodine, the very first one, and he's open by default. 102 00:06:39,001 --> 00:06:43,001 I can click on the names of these other people and their bios will jump up here, 103 00:06:43,002 --> 00:06:46,002 just like that and I can flip between them very nicely. 104 00:06:46,003 --> 00:06:47,003 It's a little bit more interactive. 105 00:06:47,004 --> 00:06:50,004 It makes the page feel a little bit shorter. 106 00:06:50,005 --> 00:06:55,005 It doesn't like quite such a laundry list of stuff and I think this is 107 00:06:55,006 --> 00:06:57,006 a great way of presenting this content.