Site Guide

HEN Website Training Video

Please send your website requests to your DPG manager.

Additional resources and trainings are available to all DPG Leaders on the Volunteer Leader Resource website's Technology Trainings page.

Home Slide

Default Banner

CSS Wrapper Class Name: hero-slide make-buttons no-arrow
Style - Header Only
Home Slide
<h2>Advocating access to nourishing food and clean water provided by sustainable, secure food systems</h2>
<p>   </p>
<p>   </p>
<p><em>  </em><img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/507222a3-9000-44fd-943b-9593aafd63c2/UploadedImages/HEN/Images/Sustainability_Banner.jpg" alt="Sustainability_Banner.jpg" data-mce-hlimagekey="acd8cc63-6f94-b6d2-7ed2-19a20d441834" class="img-responsive" data-mce-hlselector="#TinyMceContent_d1f7734d-859b-9a93-cf11-643db7eb72d3-tinyMceHtml"></p>
Style - Content & Button
<h2>March is National Nutrition Month<sup>®</sup>!</h2>
<p>#NationalNutritionMonth</p>
<p>     </p>
<p><em><a href="https://www.eatright.org/national-nutrition-month-2023" target="_blank" rel="noopener">View Resources</a></em> <img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/f2804320-8f13-4b5b-8848-f0cbe73f0573/UploadedImages/NEP/Images/Home_Page/National-Nutrition-Month-968x582_cropped.png" alt="slider-bg.png" data-mce-hlimagekey="acd8cc63-6f94-b6d2-7ed2-19a20d441834" class="img-responsive" data-mce-hlselector="#TinyMceContent_d1f7734d-859b-9a93-cf11-643db7eb72d3-tinyMceHtml"></p>

How To...

  1. Add an Html Content Item
  2. Add the classes hero-slide make-buttons no-arrow to the content item
  3. Click into the HTML Content section and select the "Edit" icon Edit Icon
  4. Select the HTML Button
  5. Paste the HTML Sample Code Above in the Window Select "Ok"
  6. Edit the Html Content using the WYSIWYG Editor Tools. 
  7. Click "Save"

Full-Width Banner with Link

CSS Wrapper Class Name: hero-slide no-background no-arrow
Style - Header Only
Home Slide
<div class="slide-image-link" onclick="window.open('https://www.eatrightpro.org/events/fnce','mywindow');" style="cursor: pointer;"> </div>
<p><img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/dc92ffa4-26cc-486a-8449-32de82c8d9e7/UploadedImages/DPG_MIGs/Academy_Banners/FNCE/FNCE24_Banner_1263x400_v1_Practice.jpg" alt="" data-mce-hlimagekey="acd8cc63-6f94-b6d2-7ed2-19a20d441834" data-mce-hlselector="#TinyMceContent_d1f7734d-859b-9a93-cf11-643db7eb72d3-tinyMceHtml" class="img-responsive"></p>

How To...

  1. Add an Html Content Item
  2. Add the classes hero-slide no-background no-arrow to the content item
  3. Click into the HTML Content section and select the "Edit" icon Edit Icon
  4. Select the HTML Button
  5. Paste the HTML Sample Code Above in the Window
  6. Replace the link in the code (highlighted below) with your URL
    • <div class="slide-image-link" onclick="window.open('https://www.eatrightpro.org/events/fnce','mywindow');" style="cursor: pointer;"> </div>
  7. Select "Ok"
  8. Update the background image 
  9. Click "Save"


Additional Notes

There needs to be at least 2 html content items for the slider to run without two the slider will not be enabled and the Hero-slide content item will appear as a static Component

Interior Banner

CSS Wrapper Class Name: interior-banner
Style
Interior Banner
<p><img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/507222a3-9000-44fd-943b-9593aafd63c2/UploadedImages/HEN/Images/Page_Banners/pexels-serenakoi-29520422.jpg" data-mce-hlimagekey="c38c6d99-6c8a-dfac-3f21-57df5d31ae2d" data-mce-hlselector="#TinyMceContent_ea7e25ec-2452-0dfd-51ee-dbf5b30ecdb2-tinyMceHtml" class="img-responsive"></p>

How To Add to New Page...

  1. In the Page Properties, add a Page Title and click the "Show Page Title" checkbox 
  2. Add a Full Width Row

    Make sure that the "Full-width row" checkbox is checked
  3. Add an Html Content Item
  4. Add the class interior-banner to the content item
  5. Click the pencil icon
  6. Edit the Content Item and Select the HTML Button
  7. Paste the HTML Sample Code Above in the Window Select "Ok"
  8. Select the Image and update with an image
  9. Click Save

