Energy Savings Center
This component allows you to add a two column promotional section that features a video on one side and icon promos on the other to a page.
You can see an example Energy Savings Center on the Sample Homepage.
Add a new Energy Savings Center using the Experience Editor
Open the page in the Experience Editor. Click on the Component button. Click the (+Add here) button where you want to place the rendering, and the Select a Rendering window will open.
Click on the Energy Savings Center component inside the renderings box, then click the Select button to choose it. A window will open that allows you to Select the Associated Content for the Energy Savings Center.
Select Create New Content from the options on the left, and then give your Energy Savings Center a unique name in the Name field. Click OK, and your new Energy Savings Center will be added to the page and the subcontent folder for this page. Save the page to preserve your changes.
Editing your Energy Savings Center in the Experience Editor
Your new Energy Savings Center can be edited right inside the Experience Editor.
To edit the Heading: Click the placeholder copy and start typing.
To edit the Video Thumbnail: Click on the image placeholder and the Editor Ribbon will appear. Click on the first image icon to open the Media Library modal and choose a 328x185px image out of the Energy Savings Center folder.
To edit the Video Description: Click the placeholder copy and start typing. An Editor Ribbon will appear above the text area as you type.
The four items after the pencil give you basic editing functions for use right on the Experience Editor: Bold, Italic, Underline, and Link. Clicking on the Pencil icon will open a modal with the Rich Text Editor, giving you access to additional functionality including a WYSIWYG Design view, and an HTML view.
To edit the Video Link: Click inside the placeholder text to open the Editor Ribbon, then click on the link icon to open the link editor modal. Choose the type of link you want, and fill in the URL field. Put the button text inside the Link Description field, and click OK
To edit the Section 1/2/3 Content: Click the placeholder copy and start typing. An Editor Ribbon will appear above the text area as you type.
The four items after the pencil give you basic editing functions for use right on the Experience Editor: Bold, Italic, Underline, and Link. Clicking on the Pencil icon will open a modal with the Rich Text Editor, giving you access to additional functionality including a WYSIWYG Design view, and an HTML view.
To edit the Section 1/2/3 Icons: Click the Change Icons link to open a modal. Use the drop-down menus to select the Icon for each section and the Color (green-light, orange-dark, or blue) of each icon.
After making your edits, be sure to save your page to preserve your changes.
Editing your Energy Savings Center in the Content Editor
Switch back to the Content Editor, and locate your Energy Savings Center inside the subcontent folder for your page. You may need to collapse and expand your folder to refresh it.
Click on the Energy Savings Center item, and then make your changes in the Content Editor fields on the right. Be sure to save your changes.
Energy Savings Center fields
| Content | |
|---|---|
| Heading | A simple text field for the heading. |
| Video Thumbnail | A media field used to choose a 328x185px image out of the Energy Savings Center folder in the Media library. |
| Video Description | A rich text field used for the content that appears under the video thumbnail. |
| Video Link | A link field used to link to the video. The Link Description field is used to specify the button text . |
| Section 1 Content | |
| Section 1 Icon | A drop-down select field to choose the icon for Section 1. |
| Section 1 Content | A rich text field used for the content that appears in Section 1. |
| Section 1 Color | A drop-down select field to specify the color of the icon for Section 1. |
| Section 2 Content | |
| Section 2 Icon | A drop-down select field to choose the icon for Section 2. |
| Section 2 Content | A rich text field used for the content that appears in Section 2. |
| Section 2 Color | A drop-down select field to specify the color of the icon for Section 2. |
| Section 3 Content | |
| Section 3 Icon | A drop-down select field to choose the icon for Section 3. |
| Section 3 Content | A rich text field used for the content that appears in Section 3. |
| Section 3 Color | A drop-down select field to specify the color of the icon for Section 3. |
How it Looks
This is how a completed Energy Savings Center looks.
