Hero Tile Configuration v. 3.0

Owned by Ruth Neighbors
Last updated: Mar 06, 2023 by Sara Collins
4 min read

Current version: 3.0.1

If your version is older, please refer to this guide instead: Hero Tile Configuration v. 2.0

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

Installing Your 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”.

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.

 

Configure Action Links & Buttons

Action Links

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.

Buttons

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

          section.

      • Custom icons

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

          community

  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.


Support

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

support@socialedgeconsulting.com