Welcome Page Buttons and Quick Links

When editing your Welcome Page, you have the option to add linked buttons to guide your community. These buttons appear as "Register Now" or "Enroll Now" in the Welcome Page snippet examples on the left side of the screen while in edit mode. You can customize both the text and the links on these buttons. Additionally, you have the option to create custom buttons using HTML. Below, you'll find instructions for adding buttons and additional ideas for useful button links.

Note: Changes made to your Welcome Page are final once Saved. 

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). 
• Select 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 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: 

	<a href="#" class="btn btn-default edit">WHITE BUTTON</a>
	<a href="#" class="btn btn-primary edit">BLUE BUTTON</a>
	<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>
	<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: 

• • Hover and select your desired snippet. 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.
    • A link icon will be displayed to add the URL that you want the button to go to. 
  • 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 the section that starts with class and ends with target. 

• HTML Button Code: class="btn btn-primary" target="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 Quick Links to Locations on a Public Site

When you are updating your Welcome Page or Public Side, you may want to use text and/or button links that go directly to a location within Eleyo (known as 'deep linking'). This can create an enhanced experience for your families whether it be account access, payment method management, or help with editing profiles. 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 EXAMPLE.ce.eleyo.com/account/saved. 

Additional Parent Help Resources

Beyond Eleyo URL quick links, you can also use URL links from our Parent Resource Learn Site Page. This has many helpful How-To's on various actions for customer account management, including instructions in Spanish. For example, add a button or text to your Welcome Page in December titled How to Access Tax Statements and link to the Printing Child Care Tax Statements Online article from the Parent Resource page in order to reduce phone calls in January regarding tax statements. Any of the Parent Resource articles related to questions you are commonly asked would be good to add to your Welcome Page links to reduce fielding calls and emails.

Additional Resources:

Editing Your Welcome Page

Public Side Subpages

Welcome Page Image Sizes

Working With Images and Marketing Tags