Canvas VS Content mode

Smart Slider 3 has two different editing mode: Canvas and Content. In this article, we'll go through the basic differences and some use cases to help you decide which mode to use.

Two modes explained

The difference between the two editing modes is the way you can work with them.

Canvas mode

When you're working in Canvas mode, you're placing individual layers to a canvas. These layers are separate elements and do not interact with each other.

So it's a real drag'n'drop builder.

Content mode

When you're working in Content mode, you're working with the layers as blocks. These layers are connected to the other layers which surround them.

So it's like working with blocks.

Layer relation

Here's a video to understand the relation between the layers better.

On the left side you can find 3 Content layers, and on the right, 3 Canvas layers. If you add more content to a text layer in Content mode, it will push down the layers which come after the current one. Canvas mode won't change the position of the layers.

Slide building experience

Content Mode Canvas Mode
Structured building. You can move the layers with margins and vertical alignment of the column they're in. Sort of like a page builder. Free editor, you can drag layers anywhere.

Responsive behavior

The most important difference between the two modes is the responsive behavior. The table below shows the most common responsive issues and whether or not you'll need to make adjustments to ensure the correct look.
Responsive issue Content Mode Canvas Mode
Legibility - content isn't readable Not an issue. ( Adaptive sizing is turned on the Content layer.) Possibly an issue. Font size modifier is advised for different views.
Slider height - slider is too small on mobile Not an issue. (Content mode can adjust the height based on the tallest slide in the slider.) Likely an issue especially with content heavy slides. Custom slider sizes or hiding layers are advised.
Layers overlapping Not an issue. (Unless the layers were set up using negative margins.) Possibly an issue. Take a look at the alignment or chain layers.
Manual layer adjustments on different views Font resizing is usually needed, but repositioning in most cases not. (Columns automatically break on mobile.) It's very likely that the layers need to be moved to achieve a correct look

Other responsive issues might occur in Canvas mode, but Content mode handles them by default.

Content

Canvas

Which responsive mode should I use?

You can achieve most layouts in Content mode, so you should use that. There are tutorial videos to learn the basics. This knowledge will help you create anything you want.

Pure Content mode sliders

They're great for most layouts you'll create.

Pure Canvas mode sliders

If you need layers to (partially) cover each other, or if you are using special layer animations/events.

Mixed

In some cases you can build 90% of the layout with Content mode, but you need Canvas mode to position some layers. E.g.:

Frequently asked questions

1
How do I move a layer from Canvas to Content mode?
  1. Switch to Content mode
  2. Drag the layer to actually move it to Content mode
  3. You'll notice the layer's purple outline chances to blue, which means it's in Content mode.

2
How do I move a layer from Content to Canvas mode?
  1. Switch to Canvas mode
  2. Drag the layer to actually move it to Canvas mode
  3. You'll notice the layer's blue outline chances to purple, which means it's in Canvas mode.