CC Creator - Section

Last modified:


Sections are the basic component that can be added to a page.

Within the sections you can add rows (which can have 1 or several columns).
The rest of the elements and components (texts, images, videos...) will be added inside the rows and columns. 

Image 47023

Each editing mode allows you to perform different actions with the sections:

Easy mode:

  • Add sections
  • Duplicate or delete sections
  • Modify session properties


Professional mode: 

  • Add rows within sections.
  • Add other components.
  • Move components out of position.


Add sections

When using the Easy edit mode, the only thing you can add within a page are new sections. If you move the mouse pointer over the page you will see that some elements are highlighted with a blue label. These elements are the sections.

And associated to the sections you will see two + buttons that allow you to add a new section, before or after the selected section. 

Image 47070

You can add the sections that have been predefined for the theme. 

Image 47071

Within the sections you will find texts, audios, videos, images and other elements that you can configure by clicking on them.

Duplicate or delete sections

To configure a section, you must first select it. You have two ways to do this:

  • If you move the mouse pointer over the page you will see that some elements are highlighted with a blue label. These elements are the sections. Simply click on their label to select the section.
    Image 47024
  • Using the breadcrumb trail.

Image 45637

Once you have selected a section, you can duplicate or delete it from its label. 

Image 47072


    Modify section properties

    To set up the properties of a section, you must have it selected. When you place the mouse pointer over a section you can click on its blue label. Click on it to select the section. 


    Image 47024

      The properties that you can set up in a section are:


      Image 48567


      • Its title. It will be useful to customize it to recognize the section 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 background image. In some sections, only if the designer who created the theme has allowed it, you will be able to remove or replace the background image for the section. 

      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-hand corner.

      Image 47085


      By pressing the + button you can add rows or other components. 

      Image 47086

      You will be able to add the type of rows that have been added to the topic. 

      Image 47087


      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 pointer around the screen until the area where you want to add it lights up yellow. 

      Image 47088

      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.

      Image 47089

      Image 47090

      For each component you will have different templates, according to the characteristics of the theme that have been configured. 

      Image 47092



      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)

      Image 47094


      - 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:

      Image 47093




      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. 

      Image 47095

      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: it will move under another existing element.

      Modify section visibility

      You can decide whether the section is visible or not according to the condition you decide. Click on the "Add condition" property.

      Image 48568

      Here you can decide which object/component will be used as a referent and then you can decide which trigger will make the section visible. Depending on the object you choose, you will have different triggers. For example, you could make a section not visible until the learner answers a quiz, or gets a specific activity right, or completes the viewing of a video/audio...

        Image 47027

        Image 47028


        Is this article helpful for you?
        © 2022 Netex Knowledge Factory. All Rights Reserved. Disclaimer | Privacy policy | Cookie Policy.
        -