Hi,
Use your Hero widget in multiple spots. I like adding a button
On my Homepage https://allenvisioninc.com I use a Hero for the first image after the feature image.
The Hero button address is https://allenvisioninc.com/#contact — a form at the bottom of the page
When the user clicked LET’S TALK — the form displayed perfectly. (or If you just paste https://allenvisioninc.com/#contact a browser, it displays the form as I’d like to see it)
However, now clicking LET’S TALK it displays the footer menu on the first click. If I retry it, it displays perfectly.
This occurred after your recent update.
Thanks, Kim
Hi Kim,
This is happening as a result of the fixed menu. Please install Page scroll to id and navigate to WP AdminSettingsPage Scroll to id and set the Selector to .entry-content a. Set the Offset to #header-inner.
Hi Alex,
Thanks for the reply. I installed Page scroll to id plugin and set the Selector to .entry-content a Set the Offset to #header-inner
Nothing changed, clicking the button in the hero still goes to the footer.
Just pasting https://allenvisioninc.com/#contact in the browser now also just directly to the footer menu.
Hitting enter a second time takes me to the right spot.
Any thoughts?
Thanks, Kim
Hi Kim,
Please navigate to WP AdminSettingsPage Scroll to id and tick Scroll from/to differnet pages. Does that help?
Hi Alex, scroll from/to different page was tick so that wasn’t the proble. the problem is still there. thank Kim
The Plugin developer sent me a detailed reply – copy below. Unfortunately, it did not work – however, his explanation regarding the conflict with the image (actually a SiteOrigin Hero) is at the root of the problem. I moved the Hero widget below the contact form and things worked as they did before.
Any thoughts?
Thanks, Kim
Hello Kim,
1.The option values suggested by SiteOrgin folks are almost correct. The “Offset” option value (#header-inner) is correct but you should change the “Selector(s)” option.
Go to “Page Scroll to id” settings and change “Selector(s)” to:
a[href*=#]:not([href=#])
Click save changes.
This instructs the plugin to handle all links with a hash (#) in their URL.
You can confirm this by clicking the “LET’S TALK” button. You’ll see that it now scrolls the page smoothly (instead of jumping to the target).
2.When you click the “LET’S TALK” button the first time, it doesn’t scroll to the correct position because you have a large image (“Optimizing every area of your business!”) that is loaded after the page has scrolled past its point. This image is handled by a lazy-loading script.
Since this image sits before the contact section, it conflicts with the contact section position in the sense that it changes this section’s position after it’s loaded (that’s why the 2nd click on “LET’S TALK” button works correctly – the image has loaded).
Hope all the above make sense.
The only solution to this issue is to disable the lazy loading script for this image (I don’t know if this lazy-loading script is another plugin or part of the theme itself).
Another solution would be to hard-code the image height in HTML or CSS but it might affect the responsiveness of the layout.
3.Unfortunately for now, SiteOrign Editor does not allow custom 3rd party plugin buttons such as the “Page scroll to id” toolbar buttons (that’s why you cannot see them).
This said, you should be able to use plugin’s shortcodes directly in the editor (the buttons and shortcodes do the same thing).
Please note that since we changed the “Selector(s)” option to handle all links with hash, any standard/plain link you create in the editor (e.g. https://allenvisioninc.com/#contact) will work automatically. Also, SiteOrign Editor provides an ID field for every content block, so you can use this ID to use as your target elements (if you prefer not to use plugin’s shortcodes).
Hope this helps ?
Unfortunately, while the solution worked, it took about 10 seconds for clicking the button to scroll to the contact form.
However, his explaiHello Kim,
1.The option values suggested by SiteOrgin folks are almost correct. The “Offset” option value (#header-inner) is correct but you should change the “Selector(s)” option.
Go to “Page Scroll to id” settings and change “Selector(s)” to:
a[href*=#]:not([href=#])
Click save changes.
This instructs the plugin to handle all links with a hash (#) in their URL.
You can confirm this by clicking the “LET’S TALK” button. You’ll see that it now scrolls the page smoothly (instead of jumping to the target).
2.When you click the “LET’S TALK” button the first time, it doesn’t scroll to the correct position because you have a large image (“Optimizing every area of your business!”) that is loaded after the page has scrolled past its point. This image is handled by a lazy-loading script.
Since this image sits before the contact section, it conflicts with the contact section position in the sense that it changes this section’s position after it’s loaded (that’s why the 2nd click on “LET’S TALK” button works correctly – the image has loaded).
Hope all the above make sense.
The only solution to this issue is to disable the lazy loading script for this image (I don’t know if this lazy-loading script is another plugin or part of the theme itself).
Another solution would be to hard-code the image height in HTML or CSS but it might affect the responsiveness of the layout.
3.Unfortunately for now, SiteOrign Editor does not allow custom 3rd party plugin buttons such as the “Page scroll to id” toolbar buttons (that’s why you cannot see them).
This said, you should be able to use plugin’s shortcodes directly in the editor (the buttons and shortcodes do the same thing).
Please note that since we changed the “Selector(s)” option to handle all links with hash, any standard/plain link you create in the editor (e.g. https://allenvisioninc.com/#contact) will work automatically. Also, SiteOrign Editor provides an ID field for every content block, so you can use this ID to use as your target elements (if you prefer not to use plugin’s shortcodes).
Hope this helps ?nation 2 (conflict with the image)
My page is modelled on the PageBuilder – Consulting template.
I notice that you now use a Headline rather than a Hero (Optimizing every area of your business!). I copied the row with this Headline and my link bypass this image and goes to the contact area.
I assume your image is from an external url. I could load my photo from my Media centre. I’d prefer an external URL. How can I use an external URL?
Thanks
Hi Kim,
Okay, so I understand what the author is stating and there are two ways around this in this situation (outside of changing widget) would be to use a very lightweight image and ensure your general website is lite in terms of weight to ensure the hero image is able to load as quickly as possible. An alternative would be to set a hard height for the hero widget so that it’ll always be a certain height. To do this please open the hero widget and head over to the widget styles sidebar. Open the Attributes settings group and set the CSS Styles field to:
Adjust 500px to the height of the hero widget.
Unfortunately, it’s not possible to directly host those background images externally. If you have any plugins that will replace all WordPress image URLs with a CDN (such as Jetpack Photon) it’ll be able to host these images externally but outside of that, this isn’t possible without custom coding – sorry mate.