Photo slideshows can be placed on your home page, in a post or page’s content, or in any widget area.
The Soliloquy Slider plugin is activated by default. The link to the Soliloquy administrations screens is near the bottom of the administration menu on the left. Go to Soliloquy → Add New to create a new slideshow.
The first thing you want to do is give your slider a title, such as “Creating Your First Slider“. Once you have set your title, let’s start uploading some images! Select the Click Here to Insert Slides from Other Sources button to get started. A lightbox display will open that will allow you to insert images from your Media Library. If you need to add images to your Media Library first, click the Select Images button or drag and drop your images into the image upload box.
Once your images are uploaded, you can click on the Insert Slides into Slider button. Now, you screen should look similar to the screenshot below.
From this screen, hover over the images. You will notice that you can drag and drop them in order. Simply click and drag an image to a different location to sort your slides. The slide order will automatically be updated for you.
If you click on the blue Info icon a lightbox will open, allowing you to edit each individual slide’s metadata. Available options in this screen include:
- Title
- Alt Text
- Hyperlink
- Open Link in New Tab?
- Caption (accepts HTML content)
- Load in Lightbox?
- Schedule Slide?
- Start Date
- End Date
- Thumbnail
You can include an alternative thumbnail image by adding it’s URL to the Thumbnail input field, or by pressing the Choose Thumbnail Image button to select an image from your media library.
Image captions can accept any type of HTML, including (but not limited to) iframe
, h1
and form
tags. This gives you the ultimate ability to transform your sliders into anything imaginable.
Adjusting Slider Settings
Click the Config tab to review the slider’s settings. Here you can adjust the speed, position, and transition style.
Publishing and Using the Slider
Click on the Publish button to make your slider active, and then visit a post or page edit screen OR the widgets screen.
In a widget
Drag the Soliloquy widget into the sidebar (widget area) you wish to use. The Featured Content sidebar is intended for slideshows; anything you place here will appear full-width above your content and primary/secondary sidebars.
Choose the appropriate slideshow name from the widget’s dropdown and press the Save button. Visit your site, and you should see your new slideshow front and center.
In a post or page
At the top of the editor, you will find a button that says “Add Slider”. Click on that button to bring up a lightbox where you can select to insert a slider into your post or page. Once you have chosen the one you created (“Creating Your First Slider” if you have followed this tutorial all the way through), click on the button to insert the slider. Save your post or page and check out your updated site!
Advanced: Customize Your Slider with CSS
Soliloquy allows you to customize your slider with CSS. You will notice in the screenshot below, a container where you can input your CSS. It is important to note that the beginning of your CSS coding must begin with the unique slider ID number automatically generated when you created the slider. In the case below, my custom CSS should begin with #soliloquy-container-46 {"Your custom CSS here";}
. Go ahead and add any custom CSS you desire!