Working with content blocks

Adding content, multimedia and phone functions.

Written by Georg Holzer
Updated over a week ago

A content block can include a text, an image, a video, a link, an audio file or a download. Each block has a title and its actual content. The title is displayed as a sub-header (H2) and is optional.

Tip: The presence of sub-headers can provide enormous help to people with visual impairments and blind people. Since the texts are read to them, the sub-headers can be used for navigation.

In case there are links, you can always check them by clicking on the arrow icon next to the link.

On the left side, you always see the block how it is edited in the CMS. At the right side you see the result in the mobile web (looks similar to the apps).

Text Editor

The text editor offers some formatting options.

Audio

The audio block plays MP3, Ogg Vorbis, AAC and M4A files from the media library. Audio files are only available for streaming. The end user cannot easily download them.

SoundCloud

The SoundCloud block lets you embed audio streams found in the SoundCloud’s online service. All it takes is inserting the URL of the respective songs.

Video

With the video block, you can easily embed different videos. All it takes is inserting a valid YouTube or Vimeo video URL. You can also host video files on your server. The files should be encoded as mp4, or h.264 since most mobile browsers support these.

Links

With the link block, you can add links to various websites. These are more prominent than the links in the text editor and are highlighted with the target logo (e.g., Facebook, Twitter, LinkedIn, Spotify for songs and playlists, YouTube channel). The link types for email and phone are particularly convenient, as they make it very easy for the user to reach you. Another useful feature is the Google Maps link with which you can quickly provide navigation instructions.

Info: Links to Apple’s iTunes Store are shown only on iPhones. Those to Google’s Play Store only on Android devices.

Images

The image block adds photos or graphics via the media library. Images uploaded with the media picker will be stored in your media library.

For the mobile web, landscape format images are best suited because they will always be displayed in full-width. Using the width-slider, you can determine how much space they are allowed to take. This is particularly useful for images in portrait format.

You can optionally specify to which external website the users will be directed by clicking on the image.

You can upload pictures with no limit in file size. Users on mobile phones and also on your website will see the images in a version that is perfect for their device. The scaling in optimizing happens automatically.

Along with the caption, you should always mention the copyright holder – unless this is you and you don’t want to be mentioned.

Info: Please add an alternative description to the image. This helps people with seeing disabilities. If you do not enter an "Alt Tag" the caption will be used for instead.

Pages - internal links

This content block is used for quick linking of pages on related topics or for creating summary pages.

Shown is a preview of the cover image, the title, and the opening credits of the linked page. As seen in the right example, it is crucial to have a short title and an excerpt of the right length.

List

This content block is a list of pages with the same tag that is composed just as the content block page.

You can control the order (ascending or descending) of the articles with the (only internally visible) name of the article.

This block can be of great use if you want to offer a news/blog section. It is also handy if you'r going to group related pages on an overview page (e.g., for restaurants in a particular town).

If you later add this tag to other pages, they will appear in the list automatically.

Include

The content block Include includes another page with (optionally) its cover image. The title and excerpts are hidden.

This is of great practical use if you want to display the same information on any or all pages. Just think of a footer that shows an upcoming event or social links.

It is always a good idea to include a(n empty) page in all pages. Once you need it you can edit just one piece of information for sharing it on every/many pages.

Download

Download helps to provide downloadable files such as ebooks, calendar items and business card files. The user may save the files directly to their address book or calendar. You can create such files in programs like Microsoft Outlook or online.

Map

This allows you to display a map with spots that have been grouped with tags (e.g., by geography or themed topics).

You can show the user all spots and you can control if she/he can access the page that is behind a spot.

If you add a tag, you will see how many spots are available with this tag. If you later add the same tag to other spots they will appear automatically.

Did this answer your question?