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

  1. Add a new item by using the inline componet button .
  2. Choose a component from the list.
  3. Fill in the required fields and hit save/ok afterwards.
  4. To edit an item hover your mouse over the grey area and use the buttons that appear in the right upper corner:
  5. Use the pen to edit or the X to delete this element. 
  6. For white space/a paragraph above or below the element use the first two buttons.

video

The video element is the only one that has a special button in the editor:   This button will let you search Vimeo, Youtube and Youku (Chinese YouTube) and add video's from these three platforms to your page. For details please see the page about placing a video

Text block

If you need to point special attention to a text area you can use the text block element. It can be used with and without a paperclip. Within the text, links, pictures and more available.

Learn more about webahre

If you would like to learn more about WebHare please join our free courses. There are different levels available. For students and scientific staff we suggest to subscribe to the expert course (and skip the basic course). The expert course will also cover a summary of the basic features. Therefore this course is the best option to get a quick overview of all the options in just a couple of hours.

Download & Links

When using this element you can just add one item or a longer list. For each item in this list you can choose one of the two options:

  • download (files): gives you the option to upload a file that people can download. Common files like PDF have a logo to indicate what file type this is. Other files that are not common for downloading documents (like images) show a general symbol (cloud/arrow)
  • link: a link to a page on the internet, within your own WebHare (internal link) or just somewhere else on the internet (external link)

Slideshow

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)

Link Grid

The link grid element adds some little blocks. A block contains an title, an icon (choose one from the list) and a link. The icon list is pretty long and we just listed some examples here:

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 Call-to-action (CTA) Button

A big button 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 (ITC-site: black/bold). There are three 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. 

You can also use a small version with only a button. You will get this one if you only fill in the 'button text' and 'URL' fields: 

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)

Person info

A person info 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!

Person info (foldable)

This version of the person info takes less space on your page. If you click it, the item unfolds to present more information. You can easily list a couple of people, it saves some space. The information can automatically be fetched from People Pages, but can also fill in the fields manually.

If you want to create a full who-is-who page, you may also want to use the 'people' folder. See your People Pages / Who is who instruction for options.

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.

H3 in foldable content

text

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

Quiz questions

There are two types of quiz questions, multiple choice and open questions. The open question lets people enter some text and you as an admin can define some words that have to be included in the answer.

Example of a quiz question multiple choice

What color is the logo of WebHare?

Title for your open quiz question

What is your favourite colour? (Please note: if you enter several answers, every answer should be on a new row).

Put your words in the box below

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)