Enfold Diagonal Color section alternate top and bottom

Hi,
Sorry for the late reply, unfortunately, this is not an option in the theme yet, but couldn’t you just add a diagonal border to the bottom of the first section, which would be the same as adding it to the top of the second section?
The only other option I can think of is to search Google for some css that will create the effect you wish for.

Best regards,
Mike

Hi,
I don’t believe that parallax with work with a diagonal border, especially with IOS. But that aside I can see your point, I was able to achieve this with some custom classes and a little jQuery:

In this example, all color sections are set to 100% visual height and the middle color section is the target so it has the bottom diagonal border and it has the custom class target-flipped-diagonal-border .
Now we will add a bottom diagonal border to the section above, this will be our fake top diagonal border, and we will add the custom class flipped-diagonal-border to it.
This is the code you can add to the end of your functions.php file in Appearance > Editor:

function custom_flipped_diagonal_border_script() { ?>
    <script>
(function($) {
  $(document).ready(function(){
$('.flipped-diagonal-border .av-extra-border-element').css({'transform':'rotate(180deg) scaleX(-1)','margin-top':'0px'});
$('.target-flipped-diagonal-border').css({'margin-top':'-250px'});
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_flipped_diagonal_border_script');

Now the middle section has two diagonal borders over it, top & bottom.

Best regards,
Mike

Hi,
Glad to hear this worked for you, we should close this old thread now.
I’m not sure how the other site achieves this effect, it looks like javascript.

Best regards,
Mike