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.

Text

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.

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.

How to add inline images

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

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

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.

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:

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:

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.

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: