You might need to upgrade your club website package to access the GotSport Widgets. To learn more about the different packages we offer, CLICK HERE
GotSport Schedules & Scores Widget
The GotSport ‘Schedule & Scores’ widget is a pre-made section for you to display upcoming games and/or results. You can easily edit team names, logos and date/time info for an upcoming game or event in a beautifully designed section.
*GotSport Schedules & Scores Widget is a formatted section for you to use on your website. It does not integrate with the GotSport Software at this time. Complete schedule integration is in the works!
Locate / Add ‘Schedule & Scores’ Widget
Let’s say you are creating a page and want to easily add a section with your upcoming Games and/or results of games. You easily can add this section by using the GotSport’s ‘Schedule & Scores’ widget. GotSport Widgets are found when you are editing your page through Elementor.
- If you have not yet opened the page you would like to add your Schedules & Scores widget, go ahead and Edit the page by clicking on “Edit with Elementor”
2. On the next page, scroll down the widget panel until you see the category ‘GotSport Custom Widgets‘ – click the arrow to expand
3. Drag the ‘Schedule & Scores’ widget into the section and release. By default, 2 games will appear on the page.
Customize Schedule & Scores Widget
Click on the widget handle to pull up the edit screen in the left panel.
The left panel will have four sections. Each of these sections will be the way you customize your Schedule & Scores Widget. Feel free to click on one of the bullet points below to jump to the section:
‘Schedule & Scores’ Section Heading
From the left panel click the triangle next to ‘Section Heading‘ to expand. From here you can toggle on/off the section’s heading and edit the content to what works for you.
Section Heading
Add Section Heading
Toggle On or Off to show or hide the whole heading
Pre Title
The sub heading above your Main Title
Select Pre Title Color
By default, this is set to your main theme’s secondary color. You can easily change the color by selecting the square icon and selecting a color from the pop up.
Title
The Main title for your heading.
Select Title Color
By default, this is set to white. If you remove the background, you will need to change this to black or any other color for visitors to see.
Description
This is where you can add a short description of the games.
Select Description Color
By default, this is set to white. If you remove the background, you will need to change description color to black or any other color for visitors to see. You can easily change the color by selecting the square icon and selecting a color from the pop up.
Add Button
Toggle On or Off to show or hide a button
Button Color
Select the color of the button by using the drop down. If you choose custom a ‘Custom Color’ line will appear. From there you can easily change the color by selecting the square icon and selecting a color from the pop up. By default, the button is your main theme’s secondary color.
Tip: You can change all of your primary & secondary button colors through Advanced Color Settings without changing your Main Theme Settings. (This overrides your Main Theme’s primary & secondary color)
Button Text
Text On the Button.
Button Link
This is where you can insert the URL you want visitors to go to when they click on the button. A good redirect would be GotSport’s official Scheduling page for your events 🙂
Pro Tip: A good use for the button in this section is to direct visitors to your official GotSport Scheduling page 🙂
‘Schedules & Scores’ Section Background
A background image can add some character to the section and create a different atmosphere to a section. By default, when you add the ‘Schedules & Scores’ widget to a section on your page, the background image will pull from your ‘Fallback Hero Image‘ and add a cover overlay from your Main Theme’s Primary Color. If you like the look, great! If you don’t, the article below will guide you to easily customize the background for this section.
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- From the left panel click the triangle next to ‘Section Background‘ to expand.
Background Section
Add Background Image
Toggle On or Off to show the background Image. By default the background image is your ‘Fallback Hero Image’ with an overlay from your Main Theme’s Primary Color. You can change both the image and color overlay with the controls below
- Want a solid background? Don’t forget to check out the Pro Tip in the Overlay Color / Opacity description
Add/Update Image
Hover over the image box for the ‘Choose Image’ option to appear. Click on the ‘Choose Image’ bar to bring up the Media
- Your media library will pop up. Select the image in your media library so a blue checkmark appears in the top right corner. If you do not see your media, you can upload the media into your library by selecting the Upload files tab or Drag & Drop your image from your desktop. Once you locate the correct image, press SELECT at the bottom.
- You will now see your new Image in the field
Delete Image
If you want to delete the background image, hover over the image until you see the trashcan icon in the top right corner. Click on the trashcan icon to remove/delete image.
Select Overlay Color
Color overlays are like a tinted filter that goes on top of your image. This is useful to help text pop over an image. By default, your Overlay Color is set to your primary color. To change the color overlay simply click the square icon and select a color from the ‘color picker’ pop up.
Tip: When the color picker pops up, take a look at the second slider, known as the opacity slider. If the Opacity slider in the Color Picker pop up is left, that means there is 0% opacity. Move the opacity slider in the Color Picker popup to the right until it reaches 100% for a more accurate color choice.
Overlay Opacity
The ‘Overlay Opacity’ slider ranges from 0-1. If you move slider all the way to the left, (0) – that’s a 0% overlay and your image will not have any type of tint. The more you move the slider to the right, the more the Overlay Color (tinted filter) will show over the image. Be default the Overlay Opacity is set to .7
Pro Tip: Do you want to create a Solid background? Slide the ‘Overlay Opacity’ all the way to the right (1) to create a solid background.
Customize Game Styles or Appearance
We have created a couple of pre made layouts for the way your games appear on the webpage.
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- From the left panel click the triangle next to ‘Games Styles‘ to expand.
Games Styles
Choose Team Layout
These styles will move a team’s name either next to their logo or below their team’s logo.
- Click on the drop down to choose either Style 1 or Style 2.
Examples of each are below
Choose Games Background
There are two styles for the game bar’s background.
- Click on the drop down to choose either Style 1 or Style
Examples of each are below
Choose Games Background
The main color of the game’s bar is a dark tint. This means, whatever the background image or color is for the entire section will slightly effect the look of the games bar. You can change the highlight tint by selecting the square icon and selecting a color from the pop up. By default the color is white.
Edit / Update Content for Games
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- Scroll Down “Game Details‘. Each item listed represents a game.
- Click on the game’s title to expand the individual game’s information. Here is where you can edit the card’s Team Names, Team Logos, & Game time and if its an upcoming game or score of the game.
- Click Update/Publish to save when you are done
Game Details
Display Schedule or Score
From the drop down you can either select Schedule or Score. If you select Schedule then the middle of the game bar will display “VS”. If you select Score then you will have the option to enter team goals (or the score) and that will display in the middle of the game bar.
Add / Duplicate / Delete Games
Adding/Duplicating/Deleting a game is easy.
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- From the left panel click the triangle next to ‘Games Details‘ to expand.
- To Add – Scroll down to the bottom of the left panel and click the + Add Item button. This will add a new game at the bottom of the list.
- To Duplicate – Locate the sheets of paper icon between the game’s title and the X icon and click on it. This will paste a duplicate game just below the card you wanted to duplicate.
- To Delete – Look for the title of the game you want to delete and click on the X icon. This will permanently delete the game.
When you have made all of your edits, Click Update/Publish at the bottom of the panel to save.