Using slider with elementor

The Image gallery, Advanced image gallery, Post grid, Product grid and Relationship post widgets now integrate the new Slider layout mode.
It comes with a range of flexible and modular customization options relative to the component used.
You can freely resize images by controlling their height, width, and aspect ratio.
Automate scrolling and the number of items displayed as well as several animation options.

Accessibility for slider mode

Select slider mode

To enable Slider mode, open the ‘Layout’ section and select ‘Slider’ from the list.
The ‘Slider’ section appears in the list of sections.
Beyond after unfolding it you can apply the configuration you want.

Layout select slider entry

Configure the slider

Autoplay: items scroll automatically,
Autoplay speed: scroll speed,
Loop: the scroll resumes at the beginning or not. Enabled with Autoplay = ‘yes’,
Displayed images: Number of items displayed,
Direction: scroll direction (left or right)
Transition effect: four transitions (Default, Coverflow, Creative, Fade). ‘Creative and Fade’ transitions display only one item at a time. You can change the width of the slider,
Image ratio: five aspect ratios for images (Default, 4/3, 3/2, 16/9, 26/9),
Vertical position: position the image vertically according to the selected ratio.
Navigation: two arrows on either side of the slider to move items forward/backward,
Pagination: a series of bullets under the slider to illustrate the number of items and their movement,
Display scollbar: discreet scroll bar under the slider to illustrate the number of items and their movement.

Style controls and buttons

You can define the size, and the color of the navigation arrows as well as the size of the bullets, their colors and the color of the active bullet. The ‘Link and Lightbox buttons’ sections are only visible for the ‘Image gallery’ widget.
Slider style controls buttons

Final outcome

Post grid slider with the last ten posts.
Side-by-side layout with text on the left
Slider autoplay equal ‘yes’ + Transition effect equal ‘Fade’ + Display scrollbar equal ‘yes’.
The link is on the title and on the image.

Perfect post grid

Create a perfect post grid with Elementor

The Post Grid component is ideal if you want to share your posts in different display formats (Grid, Masonry and Slider), filter posts, select content for display and cover a wide range of use cases.
Optimization loading page speed

Improve page loading speed

EAC in conjunction with Elementor uses a series of techniques to increase page load speed, make your site more accessible and improve site performance
Advanced image gallery widget

Create advanced image gallery using Elementor

The advanced image gallery widget for Elementor lets you build a responsive gallery with different layouts, zoom with a Fancybox, apply a ratio to images and many other customization options.
Display conditions feature

How to set display conditions with elementor

Display conditions is a new feature that allows you to hide elements such as sections, containers and widgets according to easily defined rules. Display conditions can be single or multiple, and you can add information in place of the element stipulating why the content is not visible.
Accessibility web links and text

Make your site more accessible

From version 2.1.3 EAC implements accessibility improvements including keyboard navigation, ARIA tags and improved semantics with 'role' attributes. The changes applied to future versions will tend towards conformity and respect for the rules laid down by the WCAG standard.
Warehouse-Service-Isometric-Illustration

How to add widgets with header footer builder

Header and footer builder for Elementor comes with the necessary widgets to create custom headers and footers for every post type on your site
Header footer Elementor

How to create custom headers and footers with elementor

Header Footer for Elementor is a new feature that allows you to create your own templates and display them in all or part of your site. This feature comes with the necessary widgets to build your templates without other plugins.
Male-Artist-Illustration

Add multiple background images with Elementor

Multiple background images is a new component that allows you to display multiple images in one element, position them finely and apply filters for attractive rendering
Tracking-Illustration

Create custom admin page for your woocommerce shop

Build a custom admin page with the advanced queries module specially developed to integrate effectively with the Woocommerce product.
Woocommerce product gris

WooCommerce Product Grid for Elementor

The WC Product Grid for Elementor will allow you to create a perfect grid of products that you want to sell or present as a catalog
Exit grid

Leave a Comment