[Resolved] SVG Background Section Divider

Home Forums Support SVG Background Section Divider

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1229357
    Tim

    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

    #1229682
    David
    Staff
    Customer Support

    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.

    #1231036
    Tim

    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

    #1231151
    David
    Staff
    Customer Support

    If you’re using the Block editor with full width containers then simply add the SVG markup to a HTML block.

    #1232002
    Tim

    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 ?

    #1232335
    David
    Staff
    Customer Support

    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:

    https://docs.generatepress.com/article/hooks-visual-guide/

    #1233446
    Tim

    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.

    #1233573
    David
    Staff
    Customer Support

    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

    #1234652
    Tim

    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 ?

    #1234988
    David
    Staff
    Customer Support

    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

    #1238123
    Tim

    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"

    #1238345
    David
    Staff
    Customer Support
    #1239384
    Tim

    Thanks.

    Yep I read that already.

    But anyway I got close to what I was after by changing the viewBox values.

    #1239637
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.