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 Welcome page snippet examples on the left side of the page when editing it. 

Important Note: Any changes can not be undone so please be sure to verify where you want the button before starting this process. 

Adding a New Button

• Select Edit Page at the bottom of your Welcome Page to access the Snippets menu on the left (you must be logged in on the Admin side, and have the appropriate user permissions in order to see the Edit Page button). 
• Click and drag a snippet with a button(s) from the Snippets menu to your Welcome Page body.
• Hover over the button(s) then select Edit Link. Use the Text field to enter the desired text that will be visible on the button. It can be helpful to select the New Window checkbox to open the linked page in a new window on the device. 
• Select OK to save the button details then scroll then scroll to the bottom and select Save Changes to complete that update to the Welcome page. If no other changes are being made, select Exit Edit Mode. 

Adding Buttons to Existing Snippets

Use these steps to add new buttons to an existing snippet currently positioned on your Welcome page. 

First, copy the desired the HTML code below: 

• White Button w/border: <a href="#" class="btn btn-default edit">WHITE BUTTON</a>
• Blue Button: <a href="#" class="btn btn-primary edit">BLUE BUTTON</a>

• Double (2) White Buttons: <a href="#" class="btn btn-default edit">DOUBLE WHITE BUTTON 1</a> &nbsp;<a href="#" class="btn btn-default edit">DOUBLE WHITE BUTTON 2</a> 

• Double (2) Blue Buttons: <a href="#" class="btn btn-primary edit">DOUBLE BLUE BUTTON 1</a> &nbsp; <a href="#" class="btn btn-primary edit">DOUBLE BLUE BUTTON 2 </a>

Next, paste the code using these steps: 

• • Place your cursor on the desired snippet and click. The snippet will display a dashed border around it. 
  • Select the blue <> icon from the tools displayed on the side of the snippet. A window to enter HTML will be displayed. 
  • 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)
  • Update the items shown in bold text in the code above to reflect a different title/words to be displayed on the button.
  • Select OK to save.
  • Your Button(s) will appear on the snippet. 
    • If you would like to move your Button, click your cursor at the front of the button and use the space bar or backspace key. You can adjust this way to eliminate gaps or spaces.
  • Select Save Changes to update the Welcome page then Exit if all changes have been completed. 

Creating Custom Button Colors

The default button color is white or blue. In order to create a button that is a custom color, you will need the Red Green Blue (RGB) numeric code for the color you would like the button to display (along with the HTML code for the button). Locate the RGB Codes using the Google Color Picker Extension or an Online Chart

In order to use this method, you must have an existing button in a snippet as outlined above. The bold X's below represent the RBG colors. Replace where it says class ending at target. 

• HTML Button Code: class="btn btn-primary" original-title="" title="" _blank"="" style="background-color: rgb(XXX, XXX, XXX)"

Button 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 where the highlighted section 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);">TITLE TEXT HERE</a>

Generic Links to Locations on a Public Site

When you are updating your Welcome Page or Public Side, you may want to use links that go directly to a location (known as 'deep linking'). This can create a seamless experience for your families. Below is a table of the URL paths that can be added to the end of the Public URL as a direct link. For example, if your district site is EXAMPLE.ce.eleyo.com, you would add the path to the end of that URL to create that direct link.