| description |
|---|
Link to a page, resource or website. |
The link property allows you to link to a page, resource or extrenal website. Elements will keep track and update all internally linked pages and resources.
{% embed url="https://youtu.be/mt-5Zhk3M7E" %}
You can apply the link panel on most components and inline text areas. Add a link click the "Choose Link…" button in the inspector. To clear a link click the "x" icon to the right hand side of the link button.
{% columns %} {% column width="50%" %}
These settings define where image will be linked to. Click Choose Link… to select a destination. You can link to:
- Any page within your project
- An external URL
- An email address (mailto:)
- A file resource
Use the Clear (×) button to remove the link. {% endcolumn %}
{% column width="50%" %}
| Link Types | Description |
|---|---|
| URL | Link to an external website, a mailto link will automatically be created if an email address is entered. |
| Plain | Usful for adding custom code, like PHP. |
| Page | Link to a page within your project. |
| Anchor | Link to an Anchor on the page. Anchor ID's can be set in the Advanced settings on all built-in Components. |
| Resource | Link to a resource within your project. |
{% hint style="warning" %}
Element websites are configured to smooth scroll when navigating to an anchor. Smooth scroll can be disabled by removing the class="scroll-smooth" on the html tag in the site Template code. {% endhint %}
Custom attributes in an link (anchor tag) provide additional information about how the link behaves, where it directs, and how it interacts with other elements or the browser. Here's a selection of example custom attributes.
| Name | Value | Description |
|---|---|---|
| title | Go to Example Website | Provides additional information about the link, usually displayed as a tooltip when the user hovers over the link. |
| rel | noreferrer | Ensures that no referrer information (the URL of the current page) is sent to the destination. |
| rel | nofollow | Tells search engines not to follow this link for SEO purposes. |
| type | application/pdf | Specifies the MIME type of the linked resource. This is typically used when linking to downloadable files or specific content types. This example is for a pdf document. |
- You first need to add an ID to the component that will serve as your anchor. The ID can be found in the Advanced section in the settings for the selected component.
- Then where you want to create your link in the text. Select the text, which will display the inline text
- Click the LINK button in the inline text editor to open the link dialog.
- If your anchor is on the same page, choose the page from the dropdown next to the link field.
- This will display all available anchors in the Anchor popup.
- Select the desired anchor, and you're done.
{% embed url="https://youtu.be/VEqrlcXydTs" %}