Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
  • #1125400

    Hi there!

    I’ve added the diagonal border at the bottom of content section, but I want it to have a radius. For example the pink element here: How can I add border radius?

    To make it easy for myself I thought I design a .png file which I can put as background image in content section and overlap the section above, but:

    When I use png as background in content section and change margin top to -100px, the transparent area is white in stead of transparent. The blue overlay of the section above is overlapping the backgroundimage from section above. What class should I use to change z-index?

    When I use png as background in 1/1 column and change margin top to -100px the image is overlapping the section above, but the element is not full width. Is it possible to make a 1/1 column full width?

    See private content for web details.

    Hope you can help me with both options! Thanks a lot!



    Sorry – i think this will work – but with my method you got that little message posibility in the gradient section and –
    you can have all gradients (even images) in that second color-section without making allways another png file for it.

    create your layout in this way:
    you need for it two color-sections
    the first color-section with your image and the content – i give a custom class to it:
    the following second color-section – this is only for the gradient ( and maybe one short info text) with custom class:

    the image and the gradient could be done in the alb element itself as you know allready.

    put this to your quick css:

    .avia-section.background-with-content {
      border-bottom-right-radius: 200px;
      z-index: 5;
      position: relative;
    .avia-section.background-with-message {
      position: relative;
      margin-top: -200px;
      z-index: 0;
    .avia-section.background-with-message .container {
        height: 300px !important
    .avia-section.background-with-message .container .content {
        vertical-align: bottom;
        padding-bottom: 20px !important

    looks this way:

    Edit: on very small screens you had to make a rule for that message in the gradient container.
    padding-bottom or font-size etc.


    the height of the second color-section is set here via css – you can do that too on alb element.
    This height has to be the amount of border-radius of the first color-section plus that little extra height to have the bottom distance.
    the negative margin-top has to be on minimum the border-radius.

    edit: as you can see on example page – you can have here on the left another border-radius.


    Nice, thank you!! I only use the background image overlay in first section and the layer is overlapping the 2nd section. How can I fix that?

    And is it possible to add the border-bottom-right-radius in a diagonal border section? Like a diagonal border included radius?

    Thanks a lot!!


    i have to see your site to give advice


    I now have added grey image as ‘border’ over the first section. In the first section I have an image and over the image there is an image-overlay.

    Can you see it now or should I add the border bottom left radius back again without the grey image?



    first of all – the png file has to have the color on non-transparency part like the following color-section – in your case: #f5f3ed

    now i will see …


    well if you put in quick css this – you will see that it could work this manner you started.
    But : there’s too much else wrong. Have a look at your navigation and the logo behaviour on small screens. Mobile devices so to speak.
    I think one should first dedicate oneself to this topic. And then go to Borderstyling.

    #av_section_2.test3 {
     position:relative !important;
     z-index:1 !important;
     background:transparent url( !important;
     height: 340px;
     margin: -300px auto 0;
     background-size: 100% 100% !important;
     background-repeat: no-repeat !important;

    what would i do?

    i prefer to work with svg – more precise and you can influence fillings with quick css if svg is an inline svg.

    i do always use that little svg support plugin. It has a lot of advantages. ( f.e. seeing in media library svg previews and you can replace img src svgs by inline svgs etc. pp.)

    your png – i created a svg of it – code is very simple so i decided to insert it via child-theme functions.php to the page.

    function insert_svg_mask(){
    	$('.avia-section.maskierung').prepend('<svg version="1.1" id="bright-mask" xmlns="" xmlns:xlink="" x="0px"y="0px" viewBox="0 0 1500 350" style="enable-background:new 0 0 1500 350;" preserveAspectRatio="xMaxYMax meet" xml:space="preserve"><style type="text/css">.maske0{fill:#6CB52D;}</style><path class="maske0" d="M0,185.5l99.4,89.4c42.8,38.5,100.7,55.7,157.6,46.7l1081.2-170.8c57.9-9.1,108-45.5,134.7-97.7l27.1-53v361.6 H0V185.5z"/></svg>');
    add_action('wp_footer', 'insert_svg_mask');

    what you now have to do is to give to the following color-section the custom class: maskierung
    because of aspect ratio ( 1500:350) we can have this in quick css:

    .maskierung svg {
        width: 100vw;
        height: 23.33vw;
        top: -23.33vw;
        position: relative;
        z-index: 1;
    .maskierung .maske0 {
        fill: #a9c9c4;
    .maskierung .container {
        margin: -35vw auto 0 !important;

    you see i can influence the filling of the non transparent part of that svg. So you can use that for all your “deviders”

    see result here:


    btw: after you have seen the test-page i delete your images!
    it’s just to show you how it could look like.



    Thank you very much for the detailed help @guenni007 :-)

    Best regards,


    Nice, thank you!! I only use the background image overlay in first section and the layer is overlapping the 2nd section. How can I fix that?

    first get rid of that negative margin: margin-top: -330px; maybe you set it on alb element ?

    your png : 744/2480 = 0,3 that is the reason vor 30vw ( videoscreen width)
    you can change your code to – that will work too – but is not so precise ( vectorbased svg is much better)

    .test3 {
        position: relative !important;
        z-index: 1 !important;
        background-color: transparent !important;
        background-size: cover !important;
        width: 100vw;
        height: 31vw;
        top: -30vw;

    but think of the same non-transparent color : it has to be the same vallue as the following container ( #f5f3ed )
    Important: z-index has to be 1 otherwise the overlayed color will overlay the next section too

    after that your content of the next color-section has to go up:

    .test3 + div .container {
        margin: -40vw auto 0 !important;   
        position: relative;

    margin here is important for responsive case too!

    you can select it directly as #av_section_3 but the code above will automatically take the next sibling container.


    next comment to your navigation area.
    if you get rid with :

    .logo {
        margin-top: -100px;
        margin-left: -200px;

    on Enfold there is on : Header – Header Behavior : ” Let logo and menu position adapt to browser window ”
    Guess that this will fit better for your layout!

    you could do this instead :
    if you like it – i’ll show you how to.


    Yes, that is really nice!! Thank you so much!

    I still have to read everything carefully and try it out, but thanks a lot for this!!



    Did you need additional help or shall this topic be closed?

    Best regards,
    Jordan Shannon


    Hi, sorry I think I still need some help. I’ll let you know as soon as possible!! Thank you!



    Okay we’ll await your return.

    Best regards,
    Jordan Shannon


    @Guenni007 thank you so much! Sorry for my late response! I’m not sure if I like the element the same as the logo. I saw this and really like it:

    What is the easiest way to create this half circle? I’m not familiar with creating svg’s. Can you help me? Would love to learn about it!

    Thanks a lot!


    In stead of the circle I’m now trying to create the shape of my logo, but than another angle. A sort of chevron shape I guess.

    this is the code i’ve used:

    #chevron-creme {
    position: relative;
    text-align: center;
    padding: 0px;
    margin-bottom: -40px;
    margin-top: -40px;
    height: 0px;
    width: 100%;
    z-index: 1 !important;
    background-color: transparent;
    #chevron-creme:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 51%;
          background: #f5f3ed;
          transform: skew(0deg, 6deg);
    #chevron-creme:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: 50%;
          background: #f5f3ed;
          transform: skew(0deg, -6deg);

    I only want the border to be a little bit more rounded..

    See homepage for what I have created right now:

    Do you know how to make it more round so it looks more like the logo? Thanks!!



    I checked your homepage but cannot find the element you mentioned. Is the element moved?

    If you still have any issue please upload a screenshot/mockup to one of the below sites and share the link here so we can help you better :)

    Best regards,


    View post on

    Is this working? I meant the sort of arrow under the first header image!




    Sorry, at the moment it is not possible but maybe we will add this function in one of the future releases.

    Thank you for your understanding.

    Best regards,

Viewing 22 posts - 1 through 22 (of 22 total)
  • You must be logged in to reply to this topic.