skip navigation

Site Guide

This page serves as your website cheat sheet. This is where you will find helpful tips and best practices for editing your site content and links to SportsEngine resources. 

Help Center & Additional Resources

Find answers to your questions and contact information.

// SportsEngine Help Center

SportsEngine has compiled a massive library of help articles that will walk you through almost every piece of functionality the platform has to offer. You can search by keyword to find relevant articles that will assist you in getting the most out of your website.

Please use the link below to access the help center.


// Specific Help Articles

Below is a list of the most frequently asked questions that link to SportsEngine's help article data base.

How do I add page elements?

What are news articles and how do I add them?

How can I collect data from fans?

How do I give someone access to edit the site?

My SportsEngine account guide


// SportsEngine Technical Support

Experiencing unknown errors, account login issues, or general technical questions?

Our Customer Support Team is available to help:

Days Hours
Monday through Friday 8am - 7pm CST
Saturday/Sunday/Holidays 9am - 6pm CST

Email them at or contact them via the SportsEngine live chat messaging service during normal business hours.

// SportsEngine Additional Support

Contact SportsEngine Account Management for the following issues or questions

  • Third party implementation or integrations

  • Advertising implementation

  • Registration questions

John Kelsey

Technical Solutions Specialist

Greta Seiffert

Project Manager

// USL Additional Support

Contact USL Administrators for the following issues or questions

  • PDL team site best practices

  • PDL dedicated advertising space

  • Additional site customization requests

Adam Satz

Manager, Digital Network

Lizzie Seedhouse

Vice President, Digital

Forms, Payments, & Other Products

SE offers a suite of products available to you. Find out more.

Contact SportsEngine Account Management to get started with our form builder, payment processor, or other products. 

Jessie Doig

Executive Sales Representative

PDL Mandated Content

League requirements outlined.

You own your website and have full control of where content appears and what that content is. However, the USL does require one piece of advertising stay consistent on your home page. The 300 x 250 pixel mirrored page element that appears at the top of your home page must remain in that spot.

Moving or shifting this advertisement may result in a fine imposed by the USL corporate office.

Repeat infringement in this area may result in escalation of fine amounts. 

In addition, the absence of this element is subject to immediate intervention and correction by the USL staff upon discovery.

Template Benefits & PDL Shared Content

Website features specific to PDL affiliation.

With the PDL template, your team has received a professional, branded website that instantly tells visitors your team is part of Premier Development League network. 

// PDL News

On the PDL template, your team can display news posted to This allows your site to have fresh content without additional work on your end. 

// Dynamic Widgets

PDL utilizes SportsEngine League Management system to serve up dynamic team pages and widgets that you can utilize throughout your site to display schedules, statistics, and standings. The information is fed in directly from

If you have questions about additional widgets you can use on your website, reach out to your PDL or SE contacts (listed above.)

Assets Page

Learn to edit your global content.

There is an Assets Page on your site that contains a number of important things that display globally. It can be accessed by clicking the "Assets" icon in the left menu bar that contains the "Edit/User Mode" switch. There are multiple elements of your site that can only be edited or updated using the Assets page. 

These elements have been labeled accordingly to avoid confusion.

Image Sizing & Aspect Ratios

Get the most out of your website photos.

// Image Tips

The following are tips to help you achieve the best possible image display for your site.

We suggest that you use the largest possible images you have. (That said, raw professional photos can be too large and slow the load speed of your website.) We recommend images no wider than 2000px.

Using large images will ensure that your image will never have to scale-up in size and will only need to scale-down if necessary. Scaling images up can lead to stretched, blurry, or pixelated results.

We find that aspect ratio is very important when adding images to slideshows, call to actions, site headers, etc. For example, if your news slideshow element is set to a 2:1 ratio–then a 2000px by 1000px image would be appropriate.

It is wise to avoid using a primarily vertical image within a primarily horizontal page element and vice versa. Doing so may lead to excessive stretching and blurriness.

When saving out your file, make sure that the resolution or dpi is not more than 72. Also, make sure you are saving it as a web file like a jpg or png. Only save out as a png if image needs to have a transparent background. Jpgs are smaller file sizes and are more efficient for your website's load speed.

//Aspect Ratios

 Image Type

 Sizing Specs

 News Article Preview Image
Aspect ratio of 5:3
Minimum width of 1000px
 Single Photos 
