Selecting the content element "Header Only"

For items with just a header, you can choose the content element from the "Typical page content" "Header Only", indicated by the black arrow.


Setting the layout of your item

At first you have to insert the header text in the box indicated by the black arrow.

After that, there are a lot of configurations you can make: a few examples >>here

- red arrow: Here you can set a link for the header. If you want the linked page to open in a new window, you can just set the URL into the box indicated by the red arrow. But if you want to open the linked page in the same window the user is surfing, you can choose a intern link by searching for it by clicking on the button indicated by the red circle

- yellow circle: Here you can choose the size of your header, from the biggest (H2) to the smallest (H5), or even invisible (hidden)

- green circle: Here you can set the position of your header, whether centered, on the left or right hand side

- blue circle: Here you can choose between different fonts for your header

- pink circle: The subheader is smaller than the header and adapts to the size, position, and style of the header


Setting further configurations

In the section "Appearance", indicated by the yellow circle, you can find further configurations for your header:

- Layout: You can choose between 3 background colors, blue, grey, or the default one, which would be white

- black circle: You can manage the spaces on top or at the bottom of your header. If you want to make the space smaller, just check the box "Disable top space", "Disable bottom space", or both

- red arrow: You can choose an image to set on the background of your header by clicking "Add image" and then choose between the images you have first uploaded on your Typo3 filelist


Setting the publishing date

In the section "Access" you can find another usefool tool, the "Publish Dates". The yellow circle indicates the boxes where you chosse the dates for publishing your item and even for its expiration.

Selecting the content element Text&Media

For items with an image and a text, you can choose the content element from the "Typical page content" "Text&Media" indicated by the black arrow.


Inserting the text

We already showed you how to set up your header in the chapter  >>How can I layout my Header including standard configurations that each item has.

Here, in IMG 24, you see the first element that is new. Insert all the text you want in the big box surrounded by the yellow circle and then make your configurations:

- black arrow: You can choose the layout of your text like, for example, in Word. B stands for Bold and so on

- red arrow: You can choose to put your text in a list with bullets, numbers, or choose the alignment  you want to apply on your text

- green arrow: The green arrow shows you the button for links. You can select the part of your text that should lead you to a further link and press the "Link button" indicated by the green arrow. Then a new window will appear. Take a look on IMG 24B.


Setting new links

Here you can see the window that will open to set a link. You can choose whether to insert directly an URL of the page you want to create the link to, or, if it is an intern link, you can go through the TYPO3 list and choose the path you want to have linked.

You can also choose a "Title" for your link, that will appear when the user stops with the mouse on the link.

In addition to that, there are a few preprogrammed buttons you can use to indicate your link. Check out the options indicated by the black circle. >>Here you can see how they will look like.

It is also possible to link parts of the captions.

This is available in every element where you can add media.

Uploading the media file

In the section "Media" you can start adding your media file by clicking on the button indicated by the black arrow. Each element must first be uploaded on your TYPO3 filelist.

You can set the "Image Metadata" for each image you upload:

- red arrow: In the box "Title" you can insert a title of the picture that will appear if a user stops the mouse on the image without clicking. The "Alternative text" will be used for that if no title is inserted.

- pink arrow: You can set a link on the picture, so a user who clicks onto the image will be taken to the linked page. You can insert the URL in the box indicated by the pink arrow or choose a path of TYPO3 by clicking on the button surrounded by the pink circle

- blue arrow: The "Description" of the image is a text that will appear under the image. Just activate the box "Override" and you can start type the image description

- Brown circle: Click "Open Editor" to enter the tool to resize or cut your picture

- yellow circle: If you activate this box the image inserted will enlarge to full size whenever a user clicks on it

green circle: To make the caption visible below the picture on the website check the box "show caption".
If you only want the caption to be visible in the fancy box do not check the box, but add your caption to the box with the blue arrow.

Uploading Youtube Videos with Parameters

