New in Labs: Responsive Custom Blocks

Responsive Custom Blocks is in active development and will receive updates as part of Labs. Functionality will change over time. Some options could be modified, while others may be removed based on feedback and feature stability. There is no guarantee that Labs experiments will become production features.

With Responsive Custom Blocks enabled, your custom blocks will adapt to any screen size, just like other blocks in Rise 360! The new block editor provides responsive containers for your content, easy-to-use device previews, and per-object sizing controls so that blocks you build on your desktop reflow seamlessly on tablet and mobile devices. Read on to see how it all works!

Get Started

Enable the feature in Labs. Once you’ve enabled the Responsive Custom Block Labs toggle, custom blocks you build are responsive by default. Insert a template or start from blank, and you'll land in the responsive editor automatically.

Note that enabling this experiment won’t affect existing custom blocks.

Insert a Responsive Custom Block

You’ll still select a template or create a blank canvas when creating a custom block. Open the block library in your training and select Custom block to begin.

Responsive Templates

We’ve gone through our prebuilt custom block templates and reworked most of them to be responsive. With the experiment enabled, you'll see the responsive version of each template, organized in the same categories you already know.

Note: Templates that display the Fixed Layout badge aren’t responsive and will remain fixed to the layout you see on your desktop.

Templates from the Block Library

 

Templates from the Custom Block editor

Blank Canvas

To start from a responsive blank canvas, select Blank then click Create a Custom Block. This opens the responsive custom block editor.

To create a non-responsive blank canvas, select a Fixed Layout template (as described in the previous section) and delete the contents.

 

Build with Containers

Containers make reflow possible. They’re made up of columns and rows that hold your content and rearrange it as the screen resizes. Columns and rows determine how much of the screen your content will occupy, then reflow your content to maintain that ratio whenever the screen size changes.

Columns divide your screen into sections vertically, while rows divide it horizontally. You can nest containers within each other to build more complex structures. Blank canvases start with a two-column layout.

1. On the left sidebar, click Containers.
2. Drag a column or row onto the canvas or an object. You can also click a container to add it to the currently selected object.
3. Drop any objects into the container. Empty containers show a Drop objects here placeholder.
4. Quickly add a row or column by hovering your cursor between elements and clicking the + icon.

 

Adjust Responsive Properties

Select an object or group, then click Position in the toolbar that displays to access its responsive properties. This sets how the container behaves when resizing.

From here you can:

• Set the Width and Height of the container. This can also be set for each individual column and row.
  • Fixed: enter a set value in pixels
  • Hug: dynamically wraps around the content
  • Fill: expands horizontally and/or vertically within the space
• Align and justify content within the container based on the selected point in the grid.
• Change the Direction of how content flows: vertically or horizontally. This changes the layout of the selected container from columns to rows, or vice versa.
• Enter a pixel value or use the slider to adjust Gap spacing between elements within a group, and Horizontal Padding or Vertical Padding around a group of elements

Verify and Adjust Responsiveness

You can see how your custom block will behave on various devices and set how your content will appear by device.

Preview

Use the device icons at the top of the editor to see how your custom block will appear on computers, tablets, and smartphones. You can also use the handlebars on either side of the canvas to manually preview a certain width.

Device iconsHandlebars

Adjust by Device

Each device type has its own responsiveness settings. To adjust your layout between devices, select a device icon at the top of the editor and set the position settings accordingly.

You can even have the containers reflow from horizontal to vertical by device. For example, a two-column layout on desktop could be two stacked rows on mobile. Here’s how:

1. Select a device view.
2. Select a container.
3. In the Position menu, select the opposite Direction.

FAQs

Does this experiment affect my current custom blocks?

No. Enabling the Response Custom Blocks experiment won’t affect any of your current custom blocks, nor will it convert them to be responsive.

Can I overlap or layer objects on top of each other?

Not in the responsive editor. Containers give every object its own space, so when you add a new object it is placed next to your existing content rather than layering on top of it. For example, text can sit beside an image, but it can't overlap it. If your design calls for layered objects, build that block from a Fixed Layout template instead. 

If layering matters for your responsive content, let us know how you'd use it - we're exploring ways to address this functionality.

If I restructure my layout between device types, can I have completely different content in each?

No. Layouts change per breakpoint, but content and styles don't. You can restructure columns and rows for mobile, but you can't, for example, swap an image or change a heading from H1 to H3 at a specific breakpoint.

Can I change the pixel width settings for each device?

Breakpoint widths are fixed to the pixel width in the table above. You can't define your own. Use the handlebars to see how the content will reflow in various widths.

I don’t like how a certain template or the content in my containers is being resized. Can this be adjusted?

During this Lab, we’re actively seeking feedback for things like this, where content or templates don’t reflow the way you’d like. For templates, you can manually adjust how they reflow. We’re still actively refining object behaviors. Please see the next section for details on how to let us know what you’d like to see improved.

Is there a way to create a completely empty non-responsive canvas or do I have to start from a Fixed Layout template every time?

Not at this time. We’ll be introducing this in the coming weeks.

Will a responsive custom block remain so even if I disable the experiment in Labs?

Yes. Once you build a responsive custom block, it will remain responsive, even if you disable the Labs experiment.

Provide Feedback

Both Responsive Custom Blocks (Labs) and Custom Blocks (Beta) are evolving features and we need your feedback to ensure they meet the needs of all Articulate users. Please your feedback on the following:

• Uses: Are the labels and controls clear? Could you do everything that you wanted to with the responsive editor?
• Bugs: Did any objects or a specific template not reflow as you expected?
• Improvements: Are there any controls you still need to make responsive content? Would you like to expand functionality? If so, how?
• Insights: Did this feature make it easier for you to include custom blocks in your training?

You can enable and disable this feature from the Labs sidebar in Rise 360 or account settings page. Share your thoughts in this Labs forum or use the feedback form directly within the feature.

 

How-to demo videos

Responsive vs Fixed Layout Overview

 

Containers

 

Position and Device Breakpoints

 

Tips & Tricks