(call to action element, in-article images, single photo elements)
Aspect ratio flexible
Full Width Layout Container = Min width of 1000px, Max width of 2000px
Other Layout Container (non full-width) = Min width of 400px, Max width of 1000
 72dpi or higher
 Header Sponsor Banner Ad
 728px x 90px
 Featured Sponsor Logo
Aspect ratio of 1:1
Min width of 150px, Max width of 500px
 Sponsor Scroller Logos
 Aspect ratio of 1:1
Max height of 60px
Min width of 100px, Max width of 300px
 72dpi or higher

NOTE: It is very important to keep in mind that the exact pixel size does not matter as much as the ratio. All images will scale down to the horizontal width of their column. As long as all images in same row are the same ratio, they will display the same height.

Site Header & Sponsor Locations

How to edit your Site Title, Header Logos, and Sponsor Inventory.

// Site Title

The Website Title and Tagline is controlled by you and can be edited from your assets page. 

Add the CSS Class "ajax team-name" to the Text Block Element hosting your website title for it to display at the top of the site. 

Use the format set up for you (Screen shot below)
Font should be set to "Normal" with the Headline in font size 48 and the tagline in font size 18. You can remove or add a tagline as you like. 

Add an additional CSS Class of "center" to the same element to center align your titles.

// Header Logo

The Header Logo is controlled by you and can be swapped out at any time. It currently is set to the PDL logo and links to This image does need to have a URL linked to it or it will not display properly on your page.

Add the CSS Class "ajax presenting-sponsor" to the single photo element on your assets page.

header sponsor logo

// Leaderboard Graphic

The Leaderboard Graphic is controlled by you and can be swapped out at any time. You can promote sponsors, events, registrations, newsletters or whatever you want your fans to know more about. This image will be cropped to 728 x 90, and it does need to have a URL linked to it or it will not display properly on your page.

Add the CSS Class "ajax leaderboard-ad" to the single photo element on your assets page.

Add the CSS Class "center" if you don't have a featured sponsor logo and you'd like this leaderboard to be centered above the content container. 

// Featured Logo

The Featured Logo appears at the top of the page to the left of the leaderboard ad. You can control the image that sits in this spot through the assets page.

Add the CSS Class "ajax leaderboard-sponsor" to the single photo element on your assets page.

Add "Presented by" to the caption field within the single photo element to add a label to the logo. 

// Scrolling Sponsor Bar

The scrolling sponsor bar is a unique way to showcase advertisers and sponsors on your website. You control what sponsors are included in it by adding them to the Sponsor Bar layout container on your homepage. Just add Single Photo Page Elements to the layout container and they will be automatically pushed to the Sponsor Bar. Remember to only use wide images with big logos that will be easy for users to see.

Add the CSS Class "sponsor-scroll" to a full width layout container at the bottom of your home page.

Social Media & 3rd Party Tools

Use our Code Element to add feeds to your website.

// Social Media Embedding

Most social media services have feeds that can be embedded on to your website. This can be done by copying the embed code from the service, and applying it to the site using the Code page element. Below are links to pages that will help create your specific embed code.






// 3rd Party Tools and Widgets

Please contact a SportsEngine representative before adding any code to your website. The SportsEngine platform is a proprietary system, and 3rd party code needs to be installed in specific places.

Embed Example

Search Engine Optimization

SEO tips.

// Friendly URLs

Friendly URLs are a great way to keep your website clean and easy to navigate. It also helps your website show up in search engines more often.

Below is an example of a page that does not have a friendly URL:

Below is an example of a page that does have a friendly URL:

Below are the friendly URLs that should never be changed:

Home Page: Make sure the friendly URL for the Home page is "home"

Assets Page: Make sure the friendly URL for the Assets page is "assets"

// SEO Tips

Below is a link to an article written by SportsEngine's SEO team that shares valuable information on how to optimize your site for search engines.

Custom CSS Classes

Utilize the custom features of your website template. 

Page Elements and Layout Containers can be modified by adding one or more custom "classes" to the page element or layout container. This will change the appearance of your site.

You can add more than one class on a page element or layout container by separating them by a space.

Please use caution when adjusting page elements and layout containers that already have custom classes. There is no way to revert edits made to the custom class field. Make note of what classes are being used before changing them, in case you need to go back.

