Adding Div inside of CMS Grid Structure

Design help General
#1

Is there a way to add a div that is not apart of the current CMS grid? Check out the picture below. This dropdown is a CMS filled grid and I have a spot that I want to fill(red box) but it is not the same CMS collection. Is this possible? Do i need to make a div that has an absolute position and do it like that? I am wondering if there is a better way.

image
image1165×630 132 KB

#2

Hey, Cam! Spent a little bit of time with this trying a few things and it does seem like using absolute position is about the only way to get this done. It seems like you’d also have to always limit the collection to a certain number of items so it always falls in the bottom corner. I’m not sure how you’d achieve a true ‘wrap’ where the number of items wouldn’t matter.

I threw together a quick example for you to reference. Here’s a read only link. Hope this helps. Let me know if I can clarify anything or if you end up finding a better solution!

#3

Thanks for confirming this. I appreciate you.

1 Like
#4

Hey @camputty

You can easily do this with Javascript.

Step 1:
Give all of the CMS items a Class name, let’s call it “cms-custom-grid-item”

Step 2:
Give the same Class name to the Div that you’d like to add to the grid.

Step 3:
Create a new grid and style it the way you want… give it a Class, let’s call it “new-custom-grid”.

Step 4:
Add the code below to your Page Body.

<script>
$(".cms-custom-grid-item").appendTo(".new-custom-grid").show();
</script>

Step 5:
If you’re happy with the results, simply hide “cms-custom-grid-item” and the code snippet will show it once it loaded and ready to be shown.

EDIT: I’ve added Screengrabs to demonstrate.

Hope this helps!

~ Rhino

CMS Custom Grid - Designer
CMS Custom Grid - Designer1920×948 157 KB

CMS Custom Grid - Published
CMS Custom Grid - Published1920×948 150 KB

1 Like
#5

Huge! Thanks for this Rhino.

1 Like
#6

This is awesome! Thank you for sharing.

1 Like