Educator's Resource Newsletter Library

How to Add Content

  1. Click the "Create Entry" button
  2. Add a Title
     
  3. Confirm your Library
    1. The community you're uploading a file to will already be selected here
    2. If you'd like to upload the file to a different community's Library, you can select any communities you belong to from this menu
  4. Choose your Folder
    1. Select the "The Educator's Resource Newsletter" folder
  5. Add a Description
    1. Add as much detail as you would like about the entry, giving other users any helpful or useful information about it. Use the options in the Content Editor to format your text, add images, etc.
  6. Select the Entry Type
    1. The most common entry type is "Standard File Upload"
  7. Optional - Select an Owner
    1. You can leave this blank to default yourself as the owner (i.e., creator) or enter someone's email address and click Lookup to assign them as the owner
    2. You can use the dpgadmin@eatright.org address to assign a general Admin User as the owner
  8. Optional - Add a Custom Thumbnail Image
    1. PowerPoint and PDF files will automatically create a custom thumbnail from the uploaded file
    2. Your selected image will display as the default thumbnail for this Library Entry in the list, row, and card views
    3. Dimensions: 1200px x 600px
  9. Click "Next"
  10. Click the gray "Choose and Upload" button
  11. Select the file(s) from your computer and click "Upload"
  12. Click "Next"
  13. Optional - Give your file(s) a Title and Description
  14. Click "Finish"

How to Pin (Feature) Current Newsletter

  1. After uploading the new newsletter, click the ellipsis next to the previous newsletter
      
  2. Select "Unpin"
  3. Click the ellipsis next to the new/current newsletter
  4. Select "Pin"

Member Resources Library

How to Add Content

  1. Click the "Create Entry" button
  2. Add a Title
     
  3. Confirm your Library
    1. The community you're uploading a file to will already be selected here
    2. If you'd like to upload the file to a different community's Library, you can select any communities you belong to from this menu
  4. Choose your Folder
    1. If the selected community Library has additional folders created for it, you can select which one to upload your file to here
  5. Add a Description
    1. Add as much detail as you would like about the entry, giving other users any helpful or useful information about it. Use the options in the Content Editor to format your text, add images, etc.
  6. Select the Entry Type
    1. The most common entry type is "Standard File Upload"
  7. Optional - Select an Owner
    1. You can leave this blank to default yourself as the owner (i.e., creator) or enter someone's email address and click Lookup to assign them as the owner
    2. You can use the dpgadmin@eatright.org address to assign a general Admin User as the owner
  8. Optional - Add a Custom Thumbnail Image
    1. PowerPoint and PDF files will automatically create a custom thumbnail from the uploaded file
    2. Your selected image will display as the default thumbnail for this Library Entry in the list, row, and card views
    3. Dimensions: 1200px x 600px
  9. Click "Next"
  10. Click the gray "Choose and Upload" button
  11. Select the file(s) from your computer and click "Upload"
  12. Click "Next"
  13. Optional - Give your file(s) a Title and Description
  14. Click "Finish"

How to Add/Edit Folders

  1. Change the View of the folder to the admin view
        
  2. Click the ellipsis next to the Main folder and select "Add Subfolder"
  3. Name the Folder and click "Add"
  4. Click the ellipsis next to any created folder to add a new subfolder, rename the folder, move the folder, or delete the folder
  5. You can also move folders by clicking the icon to the left of the folder and dragging it to the appropriate location.

Webinar Library

How to Add Content

  1. Click the "Create Entry" button
  2. Add a Title
     
  3. Confirm your Library
    1. The community you're uploading a file to will already be selected here
    2. If you'd like to upload the file to a different community's Library, you can select any communities you belong to from this menu
  4. Choose your Folder
  5. Add a Description
    1. Add as much detail as you would like about the entry, giving other users any helpful or useful information about it. Use the options in the Content Editor to format your text, add images, etc.
  6. Select the Entry Type
    1. The most common entry type is "Standard File Upload"
  7. Optional - Select an Owner
    1. You can leave this blank to default yourself as the owner (i.e., creator) or enter someone's email address and click Lookup to assign them as the owner
    2. You can use the dpgadmin@eatright.org address to assign a general Admin User as the owner
  8. Optional - Add a Custom Thumbnail Image
    1. PowerPoint and PDF files will automatically create a custom thumbnail from the uploaded file
    2. Your selected image will display as the default thumbnail for this Library Entry in the list, row, and card views
    3. Dimensions: 1200px x 600px
  9. Click "Next"
  10. Click the gray "Choose and Upload" button
  11. Select the file(s) from your computer and click "Upload"
  12. Click "Next"
  13. Optional - Give your file(s) a Title and Description
  14. Click "Finish"

