Creator+ Layouts & Recommended Image sizes

Layouts

Layouts make configuring content easier, and faster, then ever. With this feature, creators have the option to arrange text, media, and even Creator+ Elements into panels. This opens your content pages to a new range of design possibilities. Instead of placing content into one long vertical page, you can now organize text and media into differently sized columns for a more dynamic look.

Layouts can be used inside Elements wherever there is an embedded HTML editor. Just like any other section of your page, you can apply a Layout inside an Element to easily structure content into a paneled view.  

Remember to be purposeful with your use of Layouts in Elements. Make sure the use of a Layout improves the learner experience and avoid applying Layouts just for the sake of it or where it could degrade the learner experience.

In this example of a two panel layout, a callout box contains a definition with the neighboring flip card highlighting an example that may be used in everyday speech.

How to add layouts

It is so easy add layouts! Choose from Two Panels, Two Thirds / One Third, One Third / Two Thirds, or Three Panels.

1. Like with other Creator+ items, start with a new file.
2. Select the “+” in the HTML editor.
3. Select Layouts
4. Pick your Layout format option.
5. Once the Layout is inserted, you can add text or media into the panels just like you would on any other part of an HTML page.
6. Save

Or follow the short video (soundless) of instructions below.

Recommended image sizes

Many Creator+ items have image options but what size works best?

D2L suggests around a 300 kilobyte (kb) file size for images to balance good resolution and quick loading.

As for orientation and dimensions, please refer to this guide from D2L Brightspace. It gives a breakdown of image considerations for each Creator+ Element and Practice. A maximum width of each feature, suggested orientations, and some other general considerations are included.

Elements

C+ Element	Maximum Width	Suggested Orientation	Other Considerations
Accordion	633 px	Any orientation (square, landscape, portrait)	Images are embedded via an HTML editor and look great beside text. Consider using Layouts to format images and text.
Tabs	883 px for the content section   87 px for Tab titles	Any orientation for the content section (square, landscape, portrait)   Square works best for Tab titles.	Tabs have two spots to place images. You can embed an image in the content section with an HTML editor. Any image will look great in the content section. Consider using Layouts to format images next to text.  Tabs also have a section for adding an image to a Tabs title. This is done with an ‘Insert Image’ button. This space is much smaller (87 px) and work better with square images.
Click and Reveal	585 px	Any orientation (square, landscape, portrait)	Images are embedded via an HTML editor and look great beside text. Consider using Layouts to format images and text.
Callout	649 px	Any orientation (square, landscape, portrait)	Images are embedded via an HTML editor and look great beside text. Consider using Layouts to format images and text.
Timeline	836 px (left-aligned Timelines)   373 px (alternating Timelines)	Any orientation (square, landscape, portrait)	Timelines can be configured in two styles: left-aligned and alternating. Alternating timelines have less width, so keep that in mind if you’re adding images.
Flip Cards	450 px if there is only one Flip Card.	Landscape and square are good options if you only have one Flip Card.   For more than one Flip Card, portrait or square work well.	If you are using only one Flip Card, it will have a maximum width of 450 px. With each Flip Card you add to a row, the width will decrease. Keep this in mind when adding images.   Wider landscape images work great for single Flip Cards but may not display as nicely with rows of two or more.
Carousel	490 px	Any orientation (square, landscape, portrait).	The Carousel Element allows users to add an image to a space that is 490 px wide. Landscape allows for best use of available space.
Hotspot	473 px	Any orientation (square, landscape, portrait)	The Hotspot Element displays images in a 473 px container.

Practices

C+ Practice	Maximum Width	Suggested Orientation	Other Considerations
Multiple Choice	931 px (images in question description)   134 px (images in question option)	Any orientation (square, landscape, portrait)	The question description leaves a lot of space for an image and text.  The question option has less space, so avoid overly detailed images.
Multi-Select	931 px (images in question description)   134 px (images in question option)	Any orientation (square, landscape, portrait)	The question description leaves a lot of space for an image and text.  The question option has less space, so avoid overly detailed  images.
Sequencing	205 px	Any orientation (square, landscape, portrait)	Sequencing places the image beside the sequence step title and sequencable item title. The question option has less space, so avoid overly detailed images.
Sorting	68 px for category label   40 px for sortable items	Any orientation (square, landscape, portrait)	Sorting places the image beside the category label and sorting item title.  With this limited space, detailed images will be difficult to identify.