Mask elements

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

Type & Column

In the Type field you can see in which content element you are currently located. The Column tells you where the element is placed. 

Header, Type, Type (visual), Alignment

Under Header you enter a title for the content element and define the layout of the heading in the Type field below. In addition, you can define a different visual heading level, as well as the alignment of the heading.

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

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.

Expanded by default

The accordion elements are normally collapsed in the frontend and can be expanded when clicked. This checkbox can be used to specify that the current elements are always expanded.

Questions-Header Type

Each element in the accordion has a question or header. Specify here which header level each question in this accordion element should have.

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.

Header, Type, Type (visual), Align und Subheader

If you specify a header, it will appear directly above the table. Specify the title with type (header level), which may differ from the visual header level (the actual header level seen in the frontend). Also specify the alignment of the heading. The subtitle will appear under the title.

Feature

To create features use the Create new button and fill in the feature name. Optional is a feature description, where you can specify more detailed information about the feature. If a feature is already created, you can create features both above and below the created element. It is also possible to move features to a desired location at any time.

Item

For the item, you can set the name, description, prices and a link in the General tab. The name is at the top of the table and directly below it are the other item details.

In the Features tab there is a list of all features where you can select which features the article contains. Should a feature require more information for this article, you can specify this under additional information. In order for the additional information to be shown in the frontend, the feature must be activated in the corresponding item.

In the General tab you define the content or the appearance and further behavior of the popup.

Upper Content & Content

The upper content will be the title bar. The content is below it. Both can be any content element. You add a content element via the Create new button and change the content element in the drop-down menu under Type if required.

This tab is used to determine when the popup should appear:

• Exit intent: when attempting or intending to leave the page
• Time to open automatically: after opening the page x seconds will pass before the popup opens
• Scroll depth: determine that the popup appears after e.g. after 50% of the page length

Header, Type, Type (visual), Alignment

Enter a title under Header and define the heading level in the Type field below. Under Type (visual), you can set the heading layout that will actually be displayed in the frontend. Finally, specify the alignment of the heading.

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.

Maximum image height

Set the maximum image height in pixels. Enter a desired value for this. If there should be no maximum height, enter nothing or the value '0'.

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.

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.

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.

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 images you wish to add. You can also use both options (Images folder & Images) at the same time.

Width of each image & Height of each image

By default the height and width of the thumbnails in the gallery are set to 128 px. You can customize this by simply entering the appropriate numbers here. As a result, you will get tiles in the frontend similar to those shown below.

Carousel layout

This checkbox activates the carousel or image slider.

Images with lightbox, Hide arrows, Hide indicators

Specify whether images can be opened in a lightbox, whether users should be able to move between images using arrows, and whether indicators (dots below the images that show whether the first or xth image is currently being displayed) should be shown.

To create a product, you simply use the Create new button. After that you just need to fill in the product information Product Title, Badge, Description, Features, Tems and CTAs. You don't necessarily have to use all the fields. For example, if the badge field is not needed, no badge will appear in the frontend if nothing is filled.

You can create up to four products, which then appear next to each other in the frontend. The position of the products can be changed using the arrows.

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.

Slider settings: Navigation dots

If you create multiple slides, they will switch at the specified interval. If you enable the navigation points, the user will have the possibility to move the slides by himself.

Text

You can enter the text as usual in the RTE and use its full design options. Attention: If you insert a link here, you can no longer use the link option below.

Vertical & horizontal alignment of the text

Specify how the text should be aligned.

Link

You can link only the text on the slide, or link the whole image. For this, you need to set a link at this point. Simply click on the link icon and select an internal page or link an external URL in the window that appears. If you link the slide here, there should be no link in the text.

Slide settings

Here you can set a background, text shadow or box, or animation for the text if needed.

Content & Column

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, Type, Type (visual), Alignment

Header in the free field and specify in the Type field below it which layout it should have. In the Type (visual) field, you can specify the layout of the heading regardless of the level and define the alignment in the field below.

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.

Spotlight Text

The spotlight text appears on the left side of the text in the frontend and is highlighted – use this text to grab your visitors' attention and convey your most important message.

Alert banner active

If the checkbox is active, the banner is also activated and visible (provided that the start date and/or end date allow it).

Text

Please provide more detailed information about your message here.

Start date & End date

Specify when the banner should be displayed, until when, or for how long.

Images

Here you can link PNG or JPEG images from the filelist.

SVG Image

Here, SVG files with or without markers can be linked to the content element.

Marker settings

First, general settings for the markers can be configured here. Below that, individual markers can be inserted and set. The default marker is a simple circle with a plus sign inside (or whatever has been set as the default in your instance), the size of which can be specified here.

Marker width

Determine the width of the marker.

Marker height

Determine the height of the marker.

Custom marker

If you want to replace the default icon with a different one, link the corresponding file to the content element here.

Markers

Popup box

If you want to label the marked point, you can specify a title here. You can add further information in the text box. You can also place a button in the pop-up box below the text, e.g. to link to other locations or provide a link to further information.

Coordinates

Here you can determine the position of the marker on the image. It can be a little tricky to set the correct position, but with a little practice it works quickly. If the positions do not have to be too precise, you can make the markers a little larger, for example, so that inaccuracies are less noticeable.