Content Layer

You can find the Content layer in the Slide Editor.

Content

General

Inner Align

The default aliment of the content inside the Content layer.

  • 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.
Vertical align

The default vertical align of the content inside the Content layer.

  • 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:

Style

Background image

Background image

The background image of the Content layer. Learn the difference between the Slide background and Content layer background.

Content Background

⚠️ Warning: The Content layer background only shows up on the site and in the preview when there are layers inside the content element!

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.

Spacing

Padding

You can put padding around the Content layer to create a nice distance from the slide edges.

Position

Align

When your Content layer has a Max Width you can align it within the slide.

Size

Max Width

You can limit the width of the Content layer.

Responsive

Learn about the Pesponsive options at the Layer Style documentation.

Effect

Learn about the Effect options at the Layer Style documentation.

Advanced

Learn about the Advanced options at the Layer Style documentation.

Animations

Learn about the animations at the Animation documentation.

Frequently Asked Questions

1
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 Width option 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.

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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.