SiteBuilder – What’s new in the latest version

SiteBuilder is 3rd party software provided by developers CM4all. This drag-and-drop web design software makes it possible to design a website without previous experience.

Note that version updates are administered by CM4all in Germany and we are reliant on their support team should any technical issues occur.

Changes to the previous version are provided here:

Version 3.3 [Feb 2020]

1. Introduction

With this new version we move a further step towards our new user experience. The main menu on the left – introduced with release 3.2 – now includes all former settings from the top menu.

Besides the ‘simplifying’ rework, we’ve added a number of attractive new features to the software.

Most beneficial for our users is the new ‘Versioning’ feature. It allows users to save up to 10 different versions of their website – including a backup version and a published version. This is a major issue for all partners delivering ‘build it for me’ services – as they can prepare different layouts for their customers within one sitebuilder account!

Also of great value is the ‘Smart Access’ button for mobile devices – offering one-click access to easy contact a website owner via phone or mail.

Design enthusiasts will love our new layouting options with videos in the header and background area – and different appearance styles for all design templates by ‘hiding empty areas’.

Last but not least we are very proud to introduce our new developer access ‘CM4all DEVs’ that allows easy development & testing of own widgets in our partners environment.

2. Revision of key visual area and background images

2.1. ‘Focus Area’ for key visual images

When placing an image as a key visual within the header section, you will always see different image sections depending on the used device. On your desktop you will see the whole picture in full width – on your smartphone you can mostly only see a small area of the image. This small area used to be the center of the image – but based on customers feedback we added a functionality to let the user decide, which part of the image should be always visible. We call this feature ‘Focus Area’ – as the user can define the most important area of a given image.

2.2. Better responsive behavior

To improve loading time for key visual images on mobile devices and better support responsive behavior, we integrated the <picture> tag instead of the <img> tag for all key visuals used in the header area.

This requests images in the content in the appropriate size from the server, depending on the device.

When using the former <img> tag, all images were loaded in their largest size from the server and then resized by the client browser. This meant a lot of load even if there was no need for a wide screen image.

Now the <picture> tag is a placeholder for up to 6 different versions of the same image – ranging from thumbnail till widescreen. In our back end, we pre-render all images in these different sizes, so that a client can directly request the best one for a given device.

2.3. Key visual and logo areas now fully clickable

The key visual and logo configuration can now be reached by clicking on the whole area instead of only being accessible through the gear icon in the top right corner.

2.4. Support of animated GIFs and videos

Users can now use videos and animated GIFs in both header area and as background of their website. The header area on a page can include multiple slides, also allowing to mix videos and images in a slideshow.

▪ When using multiple videos and/or images in the header are, videos play once and then switch to the next element.

▪ When using a video as the only element in the header area, it automatically loops.

2.4.1. Selection of various movies in image archive

There’s a new folder ‘Movies’ in the stock images tab of the File Manager, that already includes a selection of good looking and smooth videos. Those videos are not related to any business or consumer category – as they are more ‘storytelling’ or ‘emotional’ with nature and abstract components – and can be used in many contexts.

3. Website Versions

We are very proud to have a new major feature available, something that is rather part of large content management systems than part of a WYSIWYG sitebuilder.

With ‘Versions’ (available within the ‘Settings’ menu) users can now manage different layouts and contents of their website – and easily switch between them. It is possible to manage up to 10 different website versions – plus two backup versions, that are automatically created, one on publish and one on restoring an older version (optional).

Versions include the current design settings (template, colors, fonts, header & background area), pages and contents (texts, images, widgets). The contents of widgets are not ‘versioned’ – so an online shop always shows all currently available products.

3.1. Creation & Management of Website Versions

We created the ‘Versions’ feature fully based on Material Design Guidelines. This means that adding a version can be done via the ‘+’ button.

Users can define a name and description for a version. The system automatically adds useful meta information like creation date, colors and fonts – plus a screenshot of the version.

The creation process can take some time – depending on the size / scope of the website.

When finished, a short message (‘Toasty’) is displayed to inform the user.

3.2. Automatically created Versions

Automatically generated versions are specially highlighted in the ‘Versions’ overview. They cannot be edited – and there’s only one slot for them that is overwritten when creating a new Backup / Published version.

3.2.1. Backup Version

Every time a user wants to apply an existing version, the system asks to create a ’Backup version’ of the current state of the website. This can help the user to switch back to the current state, if he/she applied a wrong version. The creation of a backup version is optional.

The user can optionally create a backup version when applying an existing version.

3.2.2. Published Version

