Images in "Image With Caption" Style
How to Build These Modules
- Image Only
- Image with Text/Links — “Image with Caption” Style
- Image with Text/Links — “Photo Box” Style
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
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.
- Page last reviewed: June 12, 2017
- Page last updated: June 12, 2017
- Content source: