WordPress Slider WD

Step by step guide


Step 4: Changing/Modifying Slider Settings.

In this section you will learn how to change different settings of your WordPress slider.




To access the settings you should go to Slider WD>Sliders>Settings tab.


4.1 Global Settings. You can change the main settings here. The changes will affect only the current slider and not previously created ones.
Dimensions. Set the maximum dimensions of the slider. The dimension is set to maximum since with smaller displays the slider will be displayed in smaller dimensions due to the responsiveness feature. This will be the constant dimension regardless of the images.
Full width. Choose whether to have the overall slider stretched to the full width of the page, where it is posted or not. The length will be given corresponding to the original ratio, e.g. if you have it set to 480x300 and the width of the page is 960, then the height will be 600. In addition you can change the ratio manually, deleting the provided number and replacing it with another option.
Background fit. There are three options for inserting the image into a slide. You can choose the option that better suits you. In case you have images smaller or larger than your slide the views will change accordingly. Let's examine the changes separately.
Cover. The image will get cut from the middle part and will get enlarged to fit the entire background.
Fill. The image will get stretched or compressed to the dimensions of the slider.
Contain. The image will stay in its original form and the rest of the slider content area will be covered by the slider background.
Align. With this option you can align your slider to either left, right or to the center. If your theme content area width is small i.e. if you have a column on left or right side of your webpage you may not be able to see this option at work. Also if the dimension is set to 800x300px, which is the maximum size for use with responsiveness feature, you will not see any difference while trying to align your slide to any direction.
Effect. Select the effect which will be applied when shifting from one slider to another. Note, that it is different from the layer effects and does not affect the layer effects.
Effect duration. Set the timing for the slider effect in ms.
Time Interval. Set the time interval for the change of the sliders.
Autoplay. Choose whether to autoplay the sliders or not.
Shuffle. Choose whether to have the slides change in a random manner or to keep the original sequence.
Start with slide. By default the slide will start with the first slide. Using the option you can select the slide, which will be first displayed. You can use 0 for randomizing the option.
Music. Choose whether to have music/audio track playback with the slider or not.
Music URL. Provide the full link to the audio track, which will be used with the slider.
Smart Load. Choose whether to have the smart load feature, which will help to have faster load for the first few images and will process the rest meanwhile.
Background color. Select a background color for the slider, as well as its transparency level.
Border. Set the border width, type, as well as the color.
Border radius. Set the border radius using CSS type values.
Margin. Set a margin for the slider in pixels.
Shadow. Set a slider shadow using CSS type values.
Right click protection. Choose whether to have right click protection for avoiding the image download or not.
Layer out on next. Choose whether to have the layer effect out regardless of the timing between the hit to the next slider or skip the effect out and get to the next image.
Turn Slide WD Media Upload. Choose whether to use the Slider WD Media Upload option or use the standard WordPress Media Upload.
Published. Choose whether to publish the mentioned slider or not.

4.2 Carousel. You can display the slider images in a carousel view, which displays a larger image within the center and descending size images before and after the main image.
Carousel. Choose whether to use carousel display of images or not.
Number of images for carousel. Define the number of visible images whenever using carousel display.
Carousel image ratio. Define the proportions between the main image and images preceding and following the main image.
Container fit. If you activate the option the distance between the images will be identical so that the images fill the container, otherwise the distance between the images will depend on the ratio.
Fixed Width. Define the maximum width of the carousel display.

4.3 Navigation. You can change the style, colors and dimensions for the navigation buttons or completely remove the navigation buttons.
Next/ Previous buttons. Choose whether to display Previous and Next buttons or not.
Next/ Previous buttons. Choose whether to display Play and Pause buttons or not.
Show Navigation buttons. Select between the option of always displaying the navigation buttons or only when hovered.
Image for Next / Previous buttons. There is an opportunity to use the default set of navigation buttons, upload images to be used as navigation buttons or to use styled fonts.

  • Default. Here you should choose the button group, color option. You can use reverse feature.
  • Custom. Here you should upload images for each action button by clicking on it and adding the corresponding image. You can use reverse feature.
  • Styled. Here you should select the button style using the drop-down list.

