Different shape dividers

Ask the community
1

Hi there!

It’d be amazing if you could enable the ability to use different shapes block dividers, or at least allow to upload custom dividers svgs, such as the ones generated from websites like https://www.shapedivider.app/

It’s a minor change that adds a lot of character to a website. I was surprised to know that there’s no way, even through custom code, to add these dividers given that you guys have free custom svg shape generator sites.

Thanks and keep it up, I love Sotr so much!!
Javier

2

Hi Javi!

I am not so sure this can’t be done with custom code! I played around a little and was able to get this demo page to kinda sorta work. I bet with a little more tweaking it could look decent.

The way I did this was to wrap the generated CSS in a <style> tag and put it into the Code Inside Header for the page, then paste the generated HTML into the Code Inside Footer for the page.

I was also able to get it to load in a custom code block within the page.

1 Like
3

Hi David,

thanks so much for your response. The reason why I thought it wasn’t possible is because of this other thread Custom Shape Dividers

But if you’ve managed to do it that is great news!!
Now, I can’t manage to get it working. Did you change something else?

I did as you mentioned and wrapped the CSS in a tag inside the header code of the page, and the HTML copied and pasted on the Footer custom code.

(disclaimer, I don’t code)

image
image318×1007 56.8 KB

Thanks again and I hope this thread is useful for other people too!
Javi

5

Correction. it works!! it was as simple as that.

However, because I have it set to be placed at the botto, it is currently being placed at the bottom of the screen (position: absolute). Do you know what would need to be changed to place on top or under a particular block??

Thanks!

6

I don’t off the top of my head, and honestly I am terrible at CSS so I’m not going to be much help on that part. Fortunately there are others on here who know CSS well, or at least there have been in the past!

7

@Javi To get it to show up somewhere else on the page, you might try taking the custom HTML code inside the footer and putting it in a custom code block on the page instead and moving the block to where you want it to show up on the page (i.e., under a particular block). No edits to the CSS would be necessary. Without testing it, I can’t guarantee that would work, but based on what I can see of the code in the screenshot you provided, I think it should work.

1 Like