The video below shows the first two steps to be carried out disassembling the current site and applying it to a new template.

While the video goes from step 1 straight into step 2. It is important to realise that if you work together to just achieve step 1 and come back in a second pass for step 2 with a little more training that would still cover the bulk of the work in this process. Do not be concerned about step 2 if it all looks too difficult. We can refine that later.

CLICK ON THE PLAY BUTTON BELOW. Time 30mins

The following guides may be useful in gaining an understanding of the system and how it works. It is not essential reading though. Everything you need to know is in the video for the first few steps. These guides are generic and produced to help those charities that I work with in editing their own sites. They are not a perfect match for what you are doing in these exercises, but they may be helpful.

This sequence covers the process

Step 1

Choose the page which you are going to edit

Open it in the editor

Click on the DIVI button

Choose use existing content from the three options presented.

This places the current content into a single container within the Divi template for that page.

You will be presented with a series of horizontal lines across the page. Blue (Section), Turquoise (Row) and Dark Grey (Column) The last of these is a container for content. It will say “Text”. Open it by clicking on the Cog or symbol icon, scroll down the page to the bottom where it says Admin Label. and add in the text “ORIGINAL CONTENT”. You are doing this so you are not confused as we go through the process. Save it, it will return you to the “WireFrame View” of the website.

Click on the blue circle with the white plus symbol to add a new section at the bottom of the page editor. Choose library and insert the upper header library element into the page. Move the block to the top of the page so it is the first element on the page.

Then insert the lower header block beneath it.

Then go to the bottom of the page and insert the footer section from the library.

Immediately below the lower header block, add in a new section (blue), then add in a single column width (turquoise), then add in a single text block. Close the text block to return to the wire frame view.

This completes the starting framework.

The next job is to cut and paste blocks from the ORIGINAL CONTENT and add them as discrete text blocks to the new section you just added. So you are breaking everything down into smaller manageable chunks. For now do not worry about picking up images with text, if there is an image with the paragraph text, do retain it so we know it is part of the content and related to it.  Highlight one or two paragraphs, choose Cut to remove it from the ORIGINAL CONTENT. Go back to the new section and paste it in. Take the first 10 or 12 words from the text and add it into the admin label. Or just paste the title for the block in the admin label.  Then click on the tick symbol to save it.

The next sequence is simply repeated for each block of text.

Go back to the ORIGINAL CONTENT block. Select and cut the next one or two paragraphs. Click on the tick symbol to close the box. Go back to the new section and underneath the last text block, click on the dark grey circle with the plus symbol in it. Select Text block and add it in. Go to the Cog or settings symbol, and open it and then paste your text into the block. Take the first line of the text (less than 12 words) and paste it into the ADMIN Label for that block. Click on the tick symbol to close it and return to the wireframe view.

Repeat this process until the last thing in the ORIGINAL CONTENT block is the next navigation link. Note where it was going to. (Usually the page name). Close the block by clicking on the tick symbol. Go to the bottom of the editors Wire Frame View and look for Next Navigation.

Replace the “Go Somewhere” with the name of the page you need to connect to. Copy that text, then click on the insert link button in the editor. Paste the name in the box and the WordPress system will try to find a match to the page name or title. If one is found click on the Apply button (it has an enter key symbol on it). If you cannot locate the page where it is supposed to go to. Do not worry about it. Just save the block, then save the page.

This completes step 1.

Summary

You have chopped up the page contents in the old site, into small blocks and placed them in order into the new format required by the template in use on this site.

You may at the discretion of the leader stop here, and move to another page and tackle a new one. Or proceed to step 2 which is another level of refinement removing the images from the old page and reinserting them into image blocks.

Step 2 (optional for now)

Within the layout you may have images accompanying text within a text box. We need to add the images in their own container. You can either do that now, or later. If you do it now, you can also start to finalise a page layout. 

Locate a text block where there are one or two images. Focus on one of them. Note what it looks like. Go back to the wire frame view and insert an image block by clicking on a black circle with a white plus symbol. 

Move the image to be adjacent to the block which it is associated with. 

Click on the settings symbol (cog) for the image block, then select the image from the library. 

When you locate it add it to the block. Look for Alt Text and if there is nothing in that space give the image a description, this will assist people with visual impairments. It also helps your site to score positively with Google in searches and indexing the site. 

If you were able to locate the image, delete the original image accompanying the text. 

If you could not locate the image, leave it with a note in the admin label for the image to indicate it needs to be added. In the latter case do not delete the image from the text block, otherwise someone cannot easily resolve the problem. 

You may find it easier if you split your screen and have two browsers open on the website. This will help in identifying the image from the library. 

If you get this far you have done very well.  You could look at organising the layout. 

Organising the layout

Skip this if you are unsure of what to do. It can be completed quickly later. However I cover these steps in the video. 

What you have built is a single wide column website. In practice you want the layout to be two columns on a wide screen. The template will automatically resolve this to a single column on small screen devices. 

Now you have placed everything in small boxes, you can change the column structure to two columns. See video on how to do that. Once it is in a two column format you can slide things around and check how they look. See if you can improve the layout. 

You may need to add in new two column rows as I have done in the video. Check on a tablet layout (single column) that everything still makes sense. 

Do not spend a long time doing this. Have a go, get it close, but do not try to refine it too much. You may break something. 

Someone will come along later in a final pass to resolve any problems and add any enhancements. 

If you hit any problems, insert a new row, add some text in coloured red with some notes in on the problems. Then someone can see where you got to. 

Any questions please contact mark@wingrove-media.com or call 07511 336046 / 01494 863136

Next: Go somewhere