Organizations are always looking for ways to improve visibility of their teams on their homepage. While the traditional navigation lists work, finding a visually appealing way is a topic of discussion. A few weeks back, we found an organization, Livermore American Little League, that used a few simple elements and code to create a really cool way to feature its divisions and teams. You can go to its website and see on its homepage what it is doing, but for this article, I've included a screenshot below.
So, how did they do it? There are three main steps we'll need to go through:
1) We need to upload the team logos to Sitebuilder.
2) We have to create a Tab Element listing out the divisions.
3) Use the Code Element in each tab to add the logos and links to the team pages. (we're assuming you have team pages set up, if you need help with that, here's the step by step and video)
Livermore created a page called "File Manager". It's view permissions are set to "private" since it's not a page that makes sense to make publicly available. Then, using the single Photo Element, add each logo to the page.
Next, you'll want to set up the logo layout using the Tab Element. You can organize and put divisions, levels, or group in any way you want.
Now, add a Code Element in each tab. We'll need to add code which will include the photo/logos we added earlier with a link to each team page (or whatever you want to link to) as well.
Now, you'll want to add code to each element.
<table width=“100%” cellspacing=“10”>
<td><a href=“http://www.livermoreamerican.com/page/show/1579293-a-angels”><img src=“http://cdn2.sportngin.com/attachments/photo/4475/0429/angels_large.jpg” alt=“Angels” height=“42” title=“Angels”></a>
<td><a href=“http://www.yourwebsite.com/page”><img src=“http://linktoimage.jpg” alt=“altag” height=“42” title=“titletag”></a>
Keep adding in each tab until you are done. Make sure to test out your links to make sure you did them correctly. If you did, you should have a great looking presentation for your divisions and teams on your homepage.
Awesome job Livermore American Little League.
Tag(s): Pro Tips