Slider Pro (PRO)

Slider Pro element allows you to easily create and configure an image slider presenting the information in a dynamic and eye-catching way. Element available on Quix Pro only.

To use this element, please follow this steps:

  1. After adding a Section and Column, click the Plus icon to open the available elements.
  2. Click Slider Pro and it will be added to your page and its settings window will automatically open so you can start configuring it.

On it's Settings pop-up you will find three tabs, General, Styles and Advanced. On each tab you will find the different options available to modify and customize the element.

General Tab

  • Slides - Right at the top, you will find two default carousel items with default content, you can edit them (click on each one to open the options), duplicate them (click on the two squares icon), remove them (click on the trash icon), rearrange them (click the arrows icon and drag it to where you need), and add new items to your Slider by clicking the Plus icon below them. When you click on any of the slides available, you will get the following options:
    • Title - Set the title for the slide.
    • Description - Set the description of the slide.
    • Image - Click on the field and the media manager will open. You will be able to select an image on the Local Files tab or download an image from Unsplash on the Unsplash tab.
    • Button Text - Set the text to display in the button.
    • Link - Type the link here, you can use relative or absolute links. Click the Gear icon to set if the link should open on a new window and to add the No Follow property.
    • Thumb Image - Click on the field and the media manager will open. You will be able to select an image on the Local Files tab or download an image from Unsplash on the Unsplash tab.
  • Content Alignment - Content basic settings.
    • Text Alignment - Select the alignment of the text, you can choose between Left, Center and Right.
    • Horizontal Position - Select the alignment of the content, you can choose between Left, Center and Right.
    • Vertical Position - Select the veritcal alignment of the content, you can choose between Top, Center and Bottom.
  • Display - Here you can select what information will be shown on the slides.
    • Show Title - With this option you can show or hide the Title.
    • Show Content - With this option you can show or hide the Text.
    • Show Button - With this option you can show or hide the Button.
    • Enable Icon - Enable this option to display an icon on the button.
    • Icon - Here you can select an Icon to show on your button next to the text. Click on the field and the icon manager will open.
    • Size - After selecting the icon, the option to set the size will appear.
    • Color - After selecting the icon, you will be able to set the color of the icon.
    • Icon Placement - Select whether the icon should be at the left or right side of the text.
  • Overlay Color - Basic overlay settings.
    • Enable Overlay - Enable this option to show an overlay on the images. This is a good option to give more emphasis to the content.
    • Overlay Color - Set the color for the overlay.
  • Slide Animation - Slide animation settings.
    • Animation - Select the animation when slides change.
    • Enable Kenburns - Enable this option to have a Kenburns effect on the slide's image.
    • Reverse Kenburns - Enable this option to have a reverse Kenburns effect on the slide's image.
  • Content Animation - Content animation settings.
    • Enable Content Transitions - Enable this option to set an additional transition effect to the content.
    • Transition Effect - Select the transition effect.
    • Enable Content Parallax - Enable this option to be able to set a Parallax effect to the content.
    • For Heading - Set to Yes to enable the effect on the Heading.
      • Select Effect Style - Select if the effect should be Vertical (Y) or Horizontal (X).
      • Parallax In - Set the distance it should move.
      • Parallax Out - Set the distance it should move.
    • For Description - Set to Yes to enable the effect on the Description.
      • Select Effect Style - Select if the effect should be Vertical (Y) or Horizontal (X).
      • Parallax In - Set the distance it should move.
      • Parallax Out - Set the distance it should move.
    • For Button - Set to Yes to enable the effect on the Button.
      • Select Effect Style - Select if the effect should be Vertical (Y) or Horizontal (X).
      • Parallax In - Set the distance it should move.
      • Parallax Out - Set the distance it should move.
  • Height - Slider's height settings.
    • Height - You can can choose between Default (will adjust the height depending on the content), Custom (you can set a fixed height) or Fit To Screen (this option will adjust the height depending on the view port size).
    • Custom Height - If Custom height is selected, this option will appear so you can set the height.
  • Navigation - Navigation settings..
    • Slidenav - With this option you can enable and set the position of the Arrow Navigation.
    • Navigation - Here you can enable Dot or Thumb navigation and if they will go inside or outside the Slider.
    • Position - Set the position for the Dot or Thumb navigation. Options will change depending on the Navigation settings.
    • Margin - Select the distance between the Dots or Thumbs and the slides.
    • Enable Bar Nav - Enable this option if you want to have Bar Nav navigation.
    • For Vertical - Enable this option to show the Bar Nav vertically.
    • Position - Select the position for the Bar Nav.
    • Margin - Select the distance between the BarNav and the slides.
  • Behaviour - Settings for slider's behaviour.
    • Pause on Hover - Enable this option if you want the animation to stop when the slides are hovered.
    • Auto Play - Enable this option if you want the slides to change automatically.
    • Auto Play Speed (MS) - Set the time in miliseconds that must pass before showing a new slide.
    • Infinite Loop - Enable this option if you want to show the first slide after the last one, instead of stopping the animation.

Styles Tab

