How do I add the CTA Image Paragraph block to a Hugo site?

Add a "block: cta-image-paragraph" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Is the CTA Image Paragraph block free to use?

Yes. Every HugoBlox block is free and open-source under the MIT license — use it in personal and commercial projects, with no attribution required.

Can I customize the CTA Image Paragraph block?

Yes. It exposes 9 content options, and inherits the shared block settings for background, spacing, and colors. You can also describe the changes you want to Hugo Chat AI and it will edit the config for you.

Does the CTA Image Paragraph block work with any Hugo theme?

The block ships in the open-source HugoBlox kit. Add the kit to any Hugo site and the block becomes available in your page sections — there is no theme lock-in.

hugoblox.com/blocks/cta-image-paragraph

Calls to actionFree · MITPreact · interactive

CTA Image Paragraph block

Alternating image-and-text rows with feature bullets and a CTA — tell your story as visitors scroll.

Customize with AI View source

Add it to any Hugo page's sections list — no build step.

v1.0.0Version

9Options

MITLicense

Quick start

Add the CTA Image Paragraph block

Drop this into your page's front matter, under the sections list. Edit the values, and HugoBlox renders the block — no build step.

Add to your page's sections

- block: cta-image-paragraph
  content:
    items:
      - title: Ship polished docs with Hugo Blox
        text: Pair Markdown content with responsive imagery and reusable CTAs.
        image: screenshots/docs.png
        feature_icon: hero/check-circle
        features:
          - Responsive images generated automatically
          - Markdown-first authoring
          - Works with Netlify, Vercel, and GitHub Pages
        button:
          text: Read the guide
          url: /docs/get-started/
      - title: Launch production-ready marketing pages
        text: Use alternating layouts to highlight product benefits.
        image: screenshots/marketing.png

Overview

About the CTA Image Paragraph block

Tell your story with stunning visuals and compelling copy

Engage your audience with the CTA Image Paragraph block - a powerful storytelling component that combines beautiful imagery, descriptive content, feature highlights, and strategic calls-to-action in an alternating layout that keeps visitors scrolling.

✨ Key Features

Alternating Layout: Images automatically alternate left/right for visual rhythm
Responsive Images: Smart image processing with multiple sizes and WebP support
Feature Lists: Highlight key benefits with customizable icons
GIF Support: Full support for animated GIFs alongside static images
CTA Integration: Strategic button placement for maximum conversion
Markdown Rich: Full Markdown support for titles and descriptions
Mobile Optimized: Stacks beautifully on mobile devices

🎯 Perfect For

Product Showcases: Highlight different product features with supporting visuals
Service Explanations: Break down complex services into digestible sections
Company Story: Tell your brand story with compelling narratives and imagery
Feature Announcements: Introduce new features with visual demonstrations
Process Explanations: Guide users through multi-step processes
Benefits Highlighting: Showcase the value proposition of your offerings

🚀 Why Choose CTA Image Paragraph?

Visual Storytelling: Combine the power of images and words for maximum engagement

Conversion Optimized: Strategic placement of features and CTAs guides users toward action

Professional Polish: Alternating layout creates visual interest and professional appearance

Content Flexibility: Support any number of sections with unique images, copy, and features

📊 Engagement Benefits

Higher Time on Page: Alternating content keeps visitors engaged longer
Better Comprehension: Visual-text combinations improve understanding and retention
Increased Conversions: Strategic CTA placement at optimal engagement points
Mobile Excellence: Responsive design ensures great experience on all devices

💡 Design Psychology

Visual Rhythm: Alternating layout creates pleasing visual flow
Information Chunking: Breaking content into sections improves readability
Social Proof: Feature lists build credibility and trust
Action Momentum: Multiple CTAs capture interest at different engagement levels

Perfect for SaaS companies, service providers, product teams, and anyone who needs to explain complex offerings through engaging visual storytelling.

Reference

Configuration

Every option the CTA Image Paragraph block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`items`required	`object[]`	—	CTA sections with media and supporting copy
`items[].title`required	`string`	—	Heading for the CTA item
`items[].text`required	`string`	—	Supporting paragraph (supports Markdown)
`items[].image`required	`string`	—	Image filename in assets/media/. Responsive images are generated automatically (400-1200px). GIFs are converted to webp.
`items[].feature_icon`	`string`	check	Icon used before each feature bullet
`items[].features`	`string[]`	—	Bullet list shown under the paragraph
`items[].button`	`object`	—	Optional CTA button
`items[].button.text`required	`string`	—	Action label, 2-4 words. E.g. 'Read the guide', 'Try it free'.
`items[].button.url`required	`string`	—	Button destination. Use `#<section-id>` to scroll to another section on this page, `/path/` for internal pages, or a full `https://…` URL.

Compose

Works well with

Blocks that pair naturally with CTA Image Paragraph on the same page.

CTA Card Features Hero

Frequently asked

CTA Image Paragraph block FAQ

Add a "block: cta-image-paragraph" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Ready to build with the CTA Image Paragraph block?

Customize with AI View source