Each time a user publishes the website, the system creates a version – listed as ‘Published version’ in the version selection. This allows users, who have accidentally deleted something in the editor, to easily return to the website status that is still online or published on the Internet. This special version will also help support teams to restore their customers’ websites!

4. ‘Smart Access’ button on mobile devices

A long time before supporting responsive websites, we offered a specific ‘mobile website’ feature – to have optimized content on mobile phones.

Nowadays responsive websites are global standard, so there is no point in continuing to support a specific mobile website. But: One part of the ‘mobile website’ feature is really worth keeping: the ‘mobile start page’. A starting page on mobile phones including a number of buttons with direct access to email, phone, map, or Facebook – whatever the user configured.

So we came up with a great new feature, which combines the idea of the ‘direct access’ buttons on mobile phones with our responsive websites in general. This component is called ‘Smart Access’ and can be switched on/off by the user.

It displays a ‘Smart Access’ button and provides website visitors with a quick and easy way to reach important information easily on their mobile phone.

Users of the former ‘mobile website’ will be automatically migrated to the new feature, offering solutions for all types of existing customers. Existing settings for the mobile start page will also partially be migrated to the ‘smart access’ settings.

The ‘Smart Access’ configuration is available in the ‘Mobile’ section within the ‘Settings’ menu – and every configuration is automatically displayed in the right preview area of the feature.

When configuring only one ‘direct access’ function, the corresponding button (like ‘Phone’) is shown in the lower right corner of the mobile phone.

When configuring multiple ‘direct access’ functions, a generic button is shown, that opens a special layer with all functions.

5. First introduction of new File Manager

A new file manager is integrated into the dashboard – currently accessible to pick a favicon and a social media image. This file manager will replace the current file manager in the editor in one of the next versions of Sites and offers bigger thumbnails, much better information about selected files and the option to drag&drop files on the whole screen to upload them.

Our new file manager is fully responsive and works on all devices.

5.1. Ability to upload favicon

Users can now upload an image that will be automatically used as a favicon. The favicon also autonomously creates a home screen ‘app icon’ for iOS and Android devices in the required resolution.

The former favicon editor has been removed – all existing favicons will still work.

6. New layout options in all design templates

Enabling more flexible designs by hiding unused containers on a published website.

Users now have the option to hide unused containers / areas on their website – which enables a number of new layout variants for each design template supporting this feature. For example: Not using a large header image area on a specific page will completely remove the header within the published page – and it looks like a ‘text only’ page. When leaving a vertical sidebar empty, the main content will be enlarged by this area and thus grow to full width.

The option can be switched on/off within the upper right corner of the design template fly-out.

If switched on, all empty areas, that will later be ‘removed’, are marked ‘checkered’ within the editor.

7. Usability, UI and UX updates

7.1. New and improved usability for columns editor

The column editor has been redesigned based on numerous customer feedback we have received for the previous UX.

It is now more ‘responsive’ and offers some other convenient features that weren’t available before, like deleting columns that aren’t empty.

7.2. Moving ‘Settings’ fly-out from editor to dashboard

As a step forward towards product unification we have now moved the complete settings flyout from the editor to the dashboard. Previously double accessible settings are now only reachable from the dashboard.

7.3. Shifting of ‘Favicon’ and ‘Social Media Image’ to general settings

As ‘Favicon’ and ‘Social Media Image’ never really fit into the ‘Settings -> SEO’ category, we have moved both options to ‘Settings -> General’.

7.4. Option to cancel dashboard onboarding for first time users

Our ‘Dashboard onboarding’ used to be mandatory for the very first time user – and only when reopened, a ‘Cancel’ button appeared in the upper right corner. Responding to feedback the dashboard onboarding can now optionally be cancelled also during the first appearance.

7.5. Removal of Facebook settings

Since Facebook stopped supporting the Facebook Page integration feature quite a while ago, we’ve now removed it completely.

Our generated contents might still work within Facebook – as a sub page within a given Facebook Page. This sub page can easily be deleted within the Facebook Page Management. Also the granted rights for our app can easily be revoked.

Former users can simply remove the ‘FB4all’ app – available within ‘Business Integrations’ in ‘Settings’.

7.6. Removal of ‘expert mode’

When first introducing our ‘expert mode’ some years ago, we wanted to prevent novice users doing things that make websites look ugly. So we activated a number of advanced styling settings / formatting options only for ‘expert’ users.

But as nowadays people are very used to website layout, we figured out that nearly every user activated the expert checkbox. So we decided to remove the ‘expert mode’ and all options are available for all users at all times.

8. Widgets

8.1. New widget icons

All of our widgets were updated with new icons that come with a more flat design.

8.2. New widget ‘Slideshow’

