Internet Marketing Agency | WordPress Websites & Online Marketing

Creating Your First Slider

Follow

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.

Select the Add New button from the Soliloquy screen to begin creating your first slider.

From the slider edit screen, the first thing to do is give your slider a Titleto easily identify it later on.

Give your slider a meaningful title so you can easily identify it later.

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.

Add images to your slider by uploading from your computer or selecting images that 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:

You can select images that you've already uploaded to your site to add as image slides in Soliloquy.

Great, now that you’ve selected an image or several, select the Insert into Slider button to add those images to your slider.

Select the Insert into Slider button to add the images you've selected as image slides.

You’ll immediately see the images you selected appear in the Slider tab:

You'll see the slides you've added to your slider in the Slider tab of the slider edit screen.

Next, let’s edit the metadata for those image slides. Select the pencil icon at the top of a slide’s thumbnail image:

You can edit a slide's metadata by selecting the pencil icon on the thumbnail image.

This will open the Edit Metadata lightbox where you can edit a slide’sTitle, Alt, Caption, CSS Class, and URL.

You can edit the metadata for your individual slides to control the TItle, Caption, Alt text and more.

  • 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 ClassAdvanced, 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:

Save your Soliloquy slide's metadata 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:

After you've published your slider for the first time all embed options will appear below the Publish metabox.

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.

Select the Soliloquy button from the post or page edit screen to select your 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:

Select the slider you want to add to your post or page, then select the Insert button.

The shortcode for the slider you selected will be automatically added to the content editor for you!

You'll see the slider shortcode automatically added to the post editor.

 


Configuring Your Slider

Once you’ve added slides to your slider, you’re ready to configure its appearance and functionality!

 


Config Tab

When editing your slider, you can change the basic appearance and functionality of your slider from the Config tab:

The Config tab contains most of the options to control your slider's basic appearance and functionality.

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

 


Mobile Tab

When editing your slider, you can change the mobile-specific configuration options for your slider from the Mobile tab:

You can control some mobile settings for your slider in 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.

 


Misc Tab

When editing your slider, you’ll find several additional options for your slider in the Misc tab:

The Misc tab when editing your slider provides various miscellaneous options that don't belong anywhere else.

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 SlugUnique 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!

Have more questions? Submit a request