03 - Content Elements

Duration: 4 min 1 sec
Grade:Basics
Chapter 3 focusses on the commonly used content elements in Neos.

Transcript

Welcome back to the Neos Training created for you by Paints Multimedia.

In this chapter we will explore the different Content Elements.

After logging in to Neos, we are in the backend of our training website again.

Here you can see that we have added a headline element. The headline element consists of two texts, the actual Headline and the Subheadline. These are always dependent on each other and both will be linked when a link is set. The standard setting for the headlines is always the structure tag h2 which also influences the styling.

This can however also be overwritten by the Style property, meaning that the headline would still be considered as an h2 Element by search engines, but can look like any other type of headline. This way you can create a semantically correct html structure for search engines while still using a desired style.

The text alignment for headline elements can be found in the upper right within the inspector via the spacing behavior. The Alignment can be selected via the dropdown menu.

In this example we choose the alignment “center”. As you can see within the headline element, the headline is now located in the middle.

The Text Element is the Neos Base element which offers a variety of inline formatting options. After we have added and selected a text element the following settings can be found at the top bar: Bold, italic, superscript text, strikethrough, link, ordered and unordered list as well as alignment or the option to remove all inline formatting. Within the setting “Layout” on the right side you can decide if the text is displayed in one, two, or three columns.

Below the text element we have added an image element. With the image element you can display images in the content area.

To add an image to the previously added image element you can use one of multiple approaches. However, it is recommended to use the media browser on the right by pressing the camera button. Now you are in the media library. Within the media library you can either select an image that is already in the library or upload a new image that is then saved to the library.

We will cover the Media library in depth in chapter 6 of this tutorial series.

The other options are to either upload an image directly via the "Choose file" button or to drag and drop an image from your browser into the respective place in the Inspector. In both cases the image will then also be automatically added to the Media Library. In this example we added an image via the media library directly.

With the "Remove" Button on the right side you can remove the image from the image element. However, it will still be in the Media Library. The "Crop" Button can be used to crop the image. The cropped image does not overwrite the original file in the media library.

The alternative text or the so-called Alt tag can be used to give the image a meaningful description. The Spacing Behaviour can be used to set the Alignment of the content element.

Below the image element we have now added a button element. The Button element can be used to create links to subpages or external websites. By clicking on the button you can define a text.

In the inspector on the right we can insert the desired link to either a subpage or an external website and confirm it by clicking on "Apply". In this example we have linked the created button “Home button” with the homepage.

You have now finished the training about Content Elements in Neos. In the next video we will cover XY Row and Column Elements. Thank you for your attention. 
 

More Basic learningLearn more about the basic modules and their functions