A header is a component that will allow you to create very attractive titles for screens in a very simple way. To create this component, simply add it on the screen and configure its properties: PROPERTY DESCRIPTION Side icon (128px width) Decide which image will accompany the header title in the left side of the component. A maximum width of 128 px is recommended. Background image Background image of the header. Repeat background image Lets you decide whether or not the image repeats (to create patterns). Background color Background color of the header. Background transparent  Lets you decide whether the header background is transparent or not. Width  It offers three width options: Adjusted to content. The header will have the width of the contents that there is the central column. Adjusted to rail.  The header will have the total width of the center column. Full width. It will occupy the full width of the screen. Show title Show or hide header title Show subtitle Show or hide the subtitle of the header Title left Margin (px) Allows you to customize the separation of the left margin of the title. Subtitule left margin (px) Allows you to customize the separation of the left margin of the subtitle. Icon left margin px) Allows you to customize the separation of the left margin of the icon.

The "Image" component allows us to insert an image in the content. Images 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.). You will find this component in the group of "Image" components. Internal components An image can have three components: An Instruction located over the image. Credits offering specific properties to define image colours and position (up, down, right, left, etc.) A Caption located under the image. This component has the same specific properties than the "Text" component. (In order to learn how these properties work, visit here) Image properties PROPERTY DESCRIPTION Title Text used to describe the image. This text will be shown when the user places the cursor over the image. Alternative text Text used to describe the image. This text will be shown when the user places the cursor over the image. It will appear also when the image does not load. Resource Image file that will be displayed. We will click on "Examine" to access the Resources folder in the unit (check here) and select the image we want to show. Supported image formats: jpeg, png, and gif. Link to popup It allows converting the image of an interactive element when linking it to a pop-up (See how to create and manage pop-ups in here of the Author's Guide). This is a selective property, which means that if an image is linked to a pop-up, we will not be able to link it to a resource at the same time, for instance. Link to resource It allows linking the image to a PDF or ZIP file. We will click on "Examine" to access the Resources folder in the unit and select the file we want to link with the image. This is a selective property, which means that if an image is linked to a resource, we will not be able to link it to a pop-up at the same time, for instance. External link It allows linking the image with a URL. This is a selective property, which means that if an image is linked to a website, we will not be able to link it to a pop-up at the same time, for instance. 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. Float It allows inserting the image and show it "wrapped" by a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating image (on the right or on the left of the text). We use arrows to move the image a place it on the text. 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%. Pop-up window icon position When an image is linked to an element using "Link to popup", "Link to resource" or "External link", an icon is automatically added to tell students to click on the image. We can use this property to decide where we would like to place the icon (right-upper corner, left-upper corner, right-lower corner, left-lower corner) Link icon (40x40) This property allows replacing the icon currently shown when the image is interactive The new icon must have 40x40 pixels maximum, and we recommend using a .png file with a transparent background so the icon fits well on the image. Enable fullscreen This property allows you to decide whether or not the image is displayed in full screen when you click on them (it is designed in this way to facilitate viewing on mobile terminals). 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. Interact: It is necessary to click on the image to overcome the objective. Remember: this functionality is only useful if the image is interactive, that is, when it's linked to a popup, a document or a web page.

"Before / After" is a component that includes two images. Students can move a central bar to show one image or the other. This action allows showing an image in a certain way, showing it differently when moving the bar. You will find this component in the group of "Image" components. This component 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.) It is a complex component that contains two images. "Before / After" component and its images have specific properties. In order to configure it correctly, we should select each element individually. We can select elements from the breadcrumb trail and from the "Structure" tab. Breadcrumb trail "Structure" tab Setup process 1. Configure general "Properties" of this component (See the table at the bottom of this page). 2. Configure the content of "Instruction" component that is added by default at the bottom. If you wish, you can delete it. 3. Select the image on the left. Access its properties, go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see Section 4.10. in the Author's Guide to learn how to manage the Resources folder). Optionally, we can configure two additional properties in this image: "Alternative text": a text that is shown when placing the cursor over the image or when the image cannot be loaded. "Credits": if we click on the left-upper area over the image, we can add a text that shows authorship credits. This property allows adjusting text contrast depending on the background, so you can put a black text ("Positive" option) or a white text ("Negative" option). 4. Select the image on the right and repeat actions of step 3. 5. Optionally, you can select "Before /After" component and access the "Add" tab. You will be able to add a "Caption" or an "Instruction" (if the instruction was deleted before). Properties PROPERTY DESCRIPTION Width This property allows changing the space occupied by a component inside a central column of contents. This property 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%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. 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. Interact: It is necessary interact with the component to reach the objective.

