How to Create Hyperlinks in Weebly Site?

Weebly offers multiple hyperlinking options to connect internal and external webpages. Hyperlink is not a separate element in Weebly but an attribute of text and image elements. Even you can add link to each image in the Gallery and Slideshow element. Here we discuss how to use hyperlink options with various elements along with a tip for connecting to section of a webpage.

How to Create Hyperlinks in Weebly Site?

After adding content to your site, click on any text or image to see the toolbar pop-up. It will show options displaying hyperlink icon as shown in the below picture.

Click on the hyperlink icon to see various options available.

Weebly offers the following options for linking:

• Website URL – For linking an external webpage enter the page URL you want to link, select the check box “Open link in new window” if you want the page to be opened in a new window. Otherwise the linked page will open in the same window by default.
• Standard Page – In order to connect pages on your own site select the page from the drop down which is part of your own site.
• Product Page – This option is added with the introduction of new ecommerce features in Weebly. You can link store, any category or product page from your online store.
• File – To link a file select the file already uploaded in your site or click on “upload a file” link to upload a new file and then select the file for linking.
• Email – Enter your email address to link to an email id. This will open the default email client on the computer when someone click on the link.

Below is how the “Website URL” option will look like when you select it.

After linking, the linked text (anchor text) will be shown as bold and underlined (depending on your theme’s style). Double click on the linked text to see the connected link along with the options to change or remove it. Click anywhere else or click the X icon at the end to close the additional options.

Connecting a Section of a Webpage

It is always a requirement for webmasters to link section of a webpage especially when the page contains long content. Here we explain how to do this in a Weebly site in simple two steps with the example of connecting to a heading inside a page.

Step 1: Create a div id using “Embed Code” element

Instead of using a “Title” element, drag and drop “Embed Code” (Custom HTML) element and add the following code to create a heading. Font color is selected to blend with the default headings of  the page, you can change to any color as you want.

<h2 div id="ID1">Heading Here!!!

Step 2: Linking using Hyperlink Option 1

Select the text or image and click on the hyperlink icon to see all the hyperlinking options as explained in the above section. Enter the page URL along with #div id in the box available in the first option to connect to that particular section of a page. In our example, we enter “https://www.yoursite.com/your-page.html#ID1” to link to the heading. When you click on the link you will be taken to the heading defined in the Step1.

Linking Slideshow and Gallery Images

When you have a multiple images in one element like Gallery or Slideshow, then you have a link option on each image during the image uploading process as shown in the picture below. Once you click on the link icon, you will see the same set of options as explained in the above section.

Linking External Webpage in Navigation Menu

If you want to link an external webpage in the navigational menu, then you have an option available under “Pages” tab.

• Click on “Add Page” button available under “Pages” tab.
• Click the + icon to create a new page.
• Choose “External Page” option from the list.

• Enter the page name and external URL to link an external page.
• Select whether you want to open the link in same or new tab page.
• If required, check “Hide from Search Engines” box to disallow search engines to follow the linked page.
• Click “Done” to see the page is added in the menu.

For example, you can create a page named “Blog” and link to your external blog URL. When users click on the Blog menu Weebly will automatically redirect them to your external blog page.