---
title: "Can I edit the look and feel of the Hero section?"
description: "Learn to customize your hero section's layout, images, text, and styles via LandingRabbit's AI-powered page editor"
url: "https://landingrabbit.com/documentation/edit-the-look-and-feel-of-the-hero-section"
lang: "en"
---

# Can I edit the look and feel of the hero section?

Yes, you can.

The hero section in LandingRabbit gives you a lot of control over how it looks and what it includes.

## Layout options

Click the layout options icon at the top of the preview page.

![Screenshot of LandingRabbit website showing layout options for media placement in a B2B website builder.](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/85e0384761ddafcaa74fa1726cc9d8340ac4cc2b--960w.webp)

You'll see three options:

*   Media left
*   Media below
*   Media right

This controls where your image, video, or embed code (like a form) appears relative to your text.

## Image fit setting

You can choose how your image fills the space:

*   **Fill**: the image fills the entire media area
    
*   **Free ratio**: you pick the exact dimensions and ratio

If you know exactly what you want, use free ratio.

## Media visibility

Under media visible, you can choose:

*   **Always**: show on all devices
    
*   **Desktop only**: hide on mobile and tablet
    
*   **Hide**: remove the media placeholder entirely

This is useful if you want a text-only hero or need different layouts for different screen sizes.

## Edit styles with AI

Click Edit styles on the page preview.

![Screenshot of a B2B website builder interface by LandingRabbit, featuring a hero section with design changes.](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/106c0d189a52d3dbe428749848d43c12913f2482--960w.webp)

You can ask for changes in plain language. For example, you can:

*   Change background color or upload a background image
    
*   Add a secondary background element and change its color
    
*   Change text sizes, colors, and even [fonts](https://landingrabbit.com/documentation/use-google-fonts-with-landingrabbit)
    
*   Adjust button sizes and colors
    
*   Increase or decrease section width
    
*   Change how much space the image takes versus the text
    
*   Change the gap between the text content and media
    
*   Change every text item width separately
    
*   Move the text content to left with the vertical layout

![Landing page builder dashboard with a coaching hero section, AI assistant panel, and publish/export controls](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/60e3569e9b2137a7fc0291a2220ba8ae5a2d83b9--960w.webp)

Just describe what you want, and the AI will apply it.

## Add or remove text elements

In the page editor, click the add an element icon (the plus sign).

![Screenshot of a landing page builder interface showing various elements like headings, testimonials, and call-to-action.](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/894b19f3fa79abded5a0957cd9e778a6c264b36a--960w.webp)

You can add:

*   Eyebrow
    
*   Main heading (H1)
    
*   Section heading (H2)
    
*   Subheading (H3)
    
*   Text block
    
*   Boxes
    
*   Testimonials
    
*   Call to action
    
*   Smallprint

Add as many as you need. You can also change their order by dragging them around.

![LandingRabbit page editor and drag n drop handle in the hero section](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/76cb0d838dc5996605e25375944e53567342dcff--960w.webp)

The hero section editor gives you the flexibility to build almost any hero layout you want.

Testimonials in the hero can help you convince buyers.

![LandingRabbit hero example with a testimonial](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/826b591b94947c9b3c4be5e830f1599d03d32b63--960w.webp)

Boxes give you a chance to highlight achievements and key features.

![LandingRabbit hero example with boxes showing the key features](https://d2txn9w4uujjus.cloudfront.net/images/019514e0-fe0a-7a1b-8ec6-a585eaf24e4d/e0306b7e73e88f9f84359ac14288d07be6c1dce2--960w.webp)

You can control the structure, the visuals, and the text elements without touching any code.