Solved Pushy Panes 2.0 Background Problem

Discussion in 'Pushy Panes' started by Dennis3001, Sep 11, 2017.

  1. Dennis3001

    Dennis3001 New Member

    I have a question about the widget Pushy Panes 2.0, because I don´t find a Solution for my problem after a long time.
    I would like to create a menü like the "EXAMPLE 2" in the Pushy Panes Live Review.
    Unfortunately, I have a problem with the background image.
    I would like, that the image „slides“ behind the Buttons and the fonts if I reduce the browser size. (like Example2).
    Only replace the color with a backgrund-image in the pane area does not bring the effect.
    Can you tell me what I must do?
    And another last short question.
    Is it still possible to position the buttons in the Pane differently at different breakpoints?
    Thank you very much and best regards.
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    Dennis, the Image of the girl with the brownish background is done by placing it as a Background fill.
    If this isn't what you asking, could you possibly share a screen shot of the area you're speaking of?
    Not sure about your second question, but the Open and Close buttons are percentage based, so they can remain constant across all break points.
  3. Dennis3001

    Dennis3001 New Member

    Thank you very much for your answer.
    If I fill the background from the object with the graphicstyle „ pane“ with an image, I don´t get the same effect.
    Because if I make the browser smaller, the image in the background dont move behind the buttons.
    I share two screenshots. The first ist the fullscreen background image. So it is ok.
    At the second shot, I make the window smaller and you see, that the background image where „cut“ and the 4 Buttons where push left out of the window.
    The effect that I want is like the Pushy Panes Example 2. If I make the browser smaller, the image moves complete left behind the buttons.
    What can I do? I hope I could explain it, because my englisch is not perfect. Sorry.

    Attached Files:

  4. Jeremei

    Jeremei Well-Known Member

    If you want to get Example 2 effect so I assume that MT-team has made in this way:
    1) Place the image e.g. to 960 breakpoint (image width 960 px)
    2) "Resize" feature - set it to "Responsive with width and height"
    3) Turn chevron-icon to the right in breakpoint panel
    Drag to canvas "Pushy Panes 2.0" widget (it can be outside the canvas)
    5) "Pushy Panes 2.0 settings" - "Pane Transition Style" set it "Cover Content"
    6) "Pushy Pane 2.0 settings" - "Pane Transition Direction" set it "From Left"
    7) Other settings you can set as you want
    8) If you want to add text with the text tool onto the image so check that the text layer will be on top of the image layer in the layers panel.
  5. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    Dennis, I believe you may have mis understood my explanation, I apologize for that.
    This particular effect was done similar to the old Versa slide widget, where the 'Pane' was actually another page.
    Take a look at the Video tutorial on the new widget,
    At about the 7:30 mark, Ashton describes this feature.
    This is what you need to do, first, the way this was set up is a bit different than we used to allow. On the page that has the Open Button (see Capture2) you will place your widget. Note, you do not need the panel, or open button (unless you want something custom) for this usage.
    All you need to do is make your settings and be sure to use the areas I showed. The URL of the page you are linking to will be whatever you name the new page (in this case it was 'Internal-menu and you then just add .html.
    Now you will need to create a page (named whatever you like , just make sure the link and the page name are the same).
    On screenshot 'Capture', you will see the Background as we have it in the demo. Note, you will place your image using the Background Fill option in Muse.
    I'm assuming you placed an Image in the widgets 'Pane' area and for this effect it doesn't apply.
    Hope this helps, and if you need anything more, please let me know.
    Capture2.JPG Capture.JPG
  6. sourDiesel

    sourDiesel New Member

    Hi DJ. This is helpful, but I getting no results when I add the URL in. I'm using the Fresh template but the Versa Slide won't refresh my menus items. So, I trying to pull the menu in with Pushy Panes with no result. The tutorial isn't very helpful with it come to discussing what format should be used as the url. Internally, my page name is Menu; do i just put in menu.html? I've tried a few different ways and it won't pull the page in. Thanks in advance!
  7. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    sour, yes, since you are using the Fresh template, and the page is already named 'Menu', you would use the URL... Menu.html , to go to that internal page.
    I'm sorry the tutorial wasn't clear for you, I will mention this, but there are three standing formats used in Muse for listing URL's.
    One is the full URL of a site you wish to go to, another is to link to an Internal page like your issue (pagename.html), and the third is with using a long scrolling single page site and scrolling to an Anchor location (#pagename).
    Hope this helps

Share This Page