How to edit the sliders

These instructions are for how to edit add or delete the slider images on the front page. You can also create new sliders for other pages extrapolating from these instructions. If you have any questions, please contact Teresa.

The background image of the current slider is set to 4096 x 1404 pixels. If you wish to use different background images in your sliders, it is important to keep them all the same size, or rather, the same aspect ratio, so the images don’t appear to jump around the page.

The same goes for the smaller foreground images on each slide. Keep them the same size (currently 490 x 225 px), but if the images don’t fit into that aspect, make sure the height is the same as the others, (225px high), so they don’t jump across the page. What I have done for smaller images (see the business one with Macka in it) is make the image height the same as the others, and in Photoshop make the canvas the same width (490px) with a transparent background (by putting the photo on a new layer) and saving as a .png file….. if all that is greek to you, please contact Teresa for further explanation!

Ok – instructions below.

Slider01

When you log in to the back end (admin) of the website, scroll down until you see “Crelly Slider” in the left menu. Click on this.

 

Slider02

There is currently only one set of sliders in use on the website (you could easily create more at this point – tip, if you want the same look and feel for them, use the Duplicate Slider button and then you can edit everything, keeping all the text and photos in the same position).

These instructions are for how to add a photo to this series of sliders for the front page, so click on the “Edit Slides” button.

 

Slider03
Then click on “Edit Slides”

 

Slider04

In order to keep the new slide consistent with the others in the series, duplicate one of the other slides by clicking on the little + (plus) sign next to the slider name.

 

Slider05

Then click on the text that you wish to add on this slide (red arrow) and you will see the details in the bottom change to the setting for that text element (pink arrow). Note that as this particular text is white on the image, you won’t see it in the box with the pink arrow!

 

Slider06

So, we will just change the colour of the text so you can read it… drag your mouse across the whole text box… and you will see the text…

 

Slider07

Then you can change the colour of the text so you can read it and change to what you would like it to say. You will notice that it changes as you type on the image.

 

Slider08

Then select the whole text again, and change the colour back to white…

 

Slider09

Do the same with the link underneath the white text – you will be able to see it in the text box this time. In order to change the link, select the text and then click on the little link icon.

 

Slider10

put the URL for your link in the box, and don’t forget to click the blue “apply” button.

 

Slider11

Click on the Apply button.

 

Slider12

To keep the text colour consistent with the other sliders, we need to change the colour. As we are using a specific colour, which is the green used throughout the website, we will be specifying it exactly through code. Click on the “Switch Editor” button.

 

Slider13

This show the code (HTML) for this text. Add the following, exactly as is, to just before the text that you just typed (after the link reference)
<span style=”color: #2bb673;”>

and then after the text, type this:

</span>

before the </a>

 

Slider14
Click on the “Switch Editor” button again, and you will see the text has changed to green.

 

Slider15

To change the image to the new image, select the old foreground image, then you will see below the “Open Gallery” button. From there you can upload your image to the Media Gallery (remember to make sure your image is the correct size and proportion and detailed above (490 x 225 px). If you accidentally change the position of the image, note the position in the screenshot above – this is where the image will be place (Left and Top values). The other values detail how quickly the sliders comes in and out of the webpage. (If things go pear-shaped, simply check one of the other slides to see what the settings should be – they will all be the same for each element (text or image) from slide to slide.

 

Slider16
When you are done, click on the “Save Settings” button at the bottom of the page.

 

Slider17

If you want to change the order of the slides in the slideshow, just drag the tabs around to your desired order.