All content screens have the same properties, no matter the presets. In order to configure the screen, we select the screen clicking on it directlyor on the breadcrumb trail. Then we can go to "Properties" tab and set up screen parameters. PROPERTY DESCRIPTION View This property allows us to choose different screen styles. Remember: we should only choose one of these three types of views in order to avoid operating errors: Title Title of the screen. It's necessary to show the screen in the main menu (we need it if we don't have "Screen Title" component). Also, it's necessary to link a Launcher to a screen. Primary colour of the screen We can customise the background colour of the central column of the screen. This is the area of the page where contents like texts and images are displayed. Secondary colour of the screen Its use is combined with "Type of column background" property. Type of column background This property allows changing the background style of the central column of the screen. Its use is combined with primary and secondary colours of the screen. Solid. Colour assigned in "Primary colour of the screen" is applied. Lineal. A gradient colour combination is applied when combining the "Primary colour of the screen" with the "Secondary colour of the screen". Bicolour. Both colours are applied, one above the other. We can use the property called "Gradient colour (percentage)" to decide the space that the "Primary colour of the screen" will occupy. If we choose 50, that means 50% primary colour and 50% secondary colour; 90 means 90% primary colour and 10% secondary colour. Gradient colour (percentage) If "Bicolour" option is chosen, gradient colour option is applied combined with "Type of column background". This gradient colour control allows adjusting primary colour percentage. Page background colour This property allows applying a colour for the exterior background of the central column. Applicable only if there is no "Background image". Background image This property allows adding a background image for the exterior background of the central column. Type of screen background Decide whether to repeat the background image. - Repeat background. Brings the image to its actual size and repeats it as many times as necessary to cover the entire screen. This is useful for creating image patterns with small images. - Do not repeat background. Resize the image so that it takes up all the available space on the screen. Width This allows adjusting central column width from XS (extra-small) until XXXL (triple extra-large), like size system used for clothing. Show in menu It allows to decide if the screen will be shown in the Main Menu or not. Remember that another way to hide a screen in the menu is to create it without the "Screen title" component. Overcome goal It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between: Inherited: this option aply the default value defined in the Completion Objectives Area (See here). Non objetive: this audio will not an objetive to complete the unit. Visit: It is required to visit the screen to reach the objectives of the unit.

A pop-up is a type of content that opens as a pop-up window. Check how this pop-ups are created and linked here. We can add almost any type of component from a template to a pop-up message. A similar procedure is used when configuring screens. There are specific properties available to configure the appearance of pop-ups: PROPERTY DESCRIPTION View This property allows changing the type of pop-up. Basic pop-up. It has a normal appearance. We can add any component to it. Full-screen pop-up. Full-screen display option. It is used when we want to add content requiring a lot of space to display (animations from external sources, images, etc.) Glossary pop-up. A type of pop-up designed to include a glossary. This option allows adding a glossary component (See here) Style This property allows changing the colour of the pop-up header. Primary colour. Applies the primary colour of the unit to the pop-up header. (See how to apply colours to the unit in here) Secondary colour. Applies the secondary colour of the unit to the pop-up header. This property cannot be applied with "Glossary pop-up" view. Title It is used to identify the pop-up. It will be used to create a link to a pop-up. This is the title that will be shown in the pop-up selection menu (See here). Maximum width We can configure the maximum width of the pop-up displayed on the screen. It is measured in pixels. Show in the automatic PDF We can decide if we want to make the pop-up appear with the contents of the printable PDF (See here) to know how to create this automatic PDF).

A tooltip is content that opens in a floating window, similar to a popup, but is displayed in a smaller box. To add it you access the "Manage popups" area and add the type "tooltip". Texts, images and audios can be added inside a tooltip. Among its properties you can configure: PROPERTY DESCRIPTION Title Representative title of the tooltip. It will be necessary to identify them when linking it Maximum width Allows you to customize the maximum width, depending on your content. Indicated in px. Background colour Customizes the background color of the tooltip. Audio autoplay If you add an audio, you can decide whether to start playback automatically. You can link a tootip to: A text An area of a click map.

All screens include a "screen title". Remember: A screen title is essential to make a screen visible in the navigation menu. If we delete the screen title, this screen will not be shown in the navigation menu. When clicking on the screen Title, a text editor menu is enabled to add contents. Read here to know how to use all these functions. Additionally, the Text component offers the following property: PROPERTY DESCRIPTION View There are two types of views: Title or Title and subtitle Remember  If you remove the "Screen Title" component, the title that has been applied in the navigation menu will be the "Title" property of the screen properties. If you remove the title from the screen and want to recover it, you can locate it among the components of the "Others" group.

Texts are added within the screens (See here), but they can also be included inside other components (Highlight, an Accordion, a Row, etc.) This component is included in the group of "Text" components. Setup process Whenever you add a text, a text editor menu is enabled. Read here to know how to use all these functions. Additionally, we can access the "Properties" tab and choose those we would like to set up. PROPERTY DESCRIPTION Indent It allows indenting the first line of each paragraph. List style It allows setting up the style of numbered lists: Normal: The numbers of the list are shown as normal text, without any specific format. Bold: Numbers are shown in bold. Italic: Numbers are shown in bold and italics. Colour list We can change the colour applied to bullet points included in texts. Width This property allows changing the text space inside a central column of contents. This text occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