The new slideshow widget offers users a multitude of options to integrate images into their website. With this widget we have finally completed the transition from our old to our new generation of photo albums.

8.3. New widget ‘SoundCloud’

The SoundCloud widget allows you to integrate SoundCloud music streams into the website. Users can choose between a single song, podcast or a complete playlist.

8.4. New widget ‘Mixcloud’

The Mixcloud widget allows you to integrate Mixcloud music streams into the website. Users can choose between a single song, podcast or a complete playlist.

9. New skeletons for consumer categories

The website templates for another two standard consumer categories within the Instant Setup Page, ‘Groups’ and ‘Family’ were redesigned with the latest design templates. They are available in all languages.

Version 3.2 [14 November 2018]

This release adds a number of UX and feature optimisations

  • New usability bringing the ‘mobile version’ features to desktop
  • Defining desktop start view for application (Website Content / Dashboard)
  • New behaviour after login with mobile devices
  • ePages Connector
  • Enhanced color settings
  • Enhanced font settings for subtitle
  • Line height settings
  • More uploading options in mobile editor
  • Positioning of elements in mobile editor
  • New layout widget ‘Button’
  • New skeletons for consumer categories

Note: The FaceBook configuration option will be removed from the Editor. Any changes required can be made directly in FaceBook.

Bringing the ‘mobile version’ features to desktop

The former ‘mobile version’ is now fully integrated within the Editor – and not only available for mobile users.

The menu bar on the left includes all important features like ‘Dashboard’, ‘Feedback’ and also the new ‘Settings’ menu. 

Please note that all existing ‘Settings’ are successively being moved from the upper menu into the left menu,  therefore there is a transition period where some features are doubled.

Enhanced formatting options for colours and fonts

Enhanced colour settings

Available in global colour settings popup: The user gets a better impression of predefined colour sets as they are no longer displayed as ‘block’ but in a symbolised website layout.

As before, the user can click on any of the presets and directly preview the result within the website.

In the details settings for colours there are now more colour values available.

To better test new colour & font settings, the user can minimise/maximise the window via the icon in the upper right corner.

Enhanced font size settings

Users can now not only choose a relative size ranging from ‘small’ to ‘huge’ – there are now options to enter any predefined value or even to enter an individual value, including very large option.

This functionality was added upon request from many design driven users – as a number of web fonts really look very good in very large letters and allow very individual layouts.

Line height settings

Available in global font settings: Users can define line height for all text paragraph templates

More uploading options in mobile editor

When using the mobile version of the website editor, users could add images from their camera via the ‘+’ button. Many more options are now included: When clicking the ‘+’ button there’s now a menu that allows you to upload multiple images and to choose from your own files.

Positioning of elements in mobile editor

When adding an image via the ‘+’ button, the user can choose were to position it.

New layout widget ‘Button’

Buttons are very simple widgets including text, some colour settings and a link.

New skeletons for consumer categories

The website templates for the standard consumer categories within the Instant Setup Page were re-designed with the latest design templates.

Version 3.1 [24 August 2017]

New features:

  • Integration of Adobe Image Editor
  • Adding transparency settings for colors
  • Support of <picture> tag for images
  • New template websites (Skeletons) for business categories

Integration of Adobe Image Editor

The integration of the Adobe Image Editor allows users to edit all images within their File Manager.

When selecting an image within the File Manager, the user can click on Edit and the Adobe Image Editor opens. It offers a large selection of image editing options like cropping, tinting, adding effects, texts and much more.

When saving the image, a copy of the original one appears within the File Manager.

Adding transparency settings for colors

The global color settings were enhanced by a transparency option for colors. This allows users to make specific sections within the website transparent – e.g. the background in the main content to better see a background image.

A wide range of new design settings is now available through this enhancement.

Support of <picture> tag for images

To improve loading time for images on mobile devices and better support responsive behavior, we integrated the <picture> tag instead of the <img> tag for all images within page content.

This requests images in the content in the appropriate size from the server, depending on the device.

When using the former <img> tag, all images were loaded in their largest size from the server and then resized by the client browser. This meant a lot of load even if there was no need for a wide screen image.

Now the <picture> tag is a placeholder for up to 6 different versions of the same image – ranging from thumbnail till widescreen. In our back end, we pre-render all images in these different sizes, so that a client can directly request the best one for a given device.

You can best see this new feature by opening developer tools – the <picture> tag lists all available variants of an image.

Important notice: Please be aware that providing these additional images requires more webspace. All images listed within the Sites File Manager will be provided in different sizes for better responsiveness – so there is more webspace filled with image data in a hidden area. In general users should not use their Sites File Manager as a kind of ‘dropbox’ alternative. They should only upload images that are planned to be used within their website.

