Joomla Slider WD

Step by step guide


Step 3: Creating layers for the slides

3.1 On the top menu select Components Slider WD. Choose the slider. Then navigate to the slide you want to add layers to.
3.2  Navigate to the bottom part of page. You will see three buttons here- Add Text LayerAdd Image Layer, Add Social button Layer.

3.3 Adding Text Layer.  A custom text can be used as a layer over the slide. The options of the layer are customizable, including color, font and etc.
Text. Provide the text which will be displayed over the slide image.
Link. Provide a 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.4 Adding Image Layer.  You can add custom images over the slides 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.
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 a 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.5 Adding Social Button Layer. You can add specific social media buttons, which will allow the site visitors to share your slide within social media websites. The list includes Facebook, Twitter, Tumblr, Google+ and Pinterest.
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