WordPress Slider WD

Step by step guide


Step 3: Adding layers to the slide.



There are four types of layers that can be added to the slides: text, image, video and social button.

The layer buttons are located on the lower left corner of the slide.

You can add more than one layer to your slide. These layers can be of different or same type.

The layers can be duplicated by pressing “Duplicate button” next to the “Close” button. In this case the duplicated layer will appear as the last positioned layer and can be further customized.


3.1 Add Text Layer. You can add custom text to be set as layer over the specific slide.

Text. Provide the text which will be displayed over the slide image.
Link. Provide an absolute URL to which the user will be redirected when pressing on the text layer.
Position. Provide the values of x and y axis to position the text layer. In addition you can drag and drop the text layer to a desired position.
Size. Define the font size of the text.
Color. Select the text color for the text layer.
Font family. Choose the font family for the text.
Font weight. Choose the font weight for the text from the provided options.
Effect in. Apply an effect to the process of putting the layer over the slide.
Start- Define the timing when to start the effect.
Effect- Select the effect option from the drop-down list.
Duration- Define the duration of the effect in ms.
Effect out. Apply an effect to the process of taking the layer off the image.
Start- Define the timing when to start the effect.
Effect- Select the effect option from the drop-down list.
Duration- Define the duration of the effect in ms.
Padding. Using CSS type values set padding for the text.
Background Color. Choose a background color for the text layer.
Transparent. Specify the level of transparency for the layer.
Border. Choose the border line width, type and color.
Radius. Set a radius for the text layer using CSS type values.
Shadow. Get a shadow for the text layer using CSS type values.
Published. Choose whether to publish the layer or not.


3.2 Add Image Layer. You can add images of various dimensions to be set as layers.

Dimensions. Set the dimensions of the image. Note that it will be best to select dimensions which correspond to the ratio of the original image, so that the image will not be distorted.
Edit Image. You can replace the images used as a layer. The options set for the previous image will be preserved. This will only change the image.
Scale. By checking the box the image will be automatically scaled taking the provided width and keeping the original ratio of the image.
Alt. Set the HTML attribute specified in the IMG tag to provide alternate text when an image on a Web page cannot be displayed.
Link. Provide an absolute URL to which the user will be redirected when pressing on the image layer.
Position. Provide the values of x and y axis to position the image layer. In addition you can drag and drop the layer to a desired position.
Transparent. Define the level of transparency for the image layer.
Effect in. Apply an effect to the process of putting the layer over the image.
Start- Define the timing when to start the effect.
Effect- Select the effect option from the drop-down list.
Duration- Define the duration of the effect in ms.
Effect out. Apply an effect to the process of taking the layer off the image.
Start- Define the timing when to start the effect.
Effect- Select the effect option from the drop-down list.
Duration- Define the duration of the effect in ms.
Border. Choose the border line width, type and color.
Radius. Set a radius for the image layer using CSS type values.
Shadow. Get a shadow for the image layer using CSS type values.
Published. Choose whether to publish the layer or not.


3.3 Add Video Layer. You can add YouTube or Vimeo videos as video layers for the slides. To do so, it is required to provide the link to the video and press Add button.
Dimensions. Set the dimensions of the video layer thumbnail image. The thumbnail will appear with a default dimension, which can be further altered.
Position. Provide the values of x and y axis to position the video thumbnail. In addition you can drag and drop the layer to a desired position.
Effect in. Apply an effect which will be used when the video layer appears over the slide.
Start- Set time for starting the effect.
Effect - Select the effect option from the drop-down list.
Duration- Define the duration of the effect in ms.
Effect out. Apply an effect which will be used when the video layer disappears from the slide.
Start- Set time for starting the effect.
Effect - Select the effect option from the drop-down list.
Duration- Define the duration of the effect in ms.
Autoplay. Choose whether to autoplay the video layer when the layer is added on the slide or not.
Border. Choose the border line width, type and color.
Radius. Set a radius for the video layer using CSS type values.
Shadow. Get a shadow for the video layer using CSS type values.
Published. Choose whether to publish the layer or not.


3.4 Add Social Button Layer. You can add social media buttons to share the slider images over the popular social networking websites, selecting the relevant button types.
Position. Provide the values of x and y axis to position the social button layer. In addition you can drag and drop the layer to a desired position.
Social button. The button type can be chosen between Google +, Facebook, Twitter, Tumblr and Pinterest buttons.
Size. Define the size of the added button.
Transparent. Define the level of transparency for the social button.
Effect in. Apply an effect to the process of putting the layer over the image.
Start- Define the timing when to start the effect.
Effect- Select the effect option from the drop-down list.
Duration- Define the duration of the effect in ms.
Effect out. Apply an effect to the process of taking the layer off the image.
Start- Define the timing when to start the effect.
Effect- Select the effect option from the drop-down list.
Duration- Define the duration of the effect in ms.
Color. Set the color for the social sharing button.
Hover color. Set the color for the social sharing button when hovered.


Previous Step Next Step

Never miss important news and exclusive offers!

Join Our Community