Hero Image Widget Properties
| PROPERTY | DESCRIPTION |
|---|---|
| Visible | Checking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut. |
| Aspect Ratio - Small: | Select the aspect ratio from the dropdown. • Square 640 x 640 px • 2:1 – 640 x 320 px • 3:1 – 640 x 214 px • 16:9 – 640 x 360 px |
| Image - Small*: | Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size. |
| Aspect Ratio - Medium: | Select the aspect ratio from the dropdown. • Square 1024 x 1024 px • 2:1 – 1024 x 512 px • 3:1 – 1024 x 342 px • 16:9 – 1024 x 576 px |
| Image - Medium*: | Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size. |
| Aspect Ratio - Large: | Select the aspect ratio from the dropdown. Square 1920x1920 px 2:1 – 1920 x 960 px 3:1 – 1920 x 640 px 4:1 – 1920 x 480 px 5:1 – 1920 x 384 px 6:1 – 1920 x 320 px 16:9 – 1920 x 1080 px |
| Image - Large*: | Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application. Image should not be more than 100kb in file size. |
| Header Text: | Text entry field for a limited large headline. This will give you big bold text across your Hero Image |
| Enable H1 header tag: | Checkbox to add the H1 header tag to the Hero Image widget to improve SEO. This is recommended for the Hero Image widget that appears at the top of a web page, not on those images used elsewhere on the page. |
| Hero Text: | Text entry field for small paragraph text across your Hero Image |
| Enable H1 header tag: | Checkbox |
| Custom Design: | Selecting alternate layouts in CSS Class and Text Background Color unlocks a wide selection of looks for your Hero Image Custom CSS Class • Layout A – Text Box Centered (default) • Layout B – Text Box Left Aligned • Layout C – Full Image Centered • Layout D – Text Box Right Aligned • Layout E – Text Box Wide Centered Top • Layout F – Text Box Wide Centered Bottom • Layout G – Full Background with Text Borders • Layout H – No Button Shown – Image Clickable • Layout I – Default layout (usually a custom design) • Layout J – Text Box Floating Left • Layout K – Text Box Floating Right Text Background Color Select from these options: • Black Overlay (Default) • Primary Color • Primary Color Multiply 90% • Secondary Color Multiply 90% • Secondary Color Overlay 90% • White 75% • Light Gray 75% • Medium Gray 75% • Dark Gray 75% • None |
| Button Properties: Number of Buttons | The widget can feature none, one or two buttons by selecting a number from the menu. If the user selects 0 no buttons will display. Anything other than 0 the Button and the below properties will display |
| [Button] Text | Enter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display. |
| [Button] Style | Select pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected: • Default - a rectangular shape with a solid-color fill • Round - a pill shape with a solid-color fill • Radius - a rectangle with slightly rounded corners with a solid-color fill • Hollow - a rectangular outline shape with a transparent fill • Expanded - an extra-wide rectangular shape with a solid-color fill • Disabled - a rectangular shape faded back to denote that it is disabled • Clear - a transparent button with only text visible |
| [Button] Color | Select from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected: • Default • Primary Color • Primary Color – Light • Primary Color – Dark • Secondary Color • Secondary Color – Light • Secondary Color – Dark • Gradient • White • Light Gray • Medium Gray • Dark Gray • Black |
| [Button] Target | Below are the targets to choose from: Default – this will open in the same tab of the browser and is typically used to move around within your site Blank – this will open in a new tab of the browser and is typically used for links that leave your site |
| [Button] Target URL | The URLs attached to the button can simply link to another page of the website, to an anchor link on a page, to a different website, can automatically open a pre-addressed email, link to a phone number or a document from the Media Library Application. Check the “URL is Internal” checkbox to access the Pages Application or the Media Library Application to select a page in the site or a document. |