What changes can I make to Boxes layout?

The Boxes layout is one of the most flexible sections in LandingRabbit.

You can switch between different display styles, adjust how images appear, reposition the section header, turn box items into links, add hover effects, and fine-tune spacing, colours, and sizes using AI.

Here's what you can change.

When making changes, start by clicking the layout options icon in the page preview.

You'll see three layout types:

• Boxes: includes images

• Text boxes: no images, just text content

• Icon boxes: lets you add icons from our icon gallery

In the layout options, you'll find the image fit setting.

This controls how images appear inside their container:

• Fill: the image stays within a fixed size container. On smaller screens like mobile, the image won't grow too large, but it may be cropped. Make sure important parts of your image won't get cut off.

• Free ratio: the image displays at its exact dimensions without cropping. You'll need to make sure all images have consistent proportions, or the layout might look uneven.

Choose Fill if you want consistent sizing across all boxes. Choose Free ratio if you want full control over image dimensions and don't want any cropping.

By default, the section header sits above the boxes.

But you can move it to the left instead.

When you do this, the boxes shift to the right and display in two columns. The header content on the left shows in full, including any CTA buttons or eyebrows you've added.

In the text editor, click the link icon next to the item, then add a URL under Item link. You can paste a link, search for one of your pages, or type # to link to a section on the same page.

Visitors can then click anywhere on the item to open the link. Any buttons or text links inside the item keep their own links.

To make box items react when visitors hover over them, click Edit styles and turn on Items on hover.

You can then set:

• Apply to: choose All items, or Linked items to apply the effect only to items that have a link. The panel shows how many items are linked (for example, "2 of 6 items linked").

• Item hover effect: make the item Grow or Lift.

• Also highlight on hover: highlight the eyebrow, title, text, or button when someone hovers.

• Duration: set how fast the effect plays, in milliseconds (250 ms is a good default).

To change colours on hover, describe what you want in the Edit styles chat, for example "change the box background to light orange on hover".

Tip: hover effects work best on linked items. They show visitors that the box is clickable.

Click the edit styles icon to make detailed changes using natural language.

You can ask LandingRabbit, for example, to:

• Increase or decrease padding at the top and bottom of the section

• Change the page background colour (including gradients)

• Upload a background image for the section

• Change font sizes, weights, and colors

• Add a background colour to each box item

• Add border or shadow to each box item

• Adjust the corner radius of the boxes

• Add a hover effect to box items, like grow, lift, or a colour change

• Change the space between boxes, both vertically and horizontally

• Adjust spacing between header and items and all titles, descriptions, CTA buttons, and eyebrows

Just describe what you want to change, and LandingRabbit will apply it for you.

See more detailed document on how to edit the Boxes section look and feel.

When you hover over any title, description, or item in the page preview, you'll see helpful tips.

These tips show you what each element is called.

You can copy those names and paste them into the chat when asking for changes. This helps LandingRabbit understand exactly what you want to adjust.

If you have questions about what you can achieve with LandingRabbit's style edits, send us a message through [email protected], Slack, etc.