Skip to main content
All CollectionsFor AdminsWebsite
How to Create a Page Element
How to Create a Page Element
Updated this week

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

The following are basic guidelines for adding a page element. Scroll to the specific element for detailed information.

  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 your site has more than one comment stream, create a Comment Aggregator to pull all comments and display them together in one place.

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

  • Event Aggregator ElementThis 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 relevant to this event/page. If you don't see the page or tag you want to select, enable it.

  • News Aggregator Element—Use the News Aggregator to display a list of articles on your site on all topics or only display articles relevant to a specific topic using tags.

Communication Elements

  • Contact Element—When members navigate your site, they may have questions. With the Contact Element, display contact information like a Digital Business Card.

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

  • Social Media Links Element—It displays link icons to various social media platforms to increase your social media presence's visibility. 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— 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 either add a new comment or reply to an existing one.

  • 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 search for the venue or location you are looking for.

    2. On the left-hand navigation bar, choose the Share button, then click on the 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 where you would like the map added, 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 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: www.tstmedia.com/page/show

      • 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—Publicly display your website's venue statuses (open, closed, or pending). Use the Venue Element to inform members when a game is rained out or still on!

  • Membership Report Element— Useful if you want to give some admins access to your members but don't want to provide them access to HQ. It 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.

  • Survey Report Element— It displays specific data from online registration sessions on any website. Utilize powerful reporting selectors and filters to define the 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. 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 data is 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 relevant to this event/page. If you don't see the page or tag you want to select, enable it.

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

Media Elements

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

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

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

      • 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 uploading the files, 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 adding your video, 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 embedding it on your website. Upload a video to YouTube.

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

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

  • Media Slider Element— Create a highlight reel showing images and text in a scrolling field, with additional controls for aspect ratios, display type, and text positioning.

    • If you are having issues with a picture being cut off or blurry, we recommend resizing the image to 2000px wide x 857px height.

Page Design Elements

  • Code Page Element— Used to add your own custom HTML Code. Use custom codes 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 website section.

  • 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 element on another page anywhere on the SportsEngine Platform. When creating a new Page Element or editing an existing one, you will see a checkbox that enables the Mirroring functionality.

  • Site Map Page Element— Build dynamic links to mimic the hierarchy of your website, allowing website guests to select links that lead to pages quickly. This map can help users navigate a website if you have many sub-pages.

  • 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 about 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 and display their completed registration information. It is an excellent tool for searching a website page from a registration. If this information should be private, set the page permissions to private.

  • Tab Element—This element creates multiple tabs that display customized information in each Tab. It 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: You must enable the Registration session 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 from a tournament, division, or pool for a single stat.

  • Standings Element— It displays standings for a division or pool.

  • Scoreboard Ribbon Element— It displays 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. It is commonly used on a division page or a site's home page 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?