Jump to main content

Image Placement

Because of the CMS's flexibility, you'll have the ability to place images within columns that will transform better in mobile. You shouldn't put an image in-line with your content unless it's in two- or four-column layouts. When you put an image in the two- or four-column layout, make sure the image spans the width of the column and doesn't wrap like shown in the first example. To do this, make sure you upload the correct image size for the correct column width. Please see the do-and-don't examples below. 

BAD IDEA: In-line Images

Image Placement Image 200pxThere should be no images used in-line in a paragraph. Instead, always assign a column within a row to an image. In this example the image is on the left of the content and the content wraps around the image. This transforms poorly when viewed on smaller devices. When you break your content out into columns and/or rows the delivered content on mobile will render much cleaner and no information will be lost.

Good Idea!

In the properties of your checked-out page, you can pick various column options for the five row on a page, such as the two column, uneven layout. This layout allows you to have some copy on the left in a smaller column while having a larger image to the right, which yields a better viewing experience on smaller devices. In this instance, the website would display the copy first, then put the image below.

8 column image

Column One Image

Good Idea!

Another option in the CMS checked-out page properties is to pick a four-column layout. This way you can have smaller columns with an image at the top to display short pieces of information for the page. Instead of images, you can also use icons in these columns. It's a great way to display quick, digestible pieces of content.

Column One Image

Good Idea!

Another option in the CMS checked-out page properties is to pick a four-column layout. This way you can have smaller columns with an image at the top to display short pieces of information for the page. Instead of images, you can also use icons in these columns. It's a great way to display quick, digestible pieces of content.

Column One Image

Good Idea!

Another option in the CMS checked-out page properties is to pick a four-column layout. This way you can have smaller columns with an image at the top to display short pieces of information for the page. Instead of images, you can also use icons in these columns. It's a great way to display quick, digestible pieces of content.

Column One Image

Good Idea!

Another option in the CMS checked-out page properties is to pick a four-column layout. This way you can have smaller columns with an image at the top to display short pieces of information for the page. Instead of images, you can also use icons in these columns. It's a great way to display quick, digestible pieces of content.