The Slider

Topics:

Introduction

This tutorial covers the options available in the Spotlight Settings > Slider options panel.

For a general overview of the Spotlight area, and to learn more about the various slider configurations read the Spotlight Block Overview.

To learn how to adjust the size of the slider and how to reposition it within the Spotlight block, refer to the ‘Adjusting Slider Height and Width’ and ‘Repositioning the Slider’ sections of the Height and Width Dragging tutorial.

The WordPress Slider options panel is accessed through the Spotlight Settings options area (click the  button to access):

It contains 5 dedicated options panels, summarized as follows:

  • Layout. Set your slider to full or fixed height, full or fixed width, enable a full screen slider, set the spacing inside the slider (padding), and enable or disable auto-resizing of images to fit the slider. 
  • Background. Set slider background color, upload an image to use as the slider background, and control image tiling behaviors. 
  • Text & Links. Set default slider text, text link, and link hover colors.
  • Border. Enable or disable a slider border, set slider border size and color.
  • Slide Transitions. Choose a transition method for your slideshows (set time between slide changes and speed of transition) 

Layout

Click the Spotlight Settings > Slider > Layout bar to display the Slider Layout Settings:

To adjust the layout of the slider:

1. In the Full or Fixed Height field, select the:

  • Full radio-button if you want your slider height to span the height of the spotlight block.
  • Fixed radio-button if you want your slider height to be manually set.

2. In the Full or Fixed Width field, select the:

  • Full radio-button if you want your slider width to span the width of the spotlight block.
  • Fixed radio-button if you want your slider width to be manually set.

Note:  If the slider is set to fixed height and/or width, you can adjust the size of the slider and position it within the Spotlight area manually using simple click and drag. To learn how to do this, refer to the ‘Adjusting slider height and width’ and ‘Repositioning the Slider’ sections of the Height and Width Dragging tutorial.

3. In the Full Screen Slider field select the Enable radio-button if you want your slider to expand to the full width of the screen.

Note: The Full screen slider option area remains greyed out (inactive) until the Wrapper is set to full width. Refer to the Site Width & Wrapper Layout tutorial for more information.

4. Type a value into the Padding field to set the number of pixels in space to appear around the inside the slider edges (to separate the slider edge from your content). A value of 0 means you want your content to display to the full width of the slider.

5. In the Automatically fit images to slider width field, click Enable if you want your images to be auto-resized to suit the size of your slider. 

Note: By default your images will display at their native size. 

6. Click  to apply the change in the ThemeStarta preview. 

7. Click  to apply your changes to your live WordPress theme.   

Background

Click the Spotlight Settings > Slider > Background bar to display the Slider Background Options Settings:

To set a slider background:

1. Select a Slider Background Color using the Color Picker Tool.  

If you don’t want a slider background color, click the  button (the default background color will change to “none”).

2. If you want to use a background image in your slider, upload your image using the Image Upload tool.

The default value for this field is “noimage”. If you decide you don’t want a background image, click  to restore this field to its default value.

Note: The maximum size of any background image upload is 500kb which is quite a large file size. You should aim to make the file size of any image you use in your theme as small as possible otherwise your overall site load speed will suffer.

3. If you are using a background image, click the appropriate Background Image Tiling radio-button to select your preferred image tiling method. If you are not using an image leave this selection at its default value of “No Tiling”. Tiling (or “repeating”) gives you additional control over how your slider background image is displayed:

  • No Tiling: The image will appear once only, centered at the top of the slider.
  • Left to right: The image will repeat horizontally, aligned to the top of the slider.
  • Top to bottom: The image will repeat vertically, centered in the slider.
  • Both directions: The image will repeat horizontally and vertically, filling the entire slider.

4. Click  to apply the change in the ThemeStarta preview.  

5. Click  to apply your changes to your live WordPress theme.   

Text & Links

 

1. Choose a Text Color, Text Link Color and Text Hover Color using the Color Picker Tool.

The color settings you choose will apply to all text content that is displayed in your slider.

2. Click  to apply the change in the ThemeStarta preview.  

3. Click  to apply your changes to your live WordPress theme.  

Border 

To apply a border to your slider:

1. Select a Slider border color using the Color Picker Tool, then type the size you want your slider border to display at into the Slider border size field. 

Note: Any value in this field will be treated as a pixel value by ThemeStarta. So a value of 1 tells ThemeStarta you want your border size to be 1 pixel. A size of 0 (the default value) tells ThemeStarta that you don’t want a border to display around your slider. 

2. Click  to apply the change in the ThemeStarta preview.  

3. Click  to apply your changes to your live WordPress theme.  

Slide Transitions

You can set how you want your slider to transition between posts:

1. Select the appropriate radio-button to set a default Transition Type:

  • Fade. Each slide fades over the last.
  • Horizontal slide. Each slide moves horizontally to the left to replace the last.
  • Vertical slide. Each slide moves vertically down to replace the last.

2. Type a value into the Time between slide rotations field to set the time that each slide remains visible before transitioning. A value of 1000 equates to 1 second, so a value of 10000 would mean each slide remains visible for 10 seconds.

3. Type a value into the Speed of slide rotations field to set the speed of each transition effect. A value of 1000 equates to 1 second, so a value of 500 means each transition effect will last for half a second.

4. Click  to apply the change in the ThemeStarta preview.  

5. Click  to apply your changes to your live WordPress theme. 

Adding Content to the Slider

Watch the following screencast tutorial to learn more about adding images to the slider:

Add an Image Slideshow to the ThemeStarta Framework

Troubleshooting: If you find you have a white gap at the top of an image you’ve added to your slider, this is because WordPress by default wraps paragraph tags around images. Paragraph tags will create a white gap at the top of your image. You can resolve this by entering HTML editing mode for the image in question and replacing <div> and </div> tags instead of <p> and </p> tags.