Banner Slider

This shortcode allows you to create awesome banner sliders on your pages.

Azyn Banner Slider

  • Add item - Please, add the item to create and edit the slide.
  • Background Image - Here you can add the image for the background.
  • Subtitle - Here you can add a subtitle text.
  • Title Text - Here you can add the title text.
  • Title (second line) - Here you can add the title text on a second line.
  • Element tag for the subtitle - Here you can select an element tag for the subtitle.
  • Element tag for the title - Here you can select an element tag for the title.
  • Use custom font for banner subtitle? - Turn on the switcher if you want to customize a banner subtitle typography.
  • Slides Background color - Here you can select a background color.
  • Line color - Here you can select the color of the line.
  • Line active color - Here you can select the color of the active line.
  • Arrows color - Here you can select the color of arrows.
  • Pagination color - Here you can select the color of pagination.
  • Use custom font for title? - Turn on the switcher if you want to customize a title typography.

  • Use custom font for heading? - Turn on the switch if you want to customize heading typography.
  • Use custom font for title? - Turn on the switch if you want to customize title typography.

Banners:

  • Add item - Please, add the item to create and edit the slide.
  • Background Image - Here you can add the image for the background.
  • Enable overlay for background image? - Turn the switch on, if you want to enable overlay for background image.
  • Subtitle - Here you can add the subtitle for current banner slide.
  • Title - Here you can add the title for current banner slide.
  • Align - Here you can select the content align.
  • Element tag for Title - Here you can choose the element tag for the title.
  • Add button - Turn on the switcher to add the button for current banner slide.
  • Button items:
    • Add button - Turn on the switcher to add the button for current banner slide.
      Layout - Please, select the button layout.
    • Name - Please, enter the button text.
    • Link - Please, add a URL to the button.
    • Style - Here you can select the button style (dark or light).
    • Size - Here you can select button size (small or large).
    • Type - Here you can select the button type (reverse or transparent).
    • Box shadow - This option allows you to add the box-shadow to the button.
    • Enable Full width - Here you can enable the whole width of your button.
  • Use custom font for subtitle? - Turn on the switch if you want to customize subtitle typography.

How to customize typography you can check in Typography Settings Category:

Content Settings: 

  • Use custom font for title? - Turn on the switch if you want to customize title typography.
  • Use custom font for navigation/numbers? - Turn on the switch if you want to customize the navigation/numbers typography.

Banners:

  • Add item - Please, add the item to create and edit the slide.
  • Title - Here you can add the title for current banner slide.
  • Element tag for Title - Here you can choose the element tag for the title.
  • Add button - Turn on the switcher to add the button for current banner slide.
  • Use custom font for title? - Turn on the switch if you want to customize title typography.

How to customize typography you can check in Typography Settings Category:

Images Size:

Image size - This option allows to resize image. You can choose needed size from the list or enter custom image width and height. 

Advanced

  1. Margin: Set the section Margin
  2. Padding: Set the section Padding
  3. Z-index: Set the Z-Index. Learn more about Z-Index
  4. CSS ID: Set a CSS ID for your section
  5. CSS Classes: Set CSS Classes for your section

Motion Effects

  1. Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. 
  2. Scrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. 
  3. Entrance Animation: Click the dropdown to choose an animation. 

Background

The following options can be set independently for both the normal and hover states.

  1. Background Type: Choose between Classic or Gradient

Border

The following options can be set independently for both the normal and hover states.

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the border radius to control corner roundness
  3. Box Shadow: Adjust box shadow options

Positioning

  1. Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. 
  2. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.
  3. Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.
  4. Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user’s viewport. 

If either Absolute or Fixed are selected, the following options also become available.

  1. Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.
  2. Offset: Changes the horizontal reference point by the amount of the offset
  3. Vertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.
  4. Offset: Changes the vertical reference point by the amount of the offset

Responsive

  1. Reverse Columns: Slide to reverse your columns order (Great for Mobile)
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile