Evening Courses Ennis Community College

1.Introduction #

This manual is made to explain how to edit your evening courses on the Ennis Community College website.

What has changed?

From a website visitor’s point of view you had to click on a Course title to be brought to a separate page to see all the details of that Course. Now all details of each course are displayed on one page. The Evening Courses page shows all current Courses in blocks with each block divided by two columns. The left column shows Course Title and description, the right column shows Course Details like start date, duration and cost as well as a button that brings the visitor to the Course Sign Up form.

From the administrator’s point of view you would, after logging in to the administration of the website, go to the Course section and add and/or edit your Evening Courses there. In the new situation all courses are shown on one page and there is no need anymore to use the Course section in the administration area. You can edit all courses directly on the Evening Courses page.

2.WPBakery Page Builder #

Since some time the Ennis Community College website has a page builder installed, called WPBakery Page Builder. A page builder makes it easier to edit the website’s content. Pagebuilders in WordPress are replacing the standard WordPress editor with a more graphical interface. Every website is built with a structure similar to a spreadsheet. Content in a web page is divided in rows and columns. A Pagebuilder uses this way to lay out content.

Figure 1

In Figure 1 shows how these rows and columns work on the Evening Courses page. The green outline shows rows and the orange outline shows columns. Inside each column you’ll find bits of content like headers, ordinary text, a button and more. These bits of content are called modules.

The page starts with a row (Figure 1 point 1) that contains the header with the text ‘Spring 2018’ as well as the zigzag line below it. Than you get a row (Figure 1 point 2) that contains all information about the first course in the list. In the left column of that row is the Course Title and below it the Course Description. In the right column you’ll find Course Details and the button that brings people to the sign up form. Below row 2 you’ll find similar rows for all the other courses.

Before we go on to editing the courses there is one last thing to keep in mind when using a WordPress pagebuilder. Whenever you edit a bit of text or a header, a popup window will open enabling you to edit the text and make other changes to font size etc. You need to save each change and when you have edited all courses you also need to save the whole web page. So Save and Save again.

3.Editing Courses #

3.1.Opening the Evening Courses Page #

So, as said before, you no longer will go to the Courses section in the WordPress administration area to edit the courses. From now on everything is done inside one page, so you need to go to the Page section.

Figure 2

  1. After login in to the administration area click on Pages in the left menu
  2. Find the page called Evening Courses and click on the title link or Edit


3.2.Deleting a course #

Figure 3

  1. To delete a whole course simply click on the X icon in the top right of the row (Figure 3)
  2. The page will show a confirmation message asking if you want to proceed
  3. Finally click the blue Update button on the right of the page to update the page.

3.3.Disabling a course #

Instead of deleting a course it is probably better to temporary disable the course from displaying on the website. By disabling a course row the information is still there to be used later, but it won’t show on the website.

Figure 4

  1. Click on the pencil icon to edit the row settings (Figure 4 Point 1)
  2. A window will popup with the settings for that row. Scroll down till you see the option Disable Row (Figure 4 Point 2). Tick this box.
  3. Save the changes you just made to the row (Figure 4 Point 3)
  4. Click Update button to save the Courses Page (Figure 4 Point 4)

Remember? Save and save Again.

3.4.Copying a course #

Figure 5

You can also copy a whole course to use it as a template for a new course.

  1. Click on the Copy icon in the top right of the Course row (Figure 5 Point 1)
  2. The Copy will appear below the row you just copied. (Figure 5 Point 2)

3.5.Re-ordering courses #

You can change the order in which courses appear by dragging each course row (see video above). Just click and hold the icon at the top left of the row and drag the row into its new position. You will notice a grey area indicating where you can drop the row.

Don’t forget to update the page after you’re done.

3.6.Changing Course Content #

To change the Course contents you will first have to understand which areas you will be editing and which module to leave alone.

Figure 6

Figure 6 above shows the page header that displays the Season and year the Courses are in (Point 1) Once or twice a year you might want to edit this header when the new courses for Fall are up. So you never should create a whole new page for new courses, but use this page instead and just change the page header.

Points 2 – 4 are areas of each course you will be editing. The Sign Up Now button can be left as it is. For each course it will link to the sign up form and doesn’t need to be changed.

Point 2: this is the Course Title
Point 3: The Course description
Point 4: The course details

Editing Course content modules

You will by now have noticed that whenever you hover the mouse cursor over a content block or module a green set of icons will appear 

Clicking on the pencil icon will open a settings window for the particular module. In figures 7 and 8 you see the windows that will open for the Headers and Text modules and you will see where to change the text.

Figure 7

NOTE: There is no need to type the header in Capitals. This will be automatically changed on the website anyway. So you can type the header either in capital or lower case.

Figure 8

After you made your changes to the text close the window by clicking on Save Changes button. To cancel and not save your changes click the Close button or close the window by clicking on the X icon in the top right of the window. When you finished editing the courses don’t forget to also update/save the whole page by clicking on the blue Update button. Safe and Safe Again!

TIP: In the Course Details text block (right column) you will see that I placed a small header like Start Date and directly on the next line under it I have the info. In WordPress when you hit your Enter key you will create a new paragraph resulting in white space between the two lines. To start directly under the last line you have to press SHIFT+ENTER on your keyboard.

4.Front End Editing #

I have explained how to edit your courses in the administration area of the Ennis Community College website. It is also possible to directly edit content on the front end of the website. This might be more intuitive because you can immediately see how everything looks like.

All the functions as explained above are the same on the front of the website. To use front-end editing:

  • First always login to the administration area.
  • Once you go to Pages and find the page Evening Courses you will notice an option under the page title saying Edit with WPBakery Page Builder (Figure 2) Clicking on this link will open the page in edit mode but will show the page exactly as it appears on the website.
  • Another way to enable front-end editing is once you are in the back-end editor (Figure 1) by clicking on the button called Frontend Editor at the top of the page editor just under the page title.

Figure 9

In the frontend editor everything works the same more or less. A few points:

  1. Clicking this button will discard changes and bring you back to the backend administration area
  2. Hovering over a content block/module will enable you to edit the text by clicking on the pencil icon
  3. To disable a row you first need to click on the icon with a small triangle to open up row settings
  4. When you are finished editing the courses save the page by clicking on the Update button. Safe and Safe again


Suggest Edit