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 incline 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">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">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:
<ol>
<li></li>
<li></li>
</ol>
<!-- Note: If you are missing your closing tag (</ol>) your description will likely break, so please make sure you are not missing ANY closing tags --->
Example with content: Add your list items between the angle brackets.
<ol>
<li>List Item One</li>
<li>List Item Two</li>
</ol>Unordered List:
<ul>
<li></li>
<li></li>
</ul>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:
<img src="https://help.ultrasignup.com/wp-content/uploads/2022/04/Untitled-design-7.png">
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: #
Final Result:
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.