a close up of a sign
Advertisement
03/14/2023

Paragraphs Image Sizes & Examples

Rob Mahoney
Senior Project Lead
Rob Mahoney profile picture

This article shows examples of all the currently available Paragraphs widgets and image size settings available in the Paragraphs editor. 

This region also includes an example of the inline styles available to editors in the WYSWIG text editor. 

Here are examples of Bold Text, Italics, a superscript, a subscript, underlined text, strikethrough text and a hyperlink. All of these should display correctly.

Here is an ordered list:

  1. Item 1
  2. Item 2
  3. Item 3

And an unordered list:

Here is the Normal paragraph style and all of the available Header paragraph styles:

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6 

 

Here is centered text

Here is right aligned text

Here is justified text that should fill the column width.  Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidun

Here is a blockquote entered via the text editor. It should have equal space above and below. 

This is just some more text to wrap around the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. 

Here's some text after the block quote to check for spacing.

Here is a link to a loose file content type upload to make sure permissions and URLs are working.

This first Paragraphs Region is Basic Text (no images)

This Paragraph region is Basic Text, no images or other media, and it takes up the full column. 

Refer to the Image Specs Article for details on cropping and resizing your images for upload.  Also refer to the Links and Reference sheet for examples and more information.

Image + Text: Small Image

This is Image + Text: Small Image Setting

You can align left or right and add an optional caption, hyperlink and flag for advertising. Takes up 1/4 column in desktop view. 

This is just some more text to wrap around the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. 
 

Image + Text: Medium Image

This is Image + Text: Medium Image Setting

Aligned Left, with Advertisement flag checked. Takes up 1/3 column in desktop view.

This is just some more text to wrap around the image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie.

Shopper Marketing Budget Chart
Image + Text: Large Image

This is Image + Text: Large image Setting

Takes up 1/2 column in desktop view. Good for charts when they're narrow enough to display type clearly. 

This is just some more text to wrap around the image. Notice you need more text to wrap around larger images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. 

Next Three Sections Are Image (Only) Widget

3 different settings for size. Images take up half column for small setting to full column for large setting. Useful for big charts and graphics. Optional Captions. 

Pretty Beach Image
Image Only Widget, No Text: Large Image
Pretty Beach Image
Image Only Widget, No Text: Medium Image
Pretty Beach Image
Image Only Widget, No Text: Small Image

This is Background Image + Text

Let's you overprint Title + Teaser Text over a background image.

Image Carousel Widget

3/17/2020 Update: Images in the carousel no longer always crop/scale to 1000 x 500 pixels as before. Instead, they will display in their native proportions, and you can now upload a maximum of 50 images. Woo! Optimal image size to fill the viewport fully is remains 1000 x 500 pixels. 

This is My Aside (or Sidebar)

This is my Aside Text. I can choose to left or right align the Aside. 

This is Aside + Text

That gray box to the right is the aside (sidebar). Just make sure you include enough text in the body copy to wrap around the sidebar. You can align it left or right. 

This is just some more text to wrap around the aside. This is just some more text to wrap around longer Asides. Notice you need more text to wrap around larger images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. This is just some more text to wrap around the image. Notice you need more text to wrap around larger images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. 

Quote Widget

This is the Text Area Box on Quotes, set to appear above the quotation.

This is the Text Area Box on Quotes, set to appear above the quotation.

I am an important person who says important things.
Important Person

Mars, Incorporated

Mars is an American global manufacturer of confectionery, pet food, and other food products and a provider of animal care services, with US$33 billion in annual sales in

This is Buyer's Guide + Text listing

This is just some more text to wrap around the image. Notice you need more text to wrap around larger images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. 

Reaching the Urbanized, Aspirational World Consumer

White Paper + Text listing 

This is just some more text to wrap around the image. Notice you need more text to wrap around larger images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ipsum ipsum. Nulla vel leo vel ex faucibus luctus tincidunt ultricie Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie. Nulla vel leo vel ex faucibus luctus tincidunt ultricies nisi. Ut ac leo pretium nisi consequat molestie.

This is Related Content. Just Add Widget and Select Your Items

This is the Video Widget

Just enter the video URL from YouTube or Vimeo. 

Embedded Podcast Widget

Libsyn and Soundcloud hosting available out of the box.

Text Box Widget

    Text Boxes Widget Box 1

    You can keep adding new boxes with their own subheads and text. 

    Text Boxes Widget Box 2

    And you can specify whether the boxes arrange themselves horizontally or vertically.

    Text Boxes Widget Box 3

    Experiment with what works best!

    I Could Be a Column Heading

    Text Boxes Widget Text 4

    I could be a callout quote

    "Some callout quote."

    I could be a bulleted list
    • Bullet 1
    • Bullet 2
    • Bullet 3

CredSpark Poll/Quiz Embed

Just drop in the paragraph and plug in the Credspark's "slug" text string for the quiz, which usually look this: hello-this-is-a-credspark-quiz

Coral Embed

Call to Action Paragraph

This is the new Call to Action Widget. Just add some optional intro text and a button!

Hey, Click Me!

Add Topic Content Widget

This widget lets you add related content from any Topic of your choice. You can specify the number of articles up to a max of 20 along with the types of content that should be included. You also can specify a heading for the region. 

More Innovation Articles

"About The Author" Widget

Follows below. Adds a little blurb to the author bio page. 

About the Author

Rob is Senior Project Lead for EnsembleIQ. Read More
  • An Attached PDF Download

    239.19 KB
Advertisement
Advertisement