Information Computing and Technology Services

ECU Tab Bar Element with Icon Control

Part of having a successful website is your viewers being able to navigate your page with ease. We've developed some custom elements for you to easily create navigation panels and headers for your template. This tutorial explains how to use the "ECU Tabbar Element w/ Icon Control" custom element. Make sure you add this element to your sites template for it to appear on all your pages in your site. View example

tabber element - tabbarnav-300x143

Creating a navigation bar using "ECU Tabbar Element w/ Icon Control" can be done in three (3) steps: 

  1. Insert the custom element "ECU Tabbar Element w/ Icon Control" 
  2. Create your tabs with hyperlinks 
  3. Choose your prefered icons

Detailed Tutorial

We have featured this element on the ECU home page in the past and it is the easiest means to add navigation links to your page. You also have the option to include icon links for easy access to other sites. 

To create a navigation bar using "Content Slider" follow these three (3) steps: 

Step 1: Insert the custom element on your page where you want it to be displayed by clicking on this icon. 

tabber element -insertelement-300x11

Step 2: Now click on the gear icon to define your navigation links. Type in the name and url link for each tab. There are also color option to match various types of webpage themes. Be sure to include "http://" with your url. 

tabber element - tabnavdata-300x212

Step 3: Now click on the "icons" tab and select which icons you would like to use as part of the navigation bar. 

tabber element - tabbaricon-259x300

And that's it! Now you can create a navigation bar for your sites template

Tips & Tricks

This element was created for the old 770 pixel width pages. The "Gold Gradient: option in colors therefor is created to extend and fade accordingly. If your page is the new page width (960 px) you will want to choose a solid color for your navigation bar.
Need Help?