4.1 Creating content elements

Transcription

1 4.1 Creating content elements The content of a page is created by using content elements. You can build the page by using a variation of elements in combination with each other. Select a page in the page tree by clicking the title of it. Click the button "Content", inside the content area, to add a new element. (Img ) A number of tabs, with different types of content elements, appears. Read more about the different elements here. In this case we will select a "Text & Media" element, below the tab "Typical page content". (Img ) The "Text & Media" element is probably one of the most applied elements.

2 The tab "General" contains the information about the type of element (1), which content field it is placed in (2), the header (3), what layout the header has (4), option to link the header (5) and the body text (6). (Img ) Content type Content type At the top of the General tab, in a content element, you are able to see what type of element it is. It is also possible to switch to a different type of element. If the fields you have filled out, has an equivalent field in the other type, the applied text/settings will follow.

3 Content column The page template can sometimes contain a variation of content fields, and in the "Column" drop down you are able to see where the content is placed. It is also possible to move the content element between these content fields using the drop down.

4 Header type Header type There are several different types of layouts for the header. The layouts control the design of the header in the frontend, but also communicate to the search engines what importance the header has. Layout 1 should be set for the first header on the page. It is also the H1 tag, that indicates to the search engines that it is the most important header on the page. Read more about optimizing your website. Layout 2 - Layout 5 also has different styling on the frontend and indicates to the search engines the importance of the content. It is possible to hide the header from the frontend, but use it as a an internal name for the element. Text area Text area The text area is a down-scaled Word document. It allows you to add headers in the text, apply bold and italic, create links, clean the text from formatting etc.

5 Since we selected a Text & Media element there will be a tab called Media. Here you can select to add an image or a video. To add an image or video via the Filelist, click "Add media file". It is also possible to fetch the file from your local computer, by using "Select & upload files". Note that this option only will store the file in this element, and will have no connection to the Filelist. Finally you can add a URL, like the address for a Youtube video, with the option "Add media by URL". The accepted file formats are listed below the buttons. (Img ) After selecting "Add media file", select the file from Filelist in the popup. Choose folder (1), and click the file name (2), or the image (if you have enabled to display thumbnails). If you wish to upload a file, it is possible in the bottom section (3) of the popup. Select the folder (1) in which you wish to upload the file/files in and click "Choose files/Browse". Select files from the local computer and click Open. Now choose "Upload files" in the section, and the files will be uploaded to the folder. Select the uploaded file, to use it. (Img )

6 4.1.5 The file information is added as a section in the element. If you filled out the Metadata in Filelist, this will be shown in the fields Title (1), Alternative text (2) and Description (4). These texts can be overridden by the checkbox above each field, to open it up for editing. It it possible to link (3) the file (when clicked on in the frontend). Either paste a link address, or use the link icon on the right hand side of the field. If an image is added, it can be cropped by using the Image manipulation (5). (Img ) To edit the image, click "Open Editor" to enter the editor. Either select a fixed ratio (16:9, 4:3, 1:1) or crop freely. After you have selected the area you wish to crop, click "Accept". The cropped area will now be shown as a thumbnail in the image information. (Img )

7 4.1.6

8 4.1.7 At the bottom of the tab there is an option to enable "Enlarge on Click", to have the image open in a lightbox. (Img ) When using "Add media by URL" a popup appears where you paste the address of the video. (Img ) After adding, it is possible to give it a title (1) and a description (2). You can also decide if

9 the movie should start playing automatically, when page has loaded. (Img ) The "Appearance" tab has options for the layout and style of the element. The options can vary depending on the type of content element. (Img ) Some types of content elements, can have different layouts (1) applied to them. For example a list of downloadable files can have an icon, to show what type of file it is, or a thumbnail of the image or first page of a PDF. The appearance option (2) allows you to add background colours, or inverse the colour

10 scheme of the element text. This is a function that depends on the design of the website. Adding margins to an element, is some times necessary to create more space between two elements. This can be added above the element (3) or below it (4). A few settings can be added to the media file, like resizing it or adding a border (5). Positioning and aligning the media file to the text (6) is also possible. If you have added more than one file, you can also select how the files should be placed in alignment to each other, by using columns (7). Finally it is possible to add a link to top (8), which is added at the bottom of the content element on the front end. By clicking this link, the visitor will be sent to the top of the page automatically

11 The "Access" tab able you to publish/un-publish the content, by disabling it (1). You can also select a publishing (2) and/or expiration (3) date for the element. This is excellent for example when handling campaigns, product launches etc. when you need to publish a contnet without having to do it manually. It is not possible to preview content that has been set to publish at a later date, so make sure to do this as a last step. Also make sure that the disable checkbox is unchecked, otherwise the content will continue to be hidden. (Img ) The tabs "Categories" and "Grid elements" will be skipped in this section. After you are done filling out all the information don't forget to save. The save function is placed at the top of the content element, with the option to "Save". It is also possible to use the arrow next to "Save" for options like "Save and view page", "Save and Create a new one" and "Save and close". (Img ) About TYPO3manual.com TYPO3manual.com is an online manual for editors working

12 with TYPO3. It is powered by the web design agency Pixelant Read more about Pixelant About TYPO3 For more information about TYPO3, go to TYPO3.org TYPO3 is a Trademark of the TYPO3 Association. All rights reserved 2019