Education Matters Homepage

1.Introduction #

This manual is made to explain how to edit your homepage links to articles on the Education Matters website.

Previously you would create a new article in the WordPress Post section and it would automatically display on the front page once the right category was chosen. Now, with the new design this isn’t the case anymore. You will need to create a link to the new article on the homepage manually.

You can also delete old home page links to articles or change the order in which the links display on the home page. All you need for this is to:

  • Know what the new articles title is
  • Know what the link address or URL of the new article is. Just go to your new article on the website and copy the URL from your browser’s address bar.

address bar in your browser


2.Divi Page Builder #

The education Matters website is build with the use of Divi Page Builder. A page builder makes it easier to edit the website’s content. Page builders in WordPress are replacing the standard WordPress editor with a more graphical interface. A website is always designed with a structure similar to a spreadsheet. Content in a web page is divided in rows and columns. A Page builder uses this way to lay out content.

Figure 1

To edit the homepage, Go to Pages and click on the title link Home — Front Page

Figure 1 shows the Divi Page Builder as used for the homepage. The green outline (1) shows rows and the orange outline (2) shows columns. Inside each column you’ll find bits of content. These bits of content are called modules (3). They can be buttons, ordinary text, images etc etc. The module I used for the homepage is called a Blurb. A Blurb consists of an optional photo at the top, a title link and a short description, but the description is not used.

The rows and modules coloured in red are not meant to be edited by you, so I have locked them and that’s why they show up in red.

Row 1 (Figure 1 – 1)
This is the section with links to the latest general blog articles.
Row 4 (Figure 1 – 4)
This is the section with links to the 30 years of EM section
Row 5 (Figure 1 – 5)
This is the section with links to paid for content

In Figure 2 below you can see how these modules relate to the front end of the website. Only the top section with blog articles is shown.

Figure 2

2.1.Editing Blurbs Introduction #

I will concentrate on the blog section (Figure 2), because editing a blurb module is the same in the other 2 sections. As said before a blurb is a link to an article on the website. A blurb can have a photo, as show in the top row and in the other sections (30 years and paid for content) (Figure 1-4 & 5) or just a simple text link. To make it easier I refer to these links to articles as blurbs.

You will have to decide how many of these blurbs appear on the front page. In my opinion the way it is now is enough and so I will concentrate on editing existing blurbs, but in case you do want to add new blurbs I’ll explain that in paragraph ????

You can decide in which order the blurbs appear and to which article they link. They don’t necessarily have to appear in chronological order.

2.2.Blurb without photo #

To edit and change a existing blurb you need to click on the hamburger menu icon of the blurb 

After clicking on this icon a new window will open (Figure 3). In this window you change the settings and content of the blurb.

Figure 3

Figure 3 – 1 This is the title of your new article. Just select it and type or copy the new title.
Figure 3 – 2 This is where you enter the URL of the new article. See in Introduction how to copy this URL (Note that the URL field is not shown in Figure 3, you will need to scroll down in the blurb module settings window.
Figure 3 – 3 After changing the title and URL of the blurb click Save & Exit button
Figure 3 – 4 To discard and cancel any changes click the X icon at the top to close the window.

IMPORTANT: Clicking Save & Exit after changing the settings for a blurb does not mean that the homepage is saved. You still need to click the blue Update button on the right, just as you normally do to save an article.

2.3.Blurb with photo #

To edit one of the blurbs at the top of the homepage where there’s also a photo shown is exactly the same as explained in paragraph 2.2 except for the fact that you will need to add a photo to the blurb as well as a title and a link to the article.

  • Click on the hamburger icon  of the blurb with the name Blurb + Photo.
  • Change Title and URL as explained in paragraph 2.2
  • Scroll down again in the blurb module settings window till you see a field for adding a photo (Figure 4)

Figure 4

  • Click on the button UPLOAD AN IMAGE (Figure 4 – 2)
  • A new window will popup that should be familiar to you. It is the standard WordPress window to upload an image to the website or select an image that was already on the web server.
  • Upload and/or Select your image and under Attachment display settings select to link to Custom URL (this is so that the photo also links to the article) and set size to Full Size (Figure 5 – 1)

Figure 5

  • Click Set As Image button (Figure 5 – 2)
  • Finally click Save & Exit button (Figure 4) to close the blurb module settings window.

Don’t forget to also update the home page.

IMPORTANT: In order to have the 3 top blurbs align properly you will need to use a photo with a ratio of 6:4. This is a standard landscape photo ratio. Resizing photos to 600px  x 400px will be best. So you will need to edit some photos before you can use them on the website, but most standard landscape photos will work.


2.4.Copy a blurb #

You can make a copy of an existing blurb by clicking on the Copy Icon 

The copy will be shown directly under the old blurb.

2.5.Move Blurbs around #

You can also move blurbs (and any other module or row) around. You can so change the order of the blurbs or even place them in other columns. You do so by moving your mouse cursor over the module until it changes into 4 arrows. Hold the left mouse button and drag the module into its new place. Have a look at the video below.

2.6.Delete a Blurb #

To delete a blurb click on the Delete icon of the blurb 

Be aware that there is no confirmation dialog, so gone is gone. BUT there is an option to undo your changes. At the top of the page builder there are these icons

First one is to undo something you did, second to re-do something and the last one shows all you actions so you can go back to a certain time before you last saved the whole front page.

3.Front End Editing #

I have explained how to edit your blurbs in the administration area of the 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. I never use this option because editing in the front will show the page a bit different. There are some areas that get extra spaces. This is not shown however once ou saved the page.

Below is a video showing how things are working on the from end. I put no commentary in the video but I think you will get the idea of what is possible.

To start editing the homepage on the front you will need to be logged in to the website. Go to Pages > and click on Homepage — Front Page. Click on the big blue button


4.Article of the Week #


Linking to a page inside a pdf document

This is also explained in the above video. You can directly link to a page inside a pdf document. This is the real page number in the pdf and not the page number that is in the printed version of the Yearbook.

The article from Prof Deeks starts on page 11 in the Higher Education pdf. The link to the pdf document you used was To link to the exact page where Professor Deeks’ article starts you append #page=11 at the end of the URL, like this

Suggest Edit