Use a grid when visitors need to compare a small set of offers. Give each card a clear service name, the problem it solves and one next step. Keep descriptions similar in length so one offer does not dominate by accident.

Image cards for visible work

Choose image cards when a photograph helps explain the service, such as a completed renovation or a workshop. Use your own work and check the crop on a phone. Decorative images should not replace useful details about the offer.

A spotlight for one main offer

Give one service more space when it is the main reason people visit. Explain who it is for, what is included and how to enquire. Put secondary services further down the page rather than giving every offer equal weight.

Put it into practice

Illustrative consulting example: separate an initial assessment, an implementation project and ongoing advice. Describe the deliverable for each, then link to the relevant enquiry or detail page. Replace these example offers with services you actually provide.

Before you publish

Read only the card headings: can a new visitor tell the offers apart? Check every button destination and make sure the same information is readable on a phone.

From a layout to your own page

Open a section and compare its phone and desktop previews. Colors and fonts here help you explore a direction.
Choose Add to Pineapple, sign in and select your website and page. Review the layout in your website’s own colors and fonts before inserting it.
Replace the sample content, check links and form settings, then save your changes. Reload to check the saved result; publish when you are ready for visitors to see it.

Looking for a complete site? Browse website templates. For editing controls, read the editing guide.