Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1168240

    Good Morning All,

    I am trying to create a page flow where the color sectional diagonal is both at the top and bottom of an image. I have tried many different ways after looking thru the documentation but still no luck. Can you please help me?

    I want to mimic this style: https://drive.google.com/file/d/157yy701xSLjsKsg4AUocnKFa2bgZxrHR/view?usp=sharing

    Thanks in advance!
    ~Amanda

    #1168447

    Hey amanda-mdllc,

    Our diagonal sections do not have alternating borders for top and bottom yet, unfortunately. You might want to rethink the design.

    Best regards,
    Victoria

    #1262846

    Hello

    Did you find a solution for this one ?
    It is annoying when you want to add a diagonal effect but the next color section’s image set as a background has a straight top border ! which makes it useless !

    There must be a way to have a diagonal border for the TOP of the second color section and not only to the bottom of it !

    Any workaround this ?

    #1263857

    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

    #1264091

    Hi Mike
    Unfortunately no it is not the same thing
    A Diagonal border on the bottom of the color section overlays the background of that specific color section
    However, the diagonal border on the top of the color section would overlay that color section

    See attached of what i want to reach
    Untitled-1
    bottom photo when in parallax it goes beneath the diagonal border

    #1264251

    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:
    2020-12-01_080039.jpg
    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

    #1264592

    @Mike !! YOU ARE A GENIUS !
    I thank you very much . it worked and i am so happy about it
    Many thanks :)

    I have a question…
    Is there a way to cancel the option of scrolling down the page, but instead forcing people to click on the arrows that are provided by the Color Section ?
    In other words, can the end of one color section be the end of the page, (no more scrolling) but by clicking on the arrows down, the user can jump to the next color section, which will be the end of the page, and so on …
    This is just an idea (not looking to reach the exact same, but this one forces a full page view without the ability to scroll through the pages. It gives a direct jump effect to the next section https://fueled.com/

    Is this simply an advanced layered slider ? or does it have to do with Parallax effect ?

    Thanks !

    • This reply was modified 3 years, 11 months ago by Cloudypro.
    #1264745

    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

    #1264900

    Thank you Mike

    #1264902

    How can i achieve this:
    diag

    Thanks a lot

    • This reply was modified 3 years, 11 months ago by Cloudypro.
    #1265009

    Hi,
    Try using the solution above and try the “top” diagonal border in the other direction, the script only “flips” the diagonal border, it doesn’t set the direction.
    If this doesn’t help, then please create a test page with an admin login so we can examine further.

    Best regards,
    Mike

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