"Image exchanger" is a component that shows an image and, when students click on it, another image is shown. This component 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.) You will find this component in the group of "Image" components. It is a complex component that contains two images. The component and its images have specific properties. In order to configure it correctly, we should select each element individually. We can select elements from the breadcrumb trail and from the "Structure". Breadcrumb trail "Structure" tab Setup process 1. Configure general "Properties" of this component. 2. Configure the content of "Instruction" component that is added by default at the bottom. If you wish, you can delete it. 3. Select the first image and access the "Properties" tab. You should at least go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see here). We can configure an "Alternative text", which will be shown when placing the cursor over the image or when the image cannot be loaded. Additionally, we can use the "Add" tab, we can add: Credits offering specific properties to define image colours and position (up, down, right, left, etc.) A Caption located under the image. This component has the same specific properties than the "Text" component. (In order to learn how these properties work, visit here) 4. Select the second image and repeat the same process. The second image can also have its own "Caption". As mentioned before, whenever students click on an image, a different image is shown. This image can have an associated text. Image exchanger Properties PROPERTY DESCRIPTION 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%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. 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. Interact: It is necessary interact with the component to reach the objective.

The Flippable Image component lets you create an interactive image that, when pressed, rotated, and can display text, audio, or video. It is a component that you can add inside screens, popups and columns. This is a complex component consisting of flippable Items inside. And the flippable items consist, in turn, of an image and the content that will be displayed when rotating (a text, a video, an audio...). The component and its items have specific properties. To configure it correctly, we need to select each item. You can do this from the crumb path or from the  "Structure" tab. Setup process 1. Select the Flipping component and access its properties. There you can: Give him a degree. Select a view Standard view. Custom view.  This view allows you to configure and customize component colors and other additional elements. Choose the style of the component (edged or borderless). Modify the width and alignment. Indicate whether the component influences the completeness of  the unit's objectives. Remember that if you choose the "Custom" View, new properties will be activated that will allow you to: Choose a background color or background image for the component. Display the title on the back of the flippable card. 2. Select the Flipping Item item and access its properties. Here you can: Set the rotation style of the image (vertical, horizontal...). Determine the width you will occupy on the screen. Modify the color of the icon associated with the component. By default, it assumes the primary color of the unit. Decide whether or not to display the icon associated with the component. If you have chosen the "Custom" View,you can additionally : Display a border and set the color of that border. Set a background color  for the flippable image cover and an opacity. This will be useful if we have added an image in transparent png format in this component. Set a background image for the cover and its type, that is, how it will behave (if repeated, if not repeated). Set a background color for the back of the flippable image and an opacity. Set a background image for the back and its type (if repeated or not). 3. Tap on the flipping Item image and, in its properties, definewhich image will be displayed. Remember: if the image is smaller than the available space, it will look its size, it will not be re-scaled. It will only be reduced if it is larger than the available space. Additionally, you can add credits and/or a footer within the image. 4. Finally, select the Flipping Item again, and on the Add tab you can decide which items will appear when the image rotates: texts, audios or videos. Add the items you deem necessary and configure them. Remember that if the content is very broad, an internal scroll will be generated within the component. Thus, you can configure interactive elements like this:

