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.

Copy pasting & moving inline components

Selecting them and copy/pasting them to another spot is tricky. Here is the solution: add one letter before and after the inline component, take them with you when copy pasting. Then it works!

[Tip for expert level users: when you include H2s in your copy paste task, the browser will make the letters uppercase. To prevent this copy paste var x=document.createElement('style');x.textContent="*{text-transform:none !important;}";document.body.appendChild(x) in the browser console (F12, console tab, field below tekst) before you copy paste your text with H2's]

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

Page navigation

The page navigation element has been designed to click to previous/next pages. For example: your study programmes takes three years and every year has one webpage. By default the link mentions 'next'/'previous', but you can also overwrite the label to show your own text.

Example with one link

Example with two links

Default version (words are automatically adjusted to the language of your website):

Version with own text:

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

In Word Documents you may be used to using the 'tab' key to display a list of times like a programme for your event. The tab key does not work in websites, therefore 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

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. 

Anchor link (link to a specific text paragraph)

Linking to a paragraph that contains a Heading 2 is easy, as the Heading 2 tekst is listed in the URL of that page. (Example: www.utwente.nl/url-of-your-page/#my-heading-2.) If you need to link to another spot on the page that does not contain a Heading 2, you can set an invisible anchor in your tekst/page and then create a link to that anchor. This also works if you need to link to content in accordion elements.

Follow these steps:

  • Add the inline component anchor in your text where you want to link to.
  • You will be asked to give your anchor a name, we chose testanchor. You now see it in WebHare as an (grey) inline component.
  • Get the full link to the anchor, that is the URL of your page + de anchorname with a # in front. Example:
    www.utwente.nl/url-of-your-page/#testanchor
  • Place this link whereever you want to point someone to the spot where you placed the anchor.

Please note: Anchors are case-sensitive, so #Testanchor will not work.

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

The inline component 'Widget block' shows widgets (blocks) and is just as wide as the text area. Therefore only two widgets will fit next to each other. Widgets have to be created in the 'Widget' folder within your website first, then you can add them to your inline component.  

There is another option to add widgets: you may also link them to your text page (properties of the file, widgets tab). Then they are shown below your page, using the full width of your page and not just text width. 

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.

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. 

Raw html

If there is no other way to add certain content and you need to use html to embed it in your page, use this element. Example: add a list of publications for one or more researchers of one of more research groups to your page. Do not use it to embed video's placed on YouTube. Always use the special video button for that. 
[This is why: Embedding with plain html code might set cookies and the visitor of the site might not have agreed to that. The special video button has the ability to check if a user has agreed to place cookies and will block the video (and all advertising cookies from YouTube) if some has not agreed to place them]. 

raw html

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.

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.

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)