Working With Pages in gpEasy Tutorial

This tutorial will walk you through creating and editing pages in gpEasy CMS 2.0+.

Prerequisites

Of course you need a gpEasy installation--see the xampp tutorial and/or the gpEasy install tutorial.

You will find many of the file options in the Page Manager Tutorial. That information will not be repeated here so please make sure you are familiar with the different file options in the page manager. Of course you should read all the tutorials prior to this one; however, the above are the "mandatory" ones you will need to make it through this tutorial without too much effort.

Creating A New Page

There are two ways to create a new page in gpEasy 2.0+

1. Via the Page Manager

  • Select a menu.
  • Select page on the menu you want to insert new page after, before, or as a child page.
  • Give the page a name and select the type.
    • Editable Text
    • Image Gallery
    • File Include
    • Other: Some plugins add additional types.

2. Via Floating Menu

  • Under "Content" select "+ Create New Page"
  • Give the page a name and select the type (same as above).
  • Create a new page via the Page Manager
  • The pop up window you are presented with after selecting insert. Give the new page a name and select the type of page you want to create. Click Create New Page to create the page.
  • The new page has been created.
  • Creating a new page via the floating menu.
  • The pop up window you are presented with after clicking the Create New Page on the floating menu. Notice this pop up window does NOT have additional tabs. That's because you are not working within a menu.

    Click Create New Page to create your new page.

  • This time we are taken to the newly created page. You can begin editing the page now.

    A special note about creating a new page via the floating menu is required. The newly created page is NOT inserted into any menu in the Page Manager. You will want to head over to the page manager and insert your new page into a menu so it will be in your navigation.

Page Types

By default there are three types of pages you can create as noted above. In general you will create an Editable Text page. The reality is, with gpEasy 2.0 you can always add an image gallery and/or file include within any page you have created; therefore, it will be rare that you will want to create a page that is only an image gallery or a file include page.

Editing Pages

gpEasy 2.0 introduced "sections" to page content areas along with inline true WYSIWYG editing. These are two great features that make working in gpEasy very easy, functional, and seamless.

The only way to edit a page is when you are viewing the page and logged in therefore, you must first navigate to the page you desire to edit. Once you are on the page you only have to move your mouse over the area you want to edit and you will see a red highlighted area with an edit button. Click the edit button to edit the page.

Just as in creating a page, editing a page allows you to add the same types of sections/pages--Editable Text, Image Gallery, and File Include.

Editable Text Section

  • Navigate to the page you would like to edit.

    Mouse over an area on the page and if it is editable you will see the red edit button.

  • Hover over the red edit button and you will see the section area highlighted. Click the edit button to edit this section.

    Remember this page we created? It was an Editable Text page therefore, this first section of the page is an Editable Text section.

    Click the edit button.

  • When we click the edit button on an Editable Text section we get the HTML editor toolbar. This is a floating toolbar you can move.

    The HTML/CKEditor tutorial will go into more depth about this editor. All in all it functions much like a word processor.

  • Make some changes to the section then click save & close to save the edits and close the html editor.
  • As soon as we click the save & close button we are back to our "live page." Notice that you could have clicked "save" to save your edits and continue editing the section or "close" to cancel the changes you made and close out of the html editor.

Editing an editable text section is easy. You just need to familiarize yourself with the HTML editors toolbar. Remember that you can have as many "sections" in a page as you like and any combination of sections--editable text, image gallery, file include, or sections available to you from a plugin. Let's continue on and create a new section on this same page we are editing. We'll make it an image gallery.

Image Gallery Section

  • Hover over the editable text section we just edited--it's the only section on the page so far.

    Click "new section."

  • Pop up window asking us the type of section we want to create. Looks very similar to what we see when we create a new page. Choose image gallery and click save to create the new section.
  • The new section is created. By default for an image gallery you get a blank image place holder.
  • Now click the edit button to edit the image gallery section we just created.
  • We get a window that allows us to add images, upload image, create folder, etc. to work with our image gallery section.
  • Click the "upload files" button. You will be asked to locate the images you want to upload. I'm going to throw in a few screenshot of this tutorial I'm working on.
  • Notice you can select one or more images to upload at a time.
  • Click the "open" button to finish adding these images.
  • The images we selected have been uploaded and automatically added to the image gallery section.
  • I'm now going to add the image that was already uploaded to a folder. Just hover over the image and click it. It will be added as the last image.
  • The image was added.
  • To add a caption just hover over an image and select the edit button. You can select the red button to delete the image.
  • After clicking the edit caption button we get this caption window. Add text here for your caption.
  • Click update to save your changes.
  • Our caption was added. notice that when you mouse over an image area the cursor turns into the move cursor. You can drag-n-drop images within the image gallery section to arrange them. Let's move this image.
  • There, it's been moved from the first position to the third.
  • Click the "save & close" button to save your image gallery section.
  • After saving and closing we are back to the live page. Notice when you hover over the editable text section you now have more options than you did before. That's because you only had that one section before thus you could NOT delete it or move it.
  • Hover over your image gallery section and notice the options available for it.
  • If you need to create a folder to organize your images in just click the drop down menu and create a new folder. You will be promoted to give the folder a name. It's always a good idea NOT to use spaces when naming folders that are on your server. use an underscore_instead.
  • You can also manage your images and folders for your images via the Uploaded Files link on the floating menu.

File Include Section

At this point you should be settling in with adding sections to a page. Now we are going to add the third default type, file include. What this section allows you to do is include other file/page or gadget into a page as a section. Yes, you could include a page that you have previously created as a section in another page. This section type is extremely handy when working with gadgets that you only want to use on a single page.

  • Highlight a section and click new section.
  • Select the type of section you want to insert--File Inclusion and I've chosen to add it before the section I was on.
  • The File Include section has been added before the image gallery section.

    Click the edit button to edit this section.

  • This is the File Include edit window.
  • Click into the "File Include" area and type the name of the page you want to include. You can do the same thing for the gadget area to insert a gadget.
  • I've chosen to insert the Site Map page.

    Click the save & close button.

  • Now we have out included page life. The Site Map page has been included into a section on this page.
  • Notice, just like the other section, when you hover over the edit button the section area is highlighted.
  • Well, I don't really care to have this section here so I'm going to remove it.
  • The prompt to remove the section. I'm sure so I'm going to click the remove button. When you delete a section this way it is permanently deleted. That's not a big deal when deleting a File Include section because the actual page that was included is NOT deleted. Just the section containing it on this page. However, for image galleries and editable text sections they are completely and permanently removed--no way to get those back so make sure you really want to remove a section.
  • Our live page after we removed the file include section.

Conclusion

Working with sections in gpEasy pages isn't hard at all. It just takes a little getting used to. They allow for great flexibility when creating pages. Like this page for instance. It has several editable text sections and several image gallery sections. To create this page in pre 2.0 as it is would have been a major pain.

The only caution I have when working with sections is, MAKE SURE YOU WANT TO REMOVE A SECTION BEFORE YOU CLICK THE REMOVE BUTTON because it will be permanently deleted--not moved to the trash--with no way to retrieve the information.

Play around with sections on some test pages. Add a few plugins and add their gadgets as sections via the file include section. Rearrange sections and have a little fun getting familiar with this new feature in gpEasy.

 

gpEasy B2sq Theme by CS @True Acupuncture