Linking between reusable elements

Need help
1

Hi everyone,

I’m trying to do something which feels like it should be fairly simple - but I think I must be missing something. Here we go:

I’d like a reusable header to appear at the top of every page with a log in button and a sign up button displayed when the user isn’t logged in. I’d like each of those buttons to launch the relevant reusable login or sign up popup, and I want a link on each of those pop ups to switch to the other one (for example a link on the login in pop up that says “don’t have an account? Click here to sign up.” will close the login up pop up & show the sign up one.)

I hope that makes sense! However, I can’t see a simple way of doing this. If I attach those reusable pop ups to the reusable header they mess with the size of it which mangles the pages. But if I don’t then I can’t launch them from the buttons on the header. I also can’t link between them to switch between ‘sign up’ and log in’.

Right now I’ve got the same nonreusable header displayed on each page (which is annoying as I now need to make some changes to it) and a reusable pop up that has two groups, a sign up form and a log in form, which I can switch between. This doesn’t seem like a smart way of doing this - any ideas?

Thank you!

1 Like
2

Have you tried dropping the reusable sign up / login popup element(s) inside of the reusable header element? That should do the trick.

As well, you can use the Trigger Custom Event from Reusable Element action.

3

Hi Dan, thank you for the suggestion - unless I’m doing something daft I found that this made my header very deep, even when the elements were hidden, and it messed up the layout of my pages.

I hadn’t thought of using a trigger custom event action, I will have a go at that! Thank you.

4

Ah, yeah. When you drop elements in the header it has a not-so-fun habit of resizing the header. :slight_smile:

Keep in mind, when you resize a reusable element (intentionally or not), the dimensions don’t automatically apply to all of the different instances of that reusable element (ie. as it appears on every given page).

To ensure everything is the same size, you can use the App Search Tool (magnifying glass in the upper right of the editor > Search by: Reusable elements > select the reusable element > Edit these Elements > enter the Width Height dimensions > Apply changes to elements.

5

This topic was automatically closed after 70 days. New replies are no longer allowed.