Modern Sliders

Course & Expansion Pack

Discover how one simple Cornerstone Element can supercharge your site building powers.

(Fun Fact: This changing background is an example of our new Slider in action)!

Our new Slider Element almost didn't happen…

As a matter of fact, it would have never seen the light of day were it not for one Devin Elston.

Who is Devin Elston I hear you asking? Well here he is with us in 2018.

Devin

Aside from being a long-time Themeco customer and all-around good man, Devin is a developer's developer. He has worked with some of the biggest brands including Hulu, CBS, and currently Beachbody.

He has the unique and rare ability to talk tech, wrangle code, and think strategically…all at the same time!

“You know what you need, Kyle” he said. “You need a Slider Element.”

Now let me pause for a moment and say that, as you can expect, we get a lot of requests for features. It comes with the territory, and it helps us keep Cornerstone the best website builder on the market! But just as soon as he said this, I had the answer in mind.

“Yeah, I agree buddy…that's why we already have a Slider Element.”

(Kyle 1, Devin 0).

“No, I'm not talking about the old Element…it's great and all, but what you really need is something more powerful.”

Again, I had the answer ready.

“Well, what about those 3rd party plugins we include? You can do anything you want with those.”

(Kyle 2, Devin 0).

At this point Devin shared his vision for a more powerful, native Slider Element. One that could take the simple elegance of what we had already built and give it more versatility, more customizability, more applications.

Needless to say, by the end of our conversation the game was over, and Devin won.


Fast forward a couple of years, and the team was discussing our development roadmap. On a whim I said, “What about the Slider Element?”

Now at this point our team goes through a rather unique and unorthodox process.

Instead of just moving forward with the idea—as though it is going to happen—we first try and poke holes in it.

  • ‘Here's how it won't work…’
  • ‘Here's where it breaks down…’
  • ‘Here's why no one cares about that…’
  • ‘Here's why no one should care about that…’

But as we started scaffolding the idea for the new Slider Element, pretty much the exact opposite happened.

We loved it! We loved what it represented, and more importantly we loved what it could become.

You see, most people think of a “slider” as those late 90s, early web monstrosities. They're generally slow, random, and serve almost no discernible engagement value. Honestly, most of them are eye sores.

People typically fill them with images or catchy slogans then slap it up at the top of their site—the most important real estate—without even a second thought.

But does it slide?
Credit: Warner Brothers

To make matters worse, they can also be performance hogs. This will not only frustrate your visitors (who likes to sit and wait for a pointless slider to load?), they can also negatively affect your search rankings.

We know that Google tracks performance, engagement, and bounce rate as 3 important metrics. The last thing you want is to give them more reasons not to rank you.

Modern sliders, on the other hand, are much more versatile. Much more subtle. Much more effective.

There was just one big problem.

No one had really cracked this yet in any of the website builders on the market. At least not our vision for it.

The options were either too narrow (underwhelming), or you had to use a complicated plugin that is the very definition of overkill.

We saw this as a unique opportunity.

So we set out to redefine what a Slider could be and then create a native Element for our Cornerstone site builder.

For those who may not know, Cornerstone is the site builder behind two of the most popular WordPress themes on the market today—X and Pro.

As the vision came into focus, we realized that a slider could be used for so many different things. Used correctly, it could actually become the secret weapon in any site builder's toolkit.

Modern Sliders could be used for things like…

  • Pricing Tables
  • Timelines
  • Headers
  • Product Comparisons
  • Even a Netflix-like presentation of content
  • And much, much more

So fast forward a couple more years and…drum roll please…we are extremely proud to announce that our new Slider Element is live!

The vision that started from a conversation so many years ago is now a reality, and we couldn't be more excited (and so is Devin…more on that in a sec).

We took everything we knew about how modern sliders should be built and developed a world-class Element for our customers to use.

It's an incredible tool that allows you to natively build some absolutely remarkable web experiences, and the Element is free for all X and Pro customers!

As a matter of fact, within hours of the release, these were just a few of the comments we received about it (p.s. the slider you see below was built with the new Slider Element).

