On the homepage (at the time of this writing) you will notice a post slider. This is not a native Avada feature. It is more than likely you will recognize it from the CSS Tricks website that Chris Coyier built and maintains. He implemented this look a couple of years ago and I have always wanted to do something similar, but never took the time to try. Enter Oxygen Builder. I was taking a look at the Oxygen Facebook group and noticed a new tutorial from Elijah showing how to do this in Oxygen. As I watched, I started thinking about how this could be done with Avada. While it seemed easy enough, I knew there might be some bumps along the way and there were, but after a couple of hours, I had a working solution. The key is custom CSS and being able to identify the right classes to target.

The Post Card

The first thing to build was the post card. There is nothing clever about this card, except you don’t do anything except add the dynamic data elements and a custom CSS class is applied to the container — I used .trick-cards as my class name. There is a 32px padding on all sides and the content layout is space between.

  • Date
  • Title
  • Category
  • Excerpt
  • Spacer (set to grow = 1)
  • Nested column (15%+85%)
    • Feature image
    • Author

Post Cards Element

Create a column and give it a class name — I gave mine the class of .scroller. Add a post cards element.

By default, Avada is fairly stuck in its ways when it comes to column counts, and I could not find a way to get more than six columns. The trick in this instance is to set the column count to zero — I do suspect with the custom CSS that will be added in the next step, this probably doesn’t matter. I built the post query to show posts, based on categories, total posts to twelve (this is arbitrary), and no pagination. I set the post card alignment to stretch, but again with the CSS to be added, this probably won’t matter.

The CSS

Now comes the magic. (I would not have known to do some of this without the video linked above.)

The cards

Post cards are an unordered list that renders the card layout based on the query loop parameters that you set in the post cards element. This list is the key to the styling. Reference the name you used for your columns, start to style the element. The first thing to do is set the overflow so that the content can move beyond the boundaries of the column. Next, transform your list into a grid. I tried using flexbox but that was not successful so I turned to CSS Grid. I am a novice at this feature so I turned to CSS Grid Generator which allowed me to pick one row and the number of columns. Next is setting negative margins on the cards to create the overlap. The addition of the z-index was to overcome an issue with the content of the nested column. The transform classes are added for the on-hover effects. The focus-within was for accessibility (keyboard navigation) if a user relies on a keyboard to navigate the list.

/* Applied to the column */
.scroller{
  overflow-x:scroll!important;
}
.scroller ul.fusion-grid{
  display:grid!important;
  grid-gap: 1rem;
/* the number of columns (12) should match the number of posts in the post cards loop */
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
}
.scroller li:not(:first-child){
  margin-left:-148px;
  z-index:100;
  box-shadow: -2rem 0 4rem -2rem #000;
}
.scroller li:hover,.scroller li:focus-within{
  transform:translateY(-1rem) rotate(3deg);
}
.scroller li:hover ~ .trick-cards,.scroller li:focus-within ~ .trick-cards{
  transform:translateX(148px)!important;
}

UPDATE: The scroll bar

I am a MacBook user, and the scrollbar doesn’t show up by default and the styling is okay, but I noticed that Windows machines want to show the scroll bar all the time and the styling is not so great. Fortunately, modern browsers make it easy to style. The border used allows the thumb (the part you move) to appear larger than the track

scroller::-webkit-scrollbar {
    height: 30px;
  }
  .scroller::-webkit-scrollbar-track {
  background: #404040;
  border-radius:0;
  border-top: 12px solid #282828;
  border-bottom: 12px solid #282828;
  }
  .scroller::-webkit-scrollbar-thumb {
    background:#ed9a36;
    border-radius:20px;
     border: 10px solid #282828;
  }

The card

Aside from the line of CSS that targets the cards in the transformation, the CSS for the card is fairly simple. Setting the default height and width, a background gradient, and the border-radius. The styling of the anchor tags was added to override the default link colors.

.trick-cards{
  min-width:300px!important;  
  min-height:350px;
  transition:.3s all ease-in-out;
  background: linear-gradient(85deg,#434343,#262626);
  border-radius:10px;
}
.trick-cards a{
  display:block;
  color:#ffffff!important;
}
.trick-cards a:hover{
    color:#e08733!important;
}

Video Overview

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

Originally published on Feb. 26, 2022

woman sitting on stall near wall mounted deskOffset Image Recipe
clear glass jars on brown wooden shelfLabeling Containers

12 Comments

  1. Darrin Stern September 26, 2022 at 9:40 pm - Reply

    Would you ever make a video of how to do this? I have tried on and off to copy this style for my website. I think this would be a cool way to show testimonials.

    • Stephen Walker September 28, 2022 at 5:42 pm - Reply

      Darrin, video posted.

  2. Dash October 9, 2022 at 4:01 pm - Reply

    how did you create multiple columns for slider in post card. when i try to do in library-postcard, can only make single column single post

  3. Mohammed Maaz October 9, 2022 at 4:16 pm - Reply

    also can u send me the css style to apply for mobile version as i can see you have made a beautiful carousal slider for mobile as well. i am seeing any mobile version css here

  4. Stephen Walker October 9, 2022 at 6:14 pm - Reply

    This is a result of the custom CSS – overflow-x combined with the grid layout. Same with the mobile view.

  5. Maaz October 15, 2022 at 6:46 am - Reply

    Hello, I Hope you received my comment yesterday, regarding how to make columns in a container slide or float next to each other instead of stacking one upon other in mobile views specially.

    • Stephen Walker October 15, 2022 at 8:00 am - Reply

      As I posted previously, this was done using CSS grid and setting the overflow to allow the section to scroll horizontally.

  6. Maaz October 15, 2022 at 8:51 am - Reply

    i am still not able to execute. since i am not referring the post cards, but normal columns to scroll sideways in mobile view instead of stacking. can u write similiar css or post a video would be of great help

  7. Maaz October 15, 2022 at 8:52 am - Reply

    or you can write me at mmaazda@gmail.com

  8. Maaz October 16, 2022 at 4:18 am - Reply

    Thank You Brother, Really Appreciate

  9. Arjuna Baruch November 2, 2022 at 1:25 am - Reply

    I loved this tutorial, thanks a lot! Now you have a new suscriptor on YouTube and

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023