-
I am trying to recreate a feature like the buttons on this website here : https://beatsbymantra.com/licensing
Under “why pick this license” The button changes to a post that lives in the same rental space as the license description. Flat out, I just don’t know how to do this. If you tell me or point me to the write documentation to generate that feature, I would be greatly obliged. Thank You. (Inline code or Inline image doesn’t make sense)
-
Hello.
Do you want to create the hover effect that is preset on the button or do you want the button to act a a trigger to open the modal on the right of the screen?
-
I’m not sure if its a hover effect. When I click the button — it gives the answer and removes the Prior description of the license. I’ve never seen the trigger open the modal on the right of the screen so I don’t know how that would look/work. I like the way that one works because it looks uncluttered. If there is a better way, though, I’ve never seen it.
-
This seems to be a standard use of an overlay panel. When you click the License Agreement button, there is an modal that loads on the right side of the screen as a fixed panel with the License Agreement text.
This modal could be created with an overlay panel. Overlay panels are included with the GenerateBlocks Pro plugin.
-
I have GenerateBlocks Pro. I Googled how to do it but I was looking for the tutorial or some documentation.
-
Is there something in the Pattern Library?
-
Unfortunately no. You can read about overlay panels here.
-
Ok that helps but just to be clear are you saying you don’t know how to do it the way it exists in the example I gave ? is this some advanced type of feature?
-
Hi again.
The process looks like this:
1. GenerateBlocks -> Overlay Panels -> Add New
2. Design you panel with GenerateBlocks along with your CLOSE button.
3. Select TRIGGER TYPE as
Clickand POSITION as Center Right. Also check theDisable page scrollcheckbox.4. Select your CLOSE button and from the Advanced settings on the right, for Overlay Panel Trigger select
Close Opened Overlay Panel.5. Now on a page where you have the button that you want to act as the trigger, select the button and from the Advanced Settings on the right, set the OVERLAY PANEL TRIGGER to the Overlay panel you have just created.
You can start with that and let us know if you have any more questions.
-
Above is where I am at now. This image is cutoff but it shows the button working as a popup. If you press the “why pick this license button” under the Professional license you can see my current issues. https://thismy401k.com/
I had to create a Pop Up using the Pop Up (Pattern 2) in the Pattern Library. I added an additional text header and the content. the issue now is that I need to size it so it fits over the License Professional license perfectly. I don’t know if this is how its being done in the example but it’s a makeshift solution. Would all it take is adjusting the settings now so the sizing covers the description behind it exactly and then having the sizing be responsive?
-
Hi again.
There are going to be issues with the positioning especially on variable screen sizes. The example site you had sent us handles this gracefully with a fixed overlay panel on the center right of the screen.
Can I suggest something else, also. Please, feel free to reject the idea. It seems like the button set as an accordion trigger would function in a more user friendly way than a modal. Imagine, clicking the button and the license text would be revealed underneath. Clicking on the button would hide the info. This would work perfectly in smaller sizes, too.
Info font and spacing could be smaller too.
What do you think?
-
Yes. I think I figured it out. This appears to be way easier. I will let you know if I have any issues. thanks.
-
Ok, no problem, let us know!
-
Hello George,
I got that to work and you were right. It is a much better and simple solution. I didn’t understand that the accordion would spread out the real estate down the screen. This is actually a very legit feature.
I do have one issue left. And this has come up using Generatepress a number of times now. If I make a mistake nesting containers – I don’t know how to fix that error without cutting out the container — which removes the content entirely and leaves me to start all over. Needless to say, this is driving me insane (lol). So if you could help with that. Under Pricing / Unlimited license – I have made a mistake with the Footer items and the container below it. It needs to be nestled in different order which is why the Button is higher up on the page than at the bottom like the other two licenses. https://thismy401k.com/
-
I have made a mistake with the Footer items and the container below it.
Can you clarify which are the footer items and the containers below it that you mention?
-
So the Button in the middle may look like it’s designed to sit up higher than the buttons on either side (different licenses) but it is not. It’s due to the fact that I nestled the container wrong on the back end.
This is correct. https://postimg.cc/rzz9HkGt
This is incorrect. https://postimg.cc/2q24HcV0
On the last pic, the container is on the outside of the footer items causing it to sit higher on the page – rather than at the bottom where it should be.
- You must be logged in to reply to this topic.