Post Contents
The Challenge
On my Elementor Testing Site, I set out to create a menu that would scroll left to right, bottom to the top when the user scrolls their mouse down.
This effect is pretty taxing on browsers, so it tends to work better on faster machines and connections.
The Basic Concept
We will set this up with 4 sections
The first section will contain an HTML widget that we will use to hold our jQuery
The second section will be padding that will be used to push our content down the page when the page first loads. Since our layout goes from bottom left to top right, without this padding the first view would be empty with content off the screen to the right.
The third section is where we will add in our actual sliding menu.
The fourth section will be used to display an alternate version of our menu for the mobile view.
Getting The jQuery Into Elementor
An Html Widget is added to the top to load jQuery and then call the custom javascript that I have in a different folder. That’s the main5.js file.
It’s also going to set the starting position for my column that houses my inner sections with the grids in them.
The JavaScript
Nothing too complicated here, this is just telling my class pg-container-box to move to the left as I scroll down the page.
The Top Padding Section
The Top Padding Section is a giant (tall) section that pushes the rest of the content down the page so that it has room to scroll up.
The only reason this section has a class on it is so I can hide it on mobile.
I could have done this with Elementor advanced responsive settings, but I was keeping my code in CSS for this.
The Main Content Section
This main Section (Post Content Section) has the ID pg-angle-container, and class pg-angle-desk.
This Section contains my 2 Inner Sections.
You could use just 1 inner section for a simpler design, but Elementor limits your posts in a row to 6.
I used CrocoBlock’s JetEngine, which limits you to 7.
I needed more than 7 posts for this effect to be “cool”, so I put 2 side by side, so 2 inner sections with 7 posts in each.
Eventually, this will be more inner sections. Theoretically, you could make it as long as you want… I think?
Inside the inner section columns, I have listing Grids (JetEngine).
You don’t have to use Crocoblock and JetEngine.
This could be made with the free Ele Skins (Ele skins might even let you have more than 6 posts in a line?).
I also don’t see any reason why you couldn’t use standard Elementor posts for this, you just have fewer styling options.
The Posts
I used JetEngine listings to style my posts the way I wanted and I added the title and Taxonomys below the title.
I added a little hover effect to give it some extra character when you roll over a post.
The Mobile Section
I added some simple additional CSS to the global site setting CSS.
I used Media Queries to Hide the main section on mobile and display the mobile section.
Final Thoughts
This is largely based on how big your content is. You will have to play with the spacing to get it working the way you want.
When I go to add in new items past 14, I’m going to have to modify my top section padding and a lot of the widths.
I’m confident there is a better way to pull this off. Preferable in a way that you can add items to it and not have to change the settings.
If someone has a better way to do this, I would love to see it!
If you would like to see more of the CSS or have any questions, please leave a comment!
