gpEasy Extra Content Areas Tutorial

The Extra Content Admin Page

You should be a little familiar with this page from past tutorials.

Notice the different areas of this Admin page. The Edit, Delete, and Add New Area all do exactly what you would expect based on their names.

Edit the Side Menu

Click the Edit link for the Side Menu

Editing the Extra Content Area for the Side Menu.

When you edit an Extra Content Area you edit the same way you would any file/page, within the HTML editor (CKEditor).

Let's make some changes.

My changes to the Side Menu Extra Content Area.

You can make your own. Just change it so you can see the changes take place.

Then click the save button at the bottom to save your changes.

Back to the Extra Content Admin page after saving the Side Menu extra area.

Did you notice the change to the side menu on the right? It's now the new text you just changed it to.

Let's edit the Side Menu again.

This time highlight the side menu with your mouse and click the edit link that shows up.

Back to the HTML editor for the Side Menu extra content area.

You can make more changes if you want. I just want you to realize the different ways of editing Extra Content Areas in gpEasy. Pretty cool isn't it?

Realize that the HTML editor here is the same one you use for pages/files. Therefore, you can view the source code and format the content anyway you like. This allows you to really customize how a theme looks. You could use the same theme multiple times and completely change the layouts for all of them.

Let's go back to the Extra Content Admin page.

Click the "Extra Content" link.

Notice that this area tells you the extra content area that you are currently editing and gives you a link back to the Extra Content Admin page.

Back at the Extra Content Admin Page.

Let's create a new area.

Type in a name for your new area in the "Add New Area" field. Then click the "Add New Area" button to create it. Simple!

You just created a new area and you are taken to the HTML editor to add content for your new area - what's an area without content?

Notice the heading of the page? It has the link back to the extra content admin page and tells us what area we are editing. In my case it's Side Menu 2.

Add some content to your new extra content area.

Go for it. Format it any way you want. Then click the save button to save your changes.

Your changes have been saved for Side Menu 2

Now that I saved my changes Side Menu 2 is listed as an extra content area and the first bit of content is listed to give me a clue as to what I wrote.

Now go to the Layouts page.

You should be familiar with the layouts page from the layouts tutorial. If you aren't then you might want a refresher.

The Layouts Admin Page

Click the Edit link for the default theme. Since this is a new installation of gpEasy there is only one layout added so far. . . we'll change that in a minute.

Edit Layouts Page

Notice how the extra content areas are highlighted. This tells you what areas you can move, delete, edit, and change.

Let's insert the extra content area we just created. Click insert on the lower extra area in the side menu. You get the insert, delete, edit buttons when you hover over an extra content area when on the edit layouts page.

Insert Extra Content Area Dialog

After clicking the insert button you are presented with this window to choose what extra content area you would like to insert. We are going to insert the one we created just a minute ago.

Click the Add link next to the content area you just created in the last step.

Notice that you could also create a new area here? We'll do that in a minute.

Notice how the new extra content area was added? It's inserted above the extra content area you clicked the insert button on.

Hover over the extra content area. Notice that it displays the name for that content area.

Let's remove the other extra content area. Hover over it and click remove.

Extra content area removed.

Let's edit the header content area.

Hover over the header and click the edit button.

Editing the header extra content area.

This should feel familiar by now.

Change the content.

Do you like my changes? NO? Then make your own changes and click the save button to save the changes.

And there's your new header!

Now let's head over to the File Manager to change the theme for different files.

The File Manager Admin Page

Hover over the page you want to change. Notice the bottom option displays the current layout set for that particular page. Well, we want to change that. Click the current layout.

The layouts dialog.

This is the window you get when changing the layout for a file in the File Manger. There's just one problem here. There are no layouts listed?!

That's because currently the only layout I have for this installation is the default one that was set at installation. So, I need to change that.

Let's head on over to the Layouts admin page to add a new layout.

The Layouts Admin Page

Click the blue color for the Bordered Three Theme to add it as a layout.

How do you want to add this new layout? You have to choose how you want to add this new layout to the layouts for gpEasy to use. I just want to add it as a new layout, not the default. Click the top link.

