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 Slid

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

Home Page Newsletter Blobs

CSS Wrapper Class Name: callout-box make-buttons white no-img
Style - Header Only
HEN Home Page Newsletters
Style - Long Description
<h3>Fall 2021<span style="font-size: 14pt;"> |</span> Winter 2022</h3>
<p>In this issue, read up on beyond the climate change book club, connecting volunteers to your values, cultivating sustainable food systems, reducing food waste and so much more!</p>
<p><em><a href="https://community.eatrightpro.org/hen/viewdocument/hen-post-fall-2021-winter-2022">Read Here</a></em></p>
Style - Short Description
<h3>Fall 2022 | Winter 2023</h3>
<p>Development of 2025-2030 Dietary Guidelines for Americans and more!<br>    <br>    <br>     </p>
<p><em><a href="https://community.eatrightpro.org/hen/viewdocument/hen-post-fall-2022-winter-2023">Read Here</a></em></p>

How To...

  1. Click into the HTML Content section and select the "Edit" icon Edit Icon
  2. Update the newsletter issue, description, and link
    1. After uploading the newsletter on the HEN Post Newsletter page, click on the newsletter HEN Newsletter Preview
    2. Click the ellipses in the preview and select "Copy Permalink" Copy Permalink 
    3. Use permalink as link for button
  3. Click "Save"

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

Newsletters

HEN uses the Library feature to add newsletters

  1. View the following video trainings on the Volunteer Leader Resource website's Technology Trainings page
  2. Be sure to select the HEN Post Newsletter Library when adding the newsletters

Executive Committee Section

CSS Wrapper Class Name: leadership
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 classes Leadership 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

Announcements

  1. Go to the Members Only
  2. Click the "Add Announcement" buttons Add Announcement Button
  3. Fill out the form with the following required fields
    1. Title
    2. Text
    3. URL
      1. Use only if linking to external websites
    4. URL Text
      1. The text displayed for the above link
  4. 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"

How to...

Community Landing Page Styles