The Logo Carousel widget from Element Pack Pro lets you display multiple logos in a smooth, scrolling carousel. It’s ideal for showcasing clients, partners, or sponsors in a dynamic and engaging way with flexible styling options. In this documentation, we will guide you on how to use and customize the Logo Carousel widget.
Enable The Logo Carousel Widget
To use the Logo Carousel widget from Element Pack, first, you have to enable the widget.
- Go to WordPress dashboard → Element Pack Plugin dashboard.
- Then, Click the Core Widgets Tab.
- Search the Logo Carousel Widget Name.
- Enable the Logo Carousel Widget.
- Hit the Save Settings Button.
Inserting The Logo Carousel Widget
1. Go to the Elementor Editor Page and hit the “+” icon Button.
2. Search the Logo Carousel name.
3. Drag the widget and drop it on the editor page.
Work With The Content Tab
Layout Section
Go to Content → Layout
1. Columns: You can select the column number that you want to show to your audience with this option.
2. Carousel Gap: You can adjust the space between the Carousel with this option.
3. Image Resolution: You can make changes to the image resolution with this option.
4. Item Height: You can adjust the height of the items with this option.
5. Image Mask: You can add a visible shape to the image by applying a mask over it. You will get two options here. These are the Default Shape & Custom Shape. You can choose and apply as you prefer.
Logo Carousel Items Section
Go to Content → Logo Carousel Items
1. Close Button: You can click on the close icon to remove the logo Carousel items with this option.
2. Copy Button: You can click on the copy button to duplicate the logo Carousel item with this option.
3. Add Item: You can click on this button to add more logo Carousel items.
In each item of the logo Carousel, you will get more options where you can add information to show to your audience. Let’s explore those now –
1. Logo Image: You can add the logo image in this field.
2. Website URL: You can add a link to the logo image with this option.
3. Brand Name: You can add and make changes to the brand name with this option.
4. Description: You can add and make changes to the description with this option.
5. Tooltip: Enable the switcher to show the brand name & description as a tooltip with this option.
6. Placement: You can set the tooltip position to top, top left, top right, bottom, bottom left, bottom right, left, or right with this option.
Tooltip Settings Section
Go to Content → Tooltip Settings
1. Animation: You can add an animation to the tooltip appearance with this option.
2. X Offset: You can move the tooltip position horizontally with this option.
3. Distance: You can move the tooltip position vertically with this option.
4. Arrow: Enable the switcher to add an arrow to the tooltip.
5. Trigger On Click: You can enable the switcher to make the tooltip visible when clicked on the image. Don’t set yes when you set a lightbox image with a marker.
Carousel Settings Section
Go to Content → Carousel Settings
1. Auto Play: Enable the switcher to automatically run the carousel one by one with this option.
2. Autoplay Interval: You can adjust the delay time to move the items one by one with this option.
3. Pause on Hover: Enable the switcher to pause the autoplay when you hover over the logo items with this option.
4. Loop: Enable the switcher to start the autoplay again when it reaches the last logo item.
5. Center Slide: Enable the switcher to slide the carousel to the center with this option.
Navigation Section
Go to Content → Navigation
1. Navigation: You can select the navigation type with this option.
2. Arrows Position: You can make changes to the arrows position with this option.
3. Arrows Icon: You can choose the arrow icon style with this option.
4. Hide Arrows on Mobile: Enable the switcher to hide the arrows on mobile devices with this option.
Work with The Style Tab
Logo Carousel Section
Go to Style → Logo Carousel
In this section, we have two more tabs. These are Normal & Hover. Let’s start describing the Normal Tab first –
1. Background Color: You can make changes to the logo Carousel items’ background color with this option.
2. Border Type: You can add and change the type of borders with this option.
3. Border Width: You can set the thickness of the border with this option.
4. Border Color: You can change the border color with this option.
5. Border Radius: You can control the roundness of the border with this option.
6. Padding: You can adjust the inner space of the items with this option.
7. Opacity: You can adjust the transparency of the items with this option.
8. CSS Filter: You can customize the image by making changes to blur, brightness, contrast, saturation & hue with this option.
9. Image Size: You can make changes to the image size with this option.
Now, let’s proceed to the Hover Tab –
1. Background Color: You can make changes to the background hover color with this option.
2. Border Color: You can change the hover border color with this option.
3. Opacity: You can adjust the item hover transparency with this option.
4. CSS Filters: You can customize the image with this option.
5. Transition Duration: You can adjust the transition duration with this option.
6. Hover Animation: You can set the hover animation type for the items with this option.
Tooltip Section
Go to Style → Tooltip
1. Width: You can adjust the height of the tooltip layout with this option.
2. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
3. Text Color: You can make changes to the description text color with this option.
4. Text Alignment: You can adjust the tooltip content position to left, center or right with this option.
5. Background Type: You can choose the background type to be classic or gradient with this option. Here, we have chosen the background type as classic.
6. Arrow Color: You can change the arrow color with this option.
7. Padding: You can adjust the inner space of the tooltip field with this option.
8. Border Type: You can add and change the border types with this option.
9. Border Radius: You can control the roundness of the border with this option.
10. Box Shadow: You can add a shadow effect to the tooltip layout with this option.
Navigation Section
Go to Style → Navigation
1. Arrows Size: You can make changes to the navigation arrows size with this option.
2. Background Color: You can make changes to the arrows background color with this option.
3. Hover Background Color: You can make changes to the arrows background hover color with this option.
4. Arrows Color: You can make changes to the navigation arrows color with this option.
5. Arrows Hover Color: You can change the arrows icon hover color with this option.
6. Border Type: You can add and change the border types with this option.
7. Border Radius: You can control the roundness of the border with this option.
8. Padding: You can adjust the inner space of the navigation field with this option.
9. Horizontal Offset: You can move the arrows horizontally with this option.
All done! You have successfully customized the Logo Carousel widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the Logo Carousel widget. Please visit the demo page for examples.
Thanks for being with us.