“You went to great depths with the slider. I love it! This is probably the best one out there. We all know sliders can be bad, but they can also be invaluable if used carefully, especially on mobile devices.”
@Misho
“Once again excellent work guys, what a great new element with so much flexibility!”
@JvP
“It's so good! Already made a couple of Looper and blog carousels. Powerful tool but easy to use.”
@RubberDuckers
“Element is looking awesome guys, well done @rohmann & the rest of the team!”
@sam_futr
“Hey this is pretty darn sweet!
Thanks team ❤️”
@conorseed
“The slider is awesome!! Thank you for building such an excellent addition.”
@draper3000
“This is really good! There are so many things we can do with this.”
@spedney

    But we didn't want to stop there. There was so much more to this Element than meets the eye.

    Yes, you can use it for simple things like testimonials or image galleries—or anything really—that's the power of the Element.

    But what if you could look over the shoulder of Themeco lead developer Kory Wakefield as he deconstructs 15 different real life examples?

    What if, in addition to looking over his shoulder, we gave you 15 incredible sliders? Things like pricing tables, timelines, headers, and more!

    Sliders that were expertly crafted and conversion optimized—ready for immediate use or to use as the perfect starting point—a 100 hour head start!

    That's exactly what you get in Modern Sliders, and we invite you to see all that is included in this course and expansion pack.

    First up, let's look at the 15 custom sliders you'll receive.


    Pricing Slider

    Feature your pricing information in a sleek and stylish manner. Custom navigation and smooth transitions—this is a pricing table done right. You can swipe or use a trackpad with this example!

    Starter

    $20

    /mo

    Perfect for hobbyists or bootstrapping a project.

    • 1 instance

    • 25,000 visits

    • 10 GB of storage

    • Free SSL and CDN

    Choose

    Growth

    $60

    /mo

    For those who find themselves helping a friend or two.

    • 3 instances

    • 50,000 visits

    • 20 GB of storage

    • Free SSL and CDN

    Choose

    Pro

    $150

    /mo

    Business is booming and you're the talk of the town.

    • 5 instances

    • 100,000 visits

    • 30 GB of storage

    • Free SSL and CDN

    Choose

    Team

    $400

    /mo

    Now you've got employees and health insurance to fund (gulp).

    • 10 instances

    • 250,000 visits

    • 40 GB of storage

    • Free SSL and CDN

    Choose

    Organization

    $800

    /mo

    For those with advanced needs and ever-increasing operations.

    • 20 instances

    • 400,000 visits

    • 50 GB of storage

    • Free SSL and CDN

    • Priority support

    Choose

    Enterprise

    $1,600

    /mo

    If you can dream it, our Solution Architects can build it.

    • 60 instances

    • 1,000,000 visits

    • 100 GB of storage

    • Free SSL and CDN

    • Priority support

    Choose

    Elite

    $3,200

    /mo

    For this amount of money, we're happy to just do the work.

    • 150 instances

    • 3,000,000 visits

    • 250 GB of storage

    • Free SSL and CDN

    • Priority support

    • We basically just do your job

    Choose

    Fullscreen Slider

    Who doesn't like a nice fullscreen slider from time to time? Dramatic layouts such as this are easy to achieve with Cornerstone's Elements. Swiping has been disabled to avoid “trapping” users (never fun).

    This is a fullscreen slider.

    Content is centered on both axes.

    Place anything you want in here.

    The choice is yours.

      Timeline Slider

      A unique take on a popular layout, this slider leverages the Element Conditions built into Cornerstone to output variable content. Swiping has been disabled to showcase a “click-through” process.


      Ouroboros Protocol

      The Ouroboros proof-of-stake consensus protocol is the core mechanism of the Cardano network, defining the way nodes reach consensus about the state of the ledger.

      Ada Cryptocurrency

      Based on the Ouroboros proof-of-stake consensus protocol, ada is one of the most respected cryptocurrencies, and has one of the highest market capitalizations.

      Cardano Block Explorer

      The Cardano block explorer allows users to see information about the latest transactions. Searches can be made on addresses, transactions, epochs, and slots on the Cardano network.

      Daedalus Wallet

      Daedalus is IOHK's official desktop wallet for Cardano and the ada cryptocurrency. It is a full-function desktop wallet available on Windows, Mac, and Linux.

      Paper Wallets

      The introduction of paper wallets in Cardano provides users with a safe offline 'cold' storage option for ada, making it easy to store and receive ada offline.

      Faster Blockchain Sync

      Cardano SL 1.3 included enhancements to speed up syncing of the blockchain. Tests have shown wallet syncing occurring between 1.5 and 4 times faster, depending on the network environment.

      Optimized Block Storage

      More efficient storage improves performance for operations that use locally stored blockchain data, especially wallet restoration and blockchain synchronization.

      Cardano Byron Testnet

      The Cardano testnet is a free-to-use blockchain that is designed for testing purposes. It runs code that is the latest Byron release version.

      Integrate Nix Tooling

      The introduction of Nix tooling into the internal development processes of IOHK has allowed the DevOps team to create more robust deployment pipelines.

      Commit Visualization

      Medusa is a 3D graphical tool that shows the history of Cardano software development by plotting changes to GitHub files as they happen, allowing users to explore activity in the code base.

        Hero Posts Slider

        Take note of the word-by-word animations taking place when a new slide comes into view. Let it run automatically and enjoy the transition!

        Paged Product Slider

        The Paged Product Slider features a fun, De Stijl-inspired aesthetic that puts your content in the spotlight without distraction.

          Rotary Phone

          Rotary Phone

          $53
          .09
          Let's call each other like it's 1929. Alexander Graham Bell would be pleased to see this fine specimine in your home.
          Swingline Stapler

          Swingline Stapler

          $199
          .99
          Don't worry, we didn't take this one from Milton, so the building shouldn't end up in a towering inferno.
          Game Boy (Green)

          Game Boy (Green)

          $89
          .99
          The perfect companion for your quest to be a Pokémon master. If you're a Bulbasaur starter, this one is for you.
          Game Boy (Purple)

          Game Boy (Purple)

          $89
          .99
          Maybe green ain't your thing? If that's so, this purple variation might be your ticket. Link's Awakening included.

          Hero Prompt Slider

          This layout includes a unique take on slide navigation that feels like it's baked into the content. Click “More Courses” to see for yourself! Swiping has intentionally been disabled for this particular design pattern.

          Take Your Business to the Next Level

          We are a multidisciplinary creative consultancy that specializes in data-mining realtime social metrics in application towards blockchain technology.
          • 8 years in operation
          • 728 TB of data mined
          • 1B in quarterly profits
          • 4k NFTs purchased
          Get Started Today
          More Courses
          Hero Content Image

          Increase Your Profits by 3,267%

          Enroll in our course and take advantage of our proprietary methods which are 100% guaranteed to take your profits into the stratosphere.
          • 817 hours of content
          • 49 course modules
          • 23 experts involved
          • Get certified today
          Get Started Today
          More Courses
          Hero Content Image

          Logo Carousel Slider

          Cornerstone's sliders can accommodate variable width content. Notice how these logos are always centered with each autoplay interval no matter their dimensions (swiping disabled).

          Stacked Testimonial Slider

          Create faux vertical scrolling areas with a click by pairing stacked sliders with Cornerstone's scroll effect animation library.

          • Kari Rasmussen

            Kari Rasmussen

            Google
            Sometimes a product comes into your life that makes you wonder what you ever did without it. For me, this is that product.
          • Azul Baldwin

            Azul Baldwin

            Facebook
            I can't believe how much I love this thing. It has absolutely changed my life for the better.
          • Vivianna Kiser

            Vivianna Kiser

            Spotify
            After months of hearing about this thing from my friends, I finally decided that I needed it. I'm not disappointed!
          • Jordy Eubanks

            Jordy Eubanks

            Disney
            When you find something this good, you have to let everyone know about it.
          • Taelynn Thorpe

            Taelynn Thorpe

            Apple
            If I had a nickel for every hour of time this thing saved me in my workflow, I'd have so many nickels that I'd need a coin roller!

          Perspective Carousel Slider

          Under the hood, all slides feature custom properties that can be used to create unique transforms like this perspective coverflow effect. Due to these more involved transforms, swiping has been disabled.

          Image Gallery Carousel Slider

          A beautifully simple gallery that features your content and includes optional descriptions if desired, which are revealed on navigation.

          • Gallery Image
          • Gallery Image
            This is an optional description that can be placed on any image.
          • Gallery Image
          • Gallery Image
          • Gallery Image
            Here is another optional description that can be placed on any image.
          • Gallery Image
          • Gallery Image

            Standard Testimonial Carousel Slider

            Slides can leverage powerful filter and transform effects directly in the browser to design “in” and “out” appearances.

            • Vivianna Kiser
              After months of hearing about this thing from my friends, I finally decided that I needed it. I'm not disappointed!
              Vivianna Kiser
              Creative Director at Spotify
            • Kari Rasmussen
              Sometimes a product comes into your life that makes you wonder what you ever did without it. For me, this is that product.
              Kari Rasmussen
              Chief Design Officer at Google
            • Azul Baldwin
              I can't believe how much I love this thing. It has absolutely changed my life for the better.
              Azul Baldwin
              Senior UX Architect at Facebook
            • Jordy Eubanks
              When you find something this good, you have to let everyone know about it.
              Jordy Eubanks
              Imagineer at Disney
            • Taelynn Thorpe
              If I had a nickel for every hour this thing saved me in my workflow, I'd have so many nickels that I'd need a coin roller!
              Taelynn Thorpe
              UI/UX Research at Apple

              Autoplay Progress Slider

              Easily create unique UI Elements using CSS custom properties provided by Cornerstone's Slider API.

              Slide Title

              This a short blurb of text about whatever the image is showing. It is effective to keep it simple.

              Learn More

              Slide Title

              Another One

              Write something engaging here that sparks the user's interest. Again, it's always nice to keep things short.

              Learn More

              Another One

              And Another One

              We can keep this content moving as long as you want it to. Fill up your slider with whatever content you have.

              Learn More

              And Another One

              People Carousel Slider

              This slider features our marquee autoplay option, which constantly progresses in a linear fashion to create an engaging take on an otherwise “static” piece of content (swiping disabled).

              The 2024 Collection

              Shop Now
              Model
              Model
              Model
              Model
              Model

              Next, let's take a look at the course. In addition to all of those beautiful sliders, you get expert training from Themeco lead developer Kory Wakefield.

              Kory built the first version of X, and is one of the most talented front-end developers in WordPress today.

              Look over his shoulder as he takes you step-by-step through the settings and thought process for each slider. Check out just a sample of what you will learn.

              • Screenshot

                Video 1: Pricing Slider

                21 Minutes

                Discover how to use the new Slider Element to build beautiful pricing sections. You will learn…

                1. A neat trick for automatically adjusting all font sizes, padding, and positioning with the click of a button.
                2. How a simple transform can vertically center the scrolling arrows…the right way.
                3. How to make your slider “listen” to whether you're at the beginning or end of the chain. This is a super high-end polish item that will make all the difference in your final design.
                4. The best scroll effects to give your navigation items that subtle pop and animation.
                5. How the slide balance control can give the perfect transition animation for scrolling through different pricing levels.
              • Screenshot

                Video 2: Fullscreen Slider

                8 Minutes

                Discover how to create an engaging fullscreen slider. You will learn…

                1. How to use a background color to make the transitions less jarring.
                2. Why you should NEVER use swipe interactions on a fullscreen slider.
                3. Why 100vh is the perfect min height, and what it will do for you (and your visitors).
                4. One of Kory's favorite Font Size hacks.
                5. One of Kory's favorite Mix Blend mode hacks.
              • Screenshot

                Video 3: Timeline Slider

                14 Minutes

                Truly limitless possibilities with this horizontal timeline slider. You will learn…

                1. The secret power of the “At Edges” container option when creating timelines or stepped journeys.
                2. How min-width can give you the perfect experience for mobile visitors.
                3. How to use a Looper to setup and mange the line of your timeline.
                4. How Done, Todo, and Goal can be used to show progress.
                5. How to use multiple scroll effects simultaneously.
              • Screenshot

                Video 4: Hero Posts Slider

                18 Minutes

                Did you know you can create “Hero” Sliders? You can, and we'll show you how! You will learn…

                1. How the swipe interaction works and how to NOT trap your visitors.
                2. The power and importance of the Global Container.
                3. How to use multiple slide paginations.
                4. How to stagger effects to create a beautiful, animated sequence.
                5. How you can “hide” words until they come into view with overflow.
              • Screenshot

                Video 5: Paged Product Slider

                26 Minutes

                Our De Stijl slider de jour (say that three times fast). You will learn…

                1. How to create responsive “pages” of content in your sliders.
                2. Why the Slide Pagination Element included in Cornerstone is so powerful.
                3. How to utilize the slider's “Gap” control as a faux border between your content.
                4. A creative centering trick for carousel sliders.
                5. How to style markup “proactively” in a way that it anticipates various types content and responds accordingly.
              • Screenshot

                Video 6: Hero Prompt Slider

                20 Minutes

                This is us pushing the new Slider Element to the limit. You will learn…

                1. How adaptive heights can work with different slides in the sequence.
                2. The power of CSS Grid and how it can work with the Slider Element.
                3. How to make the content of your slides respond differently at different breakpoints.
                4. How to create a staggered transition…automagically.
                5. How to use a button or text to function as next or previous.
              • Screenshot

                Video 7: Post Scroll Slider

                11 Minutes

                Discover a fun and modern way to display content. You will learn…

                1. How to to create a Netflix inspired presentation of content.
                2. The importance of link child interactions for this type of slider.
                3. How to use min height and max height to create a floor and ceiling.
              • Screenshot

                Video 8: Post Carousel Slider

                16 Minutes

                Learn how posts can be presented in a creative carousel. You will learn…

                1. A fun hack that allows the shadow on hover to match the tint/hue of your photo.
                2. How pagination can be both functional and/or aesthetic. Get creative!
                3. The difference between scrolling by slide and content.
                4. How to use “transition juggling” to create some truly inventive effects.
              • Screenshot

                Video 9: Logo Carousel Slider

                15 Minutes

                Show off your trusted partners and biggest fans with this powerful engagement pattern. You will learn…

                1. How to leverage the “Auto” slide width feature, which allows for smooth transitions between slides with differing dimensions.
                2. The subtle visual tweaks that need to be implemented for this technique to work just right.
                3. How to use CSS filters in a creative way to draw the user's attention towards the current slide.
                4. A particular nuance of the CSS contrast() filter and how to get more mileage out of it.
              • Screenshot

                Video 10: Stacked Testimonial Slider

                18 Minutes

                Got a lot of people who love what you do? Share their words without overwhelming your visitors using this pattern. You will learn…

                1. How to use the Grid Element to position your slider markup and make easy changes to its sizing from one place.
                2. Why you need “auto” Grid rows to account for variable height content in your slides.
                3. How to create a faux vertical sliding container using the Stacked slider mode paired with scroll effects.
                4. How to implement a unique, vertically oriented slide navigation.
              • Screenshot

                Video 11: Perspective Carousel Slider

                20 Minutes

                Take your scroll effects to a whole new level with this module. You will learn…

                1. The secret “balance” and “distance” properties applied to slides that can be used for all sorts of creative effects.
                2. How to create a 3D coverflow effect.
                3. About the new CSS clamp() function and how it can be used to wrangle tricky 3D rotations.
                4. How to pair interaction effects (i.e. the hover state) with scroll effects to create something truly unique.
                5. How to use responsive navigation for your sliders that create an ideal user experience across all devices.
              • Screenshot

                Video 12: Image Gallery Carousel Slider

                17 Minutes

                Who doesn't love a classy image gallery? You will learn…

                1. How to setup your markup in ways that will help you get more mileage out of your designs.
                2. About the special “escape hatch” Cornerstone's sliders have that can allow your content to always stretch fullwidth across your site, no matter now deeply nested your markup is.
                3. How to output optional content in your designs using Element Conditions.
                4. How to pair conditional content with scroll effects to draw the user's focus towards that content only when you want them to.
                5. How using blur on your backdrop filters can be implemented to reduce the visual noise around your content.
              • Screenshot

                Video 13: Standard Testimonial Carousel Slider

                14 Minutes

                Got even more glowing recommendations from your customers? With this slider pattern you can make them shine. You will learn…

                1. How to vertically center your slider navigation on your content using a helpful CSS trick.
                2. Why you need the “No Pointer Events” option found in Cornerstone to properly implement your vertical navigation without obstructing your user experience.
                3. How the “Align” control can change the feel of your content with the click of a mouse.
                4. How to use scroll effects that pair CSS filters, transforms, and opacity so that inactive slides transition from a smaller, grayscale output to fullscale with color when becoming the “current” slide.
              • Screenshot

                Video 14: Autoplay Progress Slider

                21 Minutes

                Custom UI Elements are easy to create with Cornerstone's Slider API. You will learn…

                1. All about the autoplay progress custom attribute and how to build a progress indicator.
                2. An incredibly inventive way to use clamp() that leverages this property.
                3. How to combine transform and opacity effects for a smooth transition between content.
              • Screenshot

                Video 15: People Carousel Slider

                11 Minutes

                A simple and attractive slider that features a creative cut-off aesthetic. You will learn…

                1. How to add subtle movement using the “Autoplay” control to what would be an otherwise static section of content, helping it to stand out on your page.
                2. How to size slides using the vmin unit paired with a “floor” and “ceiling” to control your content.
                3. The difference between box-shadow() and the drop-shadow() filter.
                4. How to apply Photoshop-esque filters in the browser.

              FAQ