EXERCISE 1 This is a warm day
This is a heading 1
This is a heading 2
This is a heading 3
This is paragraph text. When you enter information directly from the keyboard into a section it will look like this.
Ex 1: About Text
Text and Heading Entry
Text is added in exactly the same way you would write a document in say Microsoft Word. WordPress has a set of editing icons and a style sheet built into it to make editing very intuitive.
The style sheet also contains predefined styles for headings. You use this to apply the style Heading n where n is a value between 1 and 6 to some selected text. People browse websites they do not read them, so it is important to use Headings more frequently than you would in a written document. By default when you press the enter key the next block of text will automatically revert to “paragraph” text. Headings are very important for SEO (Search Engine Optimisation). The text you place in a heading carries weight with Google, Bing and other search engines. This is how things can be found on websites.
If you have a sequence of short lines of text and do not wish to start a new paragraph for each (the default behaviour) press the shift key before you press the enter key at the end of the line. This method can be used to prevent lots of gaps appearing between lines when they are not needed.
EXERCISE 2 Adding Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fames ac turpis egestas integer eget. Morbi tristique senectus et netus et malesuada. Vel eros donec ac odio tempor. Urna et pharetra pharetra massa massa ultricies. Aenean vel elit scelerisque mauris. Nunc aliquet bibendum enim facilisis gravida neque. Pulvinar sapien et ligula ullamcorper malesuada proin. Eget mauris pharetra et ultrices. Malesuada fames ac turpis egestas integer eget.
Hac habitasse platea dictumst quisque. Sed velit dignissim sodales ut eu sem. Lorem sed risus ultricies tristique nulla. Pulvinar etiam non quam lacus suspendisse. Mattis enim ut tellus elementum sagittis vitae et. Bibendum est ultricies integer quis auctor elit sed. Mi ipsum faucibus vitae aliquet nec ullamcorper. Facilisi nullam vehicula ipsum a arcu. Eget sit amet tellus cras adipiscing enim eu. Sit amet aliquam id diam maecenas ultricies mi. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Massa massa ultricies mi quis.
Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Volutpat diam ut venenatis tellus in metus vulputate. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Sodales ut etiam sit amet nisl purus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Ullamcorper sit amet risus nullam eget. Ac turpis egestas maecenas pharetra convallis. Tristique senectus et netus et malesuada. Egestas quis ipsum suspendisse ultrices. Convallis aenean et tortor at risus viverra adipiscing at. Sit amet risus nullam eget felis eget nunc lobortis. Commodo nulla facilisi nullam vehicula ipsum. Id eu nisl nunc mi.
Ex 1: About Images
Handling Images
Images can be added as a discrete block in a column, or occupy a complete row in a website. The recommended way of adding images is to create a space, insert an image block, open it for editing and then assign the image. Remember to add some text into the admin label for the block, and also to add some Alt Text to the appropriate field to help those that have vision disabilities. You will find Alt Text in the Advanced tab for the image block.
You can also assign links to images if they are handled in this way. This would make an icon image active, for example a fundraising icon could go to your favoured fundraising partner page.
Using Images within a text block
You can add an image into an existing Text Block, however the behaviour for small screen sizes may not be predictable. To add an image to a text block, click on the Add Media button to assign an image.
Very Important
When adding images to a website, ALWAYS scale them down in size first. Do not take things straight off of an iphone or camera and upload them because they will be too big. The largest image width you can place on this site is 1100 pixels wide. Anything wider will be scaled down by the website. It will not look any different, but for mobile users you may be serving them a 4MB file where a 100kB would have worked even better. They would be paying less to view it because mobile users pay per MB for data.
You can scale things in WordPress, but it is better to prepare an image before you upload it to the website. As a guide all images should be between 50kB and 150kB with only a very few exceptions.
EXERCISE 3.1 Adding Internal Links
Links need to convey some information within the name of the link about what they do. Avoid “Click Here” which says nothing about what will happen. A good example you will find on most web pages is:
Please contact us to find out more information.
Edit the text and provide a link to the contact us page.
Ex 3.1: Adding Internal Links
Adding Internal Links
WordPress knows about all of the addressable items in this website. It is very easy to add a link from a page to another page or post. WordPress will help you to locate what you are looking for. In the search box when you add the link in enter some text from the page or post name and then press enter. A list will appear. Locate the destination in that list and click on the Enter symbol (blue square with a white arrow) to commit the link to the text.
Save the column, and save the page or post, then check it works.
EXERCISE 3.2 Adding External Links
Links need to convey some information within the name of the link about what they do. Avoid “Click Here” which says nothing about what will happen. In this case we are going to leave the website and go to another destination website. Under these circumstances you need to know the destination URL. Go there first, locate it, copy it and return to insert the link under the text. In this example we are going to use http://bbc.co.uk
My favourite website is bbc.co.uk, I recommend you take a look.
Ex 3.2: Adding External Links
Adding external Links
If you are sending someone to another website, before you add the link in, test it and make sure. Remember you do not control external websites, and as such from time to time these will break of the owner changes their website. So do check it occasionally.
The most important thing about using external links is ALWAYS open them in a new window or tab. Then the user can get back to your website. If you fail to do that, they cannot get back unless they remember to use the back button in the browser.
Save the column, and save the page or post, then check it works.
Also note that links can contain two key pieces of information and they are not necessarily the same, one is the destination website or document, the other is the text the user sees. Scammers often use this to fool people.
EXERCISE 3.3 Adding a Downloadable Document
Links need to convey some information within the name of the link about what they do. Avoid “Click Here” which says nothing about what will happen. In this case we are going to add a document or a pdf file to the link.
You can view that very important document here.
For all PDF documents open then in a new browser window. PDF documents use a PDF reader which is an application which runs in your browser. If you do not open a new window, the application (PDF reader) will overwrite your website and your user will not be able to get back.
3.3.1 Adding a link to a button
You can add links to buttons, for example a button that jumps to the top of the page, or to a different page. Or a button that opens a downloadable document. You have formatted button in the library that follow HSUK colours. The following exercise shows you how to download a button and assign a link to it. I have done the first one which will jump to the top of the page.
Attach the link to a document in the document library to the button on the right, and rename the button, and rename the admin box.
Ex 3.3: Adding External Documents
Adding Downloadable Documents
Here you need to attach a document to a link (or button) in a website. If that document is a PDF document, it also needs to be opened in a new browser window. To add a document try the following process (there are several ways of doing this).
- Create the link text in the section and copy it.
- With the text still highlighted, click on ADD MEDIA this will go to media library
- Either upload your document, or add an existing document from the library and return to the editing area
- You will note that the link text you added has been overwritten by the document title and it has changed into a link.
- Open the link using the editor, and click on the cog to open the form for adding links. Find the link text and paste the original text for your link into the form Accept the form which will update the link.
- Save the section in Divi and then save the page.
EXERCISE 3.4 Making an image active
Making an image active
In the panel to the left there is an image or icon for an external website. We can add a link to that icon so that anyone clicking on it will go to the site. We are going to use the URL: https://www.thegivingmachine.co.uk/causes/long-crendon-community-library/ to do this which is your account. Copy the highlighted text and then edit the page and locate the “Giving Machine” logo in the webpage and assign the URL to it. In this case clicking on the link will cause the user to leave your website and therefore the page needs to be opened up in a new window.
Ex 3.4: Making an image active
About making an image active
One of the issues with making images or icons active is you need to provide some feedback to the user that this image does something. You can either do nothing, (ok if you have told someone to click on something), or for more advanced users you can use the Design Tab for the image element to set up an overlay and an icon. I recommend setting the icon colour to white, setting the overlay colour to a 30% transparent grey overlay. Choose the magnifying glass for the icon, or you can use an arrow (suggests going somewhere). You will see that the overlay and icon appears over the image when you place your cursor near it.
Second method: Enlarge it when the cursor is near.
A neater way to do this is to use the Visual Builder to edit the page. Identify the settings menu icon for the image element and click on it after the visual builder has loaded. You can see three tabs. These are the same as the ones you have seen in the editor, but in Visual View mode, they may have more parameters available. Choose DESIGN. Locate Transform on the list. Next to where it says Transform in Grey on your screen carefully move your cursor until you see an arrow. Click on the arrow. Click on Hover and then set the % link section to 110% This will make the box larger when you put your cursor nearer. It provides some feedback to the user that the image does something.
EXERCISE 4.0 Assigning a Featured Image
Your site at the moment is pulling any image from a post body and making it a featured image. That is not ideal, but does ensure if you forget the news layout will still have images associated with them as well as text summaries. The last step is to assign an image to this post. To do that you need to open the page in the editor, look on the far right of your screen (or underneath your text area if you have single column display on your computer), then assign a Featured Image. This will take you to the media library where you upload or choose an existing image.
Note that featured images work best in landscape orientation. If you can create them at approx 800px x 533px then nothing of any significance will be cropped in the news layout. Even if it is, once a user clicks on the image to open the news item they will see the whole thing.
