Mask is an extension or enhancement for TYPO3, with which you can easily create your own content elements. In the Website Base you will find useful content elements under Mask elements, with which special content can be easily integrated and certain forms of presentation can be implemented quickly.

Google Maps

The content element Google Maps allows you to integrate a dynamic map in just a few steps. The user can move the map, zoom in and out, view it in full-screen mode or in Street View. Whether a marker is set or a description is inserted can be set individually.

Tab General

Type, Column & Header

The Type field shows you in which content element you are currently working. The Column field indicates where the content element is located. You enter the Header in the free field and specify the layout of the title in the Type field below.

Latitude, Longitude & Address

The coordinates or the address you enter here are displayed in the middle of the map (however, there is no marker for the exact location yet).

Zoom Level, Width & Height

You can determine how much the map should be displayed enlarged or reduced by using the zoom function. The default setting is 13. The screenshot below shows how this level looks in the frontend. With the width and height you can set the size of the area around the specified address or coordinates. The specifications can be made in pixels or percent. The default setting is 100 % width and 200 px height. In a 2-column map the map would take 100 % of the width of a column.

Show controls

By default, the controls are not activated for the user. If you want your site visitors to see the buttons for zoom in and zoom out as well as for Google Street View, you must check this box.

Marker

You use markers to label a location. You can also define several markers on a map, for example to show main and outbuildings or to point out prominent houses in the area for better orientation.

To create or edit a marker, proceed as follows:

  1. Under Marker, click Create new.
  2. Enter the coordinate or latitude and longitude or the address.
    • The address also serves as the name of the marker. If you enter latitude and longitude, you can use the address field to name the marker.
  3. Upload a custom icon for the marker and link it by clicking on Create new relation.
    • By default, Google uses a red marker, as shown in the screenshot.
  4. To make a marker no longer visible in the frontend, simply activate the checkbox under Hide marker. When you remove the check mark, the marker will be visible again.
    • With this option, unused markers do not need to be deleted and can be used again at any time.
  5. Enter information about the set location into the text editor and specify whether the text appears when the page is loaded or only when the marker is clicked. With a check mark at Activate, the info box will appear without a click.

Google Maps in Frontend

Here you can see a screenshot of a map with controls, a marker and the width of 100 % and a height of 200 px.

Static Map

With the Static Map you create an image of a map. An image as a map is good for the performance of your site, because no large amount of data needs to be loaded. However, a simple screenshot can cause legal problems. Therefore, there is the possibility to insert a static map. This can also be adapted to your own design.

API Key

Before you can embed a static map in a page, you need a Google Account. With this account you can get an API Key (API = Application Programming Interface). This allows Google to track how often the map was loaded on a page. Above a certain number of map views, the service becomes chargeable, which is why you always have to provide Google with your credit card data for the key. However, since you can limit daily use, you can also avoid possible costs.

To obtain an API Key, proceed as follows:

  • Log in to Google with your personal login data.
  • Then go to the Google Maps platform: https://cloud.google.com/maps-platform/
  • Click on Get Started.
  • In the window that appears, select Maps and click Next.

Select an existing project or create a new project. Click Next.

If you have not yet created a Google billing account, you will need to create one here.


Tab General

Type, Column & Header

In the first field Type you can see which content type you are currently editing. The Column field shows where the content is located. You enter the Header in the free field and define the layout of the title in the Type field below.

Address of the map center

Enter the address that should be located in the middle of the map here. Follow the example given in the content element.

Width, Height & Zoom level

Specify how wide and how high the map should be on your page. Note that the maximum width and height of the map is 640 px. Larger maps can only be used by Google Premium customers. As with the dynamic Google map, the zoom is set to 13 by default. You can see how the zoom level works on our Preview Page.

Type of the map

Four options are available for the card type: Roadmap, Satellite, Terrain & Hybrid. Only if you select Roadmap can you use the Styling field, which allows you to customize the generated image of the map according to your wishes.

Styling

In the field Styling you enter a JSON file, which you can generate on the following page: https://mapstyle.withgoogle.com. Select at the top how dense roads and markers should be displayed. Next, select a layout. At this point you could already have the file created. To further customize the map, click on More Options. The map can be color-coded to match your corporate design. When you go to Finish, a new dialog box appears from which you have to copy the JSON file to insert it into the TYPO3 content element.

Marker

To set a Marker, click Create New and enter the address to which the marker should point. You also have the option of using your own icon instead of the standard marker. To do this, upload an icon in the filelist and create new relation within the marker.

Automatically generated image

You do not need to add the automatically generated image yourself. By entering the necessary fields such as address and API key, an image will automatically appear after saving, where you can edit the properties: description, alternative text, title and link. The map image can also be customized with the Image Editor.

Static Map in Frontend (left)

Highlight Box

With a Highlight Box you can display important information on your website in a special way. In contrast to areas, highlight boxes can only be filled with text. However, they can be inserted into grids. The symbol you see here will be encountered when creating a highlight box as well as in the content area.

Tab General

Type, Column & Header

In the Type field you can see in which content element you are currently located. The Column tells you where the element is placed. Under Header you enter a title for the content element and define the layout of the heading in the Type field below.

Text

In the Rich Text Editor you enter your text as usual.

Background Style

Five different styles are available for the background. The colours in brackets correspond to the standard design of the website base: Primary (dark blue), Success (cyan), Info (grey), Warning (yellow), Danger (red).

The figure below shows how highlight boxes can look like in the frontend.

Highlight Boxes in Frontend

