Buttons / Links
I want to connect different buttons with different links and I don't find any description, how to do that. Specifically: When someone clicks on a button, one of the following things shall happen:
1) The contact form (I'm using the plugin "Contact form 7") shall open in a pop-up-window, when the visitor clicks on the button
2) The button/the link shall bring the visitor to another section of the current page (no pop-up-window)
3) The button/the link shall bring the visitor to another page (e.g. "about me" or "our offer" / no pop-up-window)
Comments
Hi,
1) For that you need to create a popup template with a contact form and open it with a button click.
This popup also has to be assigned to this page.
2) For that, you must use anchor links.
Making anchor links (in the menu or not) is simple as creating regular links.
Please head to the documentation, where you will find all the required steps to do that:
https://support.muffingroup.com/faq/how-do-i-link-an-anchor-on-the-same-page/
You can check our video tutorial too:
https://www.youtube.com/watch?v=HoHZksjUrjg
3) You can put a link in the link field or use the dynamic data.
Thanks
Thanks so much for this helpful overview! One more question: In the header there are different options ("Home", "About me", "Offer", "Contact") which usually are linked to separate pages when clicking on them. But concerning "Offer" I don't want the link to go to a separate page, I want it to link to one specific section of "Home". Is that possible and how does that work?
It can be done with an anchor link. See second point from my previous message.
Best regards
That's what I tried, but it's not working. I created a new menu "Mein Angebot", which is shown in the header, as it should be. When I click on it, the website should switch to the menu "home" and show a specific section there. But it doesn't work, when I click on the new menu "Mein Angebot", nothing happens. So that's what I did:
(Pages -> "Home" -> Edit) I enabled the one page option
...then I scrolled to the section where the link shall lead to and clicked "edit"
...there I created the ID
...and at the end I created a new menu ("Mein Angebot") and filled in the following data: URL: #angebot, Navigation label: Mein Angebot
I can't find the mistake, do you have any suggestions?
Before the ID, put the whole URL, so it should look like this: https://website.com/page/#anchor.
Best regards
Like that? Still not working. I also tried "https://www.sarahkessler.de/home/#angebot" and "https://sarahkessler.de/#angebot" as alternatives, all of them don't work.
No, you put only an ID without # in the section ID. So, in the filed from your screenshot, you should put the angebot only.
If you want to link to this section, you should put the whole link.
Best regards
I don't get it. Now it's jumping to the right page - but not to the section, only to the beginning of the page. "One page" is enabled.
Please send us the WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact, and we will check what might be the reason.
Notice!
Please attach a link to this forum discussion.
Sending incorrect or incomplete data will result in a longer response time.
Therefore, please ensure that the data you send are complete and correct.
Thanks
You have this section hidden on the desktop view.
Desktop section should have an ID as well (a different ID), and your menu should differ on desktop and mobile.
Please see the following video tutorial:
https://support.muffingroup.com/video-tutorials/do-never-again-use-same-ids/
Best regards
Thank you, Phil, this was really helpful! Now it works for the desktop version, but not for the mobile version. I'm using different IDs. I can't find the mistake - can I send you the login details via privat link so that you can check why it doesn't work for mobile?
Please send us the WordPress dashboard access privately through the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact, and we will check what might be the reason.
Notice!
Please attach a link to this forum discussion.
Sending incorrect or incomplete data will result in a longer response time.
Therefore, please ensure that the data you send are complete and correct.
Thanks
You did not create a separate menu for mobile view and did not assign it in Theme settings. Please rewatch the video tutorial I have sent: https://support.muffingroup.com/video-tutorials/do-never-again-use-same-ids/.
Especially check ~2:20 min.
Best regards
Yeah, I had watched this video serveral times. The video explains the differences and why/how to distinguish between desktop and mobile menus and IDs, but it doesn't explain how I set a mobile-only-menu. Do you have also an detailed explanation-link for that? I couldn't find a detailed explanation anywhere in the support section.
...when I'm using the header tool, seems like I need to build a complete new logo for desktop, tablet and mobile - but that's not what I want. I just want the mobile menu to link to a specific section, just the way it now works in the desktop version.
It is mentioned in the time stamp I mentioned. You must create a separate menu for mobile display (with mobile anchor links) and select it in the Theme Options or the Header Builder.
Best regards
Thanks, Phil, I could follow almost everything apart from your last slide. Seems like there are some steps missing? Isn't there a full explanation about the header builder somewhere? This one that I found seems to be no longer up to date or the respective settings or names don't even exist for me: https://muffingroup.com/betheme/features/header-builder/ So this also didn't help.
So, when I go to the header builder and select "Mobile menu" on the left, that's what happens:
The mobile menu looks completely different than it should and doesn't show neither the "burger" nor the social icons, and also exactly this menu is now displayed for the desktop and tablet, which is not what I want. I can't press the "Mobile" button (top right), it says I should change the settings in the Options header. Unfortunately that doesn't work, everything is grayed out/disabled here:
So what can I do to activate it the way your screenshot shows? Or isn't there a step-by-step-instruction for that topic which really shows all necessary steps?
...and when I go to "Header options" directly in the header builder, there is nothing that I can activate.
Update:
I've created a new desktop menu and a mobile menu with the header builder tool. Both menus are distinguished by the settings in "Section" -> "Advanced" -> "Responsive visibility". I could not activate function in the header itself, as the header options are always empty when I open them.
Anyway - for the desktop version everything works well, only the header is not a sticky header anymore and I don't find a way to activate that, is it doesn't work by the header options.
For the mobile menu I still have the old problem: "Mein Angebot" does not link to the section #angebot_mobile as it should. I have no idea why it's still not working.
I'm sending you the login details again via private mail, hope you can help me with that. Thanks in advance!
For me, the header options show correctly, and I have activated the sticky header.
The section with ID #angebot_mobile does not work on mobile because you have it hidden on mobile, and currently it is only visible on the tablet.
You should assign this ID to this section:
Best regards
Thanks again, Phil, you were right, that was exactly the point which I had not found... now for mobile it's working perfectly. But not (anymore?) for desktop and for tablet... When I'm coming from the page "Start" and click on "Angebot" in the menu ("main menu" for desktop and tablet), the link leads to the right section of the "Start"-Page, just as it should be. So that's working. But when I'm coming from any other page apart from "Start" (e.g. "Ihr Nutzen", "Filmbeispiele",...) the link does not work anymore and instead of leading to the section I'm receiving this message:
It's the same for tablet and desktop. These are the settings I have set (they are also identical for tablet and for desktop):
Remove "home" from the URL, and it should work fine. Like this:
https://www.sarahkessler.de/#angebot-desktop
Best regards
That was the point. Thank you!! 🙏