Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #167363

    I want two sections to be separated by a semi transparent wavy divider. Similar to this site:

    http://www.rikkazimmerman.com

    I made four 1600×156 png’s that are waved and transparent on one side and solid on the other.

    How do I go about inserting them so the transparent part covers the color section above or below it? I tried inserting it into a full width slider with just one image and the transparent part was solid with the background color and just looked weird. I also tried to make is a Scroll background and had similar results.

    #167463

    Hi Alex!

    Maybe you can add a large image as the Color Section’s background. Can you post the wave images here? A mockup of what you’re trying to do will help a lot.

    Regards,
    Ismael

    #167846

    My website is http://homesmartsecure.com

    Before:

    After:

    Divider:

    • This reply was modified 1 year, 1 month ago by  Alex.
    #167986

    Hi!

    Why not add the wave image on the LayerSlider background directly?

    Regards,
    Ismael

    #168009

    Because I plan on changing the layerslider to a color section. I want to put a sign-up form at the top of the page, so the spot where the layerslider was going to be, but then realized forms placed within layerslider aren’t responsive and don’t adjust size and on an iOS mobile device, you can’t even see the entire form because the layerslider cuts it off.

    Even so, that is not the only section I want to do that. Like below where there is a fixed background color section, I would like to add the wavy transparent divider there.

    Take a look at http://www.rikkazimmerman.com and you’ll see, it’s used all over the page dividing sections out in different colors. I would like to do something similar. I don’t know if this theme is capable of that though.

    Oh, and I may not make it wavy, or keep it that way. I may decide I prefer the look of say the dividing section of your homepage , or perhaps a ripped paper look or jagged teeth look. If it’s something that can be designed using css code, that would be cool, but how do you edit the css code of the dividing lines into a different shape than straight? I don’t necessarily need to place an image the way I have been trying to do it.

    • This reply was modified 1 year, 1 month ago by  Alex.
    #168231

    Hi!

    Add a Color Section then give it a unique ID for example “wave-section”. Apply the wave image as background image then configure the Color Section as follows:

    Background Image Position: Top Center
    Background Repeat: Stretch to Fit
    Background Attachment: Scroll
    Section Padding: No Padding
    For Developers: Section ID: wave-section

    Go to Quick CSS field or edit custom.css, add this code to move the section upwards until it covers part of the section above:

    #wave-section {
    margin-top: -50px;
    }

    Cheers!
    Ismael

    #168263

    I’ll try this out. The only issue i’ve found with this type of solution is that there is a black line that clearly shows where you place the color section. Is there a way to make the break clear instead of solid?

    • This reply was modified 1 year, 1 month ago by  Alex.
    #168603

    Hi!

    I’m not sure what you mean with “black line” but I think you want to remove the section border? If yes just insert following code into the quick css field

    
    .avia-section {
    border: none !important;
    }
    

    Regards,
    Peter

    #168881

    Thanks dude, that did it. I also tried to change the team member’s job title font color using this code, placed it in quick css and then tried custom css, and it wouldn’t stick. Do I have the wrong code?

    .avia-team-member-job-title {
    color: #000000 !important;
    }

    #168899

    Something is off. the image is moved up 50px’s, but the background color of the wave is still white eve though it is a semi-transparent png file with the top part transparent and bottom solid white. Check out my site http://homesmartsecure.com to see what I mean.

    I added background-color: none !important; to your code and placed all of it in custom css, because quick css never works for me. The solid white background should be clear. What am I doing wrong. Here’s my code:

    .avia-section {
    border: none !important;
    }

    #wave-section-up {
    margin-top: -50px;
    background-color: none !important;
    }

    #wave-section-down {
    margin-top: 50px;
    background-color: none !important;
    }

    #169097

    any suggestions as to why this isn’t working? I jumped the gone before when i said that did it. the wavy banner is still solid.

    #169432

    Hello!

    Add this on your custom.css or Quick CSS:

    #wave-section-up {
    margin-top: -50px;
    background-color: transparent !important;
    z-index: 9999;
    height: 167px !important;
    }

    Remove browser cache then reload the page a few times.

    Cheers!
    Ismael

    #169460

    Thanks Ismael, that code worked great. Still new at this so didn’t know it was supposed to be transparent, not none.

    That said, I tried to the same thing, just opposite for a bottom one and used a flipped png of the same banner and it’s not working. I placed it right below the send us mail form on http://homesmartsecure.com, but the solid color still shows where it should be transparent.

    I created the same color section and labeled the dev id wave-section-down and in css I added the following:

    #wave-section-down {
    margin-bottom: 50px;
    background-color: transparent !important;
    z-index: 9998;
    }

    • This reply was modified 1 year ago by  Alex.
    #169619

    I played around with this quite a bit and still can’t figure out why it doesn’t work.

    #169752

    bump

    #170625

    Ismael, can you please help me with the last piece of this puzzle? The top wave is perfect, but the bottom wave (right below the send us mail form on the site) is mangled.

    Thanks for all your help

    #170809

    Can anyone help me solve this? Anyone at all?

    #170920

    Okay, it’s been three days and I can’t solve this on my own, can someone give me a hand to solve this problem?

    • This reply was modified 1 year ago by  Alex.
    #170981

    Hey!

    Please use this instead:

    #wave-section-down {
    margin-bottom: 0;
    background-color: transparent !important;
    position: relative;
    bottom: -100px;
    z-index: 9999;
    height: 167px;
    }

    Regards,
    Ismael

    #170990

    Thanks,
    It kind of works. I used the following code for my top wave:
    #wave-section-up {
    margin-top: -50px;
    background-color: transparent !important;
    z-index: 9999;
    }

    and if you notice, the wave is not stretched beyond the screen and there is VERY little white space in the section, but the code you posted for the bottom stretches the image beyond the screen and leaves a huge block of white space there (and it’s not padding from the form, it seems to be space in the image color section itself even though it is set to no padding).

    How can I clean that up please?

    Edit: I’ll change the color of the section near the waves so you can see the difference more noticeably.

    Edit: Got it working perfectly with the following code:
    #wave-section-down {
    margin-bottom: -100px;
    background-color: transparent !important;
    position: relative;
    bottom: 50px;
    z-index: 9998;
    height: 120px;
    }

    #contact {
    z-index: 9999;
    }

    Thank you for finally getting back to me. Really appreciate it. You can close this thread now.

    • This reply was modified 1 year ago by  Alex.
    • This reply was modified 1 year ago by  Alex.
    #170999

    Hey!

    Edit the Color Section below the wave down, set it to position Left and stretch to fit. It will remove the white space on the left.

    Cheers!
    Ismael

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘semi transparent wavy divider’ is closed to new replies.