Canvas VS Content mode
Two modes explained
The difference between the two editing modes is the way you can work with them.
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.
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.
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 behaviorThe 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.
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.
In some cases you can build 90% of the layout with Content mode, but you need Canvas mode to position some layers. E.g.:
- https://smartslider3.com/the-rock/ (background parallax layer is in a canvas layer, the rest is in Content mode)
- https://smartslider3.com/beautiful-wordpress-full-width-slider/ (firs slide, those small shapes around Leah Quinn can only be done via Canvas mode, the rest can be Content)
- https://smartslider3.com/create-beautiful-landing-page/#n2-ss-81 (last slider, maybe it jumps to the wrong place. The texts are in Content mode, the images are in Canvas)
Frequently asked questions
How do I move a layer from Canvas to Content mode?
- Switch to Content mode
- Drag the layer to actually move it to Content mode
- You'll notice the layer's purple outline chances to blue, which means it's in Content mode.
How do I move a layer from Content to Canvas mode?
- Switch to Canvas mode
- Drag the layer to actually move it to Canvas mode
- You'll notice the layer's blue outline chances to purple, which means it's in Canvas mode.