"Quote" component is designed to show a content or phrase from an author. Quote layout is different from other normal texts. Quotes are added within the screens by default (See here), but they can also be added inside other components (for example, a Highlight, an Accordion, a Row, etc.). This component is included in the group of "Text" components. There are several preset views that we can select when creating a quote. A quote has two editable texts: one includes the famous phrase and the other shows the author. Moreover, we can configure its properties. PROPERTY DESCRIPTION View This property allows choosing different preset views (Quote with side bar, Quote with side icon, Quote with background colour, etc.). Style Normal: the primary colour of the unit is applied to the quote elements (See here to know how to define a primary colour). Customised: Customised colours are applied for the quote (background colour, icon colour, etc.). Width This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

"Table" component is a text including a preset table where the primary colour of the unit is applied by default. This helps us to make tables more appealing and edit them quickly. Remember all the components are added within the screens (See Section 2.2.), but they can also be included in other components (for example, a Highlight, an Accordion, a Row, etc.) This component is included in the group of "Text" components. When adding a table, we can choose different preset tables:   Setup process After choosing a table and clicking on it, a text editor is enabled. This editor has a specific bar that allows setting up and customising the table. For further information, see Section 5.10. in the Author's Guide. Additionally, we can access the"Properties" tab and choose those we would like to set up. PROPERTY DESCRIPTION View Standard: applies unit colours to the table. Customised: applies customised colours to the table (borders, header, even rows, odd rows, etc.). Style This property only applies when selecting "Standard" view. Primary colour: primary colour of the unit will be applied. Secondary colour: secondary colour of the unit will be applied. (See here to know how to configure unit colours). Width This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Image of the table for PDF (optional) If creation of an automatic PDF including all unit contents like text in tables is configured (See here), table layout might be cut and split into two pages. We can prevent this from happening if we add an image of the table to this property. This way, the table with text will be replaced by this image and will not be cut when creating the PDF.

"Highlight" allows us to create and highlight content to make it aesthetically different from the rest of contents displaying on the screen. Highlighted text is added within the screens by default (See here), but it can also be added inside other components (for example, a Highlight, an Accordion, a Row, etc.). This component is included in the group of "Text" components. When adding a panel, we can select three different presets: Basic Highlight: it shows one text highlighted with a coloured border and a title. By default, the primary colour of the unit will be applied. (See here to know how to configure colours). Highlight with header: it shows a highlighted title on a coloured background. Highlight with double header: it includes a title and a subtitle. Setup process 1. When we add a Highlight, a "Text" component is inserted inside by default. Then we can add more components if we want. Access the "Add" tab and you will see that you can "Insert inside" the panel many other components like images, audios, videos, rows, etc.). It is important to make sure we have selected the Highlight component because we can insert components inside, but we have also the "Insert after" option. 2. Enter the "Properties" tab and set up Highlight properties. 3. Finally, set up Highlight contents like title, texts, and other components. Properties PROPERTY DESCRIPTION View This property allows changing the type of panel: Basic Highlight Highlight with header Highlight with double header Style It allows modifying the graphic layout of the panel: Standard: primary and secondary colours are applied to the unit, when appropriate to the chosen view (See here). Customised: customised colours are applied to the panel. Depending on the selected "View", new properties will be enabled to let you modify border, background and titles colours. Width This property allows changing the space occupied by a component inside a central column of contents. This component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in full-size. For some quote styles, "Full" width makes quotes lay over the central column. Align This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%. Header icon This property is only available when choosing the "Basic Highlight" option inside "View". It allows adding an image or icon related to the title of the panel.

"Instruction" is a type of component that tells users what actions they should take. Some components include this component by default, but we can always add, delete or modify it with a new instruction. Instructions are added within the screens (See here), but they can also be included inside other components (for example, a Highlight, an Accordion, a Row, etc.) This component is included in the group of "Text" components.

"Code" component is designed for training contents related to programming languages (HTML, JavaScript, Python....). This component allows adding code from different programming languages without altering the correct running of a unit. This component automatically recognises the following languages: Apache CSS HTTP JavaScript Objective-C Python Bash CoffeeScript Ini, TOML Makefile PHP Ruby C# Diff JSON Markdown Perl SQL C++ HTML, XML Java Nginx Properties Shell Session You will find this component in the group of "Text" components. This component does not include any property. We just need to type the corresponding programming language we want to show. It is recommended that you write this code directly or copy and paste it from a .txt file. Do not copy and paste it from other types of files (Word or others), as text formatting from source text will be kept (font, colour, etc.). We should say there is not any style option shown in the editor menu for the inserted code. Previewing the course is required to see how this component is displayed. View in edit mode: View in preview mode: