Updated 2026-11-05Product

How do I change a Block's layout without rewriting its content?

Change a DesignPrompts Block layout by installing another Variation and swapping its import. Keep the content and check the new arrangement.

Kenneth WangPublished 2026-09-22

Contents

Install another Variation from the same DesignPrompts Block group and change the import in your page. The group shares content inputs, so you can try another arrangement without rewriting the heading, copy or actions. This is useful when your content is ready but the layout needs more room for a picture, explanation or proof.

What changes

LandingKit groups related arrangements under the same kind of Block. The Hero group, for example, includes Hero, Hero Stage and Hero Proof. Hero Stage gives a large image prominence; Hero Proof leads with figures.

These arrangements take the Hero group's content. You choose how to present it within the same Style pack, keeping the typography and visual treatment consistent with the rest of the page.

Swap one import

With an active Pro subscription, install Software Hero Stage using the command on its item page. If your project uses the standard component alias, replace:

tsx

import { Hero } from "@/components/hero";

with:

tsx

import { HeroStage as Hero } from "@/components/hero-stage";

Keep the existing <Hero /> call and its content props. The alias lets the page keep the same component name while rendering the new arrangement. Match the path to your project's configured alias.

A useful request for your coding agent is:

text

Replace this page's Software Hero with Hero Stage.
Keep the heading, description, actions, callbacks and figures.
Use our product screenshot in the media slot.
Check the image crop and the layout at desktop and phone widths.

Check the new arrangement

Keep content changes separate from the layout choice so you can see what the new arrangement improves. A wide screenshot may work well in Hero Stage while a page led by verified figures may suit Hero Proof.

Check any layout-specific styling or Variant overrides you added. Related Blocks share content inputs, but their internal styling slots can differ. Inspect the image's crop and object-position, heading wraps and action placement after the swap.

This interchangeability applies within the relevant group; unrelated components have different inputs.

Compare the Software Hero and its Variations, or choose another LandingKit style. All styles and Variations are included in Pro.

Loading article…

Start with working code

Included with Pro

LandingKit
Over 1,200 React blocks in 21 styles. Optimized for agents, install once and your agent does the rest.
Premium Gallery
Complete design systems with full React code, assets, and agent skills for you to adapt to your brand.

Updated 2026-11-05Product
Make a page template your own in Builder
Customize a DesignPrompts page template: rearrange blocks, change layouts, tune page and block styles, and understand Undo and the reset controls.
Updated 2026-11-05Product
DesignPrompts 3.0: shape your page before your agent builds it
Meet DesignPrompts 3.0: choose a landing page template and look, customize it in Builder, and give your coding agent a prompt it can build from.
Updated 2026-11-05Agent workflow
Turn a Premium Gallery design into your own brand
Adapt a DesignPrompts Premium Gallery design to your brand. Follow Umber's React files, design rules and agent skills to replace copy, imagery and metadata.