Support Center Visit Demo License manager Buy @ envato

SVG in Sections : Non Rectangular Sections

zmahomedyzmahomedy
in BeBuilder
I am trying to create non rectangular sections using muffin builder ( similar to elements builder )
Is there a way of creating non rectangular  look & feel using muffin builder?

Ideally it the right place to create the non rectacgular look will be in the section, similar to the decorative svg,
however I have no idea where to enter custom html code that can include svg into the section area. 

The approached I took for test is to created a full column in a wrapper and used a visual editor item.
The visual editor item should take raw html code under the text tab, however any SVG code in the visual editor gets removed
apon saving the block. 

So I am stuck.
zak

Comments

  • PabloPablo
    Hello,
    You can insert any HTML code into the Column item of the Muffin Builder.
    With the Muffin Builder you can only change the width size from 1/1 to 1/6, you cannot change it to other shape than rectangular.
    Of course, you can attach some border-radius into it to make it circle or elipse ;)
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • zmahomedyzmahomedy
    edited July 2020

    so something like this  using svg

    https://css-tricks.com/creating-non-rectangular-headers/

    or 

    this

    with code like

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#0099ff" fill-opacity="1" d="M0,256L48,229.3C96,203,192,149,288,154.7C384,160,480,224,576,218.7C672,213,768,139,864,128C960,117,1056,171,1152,197.3C1248,224,1344,224,1392,224L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>


    Column Item works!

    https://ibb.co/txJVHW8

     however now my challenge is to get it across the entire full width of the screen. Not just bound to the box.

    Ideally I would like to use the section area where I will have a background image for that whole section 
    and using the svg to create a fancy divider for my secitons 




  • PabloPablo
    You can do that using the "Decoration Top" and "Decoration Bottom" background image in the section options, see the screen:

    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.