1. Home
  2. Docs
  3. Carousel & Slider
  4. Logo Carousel

Logo Carousel EA Element

With the help of the Logo Carousel SA element, you can create a grid or carousel to flaunt your client or partner logos and make the amazing effects of logos. A Logo Carousel will not only let you display your client’s logo on your website but also build credibility for your business. SA Logo Carousel is the perfect solution in that regard. Here in this tutorial, you’re going to learn how to use the Logo Carousel element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Logo Carousel Element

 

»Content

 

Logo Carousel Slides

Adding the Items:

Upload Logo Image: Upload the logo image to add to the logo carousel slide.

⇒Title: Add the title here. Click on Dynamic settings to apply the AnalogWP Classes to the title text. (Ex. Add a dark background)

⇒Alt Tag: Add the image alt tag.

⇒Link: This is where you can add your Desire link or URL so that your logo carousel slide item can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link.

⇒Add Item: Use the ‘+Add Item’ button to add more items to the logo carousel slide.

⇒Title HTML Tag: Add the title HTML tag for the logo carousel titles.

 

Carousel Settings

⇒Effect: Add a transition effect to the logo carousel slider.

: Set how many items you want to be visible on the carousel for different dimensions.

⇒Items Gap: Customize some gaps between logo items.

⇒Slider Speed: Customize the duration of transition between slides (in ms).

⇒Autoplay: Enable/disable the autoplay of the logo carousel.

⇒Autoplay Speed (ms): Set the autoplay speed in the carousel based on ms.

⇒Infinite Loop: Enable/disable the infinite loop to the logo carousel.

⇒Pause On Hover: Want to pause your carousel on hover? Enable/disable it here.

⇒Grab Cursor: Shows grab cursor when you hover over the slider.

⇒Navigation: 

→Arrows: Enable arrows as the navigation in the logo carousel.

→Dots: Enable dots as the pagination in the logo carousel.

⇒Direction: Customize the slider direction either left or right.

 


»Style

 

Logos

⇒Background Type: Set the background type either Classic or Gradient. And then customize the background styles according to your preference.

⇒Classic Background Type: The following options are available for the classic background type:

→Color: Add a custom solid color to the background of the logo carousel.

→Image: If you want to add a background image for the logo carousel, then upload it here.

 

⇒Gradient Color Type: The following options are available for the gradient settings:

→Color: Add a custom gradient color to the icon background of the logo carousel.

→Location: Set the location for the color to be spread.

→Second Color: Add the second gradient color to the icon background of the carousel.

→Location: Set the location for the second color to be spread.

→Type: Set the type of gradient color either linear or radial gradient.

→Angle: Customize the gradient angle for the logo carousel.

 

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the logo carousel for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the logo carousel for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the logo carousel for different dimensions. You can link the values together or customize them individually.

⇒Grayscale: Enable/disable the grayscale to the carousel.

⇒Opacity: Control the opacity manually.

 

Title

⇒Color: Add a custom color to the title text of your logo carousel item.

⇒Margin Top: Set a margin value for the top of the title for different dimensions.

⇒Typography: Set the typography options for the titles.

 

Arrows

⇒Choose Arrow: Add an icon for the navigation arrow.

⇒Arrow Size: Manually customize the size of the arrows for different dimensions.

⇒Align Left Arrow: Customize the align of the left arrow for different dimensions.

⇒Align Right Arrow: Customize the align of the right arrow for different dimensions.

⇒Background Color: Add a custom background color to the navigator arrows for both normal and hover.

⇒Color: Add a custom color to the navigation arrow in the logo carousel for both normal and hover view.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the navigator arrow for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover view.

⇒Border Radius: Set the border-radius around the arrow for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the arrow for different dimensions. You can link the values together or customize them individually.

 

Pagination: Dot

⇒Position: Set the position of the pagination dot either inside or outside.

⇒Size: Manually customize the size of the dots for different dimensions.

⇒Color: Add a custom color to the pagination dot for both normal and hover.

⇒Active Color: Add a custom color to the active pagination dot in the logo carousel.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the pagination dot for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover view.

⇒Border Radius: Set the border-radius around the dot for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the pagination dot for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Logo Carousel Element.


Was this article helpful to you? Yes No

How can we help?