"Image gallery" is a component that shows one or various images. It is possible to add an "explanatory text" in the caption. This component is added within the screens by default (See here), but it can also be added inside other components (for example, a Row). You will find this component in the group of "Image" components. There are two styles of image gallery:  Style 1. The forward and backward buttons between images are incorporated into the image. The caption is in the lower area.  Style 2. The forward and backward buttons are out of the image. The caption is in the upper area. A color border can be added by framing the component or not. Style 3. The forward and backward buttons are out of the image. A background image can be added to the gallery. You can reduce the size of the images and place them in the center, on the right or on the left. Setup process 1. When we add the "Image gallery", a component including two images is created by default. You can add more images clicking on "Image" inside the "Add" tab. 2. Enter the "Properties" and set up gallery properties. 3. Click on each image and access the "Properties" tab. Go to "Resource" property, click on "Examine" to find and associate an image from the unit Resources folder (see here). Optionally, set up the rest of properties of each image in the gallery (see here to review the properties for each image). 4. Optionally, access the "Add" tab, where you can add two components: Credits offering specific properties to define image colours and position (up, down, right, left, etc.) Caption located under the image. This component has the same specific properties than the "Text" component. (In order to learn how these properties work, visit here) Image gallery Properties PROPERTY DESCRIPTION Width This property allows changing the space occupied by a component inside a central column of contents. The 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%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. Caption position It allows you to decide if the caption of the images will be in the lower area or in the upper area of the gallery. Show border Property available in the gallery with style 2. It allows you to display a border that frames the entire component. The border will have the main color of the unit. Background image Property available in gallery with style 3. Allows you to add a background image to the gallery. Show navigation bullets It allow you to show or hide the lower navigation bullets between images. 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. Interact: It is necessary interact with the component to reach the objective. Complete: it is necessary to visit all images in the gallery to exceed the goal.

"Audio gallery" is a component that shows various images with an audio. This component is added within the screens by default (See here), but it can also be added inside other components (for example, a Row). You will find this component in the group of "Image" components. Setup process 1. When we add the "Image gallery", the component including two "Gallery Item"by default. This items has three elements:     a. Text. A superior text that allows you to add information about the content of the item. (See here to configure the component)     b. Image. See here to configure this component)     c. Audio. See aquí to configure the component) Any of the elements can be eliminated from the item, being able to configure the gallery as desired. 2. In the "Add" tab you can add more "gallery items". 3. Go to the "Properties" tab of the Audio Gallery to configure its properties. PROPERTY DESCRIPTION Width This property allows changing the space occupied by a component inside a central column of contents. The 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%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. 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. Interact: It is necessary interact with the component to reach the objective. Complete: it is necessary to visit all items in the gallery to exceed the goal.

"Launcher" is a component that allows creating an interactive button whose status changes when placing the cursor over it. This component is added within the screens by default (See here), but it can also be added inside other components (for example, a Row). You will find this component in the group of "Image" components. There are two views for this component that are configured differently: Simple launcher Advanced launcher Simple Launcher Settings To create an interactive button effect when placing the cursor over it, we will use two images (one is shown by default; the other is shown when rolling the cursor over it). We will follow these steps: 1.  Select the main image and the roll over image. Go to "Resource" and "Resource (roll over)". Click on "Examine" to find and select an image from the unit Resources folder (see here). 2. Define what will happen after clicking on the button. You can use different properties for that: "Link to popup", "Link to resource" or "External link". Remember these are selective properties, which means you can only use one at once. 3. Configure the rest of properties, if you wish. Simple Launcher properties PROPERTY DESCRIPTION Alternative text Text that describes the launcher. This text will be shown when the user places the cursor over the image. It will appear also when the image does not charge. Resource Image file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here ), and select the image we want to show. Supported image formats: jpeg, png, and gif. Resource (roll over) Image file that will be displayed when rolling over the button. We will click on "Examine" to access the unit Resources folder, and select the image we want to show. Supported image formats: jpeg, png, and gif. Link to popup It links the launcher to a popup (See how to create and manage popups in here). This is a selective property, which means that if a launcher is linked to a popup, we will not be able to link it to a resource at once, for instance. Resource link It allows linking the launcher to a PDF or ZIP file. We will click on "Examine" to access the unit Resources folder and select the file we want to link with the image. This is a selective property, which means that if a launcher is linked to a resource, we will not be able to link it to a popup at the same time, for instance. External link We can link the launcher to a URL. This is a selective property, which means that if a launcher is linked to a website, we will not be able to link it to a popup at once, for instance. Screen link Allows you to link the launcher to a screen on the same page or on another page. Thus, yo can personalize navigations.. 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%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. 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. Interact: It is necessary interact with the component to reach the objective. Advanced Launcher Settings The advanced launcher is designed to create an interactive button but allows you to add more elements inside, creating a more complex element. You can create a launcher that incorporates: A title. It is a text to which we can put a background color or a background image. A descriptive text. We can assign a background color to this text. One or several images. We can add several images, being able to decide in each one if they all have a rollover effect or only one of them has it, leaving the rest as still images. Therefore, we could create a launcher that has a title and an image with a rollover; or a pitcher that has a title, a description, a still image and another that performs the rollover effect; etc. To configure this advanced launcher: Start by configuring the properties of the launcher. Here it is mandatory to define what will happen when clicking on the launcher, so you must choose between opening a popup, link to a resource or an external link. Additionally, this component has the same properties common to the simple launcher, but it has other specific properties such as deciding the border style (with border or shadow) or the color of the border. Add the elements that you want to make up the launcher. You can add title, texts and images. Next, configure the properties of each added component: Title: You can set a background color and / or a background image. Text: Allows you to configure an initial indentation, the style of the numbered lists, color of the lists and a background color for the text. Image: Define a main image and / or a rollover image that will be displayed when the mouse is placed on the launcher. Additionally, you can configure the width of the image and its alignment. Remember Launcher component is very useful to create menus with interactive buttons. For instance, this image shows a group of 4 launchers organised in a row. This row has 4 columns including a launcher inside each of them. Launchers are images of light bulbs that show rollover images with lights on when the cursor is over them. There is a preset row that helps to easily create this type of menus. Check here to learn how to create this type of rows.

