You can find the Content layer in the Slide Editor.
The default aliment of the content inside the Content layer. Learn more about the Vertical align in the Alignment and Spacing video.
- Inherit: Inherits the align from the parent. By default this means left alignment.
- Left: Aligns the layers to the left.
- Center: Aligns the layers to the center.
- Right: Aligns the layers to the right.
The default vertical align of the content inside the Content layer. Learn more about the Vertical align in the Alignment and Spacing video.
- Top: Aligns the layers inside to the top.
- Middle: Aligns the layers inside to the middle.
- Bottom: Aligns the layers inside to the bottom.
- Space between: Aligns the first layer to the top and the last to the bottom, and leaves equal amount of space between them..
- Space around: Divides the space between the layers equally.
Here's a video that illustrates the difference:
Here you can set a background color for your Content layer. You use the color to create an overlay for the Background image.
The background color can be adjusted for Normal and Hover state.
- Background color: The background color of your slide.
- Gradient: You can create a gradient color with this option.
- Color end: The finishing color for the gradient.
You can put padding around the Content layer to create a nice distance from the slide edges.
When your Content layer has a Max Width you can align it within the slide.
You can limit the width of the Content layer.
Learn about the Pesponsive options at the Layer Style documentation.
Learn about the Effect options at the Layer Style documentation.
Learn about the Advanced options at the Layer Style documentation.
Learn about the animations at the Animation documentation.
Frequently Asked Questions
What's the difference between the Content layer background and Slide background?
Layers (like the Content layer) can only cover the slide canvas area, while the slide background can cover the whole slide. So when you use the
Limit Slide Widthoption to prevent the slider from getting too tall, the size of the slide canvas will be limited and the Content layer's background won't be able to cover the slide.
The Courses demo slider takes advantage of this behavior, as it uses the Content layer's background to display the main picture of the slide.
What happens if you use both images?
- Loading issues: Since your slide has two images set, it needs to load twice as many images as are actually displayed for the visitor
- The set background does not show up: The Content layer is only displayed on the frontend if it has a purpose, so if has at least one layer.
- The slide background images might be visible during slide changing. (Which is the correct behaivor for them.) Then when the slide loads the Content layer's background will cover them.
- The slide is not completely covered by the background. The slides can be covered completely by the Slide background image only under any responsive scenario. The layers, such as the Content layer can be limited by a maximum slide width setting, preventing it from completely covering the slide.
Features you won't be able to use if you are using the Content layer's background
- Background image optimization: The optimize feature works on slide background images only. Content layer backgrounds won't be affected and your site needs to load both the slide background and the content layer's background, slowing down the page loading.
- Lazy loading: The lazy loading feature affects slide background images only.
- Background animations: The background animations affect slide background images and colors only. The layers can only be moved via the Main animation and layer animations.
- Ken Burns effect: The Ken Burns effect only works on slide background images, so you can't use it on the Content layer's background
- Fill modes: The fill modes can be used on slide background images only.
- Shape dividers: Shape dividers are below the layers, so if you use the Content layer to set the background image, you won't be able to use these either
- SEO. The Content layer's background is a simple CSS background, so it doesn't support the alt text, what img tags do.