Image Block

Description

Use the image block to add pictures anywhere on your site.

The Classic Editor has 6 different image layouts:

• Inline

• Poster

• Card

• Overlap

• Collage

• Stack

For 7.1 Fluid Engine Editor, there are no layouts to choose from

• Fluid Engine

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>
/* inline image */
.design-layout-inline img {
}
</style>

Inline

This is the default layout used when a block is added. It displays the image with the caption below it

For slashies looking for new paths & to stack their digital ✹creative skills alongside a good vibes community.

Custom CSS

To target the image

/* inline image */
.design-layout-inline img {
}

To target the caption background

/* inline image caption background */
.design-layout-inline .image-caption {
}

To target caption text

/* inline image caption text */
.design-layout-inline .image-caption * {
}

Poster

The poster image block displays text over images, like a banner or poster.

ilovecreatives

For slashies looking for new paths & to stack their digital ✹creative skills alongside a good vibes community.

Explore Our Virtual World →

Custom CSS

To target the image

/* poster image */
.design-layout-poster img {
}

To target the title

/* poster image title */
.design-layout-poster .image-title * {
}

To target the subtitled

/* poster image subtitle */
.design-layout-poster .image-subtitle * {
}

To target the button

/* poster image button */
.design-layout-poster .image-button {
}

To target the image overlay

/* poster image overlay */
.design-layout-poster .image-overlay {
}

Card

This layout shows the image on one side with the text beside it. The placement can be flipped.

ilovecreatives

For slashies looking for new paths & to stack their digital ✹creative skills alongside a good vibes community.

Explore Our Virtual World→

Custom CSS

To target the image

/* card image */
.design-layout-card img {
}

To target the title

/* card title */
.design-layout-card .image-title * {
}

To target the subtitle

/* card subtitle */
.design-layout-card .image-subtitle * {
}

To target the button

/* card button */
.design-layout-card .image-button {
}

To target the image overlay

/* card image overlay */
.design-layout-card .image-overlay {
}

Overlap

This layout displays the image on one side with the text on the other, partially overlapping the image

ilovecreatives

For slashies looking for new paths & to stack their digital ✹creative skills alongside a good vibes community.

Explore Our Virtual Word →

Custom CSS

To target the image

/* overlap image */
.design-layout-overlap img {
}

To target the title

/* overlap image title */
.design-layout-overlap .image-title * {
}

To target the subtitle

/* overlap image subtitle */
.design-layout-overlap .image-subtitle * {
}

To target the button

/* overlap image button */
.design-layout-overlap .image-button {
}

To target the image overlay

/* overlap image overlay */
.design-layout-overlap .image-overlay {
}

Collage

This layout displays the image on one side and text over a background on the other, partially overlapping the image

ilovecreatives

For slashies looking for new paths & to stack their digital ✹creative skills alongside a good vibes community.

Explore Our Virtual Word →

Custom CSS

To target the image

/* collage image */
.design-layout-collage img {
}

To target the title

/* collage title */
.design-layout-collage .image-title * {
}

To target the subtitle

/* collage subtitle */
.design-layout-collage .image-subtitle * {
}

To target the button

/* collage button */
.design-layout-collage .image-button {
}

To target the background

/* collage background */
.design-layout-collage .image-card {
}

To target the image overlay

/* collage image overlay */
.design-layout-collage .image-overlay {
}

Stack

This layout displays an image with text below it

ilovecreatives

For slashies looking for new paths & to stack their digital ✹creative skills alongside a good vibes community.

Explore Our Virtual Word →

Custom CSS

To target the image

/* stack image */
.design-layout-stack img {
}

To target the title

/* stack title */
.design-layout-stack .image-title * {
}

To target the subtitle

/* stack subtitle */
.design-layout-stack .image-subtitle * {
}

To target the button

/* stack button */
.design-layout-stack .image-button {
}

To target the image overlay

/* stack image overlay */
.design-layout-stack .image-overlay {
}

Fluid Engine

To target the entire image

/* image block */
.sqs-block-image .design-layout-fluid {
}