When Youtube parameters like autoplay, start and end position or “rel” (relations, which videos shall be shown next) are added to a video on Youtube, they are included to the uplink and saved for every further use of the video in TYPO. E.g. when second 10 is defined as the start position, this will be saved to the video (e.g. https://www.youtube.com/watch?v=3fmje9IJYJM&rel=0&start=10&end=20&autoplay=0) and set as default whenever the video is used.

  • Parameters of YouTube videos can be changed in the filelist without uploading them again.
  • Very important: Please always check the references of the videos first, as the parameters are then applied everywhere, even on product detail pages. Please use this very carefully.
  • The same video may only appear once in a filelist folder.
  • If you need it in different places with different parameters, you have to upload it to a different folder.
  • It is still possible to adapt the parameters of a video that was uploaded. You can change the settings on the page you are inserting the video. Also the meta data that were given to the video can be overwritten here.

Red Youtube button in the Rich Text Editor

For covering internal links to videos of the filelist or for external links.

There is an additional button style available: A Youtube icon which you can use for internal or external links to videos on Youtube.

Go to the "file" tab and choose an uploaded video from there or go to the "external URL" tab and add a link to a video.

Under "style" select "button-socialmedia-youtube".

Set Videos to Open in a Fancybox

Videos can be set to open in a fancybox when inserted as an external link within the link wizard of any RTE (also youtube parameters of links will be considered).

Videos can be set to open in a fancybox when linked through the file tab of the link wizard of any RTE (youtube parameters will not be considered).

  • From now on the original Youtube button is available as well.
  • To use that option, you need to choose the “Button-socialmedia-youtube fancybox-link“ in the “File” tab or the "External URL" tab of the link wizard of any RTE.
  • Just as a reminder: Youtube parameters will not be considered if you use the “File” tab. You need to use the "External URL" tab to have them considered.
  • When you click on the Youtube icon that was created, the video opens in a fancy box.

You can find examples >> here.


Adjusting the image appearance

In the "Media Adjustments" and the "Gallery Settings", indicated by the yellow circle, you can define the size of your image in pixels. Just insert the width and height.

There is also the possibility to make a border around your image. Just activate the checkbox of "Border around each element".

Choose between the options of position and alignment of your image in "Gallery Settings". >>Here a few examples on how it could look like.

 

  • If you choose position and alignment option "Above, right", "Below, right", "In text, right", "Beside text, right", your caption will also be right-aligned.
  • If you choose position option "Above, left", "Below, left", "In text, left", "Beside text, left", your caption will also be left-aligned.
  • If you choose position option "Above, center", "Below, center", "In text, center", "Beside text, center", your caption will also be centered.

Moving Content Elements

It is still possible to move a content elements around, after you added them to a certain position on your page.

 

  • Select the content element you would like to move.
  • Drag it to the position you would like to have it and move it around until you see a green box (instead of the red one that will show up until you found the right position).
  • Drop it to the green box.

There is an option to add a sidebar to each of your pages. It's called a "Burger Menu".

To add it you just need to fill in a header in your content element which will be shown in the sidebar and enable the "show in section menu" option at the bottom of the appearance tab.

 

If your header is too long or you want a different one in the sidebar use the alternative header as header on the page and the header as the one shown in the Burger Menu.

 

Special Case: Insert Record Element

If you want to add a Insert Record element it's not possible to show the header of the inserted element. But you could add a title by using the box "Name" which will be only available in the Burger Menu but not in the body text of the page. 

 

1. Add a new content element e.g. a text & Media element to the oage you want it to be on. 

Then fill in all the gernal information like it's described in "How do I set up an element including text, media and links?"

In the tap "appearance" you get the option to manage the space. Each three option for top and bottom. Open the drop down menu to pick your space.

See all Space Options here

To get a colored text first write down the text you want to be colored. Then mark the text passage/ word.

After marking it open the "Text Style" drop down menu in the red box at the left. And choose your color.

Your text/ word appears in the color you chose.

The only thing you need to mind is the order you format your text. 

It's not working if you first choose a bold text and a heading and after that a color. 

First choose your color and then further format your text.

Selecting the content element Bullet List

The bullet list ist the most common type of listing item. To create one, choose the "Bullet List" button indicated by the black arrow.


Setting up your list

The yellow circle indicates the box where you can insert the content of your list.  Each new line is a new bullet. >>Here a preview on how it will look like.

Selecting the content element Highlights

If you want to create an area of highlighted terms on your website, choose the itam "Highlights", indicated by the black arrow, in the section "Typical content elements"


Inserting the text to highlight

The yellow circle indicates the box where you can insert your highlight points. Each new line is a new highlight, which on your website will be indicated by a cross.

- red circle: Here you can set the positioning of your highlights by choosing between three or one column

- blue arrow: If you activate this checkbox every row of your highlights will be divided by a small line

>>Here a preview on how it will look like with three column and without border beneath.

Selecting the content element Table

To create tables you can choose the content element "Table", indicated by the black arrow from the "Typical page content".


Setting up your table

In the box indicated by the yellow circle you can insert all the content of your table. You define the field delimiter, in this case pipes |, yourself by changing it in the box indicated by the black arrow. The red arrow indicates a optional field, where you can insert a little title for the table, which will appear left on top of the table.

>>Here an example of how your table could look like.


Configurating your table

- black arrow: Here you can define the amount of columns of your table

- blue arrow: Here you can define the position of the header of your table

- yellow arrow: By activating this checkbox you can change the layout of your last row. It will appear out of the table border as a table footer