Text elements h1

Text elements h2

Text elements h3

Text elements h4

Text elements h5
Text elements h6

Content elements are an easy and intuitive way to create content. Instead of just using a Rich Text Editor, Contao provides a separate element for each type of content like texts, lists, tables, hyperlinks, images or downloads. Here is an overview of the Contao core content elements:

ce_headline

ce_text

The text element provides a rich text editor in the back-end allowing you to format the text output in the same way as popular office software. You can set words or phrases in bold or italic or add underlining and integrate (hyper) links to other pages of the same website, links to files or file downloads or external URLs to name just a few features of the utilized tinyMCE editor.

The element also allows to add a single image which can be positioned relatively to the text. The image can be placed above or below the text or placed floating left or right of the text. You are able to choose from several options to modify the picture, e.g. resizing or even cropping it and to add a link to a contao page, to an external URI or to a full resolution version of the image. You can define wether the linked page will be opened in a new window or tab of your browser. The full resolution version of the image will be opened in an overlay on the same page if defined that way in the page layout.

ce_html

The HTML element can be used to enter pure HTML code.

The allowed tags have to be defined in the contao settings in the security section. Most of the HTML tags are allowed by default. Some tags with security relevance such as 'script' have to be added manually if needed.

Definition list Example
Buil with the Contao Content Element HTML.
You can use many more HTML Tags if you like.

ce_list

To add ordered or unordered lists as a single element - not within the text element - contao provides the list element. With a special back-end widget you can add each list entry via a single input field, sort the entries, insert new entries or copy them.

Ordered List Example

  1. Ordered List Example 1
  2. Ordered List Example 2
  3. Ordered List Example 3
  4. Ordered List Example 4

Unordered List Example

  • Unordered List Example 1
  • Unordered List Example 2
  • Unordered List Example 3
  • Unordered List Example 4

ce_table

To create a table you can use the table element. Contao offers a special back-end widget, similar to the one utilized for lists, to add columns and rows, define a head- and footer-row and add a summary for the table content. In the front-end output, special classes can be chosen and added to the table, rows and cells. Just check the HTML code of the page content elements, to explore the possible classes.

In addition, you can add a sorting option for the frontend to make the table sortable by all columns.

Head 1 Head 2 Head 3
Column 1 Column 2 Column 3
Column 1 Column 2 Column 3
Column 1 Column 2 Column 3

ce_code

To provide a snippet of programming code like i.e. Php or JavaScript, you use the code element. The code will not be executed in the front-end of the page.

<script>
  alert('Hello World!!');
</script>

ce_markdown

Since Contao 3.3.x Contao ships with the markdown content element.

What is Markdown?

Markdown is a markup language with plain text formatting syntax designed so that it can be converted to HTML and many other formats using a tool by the same name.

From wikipedia

Learn more

ce_accordion

The accordion element allows you to place content inside a closed panel. By clicking the headline of the panel, it will expand and close any other expanded panels.

You can add an unlimited number of accordion elements on a page.

Contao offers two types of accordion elements:

Accordion Einzelelement

This panel is build with only one element. You enter the section headline that is used as the expanding link. The content of the section is entered in a richt text field similar to text field in text elements.

You even have the possibility to add an image to the content.

Accordion Umschlag

The second type of accordion is the combination of a wrapper start and stop element.

All elements added between start and stop build the content of the accordion panel.

Link elements

Hyperlink

Links are an essential part of each website. You can place links within any element with a rich text editor as a hyperlink and you can add a link which always leads to the top if the page, the toplink.

Internal link. Opens in the same window.
External link to intercorp.de. Opens in a new window.

Top link

The toplink element adds a link element leading to the top of the current page.

You just enter the link text to be displayed for this element.

Go to top example

Media Elements

Images, videos and other media are one of the most powerful contents available for a website. Images are faster to assess and have a stronger impact on the visitor compared to a simple text block. Therefore Contao allows you to integrate different kinds of media easily. When creating a media element, e.g. for an image, in the back end, you are able to:

  1. select a media source where the image is uploaded from
  2. a substitute text, which is shown, if the image can not be displayed
  3. the height and width of the image, the distance of the image to the surrounding text
  4. the destination website, if the image acts as a link
  5. a subline for the image
  6. the option to show the image in full resolution, when the visitor clicks on the image Some media can also be grouped in a gallery.

ce_youtube

Youtube-Video als iFrame im Responsive-DIV Container mit auswählbarem Seitenverhältnis-Template

ce_vimeo

Vimeo-Video als iFrame im Responsive-DIV Container mit auswählbarem Seitenverhältnis-Template

File elements

File elements create the possibility to make files available for download on your website. The element „Download“ allows you to make a single file downloadable. The element „Downloads“ has the same functions with the addition, that you can choose several files at once.
Before using the file element itself, you should upload all the files you want to provide on your website in the Contao file manager. After accomplishing that you can create the file element. The element allowes you to:

  1. set the „source file“ by selecting the desired file in the file manager
  2. enter a word or phase which replaces the file name as the name of the download