How to add an image slider using Elementor free
Looking for a way to add an image slider using Elementor free?
Image is a very important element for a website. You can display images on your website to provide information visually about your business. But uploading an image is not the only task, you need to style it uniquely to attract the users. There are a lot of different ways to display images on your web page, the slider is one of them. You can create a beautiful slider with an animation effect that can attract users easily.
Elementor comes with the image slider widget which will help you to create a beautiful image slider on your website. But the image slider widget is only available for Elementor Pro. We will need to upgrade your account to use the slider widget. If you don’t want to upgrade your account but want to add a slider using Elementor free, this article will help.
Here in this article, we will ship you the easiest way to add an image slider using Elementor Free.
Add an image slider using Elementor free
You need to install an extra add-on to add an image slider using Elementor free But don’t worry the add-ons istotally free. First, install and activate the Prime Slider – Addons For Elementor. These addons enable you to create the following widgets –
- General
- Blog
- Dragon
- Multiscroll
- WooCommerce
All these widgets will be available after you activate the add-ons. You need to use the General or Dragon widgets to create an image slider.
Now open up a page or create a new page where you want to add the slider and then create a section by clicking on the “+” icon.
Now choose the column and then from the widget list drag the general or dragon widget and drop it into your created section. You can use any of the widgets you want.
This will add a default slider in your section. You need to style it based on your design
Go to the content tab to edit the slider. At first, you will find the layout option from where you can choose the layout of your slider. There are four different layouts available. After choosing the layout you can add slider width and height and then set the minimum height of the slider.
Now you can enable or disable the elements to display in a slider like – logo, menu. title, subtitle and many other elements. You can show all the elements in the slider or hide specific ones. At the end set the slider alignment.
Now come to the header option from where you can set the header, menu and off-canvas. You can add the logo as text or images and then make the logo sticky. You can also add a custom link to your logo.
From the menu option add menus and links. You can also add a dynamic menu for your slider. For the dynamic menu option, you can select any of the menus of your website and set the dropdown alignment, item alignment, dropdown padding, width and any others.
From the Offcanvas option, you can add off-canvas text, icon, alignment, set width and animation. There are also many settings option available for the off-canvas
Now come to the slider option from where you can add the item to the slider. To add an item click on the Add Item button. You can also duplicate any existing item by clicking on the copy icon and date an item by clicking on the cross icon. For an item, you can add title, subtitle, button, link and text.
From the social icon option, you can add a social icon title and link.
From the animation option, you can enable or disable the loop and autoplay. You can also set animation time and speed.
Now move on to the Style tab where you can add style to your created slider. From the header option, you can set the header background and then you can add logo color, hover color, typography.
You can add color, background color, border type, border radius and padding, margin to your menu from the menu style option.
Similarly, you can style your off-canvas menu too.
From the slider option, you can style the title, subtitle, button of the slider. You can add color, background, typography from here too.
Style your social icon color, background, border type, border radius, padding, box-shadow, icon size and spacing. You can style the social profile for normal and hover conditions.
From the navigation option, you can set navigation color, background color, border type, radius and others.
From the Advance tab, you can set the advance settings for the section. You can see our tutorial to learn How to use the advance settings option of Elementor
Wrapping up
We hope this article will help you to add an image slider using Elementor free. If you like this article please like our Facebook page to stay connected.