CC Creator - Rows and columns
The rows are the main component to be added inside the sections.
Once you have rows and columns, you can add inside them the rest of the components (texts, videos, images...).
Each editing mode allows different actions to be performed with rows and columns:
Easy Mode: You cannot interact with rows and columns.
- Modify rows and columns properties
- Add rows within sections.
- Add other components.
- Move components out of position.
- Duplicate or delete rows.
Modify row and column properties
An author in Easy mode will only be able to select rows and columns using the breadcrumb trail.
Activate this functionality from the edit menu:
Then click on any element on the page (a text, an image). In the breadcrumb trail you will see that this element is contained within a column and, at the same time, within a row.
Selecting the row or column from the breadcrumb trail you can set up its properties.
The properties that you can set up in the rows and columns are:
- Its title. It will be useful to customize it to recognize the row or column from the breadcrumb trail.
- Its identifier. This is an auto-generated data by the system, but you can customize it. If you customize it you will help the trace that sends the unit to the platform to be clearer (it is not the same for the content to send to the platform that "student1 interacted 29cb85cfg44" than to send, for example, that "student1 interacted page1"). Remember that the Identifiers must be different, you cannot repeat any identifier of any element within the unit, so you must be careful when modifying them and not repeat them.
- Its visibility. You can decide whether the row or column is visible or not according to the condition you decide. Click on "Add condition". Here you can decide which object/component will be used as a referent and then you can decide the trigger that will make it visible. Depending on the object you choose, you will have different triggers. For example, you could make a row not visible until the learner answers a quiz, or gets a specific activity right, or completes the viewing of a video/audio...
Add rows within sections.
With the Professional editing mode you can manage the rows within the sections. When you move the mouse pointer over the sections, the rows are also displayed, which are labeled orange.
New rows and other components can be added by clicking on the + button in the lower left area.
Pressing the + button you can add rows or other components.
You will be able to add the type of rows that the Designer has added to the theme.
To add a row you can:
- Have previously selected a row or a section of the screen. If you click on the row style you want to add, it will be added directly below the selected row (or within the selected section).
- Select it and drag it to the screen. When doing so, move the mouse around the screen until the area where you want to add it lights up orange.
To learn how to set up the rows and their columns, see this article.
Add other components.
With the Professional editing mode you can add any additional components you may need on the screen. Imagine you have two images but you need a third one. Or you want to add additional text.
To do so, you have the + button located in the lower left area.
For each component you will have different templates, according to the characteristics of the theme that have been set up.
Remember that any component you add will always be inside a row, so you have two ways to add a new component (text, audio, video, image...):
- Select on the screen some already existing element (a row, a text, an image...). Then, simply add the desired component by clicking on it. It will be added below the selected element (or as the last element of the row).
- Drag the component to the screen. By moving the mouse pointer over the elements on the screen you can decide where to place the component. To help you, a color-coded bar will be displayed:
Move components out of position.
With the Professional editing mode you can move components in position: move one section over another, reposition a row, or any other component (texts, images, videos...).
All you have to do is select the element by clicking on its label and use the initial icon to drag the element.
Remember that to help you choose the desired position, color-coded bars will be displayed:
- Blue: will move creating a new section.
- Orange: will move creating a new row.
- Green: will move creating a new column.
- Gray: will move under another existing element.
Duplicate or delete rows
First you must split the row. You have two ways to do this:
- Moving the mouse pointer over the screen you will see the rows highlighted in orange. Simply click on its label to select it.
- Using the breadcrumb trail.
Once the row is selected, from its label, you can duplicate or delete it.