Slider

Just like our other elements, this also has different tabs Basic, Image & Content Styling and Social Links Styling tabs all under the main General tab.

Under General tab we have the following options:

• Slider Height- Choose the height ratio of the slider element.
• Slide Animation- Set the animation of the element.
• Slider Width- Choose the width of the slider content either Full-width or Boxed, if Boxed then you also need to set the Max Width that it will occupy.

Next is the Slides tab that has the option to add each slide. Each slide has its own styling options that as discussed below:

• Background: Choose each slides background either a color, image or a video.
• Pre Title: Add a pre title of the slide content. (optional)
• Title: Add the main content title of each slide.
• Description: Add the text description.

• Button Text: Add a button text.
• Link: Add link on the button text and choose to open it on a new window or add a nofollow tag.
• Secondary Button Text: Add a secondary button text onto the slide.
• Link: Add link on the secondary button text and choose to open it on a new window or add a nofollow tag.

• Media: Not just content add a media on each slide along with the content.
• Media Position: If any media has been added set its position with respect to the content either left or right.
• Media Vertical Position: Adjust the media position vertically with respect to the complete slide.

• Content Width: Manage the content width in case you want to highlight the media more or visa versa.
• Content Vertical Position: Adjust the content position vertically with respect to the complete slide.
• Content Text Alignment: Manage the content’s text alignment style either left, right, center or justify.

After adding the slides, choose your navigation style using the options under the Navigation tab:

• Arrows- Choose to show the arrows or not.
• Pagination- Choose to show the pagination or not.
• Pagination Position- If pagination is enables choose to show it inside the slides or outside.
• Infinite Loop- Decide whether to make the slide as infinite loop or not.
• Draggable- Choose to make the slides draggable or not.
• Auto Play- Decide whether the slides will play on Auto or not. If yes then you can set its interval and whether to pause on hover or not.

Next tab is used for styling the content under the Content Styling tab:

• Pre title Spacing- Manage the space between the pre title & the main title.
• Pre title Color- Add the pre title text color.
• Pre title Typography- Style the pre title in different font styles & sizes via the typography field.
• Title Spacing- Manage the space between the title & the main description.
• Title Color- Add the pre title text color.
• Title Typography- Style the title in different font styles & sizes via the typography field.

• Description Spacing- Manage the space between the description & the buttons.
• Description Color- Add the pre title text color.
• Description Typography- Style the description in different font styles & sizes via the typography field.

Next tab has the options to style your navigation’s under Navigation Styling tab:

• Arrow Size-  Set the size of the arrows.
• Arrow Color- Set the arrow colors.
• Pagination Size- Set the size of the pagination dots.
• Pagination Colors- Set the pagination colors normal & when active.

Style your primary button under Primary Button Styling tab options:

• Button text Typography- Style the button text in different font styles & sizes via the typography field.
• Button Type- Choose the type of button from the given global options.
• Button Size- Set the size of the button.
• Button Animation- Choose the button animation on hover.
• Button Colors- Set the button colors normal & on hover.

• Button Padding- Set the button padding to make it look more appealing.
• Button Border Styling- Style the button with different border styles.
• Button Radius- Make the edges rounded by adding radius.
• Button Box Shadow- Add box shadow to the button.

Also style your secondary button under Secondary Button Styling tab options:

• Button text Typography- Style the button text in different font styles & sizes via the typography field.
• Button Type- Choose the type of button from the given global options.
• Button Size- Set the size of the button.
• Button Animation- Choose the button animation on hover.
• Button Colors- Set the button colors normal & on hover.

• Button Padding- Set the button padding to make it look more appealing.
• Button Border Styling- Style the button with different border styles.
• Button Radius- Make the edges rounded by adding radius.
• Button Box Shadow- Add box shadow to the button.

 

For more details on Design & Advanced tabs read the articles.