Use a short sequence when customers need to understand the order of events. Start each step with an action and explain the result. Use as many steps as the real process needs, rather than promising three steps for every service.

A timeline for a longer engagement

Show stages when a project spans several milestones. Explain what the customer receives and what they need to provide at each stage. Only state timeframes you can reasonably commit to.

An illustrated process for unfamiliar work

Pair a stage with a useful image when the work is difficult to picture. Keep the explanation in text as well, so the image is not the only way to understand the step. Check the sequence when columns stack on a phone.

Put it into practice

Illustrative consulting process: discuss the problem, agree the scope, then review the recommendations together. Explain what information the client should bring and what deliverable they receive. Replace this with your actual process.

Before you publish

Make responsibilities and the next action explicit. A process layout explains your service; it does not automatically schedule appointments or manage project delivery.

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.