Skip directly to search Skip directly to A to Z list Skip directly to navigation Skip directly to page options Skip directly to site content

Images in "Image With Caption" Style

How to Build These Modules

When you insert an image into a page or module, you must select an Image Type in the image Settings form. The Image Type specifies how you want to use the image:

The examples on this page are all inserted with the Image Type set to “Image with Caption.”

Examples 2, 3, 4, and 5 illustrate the various caption layout and style combinations. These images have been inserted directly in Visual Composer, with the widths for this fairly large image constrained by Visual Composer columns.

Example 1 shows an image with caption inserted into a text-box module with the Alignment set to “Float Left.”  The “More” button URL has been removed for the image with caption because the text-box module has a More button. For aesthetics, the CSS class “margin-right-twenty” has been added to the image.

All examples on this page have been inserted with “Include Title” checked (“Example 1,” “Example 2,” etc.), but you can leave this option unchecked if you do not want to display the image title.

Floating Image with Caption

Hospitals play a vital role in supporting moms to breastfeed, and that support has improved.

Example 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

More

Hospitals play a vital role in supporting moms to breastfeed, and that support has improved.

Example 2 Caption Layout: Over Image.
Caption Style: Black Text / White Background.

More

Hospitals play a vital role in supporting moms to breastfeed, and that support has improved.

Example 3 Caption Layout: Over Image.
Caption Style: White Text / Black Background.

More

Hospitals play a vital role in supporting moms to breastfeed, and that support has improved.

Example 4 Caption Layout: Below Image.
Caption Style: White Text / Black Background.

More

Hospitals play a vital role in supporting moms to breastfeed, and that support has improved.

Example 5 Caption Layout: Below Image.
Caption Style: Black Text / White Background

More

TOP