Archived topic
SVG Background Section Divider
13 replies · Started by Tim on April 6, 2020
Hello
I see almost 1 year ago there was a query about a custom shape divider
I would like to add gentle curve (wave) shapes to divide sections on a Front Page.
I'm guessing SVG is the best way to go, which I could generate and point to in CSS as described here:
https://css-tricks.com/creating-non-rectangular-headers/
header::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: url(divider.svg);
}But I'm wondering if there are any improved techniques, suggestions found on this and the previous support query a year ago ?
Thanks
Hi there,
that method is still perfectly valid - its key benefit is you can add them to HTML elements that you do not have the ability to edit.
If you can edit the page you can of course just add the SVG as an Image or Inline.
We're also looking at including Dividers in our GenerateBlocks plugin at a later time.
Hmmm
So I'm wondering what would be the optimum method of adding SVG backgrounds/dividers to sections of content running down a Front Page?
I'm expecting to use a combination of the wpsp lists, cc child page lists, blog list, text and buttons.
I also found an example of SVG animation in this codepen that might work nicely: https://codepen.io/cmdw/pen/vQqzyB
If you're using the Block editor with full width containers then simply add the SVG markup to a HTML block.
Thanks David
When employing the full width the list elements jump up in size, as expected of their CSS. Is there a neat way to pull them back to their previous containers ?
Or in other words is there a way to alternate the block container widths, eg full width for the dividers only ?
Additionally, I decided to add the last SVG, which sits above the footer, to the entire site using a Hook, but none of the available Locations gives me full width immediately above the footer. What should I use in this case ?
With the container set to full width - use a Group Block to wrap your content. And for the fullwidth dividers just add them outside of a group block.
The before_footer hook is fullwidth:
Great, grouping puts the content in a container I needed.
As for the Hook, I had set it to before_footer previously, and have set it there now again.
If you now look on any page/post beside the Front Page, you will see the divider is not fixed to the top of the footer, it may appear above or below to the top of the footer.
On a related note I had to disable the Hook I created for the footer divider, to be able to see the Custom Post Navigation, perhaps because they are competing for that same location.
I'm not sure how it will look yet, but I would like to attempt placing the SVG in front of the Custom Post Navigation with both aligned to bottom.
Does this mean I need to add the SVG to the Custom Post Navigation hook and apply a 2nd Hook with the SVG applied only to Pages ?
Perhaps there is a cleaner way.
Your .waves CSS has a float: left; property which is causing the footer to float up behind the SVG.
You can adjust the Priority of the Hook - a lower number (0) executes before a higher number
OK removing float: left; answers the floating issue.
The Hook for the SVG had a lower Priority (10), making it appear above the Custom Past Navigation (100). Setting the SVG's Priority to (101) now places it where required, immediately before the footer.
My intension is to place the Custom Post Navigation behind the SVG. I did that by adding position: relative; and bottom: -40px; like this:
#post-nav a {
-webkit-box-flex: 1;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
box-sizing: border-box;
position: relative;
bottom: -40px;
}This looks good to me. Is that the optimum way to deal with this situation ?
On a separate note I notice that the waves begin to exhibit higher peaks and troughs relative to the viewport width. So on smaller widths the effect no longer looks like gently undulating waves, but just some arbitrary cycling curves. I see that the SVG has viewBox="0 24 150 28 " and preserveAspectRatio="none" I guess I need to change something here, but nothing I've done with the preserveAspectRatio seems to help.
Any ideas ?
That method is perfectly valid.
Your .waves CSS is defining the height of the waves - simplest method would be to adjust the height for smaller screens in a media query
I just thought that with a property like preserveAspectRatio it was some indication of being able to do this perfectly without break points.
I seemed to get something closer to that intention by setting viewBox="0 0 100 100"
Thats out of our scope - you might find this of use:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
Thanks.
Yep I read that already.
But anyway I got close to what I was after by changing the viewBox values.
Glad to hear that