Accordion (plain text)

The Accordion mask element displays simple text content as an accordion. This can be useful, for example, if you want to put a lot of content on a page and this content can easily be divided into sections, categories or similar. By the way, almost all content, whether text or images, can be accommodated in the Grid element Accordion.

The Mask Element Accordion is an easily configurable content element that allows content to be displayed quickly and easily in a clear manner. To create the accordion you only need to fill in the fields in the General tab.

Tab General

Type, Column & Header

In the Type field, you can see which content element is currently involved. The Column tells you where the element is located and under Header you insert the title.

Item

One item in the accordion corresponds to one accordion line. Click on Create new in the item field to add a new 'row'. In contrast to the grid element accordion, all 'rows' are located in one content element and can only be edited there.

Header

The Header corresponds to the title of the article. It can be seen before the article is opened. Click in the field in which the header name appears to expand or collapse the article.

Content

Enter the content or article into the Rich Text Editor.

Image

You can also assign an image to the article. This will always appear to the right of the text in the article. To add an image, simply click on Create new relation and select an image from the file list. 

Show expanded when page is loaded

Normally all articles are collapsed when a page opens. If you want to display an article unfolded when the page is loaded, set a check mark at this point.

Accordion in Frontend

Card

The content element Card makes it easy to distinguish products or important information from other content. With a wide range of options for designing the cards, you can easily create the perfect design. The symbol that is shown here identifies the Mask Element Card when creating and editing the content element as well as in the content area.

Tab General

Type, Column & Header

In the Type field, you can see which content element you are in. The Column shows where the element is placed. Enter a title under Header and specify the layout of the header in the Type field below.

Card title

The card title appears at the top of the map, as you can see in the screenshot below The title is 'connected' to the map, while the Header appears above the map.

Badge

With a badge you mark a content or a product as special. You should therefore only use this field if you want to highlight a product or information.

Images

The image appears above the map title and text. If you insert a badge, it will be 'stretched' over the upper right corner of the image.

Text

Enter the content or article into the Rich Text Editor.

Button Label

The button appears at the bottom of the card. You can use it to link to a product page or an external page.

Button type

Seven different colors can be set for buttons. In the Design Configurator the colours can be adjusted, but by default the following colours are available: Default (gray), Primary (dark blue), Info (light gray), Success (turquoise), Warning (yellow), Danger (red), Simple Link (colorless background / a simple link).

Link

Click the link icon under Link. Select an internal page in the window that appears or enter an external URL and link the button at the bottom of the map. (Without a link you basically don't need to insert a button label).

The figure below shows how different maps can look like. For more card variations just visit our preview page.

Cards in Frontend

Slider

Sliders are often used as headers of a web page. They are also suitable for image or product galleries or to present the portfolio of a company. A slider, like the other mask elements, is easy to configure. For a sliding slider you create at least two slides in the General tab. If you create only one slide, this will result in a static image over which you can place a text.

Tab General

Type, Column & Header

The first field Type shows which element type you are currently editing. The Column field shows where the content is located. You enter the Header in the free field and define the layout in the Type field.

Autoplay Interval

In this field, you specify after how many seconds the picture should change. The default setting is eight seconds. In the example video below, the images move in intervals of three seconds.

Height

In our website base it is possible to set the sliders small, medium or fullscreen. In the example video you see a slider with medium setting on our preview page a slider in full screen.

Slides

To add a new slide, simply click the button Create new and then configure the slide.

Backdrope type

The default setting does not provide a backdrop. However, you have the option of choosing a dark backdrop: Dark transparent.

Content

A content is added to a slide if the slide should get a text/heading. The mask for the content corresponds to the TYPO3 element Header Only. However, in the Type field you can also change the element to another type, such as Text & Media, to be able to design the content more freely. It is possible to insert several contents. These appear in the frontend in the order in which the contents are arranged in the slide.

Image

The image fills the slide. You should make sure to use the same image size in a slider with several slides and images or to crop them to the same size. If you load more than one image into a slide, the images will be displayed one above the other. So you should only add one image per slide and if necessary create several slides per slider.
To add an image, simply go to the Create new relation button and select the desired image from the file list.

Link

You can link only the text on the slide or link the whole image. For this you have to set a link at this point. Just click on the link symbol and choose an internal page or link an external URL in the window that appears.

Slider in Frontend

Simple Tab-Element

With the Tab-Element you can display text content clearly and arranged in tabs. As with the accordion, you can use related information, which can be easily divided into categories/topics such as product information. The Simple Tab element can be created very quickly, because you only need to follow a few steps in the General tab to configure the content element.

Tab General

Content, Column & Header

Under Type you can see which element type you are currently editing. The Column field shows where the content is located. You enter the Header in the free field and specify in the Type field below it which layout it should have.

Tabs

To add a new tab, simply click on the Create new button and fill in the fields for caption and content.

Tab Label

The tab label corresponds to the tab title within the content element Simple Tab-Element and is also displayed as a title in the frontend. The tab label is therefore always visible.

Tab Content

You add the tab content and edit it in the Rich Text Editor. The content is only visible in the frontend if the user has clicked on the relevant tab.

On your page, the Simple Tab element will look similar to the screenshot below. In our example there are only two tabs, you can of course create more, as shown on our preview page.

Simple Tab-Element in Frontend

You would like to know more?

All information about the available offers can be found on the pages of our website base. You have the option of having a website created at a fixed price or opt for a Website as a Service package with which no further hosting costs or security and function updates will be due to you.