Media

Image Content

An image beside text in a responsive two-column layout.

Live demo

See it in action

An image beside your text

Image Content pairs a responsive image with rich editor text in a two-column layout. Flip the side, change the split ratio, and it stacks cleanly on mobile.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="image-content ic-a22dd024">
					<div class="fw-row align-items-center g-4">
						<div class="the-image fw-col-12 fw-col-md-5">
							<img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-4888983f0675.jpg" alt="" class="img-fluid rounded-3 shadow w-100" loading="lazy" decoding="async" style="aspect-ratio:4 / 3;object-fit:cover" />
						</div>
						<div class="the-content fw-col-12 fw-col-md-7">
							<h2>An image beside your text</h2>
							<p>Image Content pairs a responsive image with rich editor text in a two-column layout. Flip the side, change the split ratio, and it stacks cleanly on mobile.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Image Content shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free