How to Add Links, Lists, Images, and Videos to Your UltraSignup Event Description
Want to personalize your event page on UltraSignup? You can enhance your description by adding links, lists, images, maps, and videos using HTML and inline CSS. If you're not comfortable with coding, consider getting help, as errors in formatting can break your event page (if you hit a snag, reach out to UltraSignup Support). Follow the steps below to correctly format your description.
Event Setup >> Edit Description
Want to further style or personalize your UltraSignup description? Below, we will show you how! Adding style to your description involves the use of HTML and some inline CSS. If you are not comfortable with code, then have someone who is do this part. Errors with the code can result in breaking your event page, so please be very careful when adding and/or editing the code shared below.
Adding Links
To add links to your UltraSignup description, you can simply copy the following code and paste it into your description.
<a href="[add your link here]">Add your clickable text here</a>
If you want your link to open in a new tab:
<a href="[add your link here]" target="_blank" rel="noopener noreferrer">Open New Tab</a>
Place your URL between the quotations. So your code should look like the following:
<a href="yoururlhere.com">Clickable text</a>
New tab:
<a href="yoururlhere.com" target="_blank" rel="noopener noreferrer">Open New Tab</a>
Adding Lists
Adding lists can become a bit more complicated. The content in the description editor does not stay formatted, so the code can become difficult to find and read. However, you can add an ordered list (will include numbers), and an unordered list (will include bullet points.)
Ordered List:
- List Item One
- List Item Two
Unordered List:
- Item One
- Item Two
When added to your description, here is how it will appear:
Embedding Images
To add an image to your description, the image must be hosted somewhere, and you must have a URL for the image. Some common places to host images are Google, Dropbox, Image Shack, Free Image Sharing, etc...
Once you have uploaded your image, and you have a URL that opens the image in a browser, you can add the image URL to the code below, and copy/paste into your description.
<img src="[add your image URL]">
example:
Embed a Course Map
A map can be added to your description using an iFrame provided by the website or service where you found or created the map. You can also add an image of a map by following the steps above (Add an image).
When adding an iframe to your description, it's best practice to open a new section in your description so that the iframe code does not get mixed up in your content or any other code you may have added. It will be much easier to manage.
Once you have the iframe, simply copy/paste the iframe into a new section in your description editor.
Embed a Video (YouTube, Vimeo, etc...)
When you upload a video to Vimeo or YouTube, an iframe is generated. You can copy that code and paste it into a new section in your description. Here is how to get to your iframe/embed code in YouTube:
Copy the code, and paste into your description:
Make your Embedded Video Responsive
Step 1: You will need to remove the height & width from the iframe:
Step 2: Add this snippet of code before the iframe:
<style>.embedded-video{aspect-ratio: 16 / 9; width: 100%;}</style>
Step 3: Then, insert the following text between iframe and src:
class="embedded-video"Review: Your edited iframe should look like this:
Warning: Broken Description After Adding Code
- Ensure the inclusion of all brackets and closing tags in your event description to avoid potential breaks. Missing either element can lead to a malfunctioning event description. Detecting a broken description is straightforward – it will not display as intended. For instance, omitting the closing tag when inserting a link will result in your entire description being linked.
- If you discover that your description is broken due to added code, the recommended course of action is to remove all code and begin the process anew. This ensures a clean slate for accurate and error-free event descriptions.
Comments
0 comments