I am very new to Webflow and would like to know the best practice to place two objects at the sides of my webpage. I’ve attached a simple mockup image to illustrate further. I am no coder so a simple solution would be best. The two magenta objects should not move during scroll, they should be there almost like a background.
If the screen size changes the pointy end that is directed inward should still hit the section line. How can this be done?
Thanks a lot for the reply. When I set the object to fixed it disappears. I assume the object should be placed inside the section it is suppose to fill (or one of them)
That was my initial solution, but it does not keep its place when changing to different size resolution monitor which is the main problem with this method. I need it to hit the section line with the point going inward on different resolution sized monitors, it needs to stay put.
Liked the idea of design you posted, so tried a few solutions myself. Tried absolute position on the purple elements between sections, and also to skew-transform the sections with a purple background behind them. However, I found this solution of transparent borders to be nicest, even though it would require a set height on the sections:
If you have any other suggestion on this particular challenge or concerning anything else I welcome feedback. This is my first Webflow page so there might be technical mistakes.
I placed a project sharing link in the comment above. I would appreciate it greatly if you took the time to suggest solutions that would work with it. The two objects which I need help with is the once on both sides.
Thanks for the quick reply. I’ve added an image on how I want it to look. (keep in mind that they need to stay in place on different screen resolutions.
I am actually not working with the megenta objects, that was just a quick mockup. If you look at the post below, how am I to place the objects? With Absolute positioning and dragging the object into place?
I understand you’re not using the magenta objects, but regardless of what the object is, put it into your design program (Affinity, Photoshop) and split it exactly 50%.
Then the one half you add to one section and it becomes far simpler to do.
Ye I think I got it to work now. The issue was a top margin that made it so I couldn’t place the object without moving it with the slide movers. So I removed the margin and it seems to work. Im taking a closer look at it now.
Ah yes, I can see that now on your link that you’ve split the image. Perfect. I was going to point out about the margin on your SVG file, I had just opened it up in Affinity.
No, the issue was not solved. It would have been nice but no matter what I did it would not stay in place. I had to scrap the design choice for an easier one. Thanks for replying though