View
258
Download
2
Category
Tags:
Preview:
DESCRIPTION
Looking to customize your Friends Asking Friends site? In this session, we’ll cover how to apply formatting to registration types, add pictures to the event information area, and create pop-up custom fields. For this session, we recommend that attendees have a basic knowledge of HTML.
Citation preview
How to Spice Up Your Friends Asking Friends® EventLOGAN TRAVIS
#bbcon#FAF
#SPHERE#LoganTravis
Tweet this now
2 #bbcon
Agenda
• Identify options for enhancing the look and functionality of event pages
• List best practices for working with HTML code
• Describe how to add HTML code to an event page
3 #bbcon
Enhancing the Look and Functionality of Event Pages
4 #bbcon
Enhancing the Look
Graphics
Links
Formatted Text
5 #bbcon
Enhancing the Functionality
Pop-Up WindowsMaps
6 #bbcon
Best Practices for Working with HTML Code
7 #bbcon
BEST PRACTICES
8 #bbcon
Design before you develop
Identify all graphics, documents, etc. that you will use
Keep all needed links in a text file
Work in a copy of your event at first
Plan
Plan
Gather
Store
Practice
Practice
9 #bbcon
Adding HTML Code to an Event Page
10 #bbcon
Scenario 1: Liven Up the Registration Options
11 #bbcon
Scenario 2: Liven Up The Fee Structure Area
Graphics
Links
Formatted Text
12 #bbcon
Scenario 3: Add a Pop-Up Window to a Custom Field
13 #bbcon
Scenario 4: Add a Map to Event Info
14 #bbcon
Summary• Identify options for enhancing the look and functionality of event
pages
• List best practices for working with HTML code
• Describe how to add HTML code to an event page
15 #bbcon
Steps to Add HTML Code To Display a Graphic
1 Navigate to Control > Administration > Tools > Image Library.
2 Locate and copy the URL for the graphic you want to add to an event page.
3 Navigate to the page you want to edit.
4 Add the following HTML code:<img src=“Graphic-URL” alt=“Text about image” />
Example: <img src="/AccountTempFiles/account904299 /images/team.png” alt=“Team” />
16 #bbcon
Steps to Add HTML Code to Use Bold Formatting
1 Navigate to the page you want to edit.
2 Add the following HTML code:<strong>Text-to-Display</strong>.
Example: Volunteers receive a <strong>free T-shirt</strong>.
17 #bbcon
Steps to Add HTML Code to Open a Document
1 Navigate to Content > Content Management System > File Library.
2 Locate and copy the URL for the document you want to add to an event page.
3 Navigate to the page you want to edit.
4 Add the following HTML code:<a href=“Document-URL” target=“_blank”>Text-to-Display</a>.
Example: Review the <a href=“http://www.kintera.org/ atf/cf/{a2c5ee3f-c4e6-494d-a327-fc6e06004da6}/ 123PARTICIPANTGUIDE.PDF” target=“_blank”>Participant Guide</a>.
18 #bbcon
Steps to Add HTML Code to Create an Email Message
1 Navigate to the page you want to edit.
2 Add the following HTML code:<a href=“mailto:Email-Address”>Text-to-Display</a>.
Example: <a href=“mailto:logan.travis@blackbaud.com”> Email Logan Travis</a>.
19 #bbcon
Steps to Add HTML Code to Open a Webpage
1 Navigate to the page you want to edit.
2 Add the following HTML code:<a href=“Website-URL” target=“_blank”>Text-to-Display</a>.
Example: Visit <a href=“http://www.blackbaud.com” target=“_blank”>Blackbaud’s website</a>.
20 #bbcon
HTML Resources• http://w3schools.com
• http://www.hpsgroup.co.uk/htmlcheatsheet
21 #bbcon
22 #bbcon
Don’t forget to complete a session survey! Each completed survey enters you into a drawing to win a complimentary registration to bbcon 2015 in Austin, Texas*.
*Blackbaud reserves the right to change or withdraw this promotion at any time, without advance notice. Promotion has no cash value and may not be exchanged, applied to, or combined with any other offer.
Are you pumped up and ready to go?
Recommended