Adding Images to the Navigation Column

 

Ok, so with a little HTML tweaking you can add icons and images to the bottom of the (Phoenix theme) navigation column. You can even make them link to other pages within your site or to external web pages!  Here's how...

 

  • First you will want to upload your chosen image to the Fotomerchant account as an AssetThis tutorial will cover the process for you.

  • Next, still on the Website / Assets page, you can click on the "Copy Download Link To Asset" text below your image.

  • This will give you an image link looking something link this..*

http://img10-us-we-ng.prod.fotomerchant.com/DHPDJ1APPH-ORH-1SV3CI/assets/53e9baac85c9b.png?&s=abca8ff3b14ad4c27fd189e53bbb0278

  • Paste the link into a text document so you can come back to it shortly.


  • Now head to the Website / Theme section of your admin account.
  • If you're using the Phoenix website theme, scroll down to your Navigation section.
  • If you're using the Geneva website theme, scroll to the very bottom of the page to your Footer section.

Now In the Navigation / Footer Text area copy and paste in the following HTML code..

<img src="________________" width="42" height="42">

  • Now between the quotation marks, copy in the Image Link that we found earlier.. For example, I now have the following HTML code..

<img src="http://img10-us-we-ng.prod.fotomerchant.com/DHPDJ1APPH-ORH-1SV3CI/assets/53e9baac85c9b.png?&s=abca8ff3b14ad4c27fd189e53bbb0278" width="42" height="42">

If you'd like the image to link to another page in your site you can add an <a href> tag around the <img> tag code we've just built..

<a href="feed">______________</a>

This is an example of a relative link that allows visitor to subscribe to my Blog RSS Feed.
In the same way I could use another relative link to take customers to my About page: <a href="about">_____</a>
Or I could use a relative link to send them directly to one of my Galleries<a href="portfolio/natural-beauty">_____</a>
You can also link to an External site using an absolute link<a href="https://www.facebook.com/">_____</a>

So I'll insert my original Image Code into this a href code to get this...

<a href="feed"><img src="http://img10-us-we-ng.prod.fotomerchant.com/DHPDJ1APPH-ORH-1SV3CI/assets/53e9baac85c9b.png?&s=a00a8ff3b14ad4c27fd189e53bbb0278" width="42" height="42"></a>

Note that you can edit the width and height fields toward the end of the code to fine-tune the sizing and aspect ratio of your asset.

..and if you're interested there's more information available on these simply HTML methods via these links..
Image tags
HTML Links

 

  • Finally, hit the green Save button toward the bottom right of the page!

 

..and you're Done!

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk