Hello I’m new to pine grow! Love the platform. I know this might be ignorant but how do I add a hyperlink to a button?
Hi @Ge0123,
Not an ignorant question at all!
There are a couple of considerations.
So one way to add a hyperlink to a button is <a href="URL"><button>Click me</button></a>. In Pinegrow you can do this by dragging a button from the Library panel to the page and then go to the Properties panel and click on the “Create link” button in the “Link” section.
This is a somewhat common way to add button hyperlinks, but I don’t really like it. As far as accessibility, screen readers will read the button and link separately, and from the keyboard the activation of the two are slightly different.
The next way, that I like better, is to simple drag a link to the page and then style it to look like a button. If you are using Bootstrap this is as easy as dragging a button element from the Library to the Page View, then under the Properties panel in the “Button” section you can convert the button element to a link element. Basically it will just change the element, but keep all the styling. In Tailwind CSS you can do something similar, but you will have to change the element in the code editor. In plain HTML, you will have to drag a link to the page and then add CSS of your own styling. This is more accessible and semantic.
So, there you have it. A complex answer to your simple question! Any more questions?
Cheers,
Bob
Hello Bob,
Thank you so much for helping me! When you say to click and drag a link, are you referring to saving the link to my desktop and dragging it into the application?
If I do the click and drag from the library, where do I add the code you had mentioned in your first comment? Is it in “inner hmtl”? (Please see picture)
Hi @Ge0123,
For your first comment -
So, you would drag a button element from the Library panel. Depending on the framework you are using this can be found in a couple of places. For plain HTML it is in the “Content” section. For Bootstrap it is in the “Buttons” section.
Once you drag this to the Page View there will be a “Link” section in the Properties panel. It will contain the “Create link”.
Then you just have to add the URL for where you want the button to link to into the “Href” input box.
For your second comment -
What do you want to edit? It looks to me like it already is a link since the “Link” inputs are live. It likely just a plain link with CSS styling to make it look like a button, rather than a button wrapped in a link.
So:
<a href="#" class="button-styling">Buy Now</a>
versus
<a href="#">
<button>Buy now</button>
</a>
Cheers,
Bob
1 Like
Bob you’re the best man! For the button that is already made, would the button stay the same if I just edit the “Href“ line?
Also, is there a way to make pictures into hyperlinks? Like can we make a picture clickable?
Yup to the href and the picture.
Just wrap your img in a set of link tags and you are good. As I mentioned in the original comment, there are accessibility issues with this approach.
Cheers,
Bob
1 Like
Hello Bob
Once again thank you for your time. I want to do this right but I’m not understanding the approach you’re suggesting. Could you help me understand how to do it?
Thank you
Hi @Ge0123,
Anything can be made into a “hotlink” by wrapping it in a set of link tags ().
The only thing that I mentioned is that as a web designer, you should also think about accessibility. For example, if a person has a visual disability, wrapping an image or button in a link tag can give a mixed signal making the page hard to navigate. This doesn’t mean it shouldn’t be done. Just mentioning why using a styled link is sometimes better than wrapping a button with a link.
Hope this helps,
Bob
1 Like
Awesome Bob! Thank you so much. I hope you don’t mind if I keep asking you questions
Not at all! Ask away. Spread the good word on social media (if you don’t mind) 
1 Like
Hello Bob when I exported the file the html shows these question marks. Do you know if there is somewhere I’m supposed to upload the picture files to or is it because it’s offline?
Thank you,
Geo
Hi @Ge0123,
So any images you add to the page are going to have a link to the location where the resource is located. When you are developing locally, that will usually be an asset folder located in your project. However, you can also develop locally with links to CDN hosted images, or images on your future hosting site. When you upload your site to the final server, you have to make sure that the images are also uploaded and maintain the same relative location to the page where they are used.
I can’t answer your question more directly, because I don’t know how you added the images to the original page.
Sorry,
Bob
< a href="#" class="btn btn-danger ">Button< /a>
Bootstrap has button classes - try the above
Hello Bob,
The way I have been adding these images is by dragging the “img” into the page and replacing the stock image with my own from the properties section. Once’s uploaded I adjust the size. Is there a better way?
Thank you,
Geovany Hernandez
HI,
That is a perfectly fine way to add the images. What is important is the path that is added into the Properties panel. The browser has to be able to access that path from the current page. Maybe a screen shot from the Properties panel would help. If you don’t know about them already you can read up on relative versus absolute paths/URLs. This is more of an HTML thing than a Pinegrow-specific item.
Cheers,
Bob
Hello Bob,
Quick question. Do you know how I can add a plug-in to receive payments? I want to sell merch and I don’t know how to do so.
Thank you so much.
Please let me know how I can help promote you
Hi @Ge0123,
It depends on the merch. Physical, download… I use Digital Downloads on my own site. For physical things I think going with WooCommerce (I think you are on WordPress) would be best. There are other ways with subscription portals. Just depends on what you are selling.
Bob
I’m going to first sell digital items! I’m actually hosting via GitHub and not wordpress. I signed up with coinpayments to accept different types of cryptos. Would you please review the options they have for me and which one I would add to the code?