New skeletons for business categories

The website templates for the standard business categories within the Instant Setup Page have been re-designed with a modern look and feel.

Version 3.0 [April 2017]

  • Classic’ desktop version:
    • Completely revamped user interface in material design style
    • Switch between new mobile version and desktop version
    • Enhanced status messages for importer
    • Adding transparency settings for colors
  • New mobile version:
    • Extensive user introduction via onboarding
    • Dashboard
    • Visitor statistics
    • Responsive text editing
    • Image upload from mobile phone
    • Integrated user feedback for UX measurement / further feature development
  • Widgets:
    • New photo album widgets
    • Revision of contact form widgets
    • Replacement of „Insta Feed“ with „Media Feed“
    • New layout options for all teaser widgets

Classic’ desktop version:

Switch between new mobile version and desktop version

Switching from the desktop to the mobile version is now easy. The link to the mobile version can be found in the menu at the top right corner of the application. Some other functions that aren’t used heavily were also moved to this menu to free up space – including reset, logout and help.

Enhanced status messages for importer

If a website cannot be imported, the dialog now includes a question mark icon for more details. 

Adding transparency settings for colours

Colours of all colour groups can now have transparencies, giving users more options like using a big background image combined with a semi-transparent content background.obile

New Mobile Version:

First time users will be guided with an interactive tour using pop up windows. Cycle through the pop ups to complete the tour. The Help button (? icon) on the menu bar restarts the tour at any time.


The dashboard is the central area of information in the mobile version. Users can find all relevant information about their website here, including aggregated messages from all widgets using the message system, some condensed statistics about website visitors and top website pages and status information about their website.

The Mobile Version opens in Dashboard view. Under the Dashboard icon in the left menu is the Content Editor for editing of the website.

Responsive text editing

The ability to edit and revise website texts is the core component of this first mobile release. Editing texts on a smartphone needs to be handled differently than on a tablet – the lack of space being the most important issue here. This resulted in a “paragraph based” text editor on smartphones, which takes advantage of the complete screen size of the phone, and an approach similar to the current editor toolbar in the desktop version for usage on tablets.

Note: Not all the functions of the desktop version are available in the mobile editor yet. The missing functionalities will be added continually with the next releases.

Image upload from mobile phone

As a first feature for adding content from mobile devices, we added a ‘+’ button for adding images. Especially images a user takes with his mobile camera. The image gets automatically added on top of the current page. When switching back to the standard desktop version, the user can move / configure / delete the image. It’s automatically added to the File Manager within the user’s webspace.


Sites 3.0 includes the first of a bunch of new photo album widgets – bringing a much wider variety for users when it comes to including pictures in their websites in a beautiful way. Two new widgets will be available with 3.0, though each of them offers multiple ways to showcase pictures. All new album widgets will have the following main new features: much more intuitive picture selection, drag and drop to reorder pictures in an album, options to set title alt tag and description and a lightbox feature on the published website. All widgets are of course fully touch compatible.

Photo Grid

The Photo Grid widget offers an easy way to present pictures with multiple aspect ratios in a fluent stream on a users website. Pictures are automatically arranged to present a perfect looking photo “grid”.

Photo Gallery

The Photo Gallery widget offers multiple ways to present pictures on a website. Available styles include: Square, Landscape, Portrait, Circle and Polaroid. These styles can then be combined with rounded corners and/or a border and a margin, offering a wide variety of different options.

Contact form widgets

  • Submit button text & required fields text are now editable
  • Better look and feel of error messages and browser-supplied form validation
  • Optimization of form fields for mobile devices or touch keyboards
  • Allow only present and future dates for reservations
  • Allow only a specific time
  • All form fields can be deleted

Replacement of „Insta Feed“ with „Media Feed“

According to changes in Instagram’s policy and API we had to rebuild the former “InstaFeed” widget. The resulting “new” Media Feed widget is now officially approved by Instagram using the company’s API. According to Instagram’s new restrictions it won’t be possible to integrate public photos filtered by #hashtag only.

The widget will require authorization before it smoothly integrates an individual Instagram photo and video feed into the website. As usual it supports gallery and slideshow mode.

New layout options for all widget teasers

Users are now able to place a teaser icon at various positions. Therefore, the corresponding config dialogue has been extended by a preview of five different layout options (icon right, left, top, middle and no icon).

Moreover, all icons in the widget teasers have been replaced by a scalable vector icon font. Vector fonts are optimized for speed due to their small file size, perfect for high resolution displays and cross browser compatibility.

Do you need further assistance? Contact us