Content Box

For the content box, select the element type Content box. You can change the background color by giving the element classes (e.g. “grey lighten-3”, for more information see the section Colors) or by adjusting the CSS (custom.scss). How to display elements side by side is explained in the section Grid.

Content Slider

Contao’s own content slider

For the element Content slider (wrapper start), select the template ce_sliderStart_mate. For the closing element Content slider (wrapper end), select the template ce_sliderStop_mate. The slider is styled as in the following example if the text elements get the class slidebox1.

If you give the wrapper start element the class smaller, the content slider is displayed with a height of only 250px.

Content slider with image and text below

To create a content slider like in the following example, place text elements between the elements Content slider (wrapper start) and Content slider (wrapper end).

Give the element of type wrapper start the classes slider slider-text-below-image in the second input field under Expert settings, and select the template ce_sliderStart_mate under Template settings.

For the element of type wrapper end, select the template ce_sliderStop_mate.

You find an example in the MATE theme demo on the page Content Slider.

This is what the content slider should look like:

Placement of the elements:

Selecting the template and setting the classes in the wrapper start element:

CountTo

Version 2.1.0 of the MATE theme added the CountTo feature. It counts numbers up when they come into view. You find an example in the MATE theme demo.

To display the elements side by side as in the example, place text elements between an element of type Grid (grid start) and Grid (grid stop). In the text element you can set the column widths under Advanced CSS classes, see image. The section Grid explains this in more detail.

Give the grid start element the class count-to-container under Expert settings, otherwise it is not styled as in the example.

Use our Material Icons insert tag to add an icon, e.g. {{mi::place}}. place is the name of the icon in this case and can be replaced as you like. You also find a list of the Material Icons and their names in our documentation.

In our example, the label is set as an h6 heading in the text.

For the number, also use our CountTo insert tag, e.g. {{countTo::929::founded}}. The second part is always the number, the third part is an ID. If you include several insert tags on one page, each must have a unique ID.

Example:

Example placement of the elements in the article:

Text element:

Setting column widths in the text element:

Header image

For the header image, select the element type Image and the template ce_image_mate_headerimage (up to Contao 4.13) or content_element/image/header_image_mate (Contao 5.0 and later). You can choose the visible part of the image by setting the important part of the image.

You find an example integration of a normal header image on the layout pages of the demo site. An example integration of a narrow header image is on the Contact page.

Normal header image:

Narrow header image:

For a narrower header image, give the element the class smaller.

Left-aligned header image:

For a left-aligned header image, simply give the element the class left.

Right-aligned header image:

For a right-aligned header image, simply give the element the class right.

Headlines

If a content element with a headline gets the class bordered-left or bordered-right, the headline is displayed with a border at the bottom left or bottom right.

Headline with a border on the left:

Headline with a border on the right:

Hyperlinks

If a link should look like a button (white text on a green background), give the link the class btn.

Media elements (images, galleries, videos)

Image gallery

Depending on how many thumbnails per row should be displayed, the arrangement of the images adapts automatically and takes up all the available space.

Carousel image gallery

Only available from MATE theme version 2.12.0!

For a carousel image gallery, create an element of type Gallery. You can set the number of images per row in the field Thumbnails per row. With Full-size view/new window the image can also be opened in a lightbox (the j_colorbox template must be added to the layout for this). You should also create an image size (important part, e.g. 400x400 or 200x200), as the carousel is designed for square images.

Simple carousel

Template: content_element/gallery/carousel / gallery_carousel

Carousel with navigation dots

Template: content_element/gallery/carousel_with_indicators / gallery_carousel_with_indicators

Simple carousel with large images

Template: content_element/gallery/carousel_large / gallery_carousel_large

Carousel with large images and navigation dots

Template: content_element/gallery/carousel_large_with_indicators / gallery_carousel_large_with_indicators

YouTube video

For a YouTube video, select the template ce_youtube_mate (only up to Contao 4.13).

News slider

The news slider displays news items in a slider. The slider is included on the home page of the demo site. In the theme, the slider is included in the article Start in the header via the insert tag {{theme::content::MATE02/01}}.

You do not need content slider wrapper elements; you only have to include a module of type Newslist. Select news_mate_slider as the news template and mod_newslist_mate_slider as the custom template. The total number of items can be chosen freely.

You select the image and the teaser texts in the settings of each news item.

To swap the position of text and image, edit the item settings of the news and add the CSS class image-right under Expert settings.

As of version 2.8.0 you can adjust the slider settings (height, interval, transition speed and navigation) in the module Newslist.

Newsletter box

You can integrate an area for newsletter subscriptions in the footer. The newsletter box is included in the module Footer via the insert tag {{theme::content::MATE02/01}}. The module itself is included in an article under MATE Elements - Moduls - 02/02 newsletter. For the CSS to be loaded, the article must have the ID newsletter.

Parallax element

Version 2.1.0 of the MATE theme added the parallax element. Place an element of type Parallax element in the article. There you can set a headline, the text, the height, a link and an image. You find examples of parallax elements in the MATE theme demo.

Parallax element with container width

If you select ce_mate_parallax_container under Custom template in the template settings, the text is displayed as wide as the normal content of the website.

Simple content box

You can give an element of element type Text a white background with some padding by assigning the custom template ce_text_simplebox_mate to the element.

Teaser Box

For the teaser box, select the element type Teaser box. You can adjust the width of the boxes by assigning CSS classes. If you add an image, select the image size Teaser-Box (450x270).

Teaser box with text/image side by side

Enter headline and text

Image settings

If you add an image, the image alignment (left or right) controls whether the image is displayed to the left or right of the text.

Further settings

Under Teaser box settings you can select a page to link to and enter the link text.

The field Card CSS class changes the background and text color. You can use the classes of the Materialize color palette. To change the background, add e.g. the following classes: red, red lighten-5. To change the text color, use e.g. the classes white-text and black-text.

Select the template

Under Template settings, select the template ce_mate_teaserbox_card.

Example

This is what it could look like. You find more examples in our theme demo.

Possible error: images no longer displayed after an update

This error can occur if you customized the template ce_mate_teaserbox.html5.

Replace the following line …

{{picture::<?= $this->picture ?>?size=10&alt=<?= $this->metaImg[$GLOBALS['TL_LANGUAGE']]['alt'] ?>}}

… with the following line:

<?php $this->insert('image', $this->arrData); ?>

You can then select the image size in the content element.

Testimonial slider

Version 2.1.0 of the MATE theme added a testimonial slider. You find examples in the MATE theme demo.

First place an element of type Content slider (wrapper start) and one of type Content slider (wrapper end). Between them you can place as many elements of type Text element with background image as you like. There you can enter a text and set an image (profile picture) and a background image.

If the slider should be displayed narrow (see documentation), give the element Content slider (wrapper start) the class smaller under Expert settings (the second input field).

Example of a testimonial slider:

Placement of the elements in the article:

Selecting the element type and entering the text:

Selecting the image (profile picture):

Selecting the background image:

Removing the background image blur:

You can remove the blur of the background image with the following CSS, which has to be added to custom.scss under files/mate/sass:

.ce_mateTextBackgroundElement .bg-image {
    filter: none;
}