Our new layout has been added!

Do you remember how to change the color and name of a new layout? Click the color icon to the left of the layout. I'm just going to leave this one alone but feel free to rename yours and give it a different color code.

Now we can go to the File Manager to set some layout changes for files.

Back in the File Manager hover over the file you want to change the layout for and click the current layout.

The layouts dialog now has our newly added layout. Click it to change to that layout.

See how the color changed? That's an easy way to know what files have what layout applied to them. Also notice that the theme was applied not to just the file I chose but to all it's children as well. If you don't want the child file to have this layout then you would need to change the child's layout directly. All children pages/files inherit their parent's layout unless you change it directly.

Let's view our new file. Click the view option for the file you just changed the layout for.

Now the page displays in the Bordered Three theme. Cool isn't it? Notice that it has all the same content areas that the original default layout had. That's because those are the default areas.

Let's edit the layout for this layout. Remember when you are viewing a page you can directly edit some of it's features from the Title Options menu. Click the Edit Layout link.

Also notice the left side bar that pops out. That lists all the extra content areas of the current page/layout. You can click any one of those on the left side menu to edit the extra content area - yet another way to edit the extra content areas.

Edit Layout page

Now we are editing the layout we added to the layouts and set for this particular page, Another Page. The changes we make will affect all files/pages that have this layout.

I like my navigation menu on the right so I'm going to remove the current extra content area that's on the right.

The right extra content area has been removed.

Now I'm going to insert a custom menu. Click the insert button.

Click the custom menu tab.

Menus in gpEasy have gotten more complex and will be covered in-depth in the next tutorial. For now just select the setting you see. Basically I'm just setting a menu that will expand the children pages when on the parent.

And we have our new custom menu on the right! Looks good, but now we need to change the left side bar.

Remove the menu from the left side bar.

Left menu removed. Now hover over the blank content area and click the insert button just like we did a second ago.

Our friend the extra content dialog. Let's add the side menu we created. . . in my case it's Side Menu 2.

Our left and right side bars are set. . . I like it.

But I don't like the header. . . let's delete it and add a new one.

The Header extra content area has been deleted now we need to insert something in it's place. . . the page just wouldn't look right headless.

After clicking the insert button we get the extra content areas dialog. Let's create a new header. Name it whatever you like. . .I'm going with Header 2. Click the "Add New Area" button to create it.

The new Header content area has been created and added but it only says Header 2? That's because gpEasy puts the name of the extra content area in the content area but with no styling. . . we need to fix that.

Click edit on our new header.

Look Familiar? By default gpEasy adds the text of the name for the extra content are to the extra content area HTML. Well, we don't want that for a header. Let's make some changes.

This is my header. But now I need to style it.

I'm applying the Heading 2 style to my header.

And there we are. My new header formatted with a heading 2 style. Click save.

Back to the extra contents page. . . do you see our new header?

Let's see what our new header looks like. Remember we applied that layout we just got finished editing to the "another page" page. Click that page's link.

And there we are. The layout has the changes we made. Not too shabby. . . for a tutorial. Remember you can style the extra content areas just like any other HTML content.

Go back to the Extra Content page.

And we are back to our friend the extra content page. Notice our new areas, and do you notice that the layout we applied to the "Another Page" only shows when we are viewing that page? That's because for all admin pages in gpEasy it uses the default layout.

Now that you have gotten your hands wet with the extra content areas you can see how flexible a theme can be. We added the blue color of Bordered Three theme as a layout and changed its look. We could add that same theme and color again and it will be an entirely new layout. Yep, we can keep adding the same theme over and over and over and editing each layout differently. Of course you will want to customize the color and name for each one to keep them straight - remember how to do that? Click the color icon to the left of the layout on the layouts page.

Have fun with the layouts and extra content areas. Don't worry if you mess up. . .

There's alway the restore to default link. Just edit the layout of the layout you want to restore and click it.

And you will be back with the default extra content areas; however, once you change an extra content area it is changed for good. . . but you can always change it again.

That's been a long tutorial but an easy one. Hope you like gpEasy's layouts and extra content areas features.