Hero Tile Configuration v. 3.0

Current version: 3.0.1

If your version is older, please refer to this guide instead: https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/21135449

What’s New

  • Display different headline, links and buttons depending on language preferences. Language preferences are set by the site administrator.

  • Improvements to layout and usability including: custom HTML in header and footer, Google Analytics tracking enhancement, options for button configuration, and accessibility compliance.

Configuring the Hero Tile


If you have more than one language available for set up in your tile, choose which language this will be displayed in. The default preference is English. After you’ve configured in one language, if you pick another language, you’ll be asked if you want to display the same posts for the second language (by copying the settings) or “create from scratch”.

Refer to https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522 for more details on the multi-language set up.

Configure the Layout

  1. Choose your layout . There are two layout options to choose from:

    • Hero with intro text and links

    • Hero with intro text, links and buttons


Configure the Setup Options

  1. Add Sub-Header Text

  2. Add Header Text

  3. Add in Image URL

    • Note: Upload images via Static Resources in your community or place


Click Save Section when complete, and repeat arwpa to add additional sections.

Save All now before moving on to the next section. Scroll to the bottom of the tile and click the Save All button.

You are not required to save after editing each section, but we recommend you do to avoid accidentally closing the configuration panel without saving. You can click Cancel to cancel all your changes and leave the configuration panel.


If you choose the first layout option Hero with intro text and links the Action Links configuration panel will appear.

  1. Add your link text

  2. Add in the URL for the action link

  3. Enter your link background, border and text colors

  4. Enter the colors for your link hover (background, border and text color)

  5. Save your changes. Scroll to the bottom of the tile and click the Save button.

*Repeat the steps above to add multiple links.


If you choose the first layout option Hero with intro text, links and buttons the Buttons configuration panel will appear.

  1. Add your button text and add in the URL for the link

  2. Enter your text and highlight colors

  3. Choose a button icon

    • Preset icons

      • Type in the icon name

      • Click to see the icon guide if you want to browse all preset icons: http://fontawesome.io/icons/

      • A preview of your selected icon will appear below

        • Note: the color of the icon will be same color that was set in the Colors


      • Custom icons

        • Paste the icon url into the field for any icons you have uploaded to your


  4. Enter the icon background and foreground colors

  5. Save your changes. Scroll to the bottom of the tile and click the Save button.

*Repeat the steps above to add multiple buttons.

Adding Images

  1. To add images to your Tile, you will first need to upload them in the community. Simply click the gear icon in the upper right corner of the place you are working and select Static resources. (Depending on the version of Jive you have, this may say Image Files instead of Static resources)

  2. In the popup, click Upload a File and select the image(s) you want to use in the slider. 

    • When using a custom icon, we suggest uploading a 40x40px icon. If your icon is a bit larger, don't worry; it will be resized.

  3. Once you upload your images, copy the URL to your clipboard and paste each URL into a notepad to have handy when working in the Slider configuration panel.

Advanced Settings

  1. Enter Sub-Header Color and Header Color

    1. Note: If you don’t know the hexadecimal value, convert your colors at http://rgb.to

  2. Set your Margins . Set extra padding between the Hero and other tiles if desired.

  3. Select the box if you want to show the background image overlay.

  4. Set the position of your buttons.


Configuring the Fonts


Configure Google Analytics

Copying your Tile Settings

Best Practices and Tips

Best Practice/Tip

How To…

Static Image URLs

Upload all your images and copy the Jive generated URLs for each uploaded image to a notepad before you begin configuring your slider. You will need to paste these image URLs into the image URL field.

Keep a duplicate tile in test/private place

For easy reference for yourself and others, we recommend duplicating this process in a test or staging group to access at a later point.


Need support or want to talk to us?  Please send an email to: