Content Tutorial & Samples

This tutorial page shows you how to add images, video, quotes, and other features to your General Pages. We hope the instructions below are self-explanatory but we also recommend going into Edit mode and seeing how each element is built.


To add text, simply begin typing in the "body" section.

Most pages on the site use the General Content template.

Headings & text styles

Take care with use of headings & text styles.

Heading 2 is for your main topics

Heading 3 for subtopics under H2 headings

Heading 4 for subtopics under H3 headings

This is Introductory Text. If you want to emphasize a section of body text, use the Introductory Text style.

  • Use headings to reflect your hierarchy of information.


  • Don't use plain text for headings; for example:

    Don't Create Headings Using Plain Text In Bold
  • Use the styles as-is.
  • Don't apply extra formatting like bold, italics, or all-caps to headings
  • Improve web readability by adding headings.
  • Don't publish more than 3-5 paragraphs without adding headings.
  • Use short paragraphs—much shorter than you'd use for print paragraphs. Aim for paragraphs that are no more than 3-4 lines long on a standard screen.
  • Don't publish content without checking your paragraph length.
  • Use Headings for headings; use Introductory Text for emphasized text.
  • Don't use Introductory Text as a heading, even if you prefer how it looks.

How to add an accordion

1. Type text you wish to appear in accordion header.

2. Highlight text , got to "Styles" and select "Accordion heading"

3. Hit return.

4. Anything you type after hitting return will then appear as part of the accordion, only visible when the accordion heading is clicked. (Just like this list of instructions)

5. To finish the accordion text, go to "Styles" and select "accordion break". Anything you type after the break will appear on the page as a separate paragraph below the accordion heading. (Just like the text below)


How to make a button

This is a button. Press me!

Buttons should be used for primary or hard calls to action, when you want people to complete a concrete action, such as register for a class, reserve or buy tickets, or complete a form.

1. Type text you want to appear in button.

2. Select and create a hyperlink to whatever page you would like linked in the button.

3. Keeping the hyperlink highlighted, scroll to the bottom of the text window. Above text format, select the "a". This will only appear as an option once a link has been created and highlighted.

4. Got to "styles" and select "CTA button".

5. Enjoy.


How to make a Right Arrow link

This is a Right Arrow link

This link style should be used for secondary or soft calls to action, such as learn more, email someone, or get more information.

1. Type text you want to appear in link.

2. Select and create a hyperlink to whatever page you would like linked.

3. Keeping the hyperlink highlighted, scroll to the bottom of the text window. Above text format, select the "a". This will only appear as an option once a link has been created and highlighted.

4. Go to "styles" and select "Icon right". (Note: this option will not appear unless you have already created a hyperlink)

5. Enjoy.

For a full-width quote like this one, choose
Component type—>Quote. The rest is obvious!
QuoteeQuotee Title

How to add inline images

Conga player
This is an image caption!
  1. Create a Text component.
  2. Within the Text component editor, click on the "E" (for "media entity").
  3. EITHER: Browse the current media gallery. Search for things like your department (i.e. prep, cpp, strings, etc.) OR search by image type ("button" for squares, "CTA" for wide-but-narrow images, "inline" for 4x3 and 3x4 images that are good for inline, etc.) [directory of image types]
  4. OR: Upload your own image. Note: if you UPLOAD YOUR OWN, use these naming conventions (on page 2) so you can find your images later.
  5. When you add the image, there will be an option to add a caption, and the picture can also act as a hyperlink.
  6. Once the picture has been added, lines will appear as you move the cursor around the text field. These show which text the picture is lining up with. These lines can be toggled to allow text to appear above and below the picture. (Like the title "Adding images" and this paragraph.)
Width 100% 75% 66% 50% 33% 20%

Image options

Use "Width" to make your image smaller. choose 100%, 75%, 66%, 50%, 33%, or 20% width. Use "Align" to place your image to the right or left of your text.

Use "Link to" to make your image a hyperlink.You may either link elsewhere on the NEC website, or paste in a full URL to an external site.

How to add a URL to an image

How to add a featured full-width image, like the ones below

  1. Select "Image asset" from the drop down menu above the "Add component" button and then click "Add component."
  2. The first image is sized to the correct specification for full-width use. Images for this have the prefix CTA6x1
  3. Other images may not be correctly sized for this function, as in the following example, so check your specs!

How to add a slideshow like the one below

  1. Select vertical slider from the components menu. 
  2. Select "add image asset". 
  3. Once you have selected your image, you will have the opportunity to add a caption.
  4. Rinse and repeat, as often as desired.
  5. Done! Easy peasy. 
CI Trio performs
This image has been properly formatted for this kind of feature and it looks great!
This image has not been well chosen for this kind of feature and appears pixellated.
01. This is "Vertical Slider". Unlike Featured Media, this is for images only.
02. Each image can have its own caption.
03. This slideshow auto-advances.
04. You may have a maximum of five images.
05. Recommended: use images that are the same dimensions, i.e do not mix horizontal and vertical images.

  1. In the Edit view, near the bottom of the screen, look for "Component Type."
  2. In the dropdown menu, choose "PDF" and click the button for "Add Another Component."
  3. Upload your PDF.
  4. In the text box, you can add information or associated text copy that will appear below the image and the title, as in this block of text.
  5. Choose a square image: under Image Media, click "Select Image" and under Image Name, search for the word "button." This will yield many options. Note: You can also upload a custom image via the Upload tab, if you have one.
  6. The link to the pdf will automatically appear as an icon right link, as below.

View full PDF

Video and Audio

How to add video

  1. full-width video:

    • Select "video asset" from the "add components" menu.
    • You cannot host directly to the website; instead you will add a YouTube link in the "video" box.
    • Caption accordingly.
    • An automatic thumbnail will be generated from the video but if you don't like it, or you want a particular one, you can select an image under the "Thumbnail" option.
  2. New: video placed within a text component:

    • Click the "E" icon (for "media entity").
    • Choose "Add Video" at the top.
    • Paste your Youtube URL.
    • You will not be able to add a caption or a custom URL.

How to add audio (currently not recommended)

  1. For audio, select "Soundcloud asset" from the "add components" menu.
  2. You cannot host sound files directly to the website; instead you will add a Soundcloud link.
  3. Caption accordingly.
  4. A Soundcloud thumbnail will be automatically generated and at present, there is no option to change it.
Video Thumbnail
If you want a full-width video, choose Component type—>Video Asset.
If you want full-width audio, choose Component type—>Soundcloud Asset.
Featured Media Slider

You also have the option to add media in a slider, as below. The component type for this is "Featured Media". Video and sound files as individual components and you can then add explanatory text.

Scroll through the slider to see the different options for this component type.


Tables are added as part of a text component. They can display with or without visible lines.

Here is a table without visible lines:

This image is hyperlinked.
This image has no hyperlink.
Follow link instructions above to add links to images.
Here is some text The text is in a table Here is some text The text is in a table
More text More text More text Texty texty text

Here is another table, with visible lines:

A Table Header Another Header
Line 1, Column 1  Line 2, Column 2

To add or edit a table:

  1. Select the "table" icon from the toolbar.
  2. To add pictures, click inside the cell you would like to contain the picture, and then select the "E" icon, as for adding inline images, above.

To edit an existing table, including changing the style, adding or deleting rows & columns, and more: right click on the table.

To adjust style (lines vs. no lines, etc.)

There is a dropdown menu below your text block, titled "text format." From this menu, select Full HTML.

Now you when you add or edit your table, you will see an array of style options, and can adjust the line width, padding, etc.

Need help?

If you have a question or need help, don't hesitate to get in touch with Marketing for website support.

The best way to do this is to use the website update form below: