skip main site navigation go to current site section navigation

Creating Call to Actions Correctly

Call to Action Buttons allow you to create a clear and prominent link to social networking sites and other useful sources of information.

Helpful Tips!

  • Not too many Call to Actions, it can look cluttered.
  • Use for PDFs or other docs but not Image files.
  • Best for linking to social networking sites.
  • Keep your link names clear and concise.
  • Remember to always preview the parent page.

Walk Through and Jump to Points in Video

Making the Link

  • Nav Column Call to Action adds a list of links underneath the left-hand navigation on your page. These are styled as icons to direct users to useful links.
  • The Nav Column Call to Action is best used for links to Facebook accounts, Twitter feeds, emails and sometimes forms or applications.
  • To insert Nav Column Call to Action, right-click your Add-Ons folder and then left-click Nav Column Call to Action.
  • A dialog box will appear and ask you to name the new item.
  • You do not need to use dashes but you do need to name it something that will clarify it is content if you ever need to go back and edit it.
  • For instance, if this will be a Facebook link, name it Facebook.
  • Click OK.
  • After entering the name, your new item will now appear in your Add-Ons folder.
  • Now select your new Call to Action add-on in the Content Tree so that we can customize it in the Content Editor Loading Dock.
  • Keep in mind, each call to action add-on can only link to one image, link, or document at a time.
  • On the right side of your screen, find the second section at the top that says Call to Action Data.
  • Underneath this section are several fields.
  • The first field is for your link.
  • You do not enter the link in the blank field but instead use the tabs above to enter in the specific type of link.
  • As you can see, there are several different buttons you can click to insert a link.

Internal Link

  • The first button, Insert Link, will create an internal link to a page found elsewhere on Sitecore.
  • In the dialog pop-up you will choose your internal link from the content tree on the left, and then enter in the title of the link that you want to appear on the live site.
  • Click OK.
  • You have created a Call to Action button with an internal link!

Media Link

  • The Insert Media Link tab will create an internal link to any file uploaded into the Media Library.
  • Click Insert Media Link to open a dialog window.
  • Find your media content in the media tree, click it and add a link description on the right-hand side.
  • Click OK.
  • You don’t want to link images here, this is best used for document files like applications or other forms.

External Link

  • The next option is the Insert External Link.
  • This allows you to paste a link to any site found outside of Sitecore.
  • Click Insert External Link
  • Cut and paste the URL for the site you want to link to in the dialog box and enter in a link description.
  • At this time you will also need to adjust the Target window.
  • Just click on the arrow to the right of the Target window box and select New Browser.
  • Any external links you choose should always be opened in a new browser so that people don’t get completely pulled away from the McCombs site.
  • Click OK.

Email Links and Others

  • Our next option is the Insert Anchor tab.
  • Ignore it!  Please!!
  • On to the Insert Email tab.
  • This directs the user to an email link. 
  • Click this option and a dialog box will open.
  • Enter in the corresponding email address and click OK.
  • You can ignore the Insert JavaScript tab and the Follow tab.
  • These are not the tabs you’re looking for!
  • This next tab, the Clear tab will wipe out any link currently associated with your Call to Action, so feel free to use this if you have made a mistake in creating your link.

Choosing Your Icon

  • After you have selected your link you can move down the content loading dock to the Type field.
  • Here you can select an icon for your link that will appear on the live site.
  • By default, the "Basic" icon should be selected.
  • This will show an icon of the McCombs logo.
  • If you click on this field to drop down the menu you will see all your other options: Facebook, Twitter, YouTube, Event, Register, Apply, and so on.
  • Pick the icon title that most closely corresponds with the content of the link you have selected.
  • If there isn’t an icon for your particular type of link, stick with the “Basic" link.

Check your Work!

  • When you are done, Save and Preview the parent page under which you created your add-ons folder.
  • Always preview your add-ons through the parent page.
  • You can make as many Call to Action items as you want. 
  • Just repeat the steps we went over.

Super hero cat

FAQ

Confused KittenWhy isn't my link working?

The most common problem with Call to Actions is not copying and pasting the full link. Make sure you have the entire link.

The link I linked to isn't there anymore. What do I do?

You can either delete the Call to Action completely by right-clicking it in the content tree and selecting Delete or you can upload  a working link into the correct field in the dialog box.

I love these things!  How many can I put it up on my page?

You can put up as many as you like, but too many will make your page look cluttered. They really should only be used if necessary.

Best Practices

  • Winning Guinea PigKeep in mind, using too many Call to Action items can make a page look cluttered. Between one and three is enough.
  • Make sure the Call to Action icons you create are pertinent to the content of the whole page.
  • If you don’t really need to have a Facebook or Twitter link on the page, don’t add one.
  • Think it through. You can try adding Call to Action items to see how they look, but they are not necessary.
  • Test to see what they look like integrated into your overall page build by previewing the parent page.
  • If you want to have a ton of Call to Action items then you will need to adjust your left hand navigation to avoid clutter on your page.
  • Do not create multiple Add-Ons folders under one page.