Weebly offers multiple ways to use the hyperlinking option 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 various hyperlink options with various elements along with a tip for connecting to section of a webpage.
How to Create Hyperlinks in Weebly Site?
After you added content to your site, click on any text or image to see the pop-up showing 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 on Your Website – In order to connect pages on your own site select the page from the drop down which is part of your own site.
- Store Page – This option is added with the introduction of new ecommerce features in Weebly. You can link any category or product page from your online store.
- File on Your Website – 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 Address – Enter your email address to link to an email id. This will open the default email client on your computer when someone click on the link.
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.
Step1: 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 as needed in your theme.
<h2 div id="ID1">Heading Here!!!
Step2: 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 “http://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 then 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 menu then you have an option available under “Pages” tab. Click on “Add Page” button available under “Pages” tab and choose “External Link” option. Enter the page name and external URL to link an external page to the menu page. For example you can create a page name “Blog” and link to your external blog URL. When users click on the Blog menu Weebly automatically redirect them to your external blog.