"Map of clicks" is a component that allows turning an image into an interactive element, adding clickable areas to open different elements (popups, documents, or websites). This component is added within the screens by default (See here), but it can also be added inside other components (for example, a Row). You will find this component in the group of "Image" components. Setup process 1. Access "Properties" tab, go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see here). Additionally, you can configure the rest of properties of this component. 2. Choose the type of panel you want to create: Standard. This type of click map allows you to add areas that can be linked to popups, documents or web links. With panels. This type of click map allows you to link the areas with panels, that is, areas of content that are displayed on the screen, preventing additional windows from opening. Check out this short video to see the differences between the two types: 3. Additionally, the rest of the properties of the Click Map can be configured (see properties in the table at the end of this article) 4. Access the "Add" tab and add as many "Areas" as you need. Areas are created on the left-upper corner of the image. They can be moved and resized to put them wherever we want. 5. If you have chosen a "With Panels" click map, you must add the "Panel Block" component. Then, inside, you can add as many panels as you need to associate with the areas. At the end of this article you can review the properties of the panel block and the panels. Text and images can be added within the panels. 6. Click on each "Area" and move them to the area of the image you want and modify its size. Also, in its properties, select what action will happen when you click on the area: If it is a Standard click map, you can link them with "Link to popup", "Link to resource" or "External link". If it is a panel click type map, you can link them with "Panel link". 7. In addition, we can configure shape, position and size of clickable areas (see list of properties at the bottom of this page). 8. To finish, select the Click Map and, in the "Add" tab, you will see that you can optionally add the "Instruction" component or a "Caption". Remember: The instruction can only be added on the "Standard" type map. If you add an instruction, in its properties you can define whether it is a standard instruction or with a background color. Map of clicks Properties PROPERTY DESCRIPTION View Lets you select the type of click map you want to create: - Standard. It will allow linking the areas with a popup, a document or a web. - With panels. It will allow linking the areas to panels. Style Property only available in "Click Map with Panels" view. It allows to decide the style or position of the panels: - Horizontal: they will be placed below the image. - Vertical: will be placed next to the image. Resource Image file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here in the Author's Guide), and select the image we want to show. Supported image formats: jpeg, png, and gif. Title Title chosen for the Map of clicks. Optional Alternative text Text that describes the launcher. This text will be shown when the user places the cursor over the image. It will appear also when the image does not charge. 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%. Float It allows inserting a component and "wrap" it with a text. First, we should select a size percentage under 100% in "Width" property (25%, for instance). "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text). We use arrows to move the component and put it on the text. Visible buttons We can choose whether to show or hide a clickable button. If the button is shown, an icon will appear over the image indicating the clickable area. Animated areas This field is only enabled when "Visible buttons" status is "Yes". When clicking on "Yes", the button will show a little animation to catch users' attention. Visible area background We can decide whether we want to show the background of the visible area. For example, hiding this background will be useful if the button is enabled. Visible area border It allows to establish a visible border to the area to be able to mark it better. Instruction position Allows you to place the instruction at the top or bottom of the click map. Panels position Property only available in "Click Map with Panels" view. It allows to decide in which position the panels will be arranged, according to what has been chosen in the "Style" property: - Top / Left area: If it has Horizontal style, the panels will be placed on the image. If it is Vertical, they will be on your left. - Lower / Right area: If it has Horizontal style, the panels will be placed under the image. If you have a Vertical style, they will be on your right. 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. Interact: It is necessary interact with the component to reach the objective. Complete: it is necessary to click on all the existing areas to exceed the goal. Clickable area Properties PROPERTY DESCRIPTION Style This is only useful if we have set the "Visible areas" property to "Yes." It allows deciding two different aspects for the area: 1. Area with animated icon. Displays a circle, which may or may not be animated with the "Animated Buttons" click map property. 2. Area with static icon. Displays a fixed, non-animated icon. Link to popup Link to tooltip Link to resource   External link   Fields only available in "Standard" click map view. Allows you to link the area to a popup, to tooltips, a resource (eg a pdf) or a web page. Only one of the 3 options is allowed. Panel Link  Field only available in "with Panels" click map view. Lets you decide which panel will open when you select the area. Title Title chosen for the Map of clicks. Optional Color Allows you to apply custom color to the area and / or its border, depending on the chosen display settings. Animated icon color Allows you to customize the color of the animated icon associated with the area. Shape We can choose the shape of the area. There are three options available: ellipse, rectangle, and rounded rectangle. Icon position (visited area) We can choose the icon position on the visited area. There are five options available: left-upper corner, right-upper corner, right-lower corner, and centre of the area. X Position (px) Horizontal position where the clickable area begins. It is measured in pixels. Y Position (px) Vertical position where the clickable area begins. It is measured in pixels. Width Width of clickable area. It is measured in pixels. Height Height of clickable area. It is measured in pixels. Panel Block Properties PROPERTIES DESCRIPTION Background color Defines the background color of the instruction area. Icon color Defines the color of the instruction icon Font color Sets the color of the instruction text. Panels properties PROPERTIES DESCRIPTION Title Panel title. It is important to give it a name in order to recognize the panel when linking it to the corresponding area. Background color Panel background color. Background opacity You can define a color opacity to make it more or less transparent. It will be useful if we also add a transparent PNG image. Background image You can replace the background color with a background image.

"Image grating" is an element that allows creating an image composition. We can zoom in when clicking on each image. For instance, we can use this component to include a link inside each image, creating an interactive menu. This component is added within the screens by default (See here), but it can also be added inside other components (for example, inside a Highlight, a Row, etc.). You will find this component in the group of "Image" components. Setup process 1. By default, when we add the "Image Grating" a component including four images is created. You can add more images clicking on "Image" inside the "Add" tab. 2. Enter the "Properties" tab and set up grating properties. 3. Click on each image and access the "Properties" tab. Click on "Examine" in the field called "Resource" and associate an image with the unit Resources folder (see here). We configure the rest of properties for each image included in the grating (see here to check image properties). Remember It is very important that all images have the same size (height and width). Otherwise, the composition will look asymmetrical. 4. Finally, you can add links to each image to create an interactive menu. Properties PROPERTY DESCRIPTION Images per row This property is used to indicate the number of images displayed per row. Images displayed per each row can only be seen in preview mode, not in edit mode. Adjust to column This field allows choosing how we would like to adjust the image grating. There are three positions: Normal: adjusted to the centre of the screen. Right-aligned: aligned to the right of the screen. Left-aligned: aligned to the left of the screen.