Links in background

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Hey there! When searching to see if anyone had already asked this question, I found an answer but also notice that it was from a year ago, so I figured I'd ask to see if there's any updated info.

Anyway, what I'd like to do is have an element in my background that's clickable. (A link)

In my background I have a little box I've added that has icons for Facebook, Twitter and an RSS feed. I would like to link these small icons in my background to be links to those websites/pages.

I realize I could just take the box image off my background and then just insert it onto all my pages, but I'd really like to have it as a background feature. It's pictured below:



Now I first tried adding a hot-spot in Fireworks when I made the image, but even after doing that (and saving as the original .png), when I uploaded it as my background the link is not there. I just want to know if what I want is in any way possible.

Thanks!
Brandon
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
  • unsure

Posted 7 years ago

  • 1
Photo of Justine

Justine

  • 751 Posts
  • 45 Reply Likes
Hi Brandon,

From what I understand, you have created a background image and in that image you've added the hyperlinks for Facebook, Twitter and an RSS button, but when you upload that saved background image, the links don't work.

From my understanding, and I could be wrong, the reason for this is because you have saved the background image as a PNG, which strips out the hyperlinks in the image - meaning that the icons are basically just pictures and not links.

The best recommendation I can offer is that you add the links to Twitter, Facebook and an RSS feed using HTML code in the HTML widget. It is possible to do that, and if you'd like the steps to do that, please let me know.

What you can also do is post this question on the thread you visited - someone there may have a better idea how to create a background image with hyperlinks that you can upload.

Sorry I don't have an easier solution for you!
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Yes, if you could give me those steps for the HTML I'd really appreciate it! Thanks! :)
Photo of Justine

Justine

  • 751 Posts
  • 45 Reply Likes
Hi Brandon,

These methods should cover all the buttons you'd like to add to your site. You can add Social Networking buttons with the "Widgetbox Gallery" widget located in the "Widget Collections" on the right-hand Sidebar. Alternatively you can add it using the HTML Widget (as I mentioned previously).

Using the Widgetbox Gallery

1. Drag and drop a Widgetbox Gallery Widget onto your page.
2. A dialog box will open, click on the "Social Networks" tab in the left-hand column, choose your desired network and customize the settings.
3. Click on the green "Get Widget" button and it will be saved and added to your page.
4. Save and preview your page to view the button.

You can follow the same steps to add a Twitter button to your site. You will need to customize your settings before adding it to your page.

Adding a Facebook button using the HTML Widget:

1. Go to http://www.facebook.com/share_partner....
2. Choose your button and copy the HTML embed code.
3. On your Yola site, drag-and-drop an HTML Widget from the Sidebar on the right onto your page (the icon for this is a blue sphere).
4. An HTML editor will open up that will allow you to paste your code (use right-click > paste or ctrl-V to paste).
5. When you are done, click "Save" and you will see the Facebook button on your page.

Lastly, you can add an RSS Feed to your site by following these steps:

1. Drag and drop a Widgetbox Gallery Widget from the "Widget Collections" folder in the Sidebar onto your page.
2. A dialog box will open, search for "RSS" to see all the widgets available.
3. Choose the RSS feed you would like to use on your site.
4. Edit your settings to customize your widget.
5. Click on the green "Get Widget" button and it will be saved and added to your page.
6. Save and preview your page to view the widget.

There are quite a few other options for adding badges and RSS feeds to your site, and we have a really helpful tutorial about them, and other content, over here: http://www.yola.com/tutorials/categor....

I hope this helps!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Just to add, if you already have the HTML code (with the images and links), you can add to a HTML Widget and place it on the page.

You will then need to add two Column Dividers to the top of the page, one under the other. Now insert the HTML widget into the bottom Column Divider, and click on the Margin button. You can now type -100 in the top field and the image will move up the page (outside of the content area). You can then change the numbers so that it is in the position you like. But make sure that you do it in steps otherwise you may lose it at the top of the page.

The column divider above it is very important as this stops the rest of the pages content from moving too.

If you need any more help on this matter, just ask me.

Andi