Edit Hero’s Graphic

Info! Upgrade your site to leave behind “Intro” & gain “Hero”! With the “Hero” feature, you can add background images, videos, or other graphics to the top of your site 24/7! Contact us for more information & upgrade today!

You can add a graphic to Hero to personalize your website even more! Here’s how:

  1. From within the Client Area, beneath the tools icon, choose “Edit your website content”.

JAMSpiritSites allows you to use graphics to edit Hero on your cheer website.


  1. Go to the component whose “Hero” graphic you’d like to edit. In this example, I am using “Home Page Deluxe”.
  1. Select “Hero”.

Edit Hero of your JAMSpiritSites dance website by using graphics.


  1. Under the “Type” dropdown, select “Graphic & Color”.

Select Graphic and Color to add a graphic to Hero of your JAMSpiritSites gymnastics website.


  1. Change the “Height” as desired.

Adjust the height of the graphic in Hero on your JAMSpiritSites competitive gym website.


  1. Beneath the “Graphic” field, click “Browse” and select the desired graphic from your uploaded photos. We have provided you a “Backgrounds” album with some graphic designs you may use as well.

Browse to find the desired graphic in Hero that you want to use on your JAMSpiritSites gym website.


  1. Select your Hero’s “Size”.

JAMSpiritSites gives you the freedom to change the size in Hero of the graphic on your competitive gym website.


  • “Cover” will cause your graphic to cover the entire Hero area.
  • “Normal” is the original size of the uploaded image.
  • “Tile”, “Tile Horizontally”, and “Tile Vertically” will repeat your graphic accordingly.
  1. For “Attachment”, choose how your Hero graphic will be attached to the page. For instance, “Fixed” means the graphic will be fixed to the browser window and the content will scroll over it. Whereas, “Scrollable” means the graphic will scroll with the content.
  1. Select how you’d like your Hero graphic to be anchored to its space by editing its “Position”. Choose the option that allows the focal point of your image to always be viewed in any computer, tablet or mobile device.

    For example, let’s look at the following image. You’ll notice its focal point is the gymnast on the bottom right.

JAMSpiritSites wants the graphic in Hero on your dance website to be seen on any device by setting the best position.


Now when your Hero’s “Position” is set to “Bottom Right”, notice the gymnast is visible on all devices.


JAMSpiritSites wants your cheer website to look awesome on all devices and adjusting the position of your graphic will allow it.


If you mistakenly set the “Position” to “Bottom Left”, you’ll notice the gymnast is no longer always visible on smaller screen sizes, because you’ve told Hero to focus on the left side of the image vs. the right.


Adjust the position of your graphic in Hero to ensure that the focal point is seen on all devices of your JAMSpiritSites gym website.

So, as you can see, tell Hero where the focal point of your picture is in order to always get the best results!


  1. Select the “Background”, “Text”, and “Text Shadow” colors, if desired.

JAMSpiritSites allows you to select the background color, text color, and text shadow color of the graphic in Hero on your dance website.


  1. Customize the Hero graphic further by editing the “Hue”, “Saturation”, “Brightness”, and “Opacity” settings. Just grab the dot and slide it left or right!

    If using images outside of the “Backgrounds” folder, editing “Hue” will have no effect.

Edit the Hue, Saturation, Brightness, and Opacity of the graphic in Hero on your JAMSpiritSites cheer website.


Info! To reset: change the Hue to 0 degrees, Saturation to 100%, Brightness to 50%, and Opacity to 100%.


  1. Now edit your Hero’s content as needed. This is a great opportunity for an awesome H1 page title. Doing so helps in 2 major ways:
    • A great page title helps orient your web audience. That way they know where they are in your website!
    • Headings are highly regarded in the search engine world – and none more so than an H1. So, help your content be found on the internet! To learn more tips on great content editing, view our Purpose Driven Content articles.
  2. Save when finished.

Hooray! You have successfully added a graphic to your page’s Hero.