Site Guide

Have questions about basic website edits?

     

Watch the CV-WELL Website Training (8/25)

Home Slide

CSS Wrapper Class Name: hero-slide make-buttons bg-image
Style
Home Slide
<h4>Upcoming Webinar</h4>
<h2>Diabetes Throughout the African Diaspora</h2>
<p><em><a href="#needsLink" target="_blank" rel="noopener">Regular Button</a></em></p>
<p><img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/ba00525c-8b3b-4dde-a1c4-a521e0763456/UploadedImages/theme-1/hero-img.png" alt="" data-mce-hlimagekey="acd8cc63-6f94-b6d2-7ed2-19a20d441834" data-mce-hlselector="#TinyMceContent_d1f7734d-859b-9a93-cf11-643db7eb72d3-tinyMceHtml" /></p>

How To...

  1. Add an Html Content Item to the first row
  2. Add the classes hero-slide make-buttons bg-image to the content item
  3. Click the pencil icon
  4. Edit the Content Item and 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 image-slide bg-image
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 image-slide bg-image 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"

Right-Hand Side Image Banner

Image will line up on the right side of the content.

CSS Wrapper Class Name: hero-slide hero-right-image make-buttons bg-image
Style - Header Only
Home Slide
<h4>Developing Leaders</h4>
<h2><strong>Academy Elections:<br>Call for Nominations</strong></h2>
<p>The Academy is seeking dynamic and visionary leaders who are ready to make a meaningful impact and be a part of this exciting journey towards a bright future for our Academy.</p>
<p style="text-align: left;"><em><a href="https://www.eatrightpro.org/leadership/developing-leaders/nominations-and-elections" target="_blank" title="Learn more about the Academy's Nominations and Elections" rel="noopener">Learn More</a></em></p>
<p><img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/859dd171-3982-43db-8535-56c4fdc42b51/UploadedImages/global_files/Election25_1200x675.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 hero-right-image make-buttons bg-image 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. Select "Ok"
  7. Edit the Html Content using the WYSIWYG Editor Tools
  8. 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/ba00525c-8b3b-4dde-a1c4-a521e0763456/UploadedImages/CV-Well/Images/Banner/egq_tW4jY8uPyC_M-stock-image.jpg" style="width: 100%; height: 100%;" data-mce-hlimagekey="80513951-da30-59cf-0a32-846ee99f9fe7" data-mce-hlselector="#TinyMceContent_5ad6eb2d-85f0-8c01-66c9-89491a7cff91-tinyMceHtml"></p>
<h1>About CV-Well DPG</h1>

How To...

  1. Add a Full Width Row

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

Events

How To...

  1. Go to the CV-Well Events page
  2. Click "Add Event" button
  3. Add an event Title
  4. Choose an event Type. Here are explanations for the most commonly used events:
    • Community Event: CV-Well specific events
    • Conference: All FNCE® events
    • Webinar: All webinars
  5. Add a Description
  6. Add an Event Image
    • 1200px x 600px dimensions
  7. Add the Date & Time
  8. Add the Location (optional)
  9. Add Contact Information (optional)
  10. Click Save

Member Spotlight

CSS Wrapper Class Name: spotlight-box make-buttons
Style
Member Spotlight
<p><img src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/ba00525c-8b3b-4dde-a1c4-a521e0763456/UploadedImages/CV-Well/Images/People/Karen_Collins__MS__RDN__CDN__FAND.jpg" alt="Karen Collins, MS, RDN, CDN, FAND" title="Karen Collins, MS, RDN, CDN, FAND"></p>
<h4 style="text-align: center;"><strong>Karen Collins<br>MS, RDN, CDN, FAND</strong></h4>
<p>In an interview conducted by Jean Storlie, Karen Collins shared these thoughts and perspectives.</p>
<p style="text-align: center;"><em><a href="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/ba00525c-8b3b-4dde-a1c4-a521e0763456/UploadedImages/CV-Well/Documents/Member_Spotlight/CV-Well_Done-_Karen_Collins.pdf" target="_blank" title="CV-Well Done- Karen Collins" rel="noopener">Read More</a></em></p>

How to Update...

  1. Edit the home page
  2. Click on the CV-Well Done content box
  3. Click the pencil icon
  4. Click on the image and update the image
  5. Update the name, credentials, and intro
  6. Update the PDF link

How To Add...

  1. Add an Html Content Item
  2. Add the classes spotlight-box make-buttons to the content item
  3. Add a Name or Title
  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 Html Content using the WYSIWYG Editor Tools. 
  9. Click Save

Featured Tiles