The Styles Tab will help you style the Slider Pro element. You will find eight different options, Content Style, Title, Description, Image, Button, Arrow Nav, Dot Nav and Bar Nav, each with its particular settings.

  • Content Style - Styling options for the content.
    • Margin - Use this setting to increase the space around the content.
    • Padding - Use this setting to increase the space between the content and its container.
    • Content Background - Set the color of the content backround.
    • Content Width - Set the width the content should use in the slider.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different options for each state.
    • Border Type - Use this setting to define the type of border you want for the arrow's container, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - You can configure the width of the border.
    • Color - Set the border color.
    • Border Radius - Use this option to set the radius of the button's corners to give them a rounded look.
    • Box Shadow - Using a shadow on the button can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow for the content.
  • Title - Style settings for the Title.
    • Text Color - You will be able to set the color for the Title.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
    • Margin - This setting will allow you to set space between the Title and the content around it.
  • Description - Style settings for the Description.
    • Text Color - You will be able to set the color for the Title.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
    • Margin - This setting will allow you to set space between the description and the content around it.
  • Image - Image style settings.
    • Image Size - This option will allow you to set how the images will be displayed inside the Slider.
  • Button - Style settings for the button.
    • Text Color - Set the color for the Read More text.
    • Text Hover Color - Set the color for the Read More text when hovered.
    • Background Color - Set the background color.
    • Hover Background Color - Set the background color, when hovered.
    • Hover Icon Color - Set the color for the icon when hovered.
    • Icon Spacing - Set the distance bewteen the icon and the button's text.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
    • Padding - You can use this setting to increase the space between the border of the button and the text, making the button bigger.
    • Margin - This setting will allow you to set space between the button and the content around it.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different options for each state.
    • Border Type - Use this setting to define the type of border you want for the arrow's container, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - You can configure the width of the border.
    • Color - Set the border color.
    • Border Radius - Use this option to set the radius of the button's corners to give them a rounded look.
    • Box Shadow - Using a shadow on the button can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow for the button.
  • Arrow Nav - Style settings for the Arrow Navigation.
    • Arrow Color - Set the color for the arrows.
    • Arrow Hover Color - Set the color for the arrows when hovered.
    • Arrow Size - Set the size of the arrows.
    • Arrow Padding - Use this setting to increase the space between the arrow and it's border, this will make the arrow button appear bigger.
    • Arrow Nav Space - Use this setting to move the arrows horizontally and away from the slider's border.
    • Arrow Space - Use this setting to move the arrows vertically and away from the slider's top border.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Background Type - Here you can select if you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
    • Image - If you would like to use an image instead of a color for the background, you can click here to open the Media Manager and select the image you want to use.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different options for each state.
    • Border Type - Use this setting to define the type of border you want for the arrow's container, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - You can configure the width of the border.
    • Color - Set the border color.
    • Border Radius - Use this option to set the radius of the arrow container corner's to give them a rounded look.
    • Box Shadow - Using a shadow on the button can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow for the arrows.
  • Dot Nav - Style settings for the Dot Nav.
    • Dot Color - Set the color for the dots.
    • Dot Active Color - Set the color for the active dot.
    • Dot Background Color - Set a background color for the dots.
    • Dot Background Padding - Increase the value to add space between the dots and the dots container.
    • Dot Width - You can easily set the dot width by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Dot Spacing - You can easily set the space between dots by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Border Type - Use this setting to define the type of border you want for the dot's container, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - You can configure the width of the border.
    • Color - Set the border color.
    • Border Radius - Use this option to set the radius of the dots container corner's to give them a rounded look.
    • Box Shadow - Using a shadow on the button can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow for dots.
  • Bar Nav - Style settings for the Bar Nav.
    • Bar Color - Set the color for the bars.
    • Bar Active Color - Set the color for the active bar.
    • Bar Width - You can easily set the width of the bars by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Bar Active Width - You can easily set the width of active bar by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Bar Height - You can easily set the height of the bars by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Bar Active Height - You can easily set the height of the active bar by dragging the selector left/right, or you can directly input the value you want on the number field.

Advanced Tab

As it's name says, here you can find the Advanced settings for the element. You can choose to edit them or leave them the way they are depending on your needs.

  • Element Style - Here you will find the settings for Margin, Padding and Z-Index values of the element.
    • Margin - Margins allow you to add space around the element, outside of its container.
    • Padding - Paddings allow you to add space around the element, inside of its container.
    • Z-Index - When two items overlap, the Z-Index value control which one appears on top of the other. An element with a Z-Index of 0 will appear behind an element with a Z-Index of 1.
  • Background - Here you will be able to configure the Background for the element.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Background Type - Here you can select if you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
    • Image - If you would like to use an image instead of a color for the background, you can click here to open the Media Manager and select the image you want to use.
  • Border & Box Shadow - You wil be able to configure Borders and Shadows for the element.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different borders and shadows for each state.
    • Border Type - Use this setting to define the type of border you want for the element, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - If a Border Type other than None is selected, this option will appear so you can configure the width of the border line for the element.
    • Border Radius - Use this option to set the radius of the corners to give them a rounded look.
    • Box Shadow - Using a shadow on your element can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow.
  • Animation - If you want to give your element movement, here is the place to do it.
    • Entrance Animation - Select the animation you want from the options avaliable on the dropdown.
    • Animation Repeat - You can enable this option if you want the animation to repeat everytime the element is visible on the screen. The default value is No, which only plays the animation the first time the element is viewed.
    • Animation Delay - You can set a delay from the moment the element is on the screen to the moment the animation starts. Specially useful if you want to create a cascading effect.
  • Custom CSS (PRO Only) - If you require a bit more customization, you can add your custom CSS here.
    • CSS Code - You can write your own CSS code here that will affect the element. No style tags required.
  • Identifier - Here you can find and customize the unique information for the element.
    • CSS ID - The unique identifier assigned to the element. You can change it, specially to make it easier to work with anchor links, but it always has to be unique to avoid issues.
    • CSS Class - If you would like to write CSS code on an external CSS file to customize the element, you can add an specific CSS Class to identify it so the changes are only applied to the element with the class.
    • Access Control - You will find all the User Groups you have configured on Joomla here. This option will allow you to configure who can view and interact with the access and with what permissions to the page.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us