All Collections
For Admins
How to Create a Page Element
How to Create a Page Element
Updated over a week ago

You must have "Full Access" or "Limited Access - Website" permissions to edit your site.

The following are basic guidelines to follow when adding a page element. For more detailed information, scroll to find the specific element you are looking for.

  1. Sign in to your site and turn on Edit Mode.

  2. Go to the page where you want to add the element and click Add Page Element.

  3. Choose the page element you would like to add.

  4. Add content and adjust the element settings.

  5. Click Create This Page Element.

Aggregator Elements

  • Comment Aggregator Element- If you have more than one comment stream across your site, create a Comment Aggregator to pull all comments and display them together in one place.

  • Dibs Aggregator Element- Showcase available (unclaimed or future) Dibs items (volunteer shifts) so users can claim them from the general and team pages of your site instead of their account. You must have Dibs sessions created before you can use this element.

  • Event Aggregator Element- This shows the upcoming scheduled events on your website. It is a mini-calendar that can be added to any page to help your members know what's coming up. Select All Tags for the event or scroll down and choose the specific tags that are relevant to this event/page. If you don't see the page or tag that you would like to select, enable it for the page.

  • News Aggregator Element- Display the latest news articles in a list on your site. A News Aggregator can be used to display articles on all topics, or it can be used to only display articles relevant to a certain topic by using tags.

Communication Elements

  • Contact Element- When members navigate your site, they may have questions. Display your organization's contact information through the look of a Digital Business Card with the Contact Element.

  • Instagram Element- Embed individual Instagram posts onto your website.

  • Social Media Links Element- Display link icons to various social media platforms to increase the visibility of your social media presence. Platform-specific icons are available for email, Facebook, Twitter, Flickr, YouTube, Vimeo, Instagram, Tumblr, Pinterest, LinkedIn, and External Link (Other).

  • MailChimp List Subscription Form: Adds a form for site visitors to subscribe to a MailChimp mailing list from your page.

  • Facebook Element- Display your Facebook page feed directly on your website and give visitors the ability to 'Like' your Facebook page from your SportsEngine site.

  • Comment Stream Element- Provides a place for users to add and reply to comments. A Comment Stream can be added to any website page by itself or placed directly under another element, such as a News Aggregator, to collect comments about that element. Users can choose to either add a new comment or reply to an existing comment.

  • Feed Reader Element- Add your Twitter or another site's RSS feed to your website to display recent tweets or to pull article headlines and links from other sources with an RSS feed.

Information Elements

  • Embed a Google Map - Add a Google Map to your website to allow members to find and get directions to the venue/location of an event.

    1. Go to Google Maps and locate the venue or location you are looking for by searching for it in the search bar.

    2. On the left-hand navigation bar, choose the Share button, then click on Embed a Map tab in the window.

    3. Choose your display size (small, medium, large, or custom), then highlight and copy the code in the field next to it.

    4. Navigate to your website and sign in.

    5. Go to the page that you would like the map to be added to, and turn on Edit Mode.

    6. Click Add Page Element, then choose the Code Element.

    7. Enter the element's "title" and paste the embedded code into the text box.

    8. Click Create This Page Element.

  • Link Element- Link to any outside web page or a web page within your organization's site.

    • After choosing the "Link Page Element," add content and adjust the settings, including the Link Type:

      • Absolute - Use this for links to external sites. Requires domain and path, ex:

      • Relative - Use this for links to internal pages within your site. Requires only path, ex) page/show

    • Click Create this Page Element.

  • Document Element- Attach documents anywhere on a site. Users can easily download this file in the original format.

  • Streaming Video Element- Stream videos directly to the website using a specific code within the element. If using Rapid Replay, click here to view details.

  • Venue Element- Displays venue statuses (open, closed, or pending) publicly on your website. Use the Venue Element to easily let members know when a game is rained out or when the game is still on!

  • Membership Report Element- This shows members from your website directory on a page. This page can be private, so only certain admins can view the members of your website. This can be useful if you want to give some admins access to your members but don't want to give them access to HQ.

  • Survey Report Element- Display certain data from any of your online registration sessions on any page of your website. Utilize powerful reporting selectors and filters to define the specific data you want to display, then arrange column and sorting order within a simple drag-and-drop interface.

  • Power Poll Element- Quickly polls your site visitors. For example, with this element, you can find out when your players prefer to practice, who deserves to be the coach of the year, or add a poll question just for fun.

  • Weather Element- Display the local weather forecast on your page. The weather data is pulled from the closest weather station via the National Weather Service.

  • Squad Locker Page Element- Create a dynamic store banner for your website to promote your store.

  • News Slideshow Element- Highlight the latest news articles in a slideshow, with each slide showing an image and a caption. Select All Tags for the event or scroll down and choose the specific tags that are relevant to this event/page. If you don't see the page or tag that you would like to select, enable it for the page.

  • Call to Action Element- Drive users deeper into your site by visually calling out important information or events with a graphic combination of text, images, and links that reacts when hovered over. Think of a Call to Action as a prominent, animated way to link to some of the more important information on your site.

