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.
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||Not needed. (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.
- https://smartslider3.com/create-layer-animation-smart-slider/ (second slide)
- https://smartslider3.com/create-beautiful-landing-page/#n2-ss-81 (last slider, maybe it jumps to the wrong place)
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)
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
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