CSS Wrapper Class Name: featured-tile
Style
Featured Tile
<p><img class="img-responsive" src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/ba00525c-8b3b-4dde-a1c4-a521e0763456/UploadedImages/CV-Well/Images/Home_Page/WRE86iptOcvfIXgh-stock_image.jpg" alt="CV-Well Webinars" data-mce-hlimagekey="50c33713-0d03-af42-dcfa-a44395d6e525" data-mce-hlselector="#TinyMceContent_06d39e1c-a517-62e8-9a90-5df1d965b133-tinyMceHtml" title="CV-Well Webinars"></p>
<h4>Webinars<br>     </h4>
<p>CV-Well webinars on a variety of topics for members.</p>
<p><a href="webinars" target="_blank" rel="noopener">Read More</a></p>
<p></p>

How to Update...

  1. Edit the home page
  2. Click on the CV-Well Done content box
  3. Click the pencil icon
  4. Click on the image and update the image
  5. Update the benefit and description
  6. Update the link

How To Add...

  1. Add an Html Content Item
  2. Add the classes featured-tile to the content item
  3. Add a Name or Title
  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 Html Content using the WYSIWYG Editor Tools. 
  9. Click Save

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

Featured Box

CSS Wrapper Class Name: featured-box member
Style
Featured Box

How To Add...

  1. Add an Html Content Item
  2. Add the classes featured-box member to the content item
  3. Add a Name or Title
  4. Select the "Show Name or Title above content" checkbox
  5. Click the pencil icon
  6. Add Html Content using the WYSIWYG Editor Tools
  7. Click Save

Related Links Box

CSS Wrapper Class Name: link-list
Style
Related Links

How To Add...

  1. Hover over the first HTML Content box after the Interior Banner box
  2. Select the row just outside the content box
  3. Select the 75/25 row
  4. Add an Html Content Item to the right-side block
  5. Add the classes link-list to the content item
  6. Add "Related Links" to the Name or Title box
  7. Select the "Show Name or Title above content" checkbox
  8. Click the pencil icon
  9. Select Bullet list icon
    Bullet List Icon
  10. Add bullet points and hyperlink 
  11. Click Save

Executive Committee

Image & Name CSS Wrapper Class Name: leadership
Style
Image & Name Styling
<h3><img width="175" alt="Parul A Kharod, Chair, Headshot Image" src="https://higherlogicdownload.s3.amazonaws.com/THEACADEMY/ba00525c-8b3b-4dde-a1c4-a521e0763456/UploadedImages/CV-Well/Images/People/Parul_Kharod.png" caption="false" style="float: left; padding-right: 10px; padding-bottom: 10px;">Parul A. Kharod, MSC, RD, LDN</h3>
<h3>Chair</h3>
Bio CSS Wrapper Class Name: accordion_cvwell
Style

Bio Button

Bio

How To...

  1. Add an Html Content Item
  2. Add the class leadership to the content item
  3. Click the pencil icon
  4. Edit the Content Item and 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
  8. Add another Html Content Item directly under the Image & Name content box
  9. Add the class accordion_cvwell to the content item
  10. Add a Name or Title formatted as "Show (Insert Position Name) Bio"
  11. Select the "Show Name or Title above content" checkbox
  12. Click the pencil icon
  13. Add the bio using using the WYSIWYG Editor Tools
  14. Click Save

Awards Box

CSS Wrapper Class Name: award-box make-buttons
Style
Featured Box

How To Add...

  1. Add an Html Content Item
  2. Add the classes award-box make-buttons to the content item
  3. Add a Name or Title
  4. Select the "Show Name or Title above content" checkbox
  5. Click the pencil icon
  6. Add Html Content using the WYSIWYG Editor Tools
  7. Click Save

Newsletters

Add/Edit Library Folders

  1. 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.

Create a Library Entry & Upload Files

  1. Click the "Create Entry" button

  2. Add a Title

  3. Confirm your Library

    • The community you're uploading a file to will already be selected here.

    • 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

    • 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

    • 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 - "Standard File Upload"

  7. Optional - Select an Owner

    • 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.

  8. Optional - Add a Custom Thumbnail Image

    • PowerPoint and PDF files will automatically create a custom thumbnail from the uploaded file

    • Your selected image will display as the default thumbnail for this Library Entry in the list, row, and card views.

    • 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"

Webinars

Before the Webinar - Create Webinar Event

  1. Click "Add Event" button
  2. Add an event Title
  3. Choose the event Type - "Webinar"
  4. Add a Description
  5. Add an Event Image
    • 1200px x 600px dimensions
  6. Add the Date & Time
  7. Add the Location (optional)
  8. Add Contact Information (optional)
  9. Click Save

After the Webinar - Add Webinar Files to Library

  1. Click the "Create Entry" button

  2. Add a Title

  3. Confirm your Library

    • The community you're uploading a file to will already be selected here.

    • 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

    • 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

    • 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 - "Standard File Upload"

  7. Optional - Select an Owner

    • 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.

  8. Optional - Add a Custom Thumbnail Image

    • PowerPoint and PDF files will automatically create a custom thumbnail from the uploaded file

    • Your selected image will display as the default thumbnail for this Library Entry in the list, row, and card views.

    • 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...

Community Landing Page Styles