About
When you select the Designer format, every section becomes a Designer section and includes additional design settings. These allow you to configure backgrounds, add masks, and set text styles.
Note: The available options for size, position, and their custom fields follow standard CSS notation.
Available settings
Hide section title
Show or hide the section title.
Apply background to
Section header – Only the header gets the background.
Whole section - Header and content get the background. (Not available with course type Flow)
Background color
Select with the color picker or enter a hex code.
Background image
Upload an image via file picker or drag-and-drop. Enable "Use different background for completion" to add a different image for completion.
Supported types: jpeg, pngBackground position
Choose where the background is focused.
Options: Initial, Left top, Left center, Left bottom, Right top, Right center, Right bottom, Center top, Center center, Center bottom, CustomCustom background position
Enter a CSS position value.
Background size
Available options for background size are:
Auto – The background image is displayed in its original size.
Cover – Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
Contain – Resize the background image to make sure the image is fully visible.
Custom – Opens text field for custom background size.
Custom background size
Enter a CSS size value.
Background repeat
Decide if the image repeats.
Background gradient
Enter a gradient or open the gradient modal by clicking the text field for configuration.
Mask image
Select a mask image.
The mask images have to be uploaded in the global settings.
Mask size
Available options for mask size are:
Auto – The mask image is displayed in its original size.
Cover – Resize the mask image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
Contain – Resize the mask image to make sure the image is fully visible.
Custom – Opens text field for custom mask size.
Custom mask size
Enter a CSS size value.
Mask position
Choose where the mask image is focused.
Available options are: Initial, Left top, Left center, Left bottom, Right top, Right center, Right bottom, Center top, Center center, Center bottom, CustomCustom mask position
Enter a CSS position value.
Text color – Select with the color picker or enter a hex code.