If you want to show a carousel of images on your site with advanced customization options then the Qubely Image Carousel is the perfect option for you. You will find the Image Carousel under the Qubely section in Add Block. Click on it to add it to your page/post. After adding it you will find the customization options in the block settings.

Style

Once you add the Image Carousel to your post/page, the first configuration you will find is the ability to choose a layout for your image carousel. There are a total of five layout designs to choose from. After you select a layout and apply it you can define various attributes of the carousel.

Slider Content: Enable this toggle button if you want to show content over your image carousel images. 

Number of Columns: This slider is a feature specifically for Layout 2. Using this, you can select how many columns of images you want to show at a time. This option is a responsive feature so you can set a different value for different device types.

Gutter: You can control the gap between each of the images in the carousel with the slider in this option. You can also manually set the gap distance.

Image Height: Set the image height for the images in your Image Carousel block. It is also a responsive feature so you can set different heights for different devices.

Carousel Settings

This section of the block settings gives you the option to overall general settings of the Qubely Image Carousel. From here you can

Show Arrow Navigation: Enabling this feature will show an arrow to both ends of the Image Carousel. The user will be able to interact with the carousel with the arrow buttons if you enable them. Disabling this option will hide the arrow keys.

Show Dot Navigation: This toggle button lets you enable/disable the dot navigation option at the bottom of the Image Carousel. The dot navigation shows the user which Image page they are currently viewing.

Draggable: You can let your users drag to the Image they want to view by enabling this toggle button. After enabling they will be able to click and drag to the Image both on forward and backward in the Image carousel.

Autoplay: This toggle button controls the autoplay feature for the Image Carousel. Enabling it will collapse the advanced autoplay feature.

• Speed: Select the autoplay speed according to the millisecond. Use the slider to set the speed or manually set the speed.
• Interval: Set the interval in milliseconds using the slider or manually.

Arrow Settings

Configure the arrow style and its settings from this section.

Arrow Style: There are two types of navigation arrow styles you can choose from.

Vertical Position: Set the vertical position of the arrow keys with the slider.

Shape Size: Select the size of the arrow box size from here.

Arrow Size: Set the arrow size inside the box from here.

Note: Vertical Position, Shape Size, and Arrow Size all of these are responsive features so they can be set according to different device types.

Normal/Hover: Configuration options for defining attributes for the normal state of the arrow. Please note the same configuration options can be set for when a user hovers over the arrow. You can set the color, background color, and fill color.

• Arrow Color: Select any color from the wide color palette. Click on the clear button to undo any applied color.
• Fill: Selecting this option will fill the background specific to the text of the icon with a color. You are free to choose the color of the background from the Design section of the block settings.
• Background: If you would like to show a specific color to the background to the content of the team member details section you have the option to do that from here. You can choose 
  • Fill Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
  • Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint.
  • Clear: Lets you reset the existing gradient effect. You can use it to start over.

• Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed, and Double.
• Corner Radius: This slider lets you configure the corner radius of each post grid blocks. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.

Title

Available only for the layout 2,3,4, and 5. This section lets you add a title to the image. Enabling this will provide all the options to configure your title.

Spacing: Define the spacing between the subtitle and title of your image. Select from the slider or manually set it. It is a responsive feature so you can set different spacing values for different types of devices.

Color: Set the color from the color palette for the title text. Click on the clear button if you want to clear any applied color.

Typography: To change the typography of the text turn on this function and you’ll have the followings:

• Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
• Font Family: Choose your desired font to use from the list.
• Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
• Advanced Typography
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
  • Text Transform: Lets you apply your preferred capitalization format to the text.

Subtitle

Available only for the layout 2,3,4, and 5. This section lets you add a subtitle to the image. Enabling this will provide all the options to configure your subtitle.

Color: You can choose the color of the text from a variety of ranges or choose one from the predefined color palette.

Typography: To change the typography of the text turn on this function and you’ll have the followings:

• Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
• Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
• Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
• Advanced Typography
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
• Text Transform: Lets you apply your preferred capitalization format to the text.

Description

