Modular design

With the modular design, you can create a HTML structure within Typo3. In this way, you can for example rebuild bootstrap elements, in order to use Typo3 content elements or other plug-ins.

For example: Bootstrap panels with elements of the shop extension integrated.

Other settings in the Container element

Plug-in options

A Container without other settings in the plug-in options covers the entire width of the parent element. There is no height defined. Each of these Containers has the class "ws-wrap".

A Custom Class can be assigned to this Container. Other classes that can be assigned (full width class, Container class) do only take effect once the respective option is activated.

 

Full Width option

If this option is activated, a Container with class "ws-wrap ( + Custom Class)" is wrapped around a Container with class "ws-full width". This Container covers the entire page width.

With the full width class setting, a unique class can also be assigned to this Container.

 

Container option

If this option is activated, a Container with class "ws-wrap ( + Custom Class)" is wrapped around a Container with class "container". This Container corresponds to the Bootstrap standard.

With the Container class setting, a unique class can also be assigned to this Container.

If both options are activated, the Container with class "fullwidth" is wrapped around the Container with class "container" and around the Container with class "ws-wrap".

Multi-column grid elements

In addition to the Container, you can also define multi-column grid elements in the Backend. These elements correspond to the Bootstrap standard.

In the plug-in options you can set the width relation for the respective columns and device sizes. Under Custom Classes you can define a class for each column and classes for the parent row.

 

Standard elements and classes

[Translate to English:]

Bei einer Standardinstallation, werden einige Seiten und Elemente erstellt und Klassen vordefiniert. Um eine Seite wird immer ein <div> Element mit der Klasse "ws-basic" oder "ws-landing" gelegt (kann in den Seiteneinstellungen unter Appearance angepasst werden).

Im Pagetree unter resources werden die Seiten header, footer und widgets erstellt.

header

Die Seite unterteilt sich in die Bereiche Header und Top-Area. Diese Bereiche werden auf der Seite dann jeweils in einen Container mit der Klasse "ws-header" und "ws-toparea" gerendert.

 

footer

Die Seite unterteilt sich in die Bereiche Sub-Feature und Main. Diese Bereiche werden auf der Seite dann jeweils in einen Container mit der Klasse "ws-bottomarea" und "ws-footer" gerendert.

 

Alle anderen Content-Seiten sind unterteilt in die Bereiche Sub-Feature und Main. Diese Bereiche werden auf der Seite dann jeweils in einen Container mit der Klasse "feature-content" und "main-content" gerendert. Diese Container nehmnen die gesamte Breite des Bildschirms ein und rendern um den eingefügten Inhalt immer einen Bootstrap Container.

 

 

Nach diesen Elementen wird die Seite widgets gerendert. Darin Enhaltene Elemente können zum Beispiel als mitlaufende Widgets rechts oder links definiert und formatiert werden. Ein Beispiel ist der Back to top Button rechts unten.

Accordion

The Accordion is a special grid element for Typo3. This allows for example to insert a lot of content, which is divided by titles. These titles are clickable, and the content can fold out.

All elements, which are placed in this Accordion element, are counted as separate titles. This title gets Typo3 from the element title. Here, only the current accordion folds out.

First element of the accordion

Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Second element of the accordion

Third element of the accordion

Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Slider element