Inserting and editing content
Inserting and editing content
Whether text, graphics, downloads or other data - all content is inserted into the web pages as content modules ("content elements"). A single web page can thus be filled with one or more such content modules. In addition to normal, freely entered text content, content elements can provide data of different types and formatting.
Note:
Whenever a new content section appears on a page, a new content module should be created for it - possibly with its own subheading.
⇒ This makes it easier to access certain content on the page later on. In addition, individual content modules can then be easily moved within the page or to another page.
Instruction video: General information on content elements (Youtube, 5:36 min.)
Create a content element
The content elements of the website are like building blocks that make up the website. Each building block (=content element) is inserted into one of the three columns:
(1) Select Web->Page at the top left.
(2) In the page tree, click on the page that is to be changed
(3) The selection menu at the top of the workspace should be set to "Columns"
(4) A new content element is added via the [+] button that appears when you hold the mouse over one of the three content columns. This can be done above or below existing content elements. In this way, the new element can be created at any position within the selected column.
The most common content element is [Text & Media]. Here you can use text, text in combination with images or just images. But there are many other types of content elements. These can be, for example, forms, automatically generated link lists, galleries etc.
Content elements in the TYPO3 page view
Content elements appear as boxes in the internal page view of TYPO3 and can also be figuratively described as "content modules" of the page. These content modules have a header bar with a light grey background and a technical preview of the content below it.
The header bar
- The header bar of the content element contains a small element symbol on the far left, which can look different depending on the element type. If you click on this symbol, a context menu appears which offers further options.
- Next to the element symbol is a small flag symbol to display the language of the element.
- On the right-hand edge of the header bar is the pencil icon, the left-hand of three icons, which can be used to open the element for editing. For many elements, you can also click in the content preview (below the header bar) to open the editing view.
- The switch symbol in the centre of the three symbols in the right-hand corner activates/deactivates the content element. This allows you to control the visibility in the public view. Newly created content elements can initially remain deactivated until they are completely filled and then activated and thus also made publicly visible.
- An element can be moved to the rubbish bin using the rubbish bin symbol on the far right. It then disappears from the page, but can be found again in the recycle bin (accessible on the left in the dark TYPO3 page column) and can also be restored from there.
The content preview
There is usually a technical preview of the content under the header bar. Depending on the type of content element, this preview can look very different. In the case of pure text & media elements, a preview of the text and/or images contained is displayed, but in the case of input forms or contact data integrated from Stud.IP, for example, some basic data on the configuration of these elements appears here instead.
The footer information
At the bottom of a content element box, an area with a light grey background may appear with some text information. This shows some properties of the content element, e.g. the selected heading type, the expandability, the pixel width of integrated graphics and much more.
The editing view of content elements
If a content element has been opened in the edit view, e.g. by clicking on its pencil icon, a very different display may appear depending on the type of content element.
However, many content elements have in common that they have a "Headings" segment in which the (main) heading of the element and the subheading can be entered if required. The type, alignment and any date can also be entered:
- Type: The heading of the content element or figuratively: the subheading within the page that is to introduce the subsequent text section. By default, this field is set to the value "Subheading 1", i.e. a first-degree subheading that is displayed slightly smaller than the page heading. Important: This value should only be changed if the headings result in a meaningful document structure, i.e. the value "Subheading 2" can be selected, for example, if there is already an element with "Subheading 1" above it. The second-degree subheading then means that the content of this section is a subheading of the element with the first-degree subheading. Important: With regard to the accessibility of the website, it is crucial to create a logical structure here!
- Alignment: Only in justified exceptional cases should a change be made here! The standard in the UOL corporate design is left-aligned alignment!
- Date: A date can be set in order to make a certain topicality recognisable. This then appears directly after the heading. An extremely useful application for the date is the compact output of current information on an organisation homepage by using it in pop-up elements.
Move/copy content elements
There are various methods for moving or copying elements that are suitable depending on the situation:
Move element within a page (drag & drop with the mouse)
If content elements are to be moved within a page, e.g. moved to another column or reorganised within the same column, this can be done by dragging and dropping (moving with the mouse button pressed) the header bar of the element to be moved.
Coloured zones become visible within the page once the move has begun. Wherever such a zone is coloured green when the element is moved, the element can be dropped there and is thus moved to this position.
Move/copy element to another page or within the same page (clipboard)
Moving/copying using the clipboard is useful ...
- if a content element is to be moved to another page.
- if there are many elements on the page and the element is to be moved over long distances (past many other elements - in this case, scrolling is slightly complicated with the mouse button).
By clicking on the symbol of the element to be moved/copied, a context menu appears in which the desired action ([Cut] or [Copy]) can be selected. (While cutting is intended to move the element, copying does not touch the original element, but creates an identical copy of it that can be pasted elsewhere).
Then switch to the page to which the element is to be moved/copied and click on the paste symbol at the desired position (in the gap between existing content elements).
Moving/copying several or all elements from one page to another page
If several or even all elements from one page are to be moved or copied together to another page, this can be done in one go.
Move/copy several or all elements from one page to another page
This is the most complex, but also the most powerful move/copy process.
If several or even all elements from one page are to be moved or copied together to another page, this can be done in one go. This is basically done via a clipboard, but the procedure differs from moving a single element.
- To move many elements to the clipboard at the same time, switch to the Web→List view in the TYPO3 function column on the left (see Fig. 1).
In the main area of TYPO3, click on the grey bar [Content element] and you will then see a rather technical-looking list of all content elements on the page (see Fig. 2). - Below this list, tick the "Show clipboard" checkbox, then an additional "Clipboard" box will appear, in which you select "Clipboard #1 (multiple clipboard)" (see Fig. 3).
You can also select [Move elements] or [Copy elements], depending on the desired use. - A checkbox is now also displayed behind each element in the list of content elements. Here you can tick the boxes for all the elements that are to be moved or copied to the clipboard (see Fig. 4).
- Finally, click on the clipboard symbol above the tick column in the list header - this transfers all elements to the selected clipboard and lists them accordingly at the bottom of the clipboard box (see Fig. 5).
- Now the elements only need to be inserted into the target page: To do this, switch to the target page, which is also displayed in the Web→List view.
- At the top of the light grey header area, click on the "Paste clipboard content" icon to insert the elements from the clipboard into the page (see Fig. 6).
(At this point at the latest, it would be possible to decide between moving and copying again before clicking in the "Clipboard" box at the bottom). - Variant when pasting: If the target page already contains other elements, the elements from the clipboard can also be inserted at a desired position in between. To do this, do not click on the icon in the header area, but instead on the [Paste to] icon, which is displayed after each listed element on the page. The content from the clipboard is then inserted after this element (see Fig. 7).
Delete and restore content elements
Hide or delete content
Content elements can be removed from a website in various ways:
- Hide: By deactivating content elements using the switch button, they disappear from the website without being deleted. They can then be quickly reactivated by clicking the button again, making them visible again on the website.
- Delete: By deleting content elements using the recycle bin button, they are placed in the TYPO3 "recycle bin", which can be called up in the left-hand function column of TYPO3. Deleted elements can be found again in the recycle bin and can also be restored from there.
Video of the training course on deleting and restoring
An online training course on deleting and restoring showed how to remove content elements or entire web pages by placing them in the recycle bin and how to restore them from there. It also showed how to restore content elements to their previous saved state (after multiple changes and saves).
- Hiding and deleting elements; hiding hidden elements (2'40")
- Elements in the recycle bin; linked translations of the elements are automatically deleted (6'30")
- Restore elements from the recycle bin (8'20")
- Query: "Restore content and subpages recursively" (9'40")
- Delete pages -> Content elements contained are also deleted and restored on request (14'47")
- Delete or restore pages that contain subpages (21'00")
- Cleaning up the recycle bin: Final deletion not allowed (22'16")
- Trash pages for temporary storage of pages (23'47")
- Restoring previous versions of content elements (26'20")
- Context menu: History/undo; show HTML differences (28'17")
- Restore previous element state (32'42")
- Restore multiple changes (in different elements) (36'10")
Note: The video is only accessible to members of the university.
Use a content element in several pages
You may want a content module to appear on other websites at the same time, i.e. to be displayed multiple times - as a kind of mirror image. In this case, only the original content element needs to be changed and the content is then automatically updated in all other locations:
- Create a new content element of the type "Text & Media". You will then be taken directly to the editing view.
- In the [General] tab, "Content element" section, immediately change the type from "Text & media" to "Insert data set" (further down in the list) and save once at the top using the disc symbol if necessary.
- Now select the small folder icon ("Browse data sets") in the "Data sets" section, navigate to the desired page in the page tree view where the source data set (= content element) is located and click on the small red arrow on the right.
- A list of the content elements of the selected page is displayed, here you click on the element you are looking for or, if necessary, on the respective plus symbol of several elements one after the other (if you want to integrate more than one element).
- Close the selection window with the [X] button in the top corner and you will now see the selected data set (or data sets) in the list.
- Save at the top using the disc symbol -> Done.
Further formatting options for content elements
In addition to editing content, elements can also be made expandable, given a background colour or frame or separated from the surrounding elements by a horizontal dividing line before or after them. To further structure the page, content can also be arranged in columns using grid elements.