Okay
  Public Ticket #1800326
Limiting Page Transitions?
Closed

Comments

  • W4yp01nt started the conversation

    Hello,

    I was wondering, if there is a way for me to control which pages should trigger a Page Transition? I would like to have my home/landing page trigger a transition, but then disable this functionality for subpage navigation on my site.

    In general, I think this type of functionality would be a great addition to this wonderful theme.

    For the time being, I don't mind modifying a file or two if I have to, though :-)

  •  8,996
    Tahir replied

    Hey W ,

    I am afraid there is no such option available in the Theme Options and would likely have to be custom coded.

    Best


    ThemeNectar Support Team 

  • W4yp01nt replied

    Alright, so I figured out how to do this without having to modify any theme files.

    Solution here, in case anyone else wants to do this:

    Enable the 'Page Transition' that you want in the theme-option panel (in my case here, it was the horizontal swipe effect), and add the following css to your global CSS sheet  (the data attributes change, depending on which effect you have chosen):

    body[data-ajax-transitions="true"] #ajax-loading-screen[data-method="standard"][data-effect*="horizontal_swipe"] {
    display:none!important;
    }
    

    Then, on the pages where you want the transition to fire, add the following code in your page specific CSS, in the WPB options (again, check your data attributes):

    body[data-ajax-transitions="true"] #ajax-loading-screen[data-method="standard"][data-effect*="horizontal_swipe"] {
    display:block!important;
    }

    That should do it!


    Bonus:
    If you want to add something like a logo, specifically to the simple horizontal swipe (I did), you can do so by adding a background image to the slide layer. Add this to your CSS:

    #ajax-loading-screen .reveal-1 {
        background-image:url(your-image-url-here);
        background-size:auto;
        background-position:center center;
        background-repeat:no-repeat;
    }