Advanced features by topic

Inline components (in text)

It's easy to fill your website with simple text and pictures, but there are so many possibilities! This templates offers some inline elements that can make your page more attractive. Here is an overview of all available inline components. 

General instruction for all items

When editing a document, you can add an item by clicking on the editor button  and choosing the inline component that you want to use. Once added, an inline component can be recognized by the grey area in the editor: 

The icons on the right () only appear when you hover the mouse cursor over the grey area. Use them to

  • Get some white space above or below your inline component (e.g. if you want to add more text above or below an inline component)
  • Edit your item
  • Delete your item

video

There is a special button for adding videos: the filmstrip button:  This button will let you search Vimeo, Youtube and Youku (Chinese YouTube) and add video's from these three platforms. For details please see the page about placing a video

Image (click to enlarge)

Alternatively to the 'normal' image you can add in the editor by using the image button  , you can also make use of the inline image component. This inline component enables you to enlarge the picture if necessary (for example to download it).

Titel of my image (optional)

Caroussel (foto and video rotating)

Add pictures and video's step by step. Items can have some text below them and links can be added to pictures.

Issuu Foldable brochure

To embed a folder you can use the issuu element. First, the brochure needs to be uploaded to issuu.com (you can create an own free account or ask onlinemedia@utwente.nl to put it on the UT account). For embedding the brochure into a page, you need the ID of the document on issue and it's height (if the pdf is put the the central UT account at issuu.com ask online media for the code).
 
There is also an Issuu widget available to present your brochure as a widget below your page.

Preview Issuu inline component:

An inline CTA (Button)

This is what the button looks like. It works great when you ask people to sign up for your event or to download a brochure. Mark a part of your sentence bold to get more attention. The bold letters will be shown bold and in color on the website. There are two options available:

Inline CTA with paperclip
This is my text. Include styling if you want by making this text bold!
Your own button text
You can add a little note here. link may also be added. 


Inline CTA without paperclip icon
This is my text. Include styling if you want by making this text bold!
Your own button text
You can add a little note here. A link may also be added. 

Quote

A quote looks like this. There is also a version without a picture. 

Hello, I am the quote text!Mr and Mrs Smit (head of department)

Contact person

A person element has different fields. If you want to hide a field, because you don't need it, you can just leave it empty. This element can fetch information from People Pages (people.utwente.nl), you do not need to fill in the information manually. All available fields:

Fill in the titel here
Anne Heining MSc
Coordinator Websites and Social Media

You can add a short bio text here. With a link!

Accordion content

Accordion content is content in your page that is initially hidden when the page is opened. People can open it if they want to by clicking the + icon. Use accordion content for content that is not necessary for everybody, or for content that needs to be read step by step. You can also use accordion content to create a good overview in your website without creating an extra level of navigation.

Tips:

  • use a minimum of two accordion content items, because when only using one item it might not be clear that this is a list you can unfold. 
  • you may now sort your items after creating them (the old version named 'foldable content' did not have that option)
Foldable content #1

Text... Picture and video is also possible.

H2 in foldable content

text

H2 in foldable content

text

Accordion 2

Second text element..

Accordion content is a quick solution for creating a list of content that is initially not extended. Hint: If you have large lists of foldable content and many files, it's easier to use a content listing folder. A content listing folder looks the same on your website, but instead of working within your text document, you create a folder and add those files to it that you want to have in your overview. 

Features Pages

A featured pages element helps you highlighting some links on your page. This inline component has the same design as items in a content listing folder. Use it if you want to give some extra attention to important links. 

Content listing

A content listing element looks like the accordion explained above. Basically, it is a repetition of the menu in the text area. This helps getting more attention to the menu items when they are really important. When adding this element, you can choose whether you want to show files only, folders only or both. Files are shown with a little arrow to go to that file. Folders get a little + to extend it and see what's in there:

Widget block inline

Widgets are usually linked to your page by hitting properties of a file or folder and linking them on the 'widgets' tab. If you want your pictures inline in your text, you can add this widget block. Hit the embed button {...} above, choose the category 'miscellaneous' and select 'widget block': 

Test widget block

A widget block is wider than the text area and will be presented with UT style elements in the background. 

Please note: this instruction assumes that you have already created some widgets for your site and tells you how to link them to a page. If you have not created your widgets yet, please visit the widget instruction page first.

---------------- Components for advanced users below ------------------------

Hard return with clear

This element will not be visible on the website. It's just a way to add an hard return (enter) in the editor to get your content IN THE EDITOR nicely below each when it's not. 

A list of all bachelor/master programmes

This list has two options: you can either add a list of all bachelor programmes or a list of all master programmes. 

All bachelor programmes (your own title here)


All master programmes (your own title here)

RAW HTML

If you need to embed something from another website, you can use the raw html component.

raw html

To edit or delete an item, move your mouse over the grey box and use the pen and X icon to edit or delete. 

Items that are missing on this page

Hodex factsheets (only available on special sites)
Eligibility check (available on every page, but limited functionality: list of master programmes, incl links to check eligibility)
News/events (check on filter options)