How to Configure the Hero Widget

Owned by Sara Collins
Last updated: Apr 25, 2023
6 min read

About the Hero Widget

 

With Hero by Social Edge, you can configure a larger-sized banner to display an image (with shapes behind it if wanted), general text, a title, and three call-to-actions. This is a great way to inform users why they may be on a certain page and provide them with important links within a space. This is helpful if you have a landing page and need to provide users with a blurb on why they are in a certain space as well as the quick links they would most likely need in that space. 

 

 

Key Features: 

  1. Can display up to three different calls-to-actions 

  2. Can display general text in addition to calls-to-action buttons 

  3. Images and shapes can be either bubble or square-shaped

  4. Can customize the color theme of the widget 

 

 

 

Setup and Configuration

Add the Hero Widget to a Page

In the top right of your page click on edit

Click the plus button where you would like to add another section where you can add more widgets.

Please select the hero widget and click add. 

 

A menu will appear on the left-hand side of the page, click the settings button to configure the hero. 

 

A menu will open on the screen where you can configure the widget.

 

 

Configuring the Hero (Generating a New Hero by Social Edge)

Before You Start 

 

Below are the settings we recommend you configure ​first​: 

  • Hero - set your image for the hero widget, your title, and the paragraph field that is displayed under the title

  • CTAs - define labels of the call-to-actions as well as the links associated with them

  • Theme​ - set your brand colors for use on the widget

  • Fonts​ - set the font for the title, paragraph field, and the text on the call-to-actions

  • Migrate Configuration - Easily copy and paste your hero code into another hero within your site without having to reconfigure.

  1. Hero

  • Hero Image Field - The image that is displayed within the hero by SE widget 

  • Hero Title Field - The title displayed within the hero by SE widget 

  • Hero Paragraph Field - The text that is displayed within the hero by SE widget (Recommended max of 300 characters). 

 

b. CTAs

  • Add up to three calls-to-action 

    • Enter Text to display in your call-to-action as well as a link for where that CTA will take a user. 

    • The first call to action (CTA 1) is the CTA displayed the furthest to the left within the hero by SE widget 

    • The rest of the CTAs follow in order from left to right (CTA 1 > CTA 2 > CTA 3) 

c.  Theme 

  • Inherit Theme - The colors are inherited from the server you are on. 

    • If you select to inherit theme - your color box choices will be a drop-down of site colors to choose from (as pictured below). Please select a system color for each element. 

 

  • If you choose to not inherit from the theme (not check the inherit from theme checkbox) - for all of your graphical elements you will be able to enter a hexadecimal value within those fields (as shown below). To find a specific color please go here.

  • Show Boxes Shadow - Would you like a drop shadow effect to display behind the shapes and image? 

  • Display Circles Behind an Image - Will display the larger and smaller circle behind the image instead of in front of the image 

 

Circles in Front

Circles Behind 

 

  • Choose Mode - Select between bubbles (circles) and rectangles. This will affect the shape of the image. These circles can be configured to be behind or in front of the image (as mentioned above) and rectangles by default are behind the image. 

  • Image Bubble Roundness - If you select bubbles for the mode option this option will be presented. Use the slider to indicate what you would like the radius of the image circle to be. If the mode selected was rectangle - then you would have the option to set a height and width for the image box. 

  • Top Shape Radius - If you select bubbles for the mode option this option will be presented. Please use the slider to indicate what you would like the radius to be of the larger shape towards the top. If you select rectangles for the mode instead, you will have the option to set the height and width for the larger rectangle. 

  • Top Shape Color - Refers to the larger shape (in the pictures above the larger circle)

  • Bottom Shape Radius - If you select bubbles for the mode option this option will be presented. Please use the slider to indicate what you would like the radius to be of the smaller shape on the bottom. If you select rectangles for the mode instead, you will have the option to set the height and width for the smaller rectangle. 

  • Bottom Shape Color - Refers to the smaller shape (in the pictures above the smaller circle)

 

d. Fonts

For the hero by SE widget you will choose the font colors and sizes for each of the main text options displayed in the hero:

  1. Title - Will affect the font of the Hero Title Field

  2. Paragraph - Will affect the font of the Hero Paragraph Field

  3. CTA - Based on what is set in theme

 

 

e. Migrate Configuration

To migrate an existing hero, that is already configured, navigate to that hero’s configuration and click on the Migrate Configuration tab.

 

To paste in the hero code, please paste it in the box under ADD NEW CONFIG and then click apply. You can then go ahead and make any further changes from there.

To migrate an existing hero configuration, navigate to the migrate configuration tab and click on the COPY CURRENT CONFIG tab. Then click copy to clipboard. You can then navigate to any other hero within your site and paste that code in.

Publish the Page

  1. When you are done making all changes scroll down and click save within the widget configuration. 

  1. In the top left corner of your page you will then click publish and save (if your page has not been published yet). 

 

 

Support

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

support@socialedgeoncuslting.com