// Page Element CSS Classes



 CSS Class 

 Add Class to

 Global text block that houses the site name [Location + Nickname]
 ajax team-name
 Text block
 Global logo that sits to the right of the site title
 ajax presenting-sponsor
 Single photo element
 Global sponsor logo that sits to the left of the team sponsor leaderboard ad
 ajax leaderboard-sponsor
 Single photo element
 Global leaderboard ad sits between navigation and content container
 ajax leaderboard-ad
 Single photo element with a 728x90 image
 Template Call to Action styling
 Call to Action
Center team name across site banner or center team sponsor leaderboard ad above content container
 Text block or single photo element


// Layout Container CSS Classes



 CSS Class

 Add Class to

 Houses the sponsor scroller images 
 1 column container on Sponsor Scroller page 

How-To Videos

How do I add CSS Classes to page elements?

How do I add CSS Classes to Layout Containers?

This is your Site Guide

Do not delete this page. 

This is where you will find helpful tips to editing your site content, best practices, and links to Sport Ngin resources. This is your Cheat Sheet.


Text Styles

Use this for all text body copy.

Heading 2

This should be used for subtitles within the page body text. The text block area designated for 'subtitles' automatically underlines, so avoid using those outside of the top of a page. 

Heading 3

Heading 4

Heading 5

These are intended for delineating subsections of page content. Each section should be titled with an <h2> and sub points with an <h3>, sub points under that subsection with an <h4> and so on.

Custom Call-to-Actions

Standard Callout

PDL 101

Expansion Opportunities

Custom Class: N/A

Select the "Call to Action" element in Site Builder. The title entered will display on top inside a red box. Any sub-titles entered will appear a larger white text and can link out to other pages. Lastly, add a photo to display as a background. 

Alternative Callout

MLS Draft News

Custom Class: "altCta"

Select the "Call to Action" element in Site Builder. Add the above class to the element in edit mode. The title entered will display to the bottom left of the element in large white text. Lastly, add a photo to display as a background. 

Text Block Callout

Header Text Here


Create a Link 

Custom Class: "customCta"

Select the "Text Block Element" element in Site Builder. Add the above class to the element in edit mode. The title entered will display below the image uploaded. The image will display centered within a circle. Lastly, add a link that will be auto styled and site near the bottom of the element.

Custom Aggregators

Highlight & Link Aggregator

Top Performance

Custom Class: "customAgg"

Select the "News Aggregator" element in Site Builder. Add the above class to the element in edit mode. Set the element to display only 1 condensed new article. The image associated with the article will fill the entire element background. The title added to this element will appear above article header in small red box. The news article title wall display over the image in large white text. 

Latest News

2018 MLS SuperDraft Recap: Three PDL Alums Selected No. 6-10

01/24/2018, 11:00am EST

Mueller, Segbers and Adams continue run of PDL alums selected

2018 MLS SuperDraft Recap: Three PDL Alums Selected in Top Five

01/23/2018, 9:30am EST

Blackmon, Atuahene and Bakero lead PDL alums picked in 2018

Spotlight Aggregator

Custom Class: "spotlight"

Select the "News Aggregator" element in Site Builder. Add the above class to the element in edit mode. Set the element to display expanded news articles. The image associated with the article will display to the left of the article title. The background of the spotlight aggregator will be red. All text will be white. 

Social Media

Stay Connected

Connect with the PDL

facebook twitter youtube

Keep up with your favorite
players and teams!

Custom Class: "stayConnected"

Select the "Text Block" element in Site Builder. Add the above class to the element in edit mode. Enter a title to display at the top in larger white text. The add the social media links that you wan to display. Lastly, add any text that you wish to display below the linked icons.

Connect Icons

Custom Class: "beSocial"

Select the "Text Block" element in Site Builder. Add the above class to the element in edit mode. Add the social media links that you want to display. Your site is currently able to display the Facebook, Twitter, Instagram, Youtube, and Vimeo. Make sure one of those words is in the URL for icon to apply.


PDL Standings Leaders

Use the Custom CSS Class "trimStandings" and apply to the specific widget element, or tab element you'd like to apply the trim standings to. 

Home Page Bottom Content Container

The layout container must contain the custom css class updates.

Elements hosted here are the twitter feed + the tab element with video embeds and a news aggregator. 

The news aggregator should be set to display three expanded news articles.