Available only for the layout 2,3,4, and 5. Enable this option to set a description for your images. It will be shown under the subtitle section on your image.

Color: You can choose the color of the text from a variety of ranges or choose one from the predefined color palette.

Typography: To change the typography of the text turn on this function and you’ll have the followings:

• Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
• Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
• Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
• Advanced Typography
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
• Text Transform: Lets you apply your preferred capitalization format to the text.

Top Spacing: Set the spacing between the top section of the description content and the rest of the content over the image. Use the slider or set it manually. It is a responsive feature so you can set different spacing values for different devices.

Bottom Spacing: Control the spacing area between the bottom section of the description section and bottom section of the image carousel. It is also responsive so there is an option to set different spacing for different types of devices.

Content 

Available only for the layout 2,3,4, and 5. This section gives you the settings to control the conent text settings.

Padding: To set the Padding of the content, you can use the Padding function. The scale can be calibrated between 1 to 200. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.

Vertical Align: You can set the content’s vertical alignment using this option. There are three configuration properties here. Set the alignment as the top, middle and bottom.

Horizontal Alignment: You can set the content’s Horizontal Alignment using this option. There are three configuration properties here. Set the alignment as left, middle and right.

Overlay

Available only for the layout 2,3,4, and 5. There is a toggle button here that will enable all the Overlay features available for the section. If you are not familiar with overlay, it means to cover your image with a separate foreground. There are two types of Overlay to choose from.

Normal: This option is suitable for choosing an overlay that will show all the time. Go to the Fill Color feature and choose the color of your choice.

Hover: If you want the overlay to only show when you or your users hover over the image then you need to choose the Hover feature.

Regardless you choose Normal or Hover you will have two types of Background options to choose from.

• Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
• Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint. 
• Gradient Type – Radial: A radial gradient applies the gradient effect by a center point. The Radial Pointer defines the starting point of the circle where Color 1 defines the inner circle area and Color 2 defines the outer circle. 
• Clear: Lets you reset the existing gradient effect. You can use it to start over.

Blend Mode: Blend mode allows you to configure how your set overlay should blend with the image that you have uploaded in your image carousel. If you are completely new to this term, Blending means how one layer of an image should blend with another layer. Altogether there are 13 total blending choices you can choose from. Normal, multiply, screen, overlay, darken, lighter, color dodge, saturation, luminosity, color, color burn, exclusion and lastly hue.

Advanced

Animation

To make the block more interesting, you can add an animation effect. It is disabled by default, to enable this feature, choose an effect from the dropdown list. Once you choose your desired one, then start making modifications as you seem fit. The units are in milliseconds. Note: Duration is how long the animation will run and Dealy is the waiting time before the animation starts loading. The following effects are currently available.

• Fade: Selecting this will animate your Image block with a fading animation.
• Slide: Animate your Image block with a sliding animation.
• Bounce: If you want to animate your Image block with a bouncing animation then select this.
• Zoom: This option will animate your Image block with a Zooming animation.
• Flip: Animate your Image block with a Flipping animation using this option.
• Fold: Selecting this will animate your Image block with a sliding animation.
• Rotate: This will animate your Image block with a rotating animation.

Note: You can control the from which direction the animation will start such as from the center, right, left, up or down. Also, control how many times the animation will repeat. You can also select the duration and the starting delay of the animation which are considered in milliseconds.

Advanced

This section lets you override the current styling of this particular block.

Enable Custom Position: If you want to set the image block to a custom position then simply enable this option. After enabling you will find the following options

• From X-axis: Select from the slider what position you want the image block to be in according to the X-axis. The range limits from -2000 to 2000.
• From Y-axis: Select from the slider what position you want the image block to be in according to the X-axis. The range limits from -2000 to 2000.

Z – Index: If any of your blocks override another, then you can set a value here, the one with the higher value will appear before the other.

Hide on Tablet/Phone: Turn it on to hide this block in your desired device. The change will appear on the frontend.

Block Row CSS: In case you need to override current block settings, you can write down your own code followed by {{QUBELY}} to override the current settings.

Additional CSS Class: You might need to name a block in order to make custom modifications in the future, this is the field where you define the name.