Mask elements

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.

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.

When editing highlight boxes, you must primarily edit the General tab. All other tabs are adjusted only in exceptional cases.

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.

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.

Create and Embed Structured FAQ Data from these Elements

If you check this box, a FAQ element will be generated, otherwise an accordion will be formed.

Elements

An element corresponds to an accordion line or a question and the corresponding answer. Click on Create new under Elements to add a new 'line'. In contrast to the grid element accordion, all 'rows' are located in one content element and can only be edited there.

Question / Header

The field for question / header corresponds to the title of the article or the question of the FAQ element. It can be seen before the element is expanded. In the frontend click in the field where the header name appears to expand or collapse the article.

Non-Collapsible Preview

Here you can enter a small preview text that can be seen without having to unfold the element. This text is not included in the structured data.

Answer / Content

In this field, enter the answer or content in the Rich Text Editor.

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).

Type & Column

In the field Type you can change the type of the content element and under Column you can see in which column the content is located in the content area.

Files

For each entry in the download list you have to add one file with Create new. After adding an image/file, the fields for image metadata and image manipulation are available.

Link

Instead of a file from the file list it is possible to insert a link. This link is only used if no file has been added.

Description

The description is used as a list entry in the frontend. Otherwise the file name or the URL is used.

Type, Column & Header

In the Type field you can see which element type you are currently editing. The Column tells you where the content is located. Enter the title of the content element in the free field for the Header. In the Type field below, you define the layout of the heading.

Images folder & Images

To add images to the gallery, there is the possibility to select an entire image folder from the file list or to select individual images. To add a folder to the content item, click the link icon under Images Folder and choose the desired folder in the file list.

To add individual pictures, under Images, click Create new relation and select the image you wish to add. Then repeat this process with all the images that you want to appear in the gallery. You can also use both options (Images folder & Images) at the same time.

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.

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.