The Website-Base makes creating and editing websites immensely easier. It provides all the building blocks needed to create a good-looking website. In addition, all of these elements have been created to be completely responsive, meaning that they respond to different display sizes, such as smartphones or smaller browser windows, so that web pages built with the Website-Base are always optimally displayed.

Responsive page layout

For the creation of new pages, there are various "skeleton" building blocks available in the website base, with the help of which the structure for each page is individually defined. These include, for example, multi-column sections and colored areas. Thanks to the modular system, these can be combined as desired, for example, a color-backed, multi-column area can be assembled with just a few clicks.

The front-end structure of the website is represented in the backend by these building blocks representatively, which makes the editing of a page very easy:

 


For the flexibility of the web pages, these building blocks are designed so that, for example, a four-column area automatically becomes a 2x2 area on narrower screens.

Using Texts, Pictures and Videos

In order not to leave the scaffolding empty, texts, pictures and videos have to be added. All this happens through a single TYPO3 content item that handles text and other media.

The Rich Text Editor

In this content element, a rich text editor is available that allows text formatting in no time at all. There are so many options available, from standard functions like bold text to Labels of all kinds, Badges, buttons and warnings to tables and various paragraph formats, that listing or even showing them all here would go beyond the scope of this page.

All formatting is not only displayed when the page is called up in the frontend, but is already completely visible within the editor.

This demo page shows the various buttons, labels, and some paragraph styles, such as the quote box.

Text and Media

The same content element makes it possible to embed videos and images of various file formats or even links to YouTube or Vimeo content. If you want to combine media and text, options like displaying all media of a content item below the corresponding text are available.

Responsiveness of Pictures and Texts

Texts and media are always responsively integrated. In order to be able to optimize the rendering even further, special detailed settings are available for pictures. This makes it possible to select explicit image areas for smaller screens so that they are better visible on smartphones.


Creating interactive content items

The Website-Base includes some interactively designed content elements that provide a variety of display options for your content. These have been designed so that content can be added to the website in just a few clicks. This way great things are created with little effort.

Integrating Google Maps

In order to integrate interactive Google maps on the website, only the input of the desired address data or coordinates in a specially designed content element is necessary. In addition, you can set whether, as on the sample map, the classic Google Maps control elements are available, for example, to provide a better orientation for driving directions.

If you want to mark exact locations, any number of markers with an individual description and a configurable symbol, such as a company logo, can be added, for example to clearly mark the company location.

Brandenburger Tor

Highlight Boxes

The highlight box is basically a normal text area with a colorful background and automatic adjustment of the text color for improved readability. The element's settings are preconfigured with different color combinations, such as a yellow background for alerts.

For example, announcements can be prominently integrated through such highlight boxes.

Progress Bars

Progress bars can be used to, for example, illustrate the progress of activating an account or ordering process. Again, the website base contains a ready-made element that can display animated progress bars in various colors.

Cards

To put products or other content in the limelight, business card-like elements are ideal. Such elements have also been configured for the Website-Base so that they can become part of a page quickly and effectively by entering just a bit of information.

Another highlight of these cards is that they react dynamically to mouse pointers as soon as the user moves over the map, if it contains a link to another page. Thus, the visitor is shown that there is interesting content hidden behind the card, and they're given an incentive to look at that content.

Of course, the maps have been created so flexible that they are displayed optimally at all times, be it if they extend across the entire screen width, are created next to other content elements or the page is called up on a mobile device.

Icon Element

Via the Icon Element any Fontawesome-Icon can be integrated with little effort. These can be used, for example, to integrate a magnifying glass  for a search function.

Through our implementation, a subtitle can be added to the icon in a few steps and the size and background design of the icon can be changed.

Icon element with coffee cup and no background

Icon element with subway and background

Icon element with truck and circular background

Picture Galleries

Image galleries can be used, for example, to publish pictures of the last product release of a company. This content element simply retrieves all images within a folder and displays them in an array of tiles of configurable size.

The images can be viewed within a lightbox with navigation elements in full size simply by clicking on them.

Sliders

Sliders are elements which extend images and / or texts over the entire width of the area in which they were inserted and run automatically or via an arrow navigation. These can also be easily created and put in the header or content area of any page in the Website-Base via a specially designed content item.

Call to Action

Calls to Action are configurable, eye-catching buttons designed to catch the attention of the visitor. Other than that, they work like ordinary links.

If the multitude of content creation options for your website has already convinced you, you can call up our contact form via the call to action on the right and request a non-binding offer.


Integrating Contents of Other Pages Dynamically

Teaser: Presenting Subpages in Lightboxes

Teasers are used to link subpages. The Website-Base offers a ready-made plug-in, which provides a first-class overview when creating and calling up the teasers and encourages page visitors to call the sub-pages through appealing animations.

With this plug-in, the linked subpages in the backend can be sorted by category and in the frontend these same categories can be used to filter relevant articles. When you visit the page, all pages of all connected categories are displayed.

Each linked subpage is represented by a picture or a short introductory text in a tiled element. Clicking on this tile opens the linked page in a lightbox. In addition, the technical implementation allows linked pages to be easily opened in a new tab or window.

The Website-Base offers two types of teaser plug-in, which basically work very similarly but provide a different behavior for filtering the linked pages.

One-Dimensional Teasers

In so-called one-dimensional teasers, a category can be selected for filtering, i.e. the teasers for all pages that do not belong to the selected category are hidden and only the subpages of the selected category are displayed.

For example, you could design the introduction page of a company's employees so that each employee has his own subpage, categorized by the employees' departments. One-dimensional teasers enable visitors to display all employees of a particular department.

Multi-Dimensional Teasers

Multi-dimensional teasers allow multiple sub-categories to be used for filtering at the same time, so that only those teasers whose pages belong to all selected categories are displayed.

Thus, in the application example, the employees can be filtered not only by their department, but also their respective position.

Would you like to use the modular system of the Website-Base for your website?

We look forward to your inquiry via our form or via one of the other contact ways.