Headlines

I'm a h1 headline - I'm a Highlander - there can only be one of me

I'm an h2 Headline

I'm a h3 Headline

I'm a h4 Headline

I'm a h5 Headline

I'm a Center Headline (h2 level)

H2 Headline Uppercase

H3 Subtitle Headeline - use me underneath another higher level headline


Text/Media cElement

I'm a cElement of Type Text & Media

I'm super versatile and most like the most used cElement of all. I'm used for any combination of text, images and a headline, like

  • Text only
  • Text with an headline
  • Image only
  • Text & Images
  • Text & headaline & images
  • Images & headline

This is an example with a text and an image on the right

You can chose the relation of the image column to the text column individually for the large (lg), medium (md) and small (sm) screen sizes. This cElement has the following settings:

  • lg: image 33%, text 66%
  • md: image 50%, text 50%
  • sm: image 100%, text 100%
  • Layout: Image right of text

Note that in the dropdown for image to text column relations the image columns is always listed first, no matter if the images are positioned on the left or on the right.

If you chose the Position and Alignment options above or below or use only text or only images with this cElement, the Image/Text Columns relation options do not have any effect.

Text column options

If you have a longer text in a wide column (e.g. full width on lg) you can select to show the text in 2 or three columns with the option for layout ("Appearance" tab). Please note that text columns are only effective for lg and md screen sizes. Text on sm screens is forced to be always single column. The rest is a dummy text for illustration.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

A 3 column text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

An images only content element (Appearance -> No of columns to arrange images)


Gray Section and Gray Box

To highlight content areas you can wrap it into an FCE gray section.

The gray section expands all the way to borders of the screen. It can have it's own headline that then is outside the section (like here). If you want a headline inside the section just use a content element inside. 

You can structure the content inside of  a gray section with 2/3 columns FCEs. 

A gray box FCE container

The alternative to the gray section is the gray box. Is does not expand to the borders of the screen and is best used inside a column (not like here in full width). 

Never use the gray section inside a column!


Responsive Columns

With the FCEs 2 columns and 3 columns you can structure the content into columns and set individual column width for the screen sizes lg, md and sm.

This is a cElement Text & Media (with text only) inside the center column of a 3 columns FCE. Is has 50% width on lg, 33% width on md, and 100% width on sm. 

Please keep in mind that you can place a columns FCE inside a column of another columns FCE and thereby create various content structures.

This is some content inside a 2 columns FCE inside a gray section. You can combine all these elements.

Here some text with images. Please note how these images and the text change their relation to each other when screen size changes. 


Tables

A simple table

The caption for a table
Table Head 1Table Head 2Table Head 3
Content 1.1Content 1.2Content 1.3
Content 1.1Content 1.2Content 1.3
Content 1.1Content 1.2Content 1.3
Content 1.1Content 1.2Content 1.3
Content 1.1Content 1.2Content 1.3

The same table with header on the left

Table Head 1Table Head 2Table Head 3
Content 1.1Content 1.2Content 1.3
Content 1.1Content 1.2Content 1.3
Content 1.1Content 1.2Content 1.3
Content 1.1Content 1.2Content 1.3
Content 1.1Content 1.2Content 1.3

Accordion FCE

Accordion Element 1 (header of cElement)

Multiple contents can be group together with an accordion.

If you want the first item to be open on load use the "First item active on load" option (like here).

Inside the accordion FCE you have two option of adding element (s. next accordion element).

When adding a single content element, its headline becomes the accordion item's headline. If you do want to show this headline inside the item's again, please select header type "Hidden". 

With image (like here), you can make compelling accordion item with just one cElement.

When you want to use more then one cElement inside an accordion item, place an "Accordion Item" FCE as a wrapper first. 

Inside the FCE you place anything you want. Here we started with a 2 columns FCE to make a 2 column accordion item.

On the right side we even used a gray box FCE wrapper. Because we are crazy this whole accordion is also wrapped in an offset container FCE thats adds extra padding to the left and right (individually for the screen sizes lg, md, sm). So this is a Text & Media cElement inside a gray box FCE inside the right columns of a 2 columns FCE inside an accordion item FCE inside an accordion FCE inside an offset container FCE.

Note than inside a gray section or gray box the accordion take a different styling.

Accordion Element 1 (header of cElement)

Multiple contents can be group together with an accordion.

If you want the first item to be open on load use the "First item active on load" option (like here).

Inside the accordion FCE you have two option of adding element (s. next accordion element).

When adding a single content element, its headline becomes the accordion item's headline. If you do want to show this headline inside the item's again, please select header type "Hidden". 

With image (like here), you can make compelling accordion item with just one cElement.

When you want to use more then one cElement inside an accordion item, place an "Accordion Item" FCE as a wrapper first. 

Inside the FCE you place anything you want. Here we started with a 2 columns FCE to make a 2 column accordion item.

On the right side we even used a gray box FCE wrapper. Because we are crazy this whole accordion is also wrapped in an offset container FCE thats adds extra padding to the left and right (individually for the screen sizes lg, md, sm). So this is a Text & Media cElement inside a gray box FCE inside the right columns of a 2 columns FCE inside an accordion item FCE inside an accordion FCE inside an offset container FCE.

Teaser Slider

N5 - now with EtherNet/IP

Field-oriented control for BLDC- and stepper motors - Torque, speed, and positioning mode - Input for 5V/24V encoder, Hall sensors optional - Programmable with NanoJ V2
More details