Elementor Awesome Custom Slider Template & Tutorial

Elementor Awesome Custom Slider Template & Tutorial

Element.How also offers premium tutorials! Check them here:

Table of Contents

In this tutorial, you will learn how to create an awesome custom slider, with Elementor.

Elementor Pro is required for this one as we will be using CTA elements.

Here is what we will be creating:

Here is what it looks like on mobile:

You can also visit the demo page directly.

Credits: I got the design idea here.

Features:

  • Amazing: get a truly original slider and impress your visitors or clients
  • Fully responsive: the layout is responsive and works well on tablet and mobile too
  • Easy to replicate: simply copy paste the template
  • Make it your own: swap to your content, edit the CSS to customize the fonts and colors easily

Also note that the slider is entirely custom (i.e. it's not using any JS slider library), and as such has a limitation: you can't swipe to navigate through the slides. You have to click the arrows, or click on one of the cards.

Another limitation is that it's not dynamic. It can't come from a custom post type. The slides' content is static. It could come from an ACF options page (or equivalent) though.

The Container feature needs to be activated for this tutorial to work.

Here is an alternate version that shows fewer cards on desktop (tablet and mobile stay the same) that's also provided in the tutorial.

Let's get started!

First, import the template on your page

This is a premium tutorial. Purchase access to unlock the full tutorial and access the template.

Access tutorial

$29/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial:
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2737 Elements right here:

Checkout the Elementor Addon Finder directly

10 Responses

  1. I I try to copy and paste the template but it not work ....can you post the json file or can you send me a json by mail ... Thanks!

    1. Greetings,

      To copy the template, you need to Right click > Paste from another site. You need to right click at the bottom of your page where you have the little folder and + icon.

      Then when you have the screen where it says "press CTRL V", you click CTRL V.

      Let me know if that works!

  2. How to reduce the size of the template cards in bottom?

    I want only 1 and half card in the bottom. and also can I have less than 7 slides?

      1. Yess, this is what I wanted to achieve, thank youu. Can you please email me the same?

  3. Is there a way to get rid of the button? I tride to make it transparent but it did not work for the box in the "normal" mode (in the hoover mode it did)

Leave a Reply