When adding a page element, the Advanced tab has the following options: Spacing, Visibility, Animation, HTML Elements, and Export/Import:

These options allow you flexibility in customizing your lesson page containers and remain the same across most assets/page elements. Read on to learn more about each option available on the Advanced tab.

The Spacing section lets you adjust your spacing settings. For rows and columns, this section allows you to change the default margin and padding values:

For assets and page elements, this section allows you to change the default margin values:

ADJUST SPACING SETTINGS

When adjusting the margins or padding settings, values can be typed in the text fields, or adjusted using the slider icon beneath each option:

You may click the Link Values setting to lock and unlock your spacing settings. When locked (as indicated by the blue icon), any entered value will automatically be applied to all four settings (top, right, bottom, left):

When unlocked (as indicated by the gray icon), you will need to enter values for all four settings manually:

By default, the Link Values option is not enabled and must be clicked to enable.

As you adjust the margins/padding, your changes will display in real time on the Page Canvas, allowing you to preview your adjustments:

SPACING SETTINGS AND DEVICE SIZE

While the Lesson Editor can automatically address spacing settings for smaller devices, you can also click the device icon to add values for smaller device sizes (i.e., tablets and phones):

Simply click the icon to shift to a tablet/iPad screen size and set your values (the icon will change, and you will see the Page Canvas resize to reflect a tablet screen):

Click the device icon again to repeat this process for phone screens:

If no further changes are needed, click SAVE to save your changes or CANCEL to close without saving. Otherwise, you may proceed with any additional adjustments in the other sections of the Advanced tab.

From the <Visibility section of the Advanced tab, you can adjust the Breakpoint, Display, and User Capability settings:

From the Breakpoint field, you can limit the display of the row, column, or tool to specific device sizes:

To learn more about global and custom breakpoints, see the Responsive section.

From the Display field, you can choose to always or never display the row, column, or tool, or only display to logged-in or logged-out users:

From the optional User Capability field, you can define the capability required for users to view the module:

If no further changes are needed, click SAVE to save your changes or CANCEL to close without saving. Otherwise, you may proceed with any additional adjustments in the other sections of the Advanced tab.

From the Animation section of the Advanced tab, you can assign an entrance animation, which activates the first time the page is loaded, and the row, column, or module comes into view:

By default, this is set to None. To set an entrance animation, click to select one from the available list:

Once you have selected an animation, you may also adjust the following settings:

• Delay: Set how long before the animation starts, in seconds.
• Duration: Set how long the animation lasts, in seconds.

If no further changes are needed, click SAVE to save your changes or CANCEL to close without saving. Otherwise, you may proceed with any additional adjustments in the other sections of the Advanced tab.

From the HTML Element section of the Advanced tab, you can adjust your Container Element, ID, and Class:

• Container Element: Choose a different HTML container element for the row, column, or tool module (advanced users only). For example, for reasons of accessibility you might want to use an HTML container tag that has more semantic value than a <div> tag, such as <section>: 
  

  

• ID: Add a CSS ID or class value to the row, column, or module. ID names must be unique on a page, so assign an ID only when you need to reference that unique ID. For example, a link to an anchor on the page requires a unique anchor so it know exactly where to go. Class names are usually intended for reuse and are often used in CSS rules. For example, you might want to assign a different text size to all HTML headings with an fl-heading class.

If you want to link to an anchor somewhere on the page, the row is the preferred place to set the anchor, by creating an ID on the Advanced tab of the row. To learn more, visit the article on Smooth Scrolling for instructions.

If no further changes are needed, click SAVE to save your changes or CANCEL to close without saving. Otherwise, you may proceed with any additional adjustments in the other sections of the Advanced tab.

The Export/Import section allows you to export and import settings and styles, letting you easily share styles across lessons and courses:

To export settings or styles for use in another lesson, simply click COPY SETTINGS or COPY STYLES. Upon selecting either of these options, you will see a COPIED! message:

To import any exported settings or styles, simply paste in the Import field, and click IMPORT to import these settings to your current lesson:

If no further changes are needed, click SAVE to save your changes or CANCEL to close without saving. Otherwise, you may proceed with any additional adjustments in the other sections of the Advanced tab.