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.
- Add a new item by using the inline componet button .
- Choose a component from the list.
- Fill in the required fields and hit save/ok afterwards.
- To edit an item hover your mouse over the grey area and use the buttons that appear in the right upper corner:
- Use the pen to edit or the X to delete this element.
- For white space/a paragraph above or below the element use the first two buttons.
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.
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.
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)
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:
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:
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|
First round of speakers
A quote looks like this. There is also a version without a picture.
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:
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.
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.
- 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)
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.
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.
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:
- 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.
Showing three fields:
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.
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:
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.
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.
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].
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
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.
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'.
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'.
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).
The items in the banner will automatically slide. You can upload an optional background. If not uploaded, WebHare will generate a background for you.
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.
Add pictures and video's step by step. Items can have some text below them and links can be added to pictures.
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 email@example.com 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:
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.
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)