Next/ Previous buttons style. Choose the style of the button you prefer to have as navigation buttons.
Next/ Previous buttons size.
Set the dimensions for the right/left buttons.
Play/Pause button. Choose whether to display Play and Pause buttons or not.
Image for Play / Pause buttons. There is an opportunity to use the default set of play/pause buttons, upload images or to use styled fonts.

  • Default. Here you should choose the button group, color option . You can use reverse feature.
  • Custom. Here you should upload images for each action button by clicking on it and adding the corresponding image. You can use reverse feature.

Play / Pause button size. Set the dimensions for the play/pause buttons.
Buttons color (for Styled only).
Select a color for the navigation buttons.
Hover color (for Styled only).
Select a hover color for the navigation buttons.
Border.
Select the type, size, as well as the color of border for the navigation buttons.
Border radius.
Set border radius for the navigation buttons using CSS type values.
Background color.
Select the background color for the navigation buttons using the color picker. In addition you can set the transparency level of the background.

4.4 Bullets. In addition to navigation buttons, you can also use bullets. Upon hitting the bullet the image in the corresponding position will be displayed.
Enable bullets. Choose whether to have navigation bullets or not.
Position. Select the position for the navigation bullets.
Bullet style. There is an opportunity to use the default set of bullet images, upload unique image to be used as a navigation bullet or to use default styled fonts.

  • Default. Here you should choose the button group, color option as. You can use reverse feature.
  • Custom. Here you should upload images for active and deactive bullets by clicking on it and adding the corresponding image. You can use reverse feature.
  • Styled. Here you should select the bullet style using the drop-down list.

Size. Define the size of the navigation bullets.
Color (for Styled only). Select the color for the navigation bullets.
Active color (for Styled only). Select the color for the bullet, which is currently displaying a corresponding image.
Margin. Set the margin for the navigation bullets in pixels.

4.5 Filmstrip. You can add a filmstrip for the slider images.
Enable filmstrip. Choose whether to have thumbnails of the slides displayed as a filmstrip or not.
Position. Set the position of the filmstrip between 4 possible options.
Thumbnail dimensions. Define the dimensions of the filmstrip thumbnails.
Background color. Select the background color for the filmstrip.
Thumbnail margin. Set the margin for the thumbnails in pixels.
Active border. The thumbnail for the currently displayed image will have a border. You can set its size, type and color.
Deactive transparency. You can set a transparency level for the inactive filmstrip items.

4.6 Timer Bar. You can add a bar displaying the timing left to switching to the next slide. This is commonly used when using autoplay for the slider.
Enable timer bar. Choose whether to display a timer bar over the images or not.
Type. Choose the type of the timer bar to be used within the slider.
Size. Define the size of the timer bar in pixels.
Color. Select the color and the transparency level of the timer bar.

4.7 Watermark. You can add watermark over the slider images both in the forms of text and images.
Please note that the Fill and Contain options will work fine with Watermark option regardless of the image dimensions, whereas for the Cover option you should have the image identical to the size set in the Dimensions setting. If you have uploaded the image with another dimension, you will need to resize the image and upload it again.
Watermark Type. Choose what kind of watermark you want to use from provided 2 options (text, image) or not to use watermarks over your slides.
Text

  • Watermark text. Provide the text which will be displayed over the slides.
  • Watermark font size. Specify the font size of the watermark in pixels.
  • Watermark font style. Specify the font family for the watermark text.
  • Watermark color. Select the watermark text font color, as well as the watermark transparency using CSS type values.
  • Watermark position. Choose the positioning of the watermark from the available 9 options.

Image

  • Watermark URL. Provide the absolute URL of the image which will be used for the watermark. Please note that only .png images are supported.
  • Watermark image size. Define the size (in percentage for the responsive look) of the image used for the watermark.
  • Watermark position. Choose the positioning of the watermark from the available 9 options.

4.8 CSS. You can add custom CSS in the box below to apply custom changes to the slider. The changes will override the original styles.


Previous Step Next Step

WORLD-CLASS SUPPORT

We are here for you every step of the way. Turn to our support with any questions you might have about our products and services. Our experienced customer care team is available to help you as fast as we possibly can.

Contact us