Hero Tile Configuration v. 2.0

Current version: 2.0.1

Configuring the Hero Tile

 

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. Enter Sub-Header Color

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

  3. Add Header Text

  4. Enter Header Color

  5. Add in Image URL

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

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

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

 

Click Save Section when complete, and repeat steps 4-13 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.

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 textAdd 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.

 

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