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 Text and Image Widget
Let’s say you quickly want to add a section that has text and an image, but don’t want to build it from from scratch. Then you can use GotSport Text and Image widget, which does all of the formatting for you. Half of the section will be of an image of your choice and the other half will be customizable text.
We will be going over the following in this article:
Locate / Add ‘Text and Layout’ Widget
GotSport Spotlights Cards. 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 Spotlight Cards to, 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 ‘Text and Image’ widget into the section and release.
Customize Text and Image Section
When you first drag the ‘Text and Image’ Widget in a section, the default settings is basic but all of the formatting is there for you. All it needs is your content and customization to make this widget come alive.
First you want to hover and click on the widget handle to pull up the edit screen in the left panel. 
The left panel has two sections that represent the two sides of the widget (Text & Image). Expanding each of these sections will be the way you customize each side. Feel free to click on one of the bullet points below to jump to the section:
Content Section
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 black. You can easily change the color by selecting the square icon and selecting a color from the pop up.
Text Alignment
This aligns your Pre Title, Title, Description & Button either Left, Center, or Right.
If you want to switch the text and image sections, you can do so in the ‘Image Section’.
Description
This is where you can add a short description of the games.
Select Description Color
By default, this is set to black. If you remove the background. You can easily change the color by selecting the square icon and selecting a color from the pop up.
Add Button
Toggle on/off if you want to show or hide a button in this section
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, your Button color 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 Style
Use the drop down to choose if you want your button to be normal, squared edges or rounded
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
Image Section
Layout Style
From the drop down you can choose if you want your image on the left or right side of the section. The widget will automatically switch the text to the opposite side.
Add/Update Image
Hover over the image box for the ‘Choose Image’ option to slide up. 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 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.
Image Style
We have created 3 styles for your image. Depending on which style you choose from the drop down, more customization options will appear just below
Pro Tip
Do you want to add more style to this section by adding a background image or solid color? You can do that through Elementor’s editing tools.
- First you want to hover and click on the 6 dots in the middle of the section handle to pull up Elementor’s edit screen in the left panel.
- In the Edit Section switch to Style tab.
- Locate Background block. Here you can set your custom background for this section.
- If you want to add a tint or filter to the background image/color, then you can do so with ‘Background Overly’