Media Elements

  • Photo Gallery Element- Upload a collection of photos to a slideshow. This is a handy tool to show off past camp or tournament photos to give a visual aid to the event.

    • NOTE: Uploads must be less than 4MB in size. Images on the web will only display correctly if they are set to an RGB color space (not CMYK). Most image editing applications, such as Adobe Photoshop, provide options for changing the color space or color mode of an image to RGB. Click HERE for photo editing help.

    • After the Element is created, follow these steps to add photos to the gallery:

      • Once the element is created, click Add Photos.

      • In the top-right-hand corner of the element, click the gray gear icon and choose Add Photos.

      • Choose Select Files...

      • Choose all the photos you want to upload, then click Open.

      • After the upload is done, click Done.

    • Helpful Tip! If your photos are unclear, make sure your uploaded photos are at least 1024 pixels on the longest side.

      Accepted file formats include JPEGs, non-animated GIFs, SVGs, and PNGs. As you publish photos, they are compressed and re-sized in the following sizes:

      • 75x75 pixels

      • 100 pixels (on the longest side)

      • 240 pixels (on the longest side)

      • 500 pixels (on the longest side)

      • Large (which will be 1024 pixels, on the longest side, if it exceeds that length)

  • Video Page Element- Add any video to your website.

    • After choosing the "Video Page Element," toggle between the Upload and the Embed option.

      • Upload: Choose the file from your computer. The full size of the video can not exceed 2GB.

      • Embed: Paste in your online copied video URL or embedded code from YouTube, Hudl, Vimeo, etc.

    • After your video has been added, click Create This Page Element.

    • Helpful Tip! If the video is too large to upload, we recommend uploading it to a third-party video hosting service like YouTube and then embedding it on your website. Upload a video to YouTube.

  • Single Photo Page Element- Add one static photo somewhere on your site.

  • Audio Element- Add an audio clip to your site. This audio item will not play automatically but will give your viewer the ability to press play on the clip.

  • Media Slider Element- Create a highlight reel that shows images and text in a scrolling field, with additional controls provided for aspect ratios, type of display, and positioning of text.

Page Design Elements

  • Code Page Element- Used to add your own custom HTML Code. Custom code can be used to add iFrames and plug in 3rd party tools.

    1. Add a title, input the code, and click Create This Page Element.

    2. NOTE: We do not provide Custom HTML Code or support troubleshooting issues with Custom Code.

  • Text Block Element- Add a section of text anywhere on your website. Creating text in the Text Block text editor is just like creating text in a word document-- you can create plain paragraph text, large colorful header text, or text hyperlinks, and you can add bullet points, images, tables, and more.

  • Sponsor Element- Neatly package a sponsor's information into a single page element with a title, link, text description, and an optional logo. Many organizations charge for sponsorships and use this element to highlight them in a section of a website.

  • Page Divider Element- Adds a line between elements to give a page a clean look.

  • Table Builder Element- Break down costs per level on a registration, show contact information for different departments, or display total inventory for age groups.

  • Mirroring Elements and Pages- Mirroring allows you to place a copy of a page or page element on another page anywhere on the SportsEngine Platform. When creating a new Page Element or editing an existing Page Element, you will see a checkbox to optionally enable the Mirroring functionality.

  • Site Map Page Element- Build dynamic links to mimic the hierarchy of your website, allowing website guests to easily select links that lead to pages. If you have a large number of sub-pages, this map can help users navigate a website.

  • Countdown Timer Element- Displays a large countdown clock (think New Year's!) that counts down days, hours, minutes, and seconds until a specific time for an event. Use the Countdown Timer to get members excited for a registration opening, a tournament, or a new season!

  • Registration Lookup Element- Allows a select set of registration questions from a given registration to verify a user's identity to display their completed registration information. This is a good tool to search on a website page from a registration. If this information should be private, set the page permissions to private.

  • Tab Element- Creates multiple tabs that can be selected, where customized information can be displayed in each Tab. This allows your organization to show more information on a page.

Team and Player Elements

  • Registration Link Element- Add a Registration Button to any webpage on your organization's site, allowing members to easily find the Registration or their registration entries if they have already registered. NOTE: The Registration session must be enabled before you can select it.

  • Markdown Element: Add content compiled into HTML based on the Markdown spec.

  • Team Stats Element- Displays a team stats table for a tournament, division, stage, or pool.

  • Player Stats Element- Displays a player stats table for a tournament, division, stage, or pool.

  • Game Highlight Element- Displays highlighted games for a tournament.

  • Game List Element- Displays details from multiple games on one page.

  • Player Stat Leader Element- Displays the highest-ranked players for a single stat from a tournament, division, or pool.

  • Standings Element- Displays standings for a division or pool.

  • Scoreboard Ribbon Element- Display upcoming games at the top of the website, just below the banner graphic.

  • Team Buttons Element- Link Pages to specific teams within a league using buttons. This is common on a division page or a home page of a site to set up visually appealing links.

  • AES- Display ˆAdvanced Volleyball System's volleyball team rank, team schedule, club rank, or club schedule.

  • Power Rankings- Rank teams in a League from best to worst to display anywhere on a site.

Did this answer your question?