The link element a and href

Links are expressed in Pinegrow and HTML with the element a. You can find it in the Library under the Text section.

A link (a) always encloses the text or object that is to be used as a link. If you link the entire text, such as in a button, everything is enclosed by the link element: <a>Click here!</a>

If you only want to link a word or a few words in a longer text, the link element a is located in the text field element p: <p>I found <a>a really interesting article here</a></p>

Links can be applied to pretty much any element. For example, if you want to link an image, you enclose it with the link element: <a><img src="my-image.jpg"/></a>

Don't worry, the code notation is only for better understanding, Pinegrow does the work for you and makes it easy to set links correctly. However, the link target href is still important. 

Without a link target, a link makes no sense. The href specifies the page or source that the user should be taken to when they click on a link. This can be a subpage of your own website, a third-party page and more: <a href="www.my-website.de">Click here!</a>

Link elements and add link target

You have read above how to add a link to texts, individual words, images and other objects. Now you need to specify the link destination, i.e. the page that a user will be taken to after clicking on the link.

No matter how you have set a link in Pinegrow, you will always find a Href field where you can enter the link target. Pinegrow makes it easy for you: If you click on the folder icon, you can simply select the subpage you want to link to (e.g. your page contact.html) in your website folder.

If you want to link to a third-party website, you can also simply enter a URL such as https://www.pinegrow-forest.com in the Href field.

Design links in Pinegrow

Links stand out visually from the normal text on almost all websites so that they can be easily recognized in a continuous text. Links are often blue and underlined, in Pinegrow you can design them individually and adapt them to the look of your website.

To do this, select a link (the a element) and go to the style tab in the right-hand sidebar. There you can design the links on your website and, for example, change the color, underline links, display them in bold or italics, etc. There are basically no limits to your creativity.

With this one central adjustment, you change the appearance of all links on your website. If you want certain links to look different (such as those in the main menu), you can give them their own class and thus design them differently from the rest of the links. Remember that changes to the text color, for example, do not affect images.

Design buttons in Pinegrow

You know buttons from almost every website. They usually have an eye-catching design and invite you to click on them. In most cases, however, buttons are normal links, i.e. a-elements.

If you want to create a button in Pinegrow (apart from form submit buttons or similar), simply drag an a element to the position on your website where you would like the button to be and create a class (e.g. .Button). This is already prepared for you in the starter project. You can now design this class so that the buttons differ from the other links on your website.

Buttons are often square or round, and in most cases have a background color. If you choose a background color, some padding and a border radius, you will quickly achieve good results.

Anchor link: Link to an area on the website

You can use links not only to link to other websites or subpages of your own website, but also to a specific area on this page. This is called an anchor link and is particularly useful if you have longer pages with a lot of content and want to send the user to a specific location.

First you need to assign a unique id to the area or object you want to link to. Simply select the corresponding div block, image or other object and go to the Element properties in the right sidebar. There you will find the Id field, in which you write a unique name (something like “prices”, “our menu” etc.). It is best not to use umlauts or spaces.

You can now append this id to your link after a hashtag: www.website.com#our-menu oder website.com/our-services#prices. In the first case, the browser automatically jumps to the area with the id our-menu on the start page. In the second case, it jumps to the section with the id Prices on the subpage our-services.

Open link in a new browser tab

If you link to other websites, you often don't want the site visitor to leave your website completely and open the link in a new browser tab. This way, the site visitor still has your website open in a tab.

In Pinegrow, you can easily set a link to open in a new browser tab. When setting the link, you will find the Target field in which you can select the values _blank, _parent or _top. If you do not select anything, the link will open as normal. With _blank, the link opens in a new browser tab or window. You only need _parent and _top if you are working with frames and iframes.

Execute Javascript by clicking on link / button

If you are advanced and have written your own Javascript functions that you want to start when you click on a link or button, you can do this with the following notation:

jacascript:myFunction();

If you want to create an animation or change the appearance of an object on your website at the touch of a button, it is best to use Pinegrow Interactions and not program your own script.