1. Home
  2. WordPress Tutorials
  3. Creating your first ‘slider’ using Soliloquy

Creating your first ‘slider’ using Soliloquy

This tutorial is designed to help you to create and insert your own ‘slider’ into your website.

A slider is where you do not just have one static image, but where the image is replaced by another image repeatedly in an ongoing cycle, always returning to the first image.
The use of a ‘slider’ can help to bring an inanimate webpage to life.

We recommend that you use no more than 5 images in one slider, because using more than this can slow your website down.


 
 

Make your own slider in 10 easy steps.

1. Click on ‘Soliloquy’
2. ‘Add New’
3. Name your slider
4. Configure settings – size of slider, speed of transition, navigation arrows etc.
5. Upload your chosen images
6. Insert Images, text or videos
7. Make sure your images are in the order that you want
8. Insert your slider into the webpage
9. Update!
10. View and check your page

 
 
 

1. Click on ‘Soliloquy’

To create your slider you will be using a WordPress plugin called Soliloquy.
Slder-tutorial-1b
– scroll down the menu on the left side of the WordPress Dashboard page.

– click on ‘Soliloquy
 
 
 

.2. Make a new Soliloquy slider

– with the arrow hovering over ‘Soliloquy‘ a drop-down menu will appear.
– choose ‘Add New’
 

Slider-tutorial-3
 

3. Name your slider

–  Give the slider a title in the section ‘Enter title here’

Slider-tutorial-9i
 
 
 

4. Establish the size of your slider, and the way in which the images change.

Screen Shot 2016-04-28 at 15.10.09
– under ‘Soliloquy Settings‘ – choose “Config.’
 
There are various options on this page including

(i) Slider Dimensions
– it is important that all the images are, or are cropped to be the same size.
– enter the size of your images here. For example 960 x 300 px. This will be the size of your slider.
– we recommend that you make both the images and your slider the same width as the page.

(ii) Slider Transition – fade in or other options

(iii) Slider Transition Duration – the amount of time between each transition – i.e. the amount of time that each image is on the screen.

(iv) Slider Transition Speed – the speed at which the images change from one to the next.

(v) Show Slider Arrows? – untick to remove the arrows that appear on each side of the image when you view the slider on your webpage.

(vi) Show Slider Control Nav.? – untick to remove the navigation dots visible at the bottom of your slider when you view your webpage.

5. Upload your chosen images

It is important that your image is cropped to the same size as your slider’s size.

– under ‘Soliloquy Settings‘ click on ‘Images

– either click on ‘Select Images‘ which will enable you select the file of the image.

– or you can click on the image either on your desktop or in your finder window and drag and drop it in the box ( shown below ).

Screen Shot 2016-04-28 at 15.15.49

6(i). You can insert images, text or videos from various sources

– click in the blue bow which says ‘Click Here to Insert Slides from Other Sources‘.

Screen Shot 2016-04-28 at 15.17.54

The ‘Insert Slides into Slider‘ page comes up with the options…

Screen Shot 2016-04-28 at 15.20.14
(i) ‘Image Slides‘ – use this to upload images which are on you computer or in ‘Dropbox’.
(ii) ‘Video Slides‘ – will insert video.
(iii) ‘HTML slides‘ – this option allows you to insert HTML instead of images or video.
(iv) ‘Load More Images from Library‘ – to use images which are already in your WordPress media library.
 
 
 

6(ii). Select the chosen images and upload into your Soliloquy slider

– click on the option that you want.

– when you have selected your slides – click on the blue box ‘Insert Slides into Slider‘ which you will find in the bottom left of your page.

Screen Shot 2016-04-28 at 15.21.50

7. Make sure that your images are in order

Screen Shot 2016-04-28 at 15.25.16

You should now be back on the ‘Edit Soliloquy Slider‘ page.

(i)  To change the order of the images
–  click on the image that you want to move,  then drag it to where you want it to be.

(ii) To remove an image
–  click on the small red circle with an x in it in the top left corner of the image.

– click onPublish‘ – in the blue box on the right side of the screen

Screen Shot 2016-04-28 at 15.28.09

8. Inserting your slider into a webpage.

Screen Shot 2016-04-28 at 15.30.40

Go to where you want your slider to go.

– Go to ‘Pages‘ option in left hand menu
– Choose ‘All Pages

–  Click on the name of the page that you are planning to insert the slider into.

9. Choose where you want your slider to go on the page

.

On the page into which you want to insert a slider

–  with the cursor positioned where you would like the slider to go

–  click on ‘Add Slider

Slider-tutorial-10ii

10. Choose the Soliloquy slider that you want to insert into this page

–  choose your slider  –  click on the grey box containing it’s name

–  now click on ‘Insert Slider‘ in the blue box on lower right side of the screen

Slider-tutorial-13

11. Update!

This step is very IMPORTANT.- click on ‘Update‘ in the blue box in the right of the screen.

Screen Shot 2016-04-28 at 15.39.13

12. View and check your page

It is also very important to view the page as it will be seen on the website.
Slider-tutorial-15
– Go to the thin black menu which is across the top of the page.

– select ‘View Page

Once you have made a slider – you can easily change the images and the order in which they are seen.

Just go back to ‘Soliloquy‘  
– click on it.
– Choose the name of the slider you want to alter.

Then you can either simply upload new images, or delete or alter the order of the ones you have already chosen.
You can also easily change the position of the slider or the page that it’s on.

Updated on May 4, 2016

Was this article helpful?

Related Articles