Luckily for me, not much has changed here from gpEasy 1.7 to 2.0+. Therefore, I haven't changed this tutorial. Just realize that some of the menus shown in the images are due to the screenshots coming from gpEasy 1.7 and you will have to correlate them to the new floating menu in gpEasy 2.0.
This pictorial tutorial will walk you through creating, editing, inserting, removing, and arranging gpEasy's extra content areas as well as adding new themes to the layouts, applying layouts to files, and editing the layout of a layout. While this tutorial is fairly easy it is a bit long simply because I want to walk you through many of the possibilities when dealing with extra content areas. Between the extra content areas, layouts, and custom menus gpEasy has a lot of flexibility to display a theme or page in a multitude of ways. Following this tutorial you should jump into the gpEasy custom menus tutorial which will help you round out your skills for manipulating themes and layouts in gpEasy.
Before starting this tutorial make sure you are familiar with gpEasy's layouts.
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.
Click the Edit link 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.
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.
Did you notice the change to the side menu on the right? It's now the new text you just changed it to.
This time highlight the side menu with your mouse and click the edit link that shows up.
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.
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.
Let's create a new area.
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.
Go for it. Format it any way you want. Then click the save button to save your changes.
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.
You should be familiar with the layouts page from the layouts tutorial. If you aren't then you might want a refresher.
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.
Notice how the extra content areas are highlighted. This tells you what areas you can move, delete, edit, and change.
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.
Notice that you could also create a new area here? We'll do that in a minute.
Hover over the header and click the edit button.
This should feel familiar by now.
Do you like my changes? NO? Then make your own changes and click the save button to save the changes.
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.
Click the blue color for the Bordered Three Theme to add it as a layout.
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.
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.
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.
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. . .
That's been a long tutorial but an easy one. Hope you like gpEasy's layouts and extra content areas features.