Welcome Page Buttons

When editing your Welcome Page, you have the ability to add buttons as quick links.  You will see these as 'Register Now' or 'Enroll Now' in the various snippet examples on the left side of the page when editing.  If you need to edit an existing button, or create a new one, please follow the steps below. 

Please note that any changes can not be undone so please be sure to verify where you want the button before starting this process. 

Select Edit Page at the bottom of your Welcome Page to access the Snippets menu on the left. Note:  You must be logged in on the Admin side, and have the appropriate user permissions in order to see the Edit Page button.

Using Snippets

The snippets menu contains multiple layouts that include buttons.

• Click and drag a snippet with a Button(s) to your Welcome Page body.
• Hover over the Button(s) to update Link and Text.

Adding Buttons to Existing Snippets

In order to add Buttons to an existing snippet you will need to copy and paste the HTML code. 

First, copy desired code below: 

• White Button w/border - <a href="#" class="btn btn-default edit">Request Care</a> 
• Blue Button -  <a href="#" class="btn btn-primary edit">Enroll</a>
• Double White Button - <a href="#" class="btn btn-default edit">Request Care</a> &nbsp;<a href="#" class="btn btn-default edit">Request Care</a> 
• Double Blue Button - <a href="#" class="btn btn-primary edit">Enroll</a> &nbsp; <a href="#" class="btn btn-primary edit">Enroll</a>

Second, paste the code:

• Place your cursor on the desired snippet and click. 
• Select the <> icon on the side of the snippet.
• Locate the area in the code where you would like your button to appear. Note: HTML code for Buttons is typically inserted at the end of the code just before the closer (</div). However, you can insert the code anywhere within the body as it makes sense. 
• Paste the code (i.e. use Ctrl + V)
• If desired, you can delete the highlighted areas above to add a different title to your Button.
• Click Ok to save.
• Your Button(s) will appear on the page.
  • If you would like to move your Button, click your cursor at the front of your Button and use the space bar or backspace key. You can adjust this way to eliminate gaps or awkward spaces.

Custom Colored Buttons

In order to create a custom colored button, you will need the RGB code for the color you would like the button to have and the HTML code for the button. In order to use this method, you must have an existing button in a snippet as outlined above.

RGB Codes - Google Color Picker Extension or Online Chart

HTML Button Code

class="btn btn-primary" original-title="" title="" _blank"="" style="background-color: rgb(56, 183, 117);"

Code Location

Copy the button code above and paste into your HTML code by placing your cursor in the snippet text and clicking the <>  icon on the snippet in which you would like the button to appear. The location should look similar to the entire code below but only the highlighted code needs to be replaced. You can then update the RGB code as well.

<a href="https://trainingdb.ce.eleyo.com/courses/category/117/outdoor-recreation" class="btn btn-primary" original-title="" title="" _blank"="" style="background-color: rgb(56, 183, 117);">Login/Create an Eleyo Profile</a>

Generic Links to Locations on a District Public Site

When districts are updating their Welcome Page or Public Side, they may want to use deep linking to create a seamless experience for their families. Below is a table of the URL Paths that can be added to the end of their Public URL.