Creating Your First Slider
Once you’ve successfully installed and activated the Soliloquy plugin, you’re ready to create your first slider! Here we will go through a general rundown of all of the available things you can do with your slider when creating it.
Create a New Slider
To get started, navigate to the Soliloquy screen in the WordPress admin and select the Add New button.
From the slider edit screen, the first thing to do is give your slider a Titleto easily identify it later on.
Now that your slider has a Title, it’s time to add some images. You can choose to upload images from your computer, or select images you’ve already uploaded to your WordPress site.
When uploading new images to your slider they’ll immediately appear in the Slider tab when they finish uploading.
Let’s walk-through selecting images that have already been uploaded to your WordPress site. All images uploaded to Soliloquy are also stored in the Media Library just like any other images you upload to posts or pages on your site.
To begin, select the Select Images from Other Sources button to begin; this will open the Insert Media lightbox where you locate all images already uploaded to your site. Select one or several images you want to add to your slider:
Great, now that you’ve selected an image or several, select the Insert into Slider button to add those images to your slider.
You’ll immediately see the images you selected appear in the Slider tab:
Next, let’s edit the metadata for those image slides. Select the pencil icon at the top of a slide’s thumbnail image:
This will open the Edit Metadata lightbox where you can edit a slide’sTitle, Alt, Caption, CSS Class, and URL.
- Title – Title for the individual slide.
- Alt – Describes the image for search engines and screen readers. Important for SEO and accessibility.
- Caption – Displayed over the slide image. Field accepts any valid HTML.
- CSS Class – Advanced, use to add custom classes to individual slides.
- URL – Enter a hyperlink to link this slide to another page.
- Open URL in New Window? – Enable to open the specified URL in a new window.
Save the changes to your slide before proceeding:
Finally, Publish your new slider! Once published, your slider’s edit screen will show the shortcode and template tag options you can use to display your slider across your site:
You’ll also be able to add your slider using the Soliloquy button from the post and page edit screens. When creating or editing a post/page, select the Soliloquy button to begin selecting a slider.
The Choose Your Slider lightbox will appear where you can select any published slider. Once you’ve selected the slider you want to add, select the Insert button:
The shortcode for the slider you selected will be automatically added to the content editor for you!
Configuring Your Slider
Once you’ve added slides to your slider, you’re ready to configure its appearance and functionality!
When editing your slider, you can change the basic appearance and functionality of your slider from the Config tab:
Within the Config tab you’ll find the following options available to configure your new slider:
- Slider Theme – Sets the theme for the slider display. Available Options: Base, Classic, more with the Themes Addon
- Image Size – Define the maximum image size for the slider.
- Slider Transition – Sets the type of transition for the slider. Note: The Ticker transition is designed for image slides only, and does not provide interactive functionality (thumbnails, navigation arrows, etc). It’s designed as a basic, continuous scrolling slideshow. Available Options: Fade, Scroll Horizontal, Scroll Vertical, Ticker (Continuous) Scroll Horizontal
- Slider Transition Duration – Sets the amount of time between each slide transition (in milliseconds).
- Slider Transition Speed – Sets the transition speed when moving from one slide to the next (in milliseconds).
- Slider Position – Sets the position of the slider on the page. Available Options:Center, Left, Right, None
- Slider Gutter – Sets the gutter between the slider and your content based on slider position (in pixels).
- Caption Position – The position of the caption for each slide, if specified.Available Options: Top, Bottom, Left, Right
- Caption Transition Delay – The number of milliseconds to delay displaying the caption after the slide has appeared (in milliseconds). Set to zero for caption to display immediately.
- Autostart Slider? – If disabled, visitors will need to manually progress through the slider.
- Show Slider Arrows? – Enables or disables slider navigation arrows.
- Show Slider Control Nav? – Enables or disables slider control (typically circles) navigation.
- Show Pause/Play Controls? – Enables or disables slider play/pause elements.
- Pause on Hover? – Pauses the slider (if set to autostart) when a visitor hovers over the slider.
- Pause on Navigation? – To resume autoplay after arrows/control nav are used, disable this option.
- Enable Mousewheel Navigation? – Enables or disables mousewheel navigation in the slider.
- Loop Slider? – Enables or disables slider looping.
- Randomize Slider? – Randomizes slides in the slider.
- Enable Keyboard Navigation? – Enables or disables keyboard navigation for the slider.
- Use CSS Transitions? – Enables hardware accelerated transitions via CSS.
- Use Adaptive Height? – Allows the slider to adapt smoothly to slides with different sizes.
- Set Dimensions on Images? – Enables or disables the width and height attributes on the img element. Only needs to be enabled if you need to meet Google Pagespeeds requirements, or if you’re using Photon CDN and having issues with slider images displaying.
- Crop Images in Slider? – Enables or disables image cropping based on slider dimensions (recommended).
- Slider Delay – If autostarting, this sets a delay before the slider should begin transitioning (in milliseconds).
- Start On Slide – The starting slide number (index based, starts at 0).
- Autoplay Video? – Enables or disables autoplay on videos.
- ARIA Live Value – Accessibility: Defines the priority with which screen readers should treat updates to this slider. Available Options: Off, Polite, Assertive
When editing your slider, you can change the mobile-specific configuration options for your slider from the Mobile tab:
Within the Mobile tab you’ll find the following options available to configure your new slider:
- Create Mobile Slider Images? – Enables or disables creating specific images for mobile devices. If enabled you’ll be able to specify the height and width dimensions to use for mobile.
- Show Captions on Mobile? – Enables or disables captions to be displayed on mobile.
When editing your slider, you’ll find several additional options for your slider in the Misc tab:
Within the Misc tab you’ll find the following options available to configure your new slider:
- Slider Title – Internal slider title for identification in the admin.
- Slider Slug – Unique internal slider slug for identification and advanced slider queries.
- Custom Slider Classes – Adds custom CSS classes to this slider. Enter one class per line.
- Import/Export Slider – Import and export options for your slider.
- Enable RTL Support? – Enables or disables RTL support in Soliloquy for right-to-left languages.
Congratulations – you have just created your first slider with Soliloquy!