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

News OR events

Version 1: news OR events (shows the most recent items, set the number of items yourself; the link to more news needs to be added manually)

Version 2: Showing the two most recent items with a large image

Recent

Shows news and events in one element, next to each other. A second event type can be added. You can choose which news item will be shown on top, of let the most recent item be on top automatically.

Text block

If you need to point special attention to a text area you can use the text block element. It comes with a paperclip and can contain the title on top and text with the following options: bold, links, bullets, 1-2-3 list. Text is always italics.

Learn more about WebHare

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

Title for your slideshow
Title of your first item

Text.... Can also contain links and more.

Optional link for this slide...
Title for your next slide

Again some tekst... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more... Or more...Or more... Or more... Or more... Or more... Or more... Or more...

Optional link

If you have headings 2 that are listed on the right, these two quicklinks elements will stay only as wide as the text area is. If you don't have h2's on the right, it will be wider. You can deactivate your h2's on the file's properties, tab 'content related'.

Image with link block

If you have headings 2 that are listed on the right, theis element will stay only as wide as the text area is. If you don't have h2's on the right, it will be wider. You can deactivate your h2's on the file's properties, tab 'content related'.

Let’s talk business!

Image with caption


Author: lalalalalalalalal
Add your caption here. You can place your caption on the left or on the right.

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)

Banner (thin)

The items in the banner will automatically slide. You can upload an optional background. If not uploaded, WebHare will generate a background for you.

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 does not show images, but you can view all images from the icon list 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:

Issue widget test: UT brochure master programmes
Place your own description here.

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 different options available, depending on which fields of information you fill:

A button with text. Mark part of this text bold to highlight the important part.
Sign up now!


Short text? Button = right side!
Sign up now!
A button with text. Mark part of this text bold to highlight the important part.
Sign up now!
You can add a little note here. link may also be added. This text is always automatically in italics.
Last option: use only this text field! This looks a bit like the other inline component 'text box'. This text is always automatically in italics.

List of times

Great for showing times:

09:15 - 10:00

Welcome

10:00

First round of speakers

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. 

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

Timeline 

Shows the content of a timeline folder within your text. We suggest to turn of the H2 anchor links on the right when using this element. They may be turned off on the file properties, content related tab.

This is how the timeline works:

Create a folder of the type 'timeline' and give it a name and a title. Within your new timeline folder, create two folders: a folder of the type 'timeline tags' (name=tags; no title!) and a folder of the type 'timeline stories' (choose your own name). Both folders should have NO title to make sure they are not showing up in the menu.

Within the tag folder, create some tags (new file... tag) like 'research', 'education' or whatever tags you want.

Within the story folder, create your stories/moments for your timeline: for each story on your timeline, add a rich text document and fill in the name (URL), title (short title in timeline) and header title (title above full page after read more). Double click to open en fill in the main text, then publish. Open the properties of the text file and fill the two tabs called 'Timeline story' and 'Timeline header' with the basic information that's published on the timeline (date, short text, image or video) and choose one or more tags.

Tip 1: Instead of a text editor file you may also use a link file (internal, external, content link) in the story folder.
Tip 2: Mark a story as 'highlight' (you will see this option when adding story date/image) to make a story larger (page wide).

[Looking for the spot to fill in this introduction text? Check the timeline folder's properties > 'Timeline' tab. There is also an option to link to an existing web form to let people submit new stories.]

No results with the specified filter
2019
Jan ‘19
Title of another story

fsafsdfa

Read more
Jan ‘19
Jan ‘19
This is a story that is a link instead of a text file

fasfaf

Read more
Jan ‘19
2018
Feb ‘18
Title of my first document

Short text, filled in on the properties of your file. This story is marked as highlight and therefore page wide.

Read more
Feb ‘18

Social grid (instagram)

The social grid can only be set up by the main WebHare admin, who needs to log in with this Instagram account. It shows:

  • The 8 most recent images from an Instagram account
  • OR: 7 images with a uploaded picture
  • OR: 6 images with a large uploaded picture (like shown below)

Project info

Showing three fields:

Project information

Purpose project
[fill in your answer here]
Duration
[fill in your answer here]
Necessary funds
[fill in your answer here]

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': 

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)