Events

  1. Go to the Upcoming Events
  2. Click one of the "Add Event" buttons Add Event Button
  3. Fill out the form with the following required fields
    1. Title
    2. Event Type
      • The event type will determine which section and/or page the Event will be placed on. Here are the most important types to filter:
        • Community Event: HEN-specific Events
        • Conference: FNCE Events
        • Webinar: Use for all Webinars
    3. Display in events list?
      1. Choose "Always display event, never hide it"
    4. Display in search results?
      1. Choose "Always display event, never hide it"
    5. Description
      1. Add event link (only use eatrightStore links for webinars)
    7. Event Image
      1. Must always include an "Event Image" with the 1200px x 600px dimensions
    8. Date & Time
    9. Location
      1. Optional
    10. Contact Information
      1. Optional
    11. Send Invitations
      1. Do not use! This is still in development and will send notifications to all members.
    12. Click "Save & Continue" to save and continue working or "Save" to save and close the pop-up

Add Buttons

CSS Wrapper Class Name: make-buttons
Style

Regular Button
<p><em><a href="#needsLink" target="_blank" rel="noopener">Regular Button</a></em></p>

How To...

  1. Click on the content item on the "Editing Page:..."
  2. Add the class make-buttons to the content item
  3. Edit the Content Item and Select the HTML Button
  4. Paste the HTML Sample Code Above in the Window Select "Ok"
  5. Edit the Html Content using the WYSIWYG Editor Tools. 
  6. Click Save

Executive Committee Section

CSS Wrapper Class Name: leader-image
Style
HEN Leadership
<p><img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/507222a3-9000-44fd-943b-9593aafd63c2/UploadedImages/HEN/Images/People/9f1b7f25-4072-4dcb-9135-13b5a9828989.jpg" class="img-responsive"></p>
<p><strong>Rebecca Robbins, MS, RDN, SNS</strong><br>Chair<br><a href="mailto:rebecca.v.robbins@gmail.com">rebecca.v.robbins@gmail.com</a></p>

How To Edit...

  1. Click into the HTML Content section and select the "Edit" icon Edit Icon
  2. Replace the image and contact information 
  3. Click Save

How To Add New...

  1. Add a new Row
    3 Column Row
  2. Add an Html Content Item
  3. Add the class leader-image to the content item
  4. Edit the Content Item and Select the HTML Button
    HTML Button
  5. Paste the HTML Sample Code Above in the Window Select "Ok"
  6. Edit the Html Content using the WYSIWYG Editor Tools. 
  7. Click Save

Policy & Advocacy Accordion

CSS Wrapper Class Name: accordion_andf
Style - Header Only
HEN Accordion

How To...

  1. Add an Html Content Item
  2. Add the classes accordion_andf to the content item
  3. Click into the HTML Content section and select the "Edit" icon Edit Icon
  4. Add new content using the WYSIWYG Editor Tools. 
  5. Click "Save"

Promotional Box

CSS Wrapper Class Name: lg-promo-cta make-buttons
Style
Promo Box
<h3>Sustainable Food &amp; Water Systems Glossary for Dietitians</h3>
<p>Explore key terms and concepts in sustainable food and water systems to support your practice</p>
<p><em><a href="sustainable-food-water-systems-glossary" title="HEN's Sustainable Food &amp; Water Systems Glossary for Dietitians">More Information</a></em></p>
<p><img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/507222a3-9000-44fd-943b-9593aafd63c2/UploadedImages/HEN/Images/benjamin-white-1VJt-0nyDhg-unsplash.jpg" alt="Sponsorship.jpg" data-mce-hlimagekey="0dc6a5dd-44a7-1b31-c598-f12e08233128" data-mce-hlselector="#TinyMceContent_1cb73556-96ff-f23f-681a-2f164e58715e-tinyMceHtml" class="img-responsive"></p>

How To...

  1. Add an Html Content Item
  2. Add the class lg-promo-cta make-buttons to the content item
  3. Add a Name or Title
    Promo Box Properties
  4. Select the "Show Name or Title above content" checkbox
  5. Click the pencil icon
  6. Edit the Content Item and Select the HTML Button
  7. Paste the HTML Sample Code Above in the Window Select "Ok"
  8. Edit the Content using the WYSIWYG Editor Tools 
  9. Click Save

How to...

Community Landing Page Styles