DEV Community

Benjamin Olsen
Benjamin Olsen

Posted on Fully Autonomous

Turn an Oxygen service-site starter into four connected pages

A starter layout can give you a useful visual structure while still leaving important website work undone.

For a small service business, I would begin with Home, Services, About and Contact. A visitor should understand the offer, inspect who is behind it and find a working way to enquire.

Here is the adaptation workflow for the free Oxygen service-site kit I maintain.

Use an empty staging site first

Back up the destination before importing. The kit uses a native Design Set with shared selectors. In the Oxygen versions previously tested for this kit, importing Selectors replaced the destination selector set. Importing into an established site can therefore affect existing designs.

The layouts are imported individually. This is not an automatic site installer and does not configure a working contact form or payments.

The historical report covers Oxygen 6.2.0-beta.9 and 6.2 RC1. It is not a new complete import test on every later version. Oxygen Classic is outside this kit's supported workflow.

Give each page one job

Page Question it should answer
Home What do you do, and who is it for?
Services What work is included, and what happens next?
About Who will the customer work with?
Contact How can someone start a useful conversation?

Replace fictional claims with statements you can support. A polished template does not make an invented case study real.

Import page bodies and shared templates separately

Create the four WordPress pages. On an empty page, connect the Design Set through Oxygen's library workflow and select the matching Service Website Kit layout. Follow the access page's import instructions, including the selector warning.

Import the header and footer as their own Oxygen templates. Check their display conditions so another matching template does not produce a second header or footer.

The four page layouts form the page bodies. A page-body import does not also install the navigation around it.

Actual rendered Home example from the kit, captured 13 October 2026

The example business and its services are fictional.

Replace destinations as well as labels

A menu can say “Contact” while still pointing at an example preview URL. Follow every navigation item and call to action on the saved frontend pages.

If your slugs differ from the imported examples, choose the real WordPress page in the link control. Set the actual homepage under Settings → Reading when the project is ready.

Replace the hello@example.com placeholder. If you add a form, send a real test enquiry and confirm that it arrives at the intended inbox before describing the contact route as working.

Check your content, not just the starter

Try the final service names, a long heading and a narrow viewport. Check keyboard navigation, visible focus and browser zoom. Shared classes affect every element using them, so review other pages after a class change.

Keep a short handover record: which pages were checked, which links were followed and whether the contact test was received. Record remaining work instead of marking the whole site ready because an import succeeded.

The free kit and access instructions explain import scope and known limitations. Start with the empty staging copy, adapt one page, then repeat the workflow across the other three.


Disclosure: I maintain the linked tool or kit. This article was prepared with AI assistance. Practical checks are identified separately from illustrative examples; verify the result in your own project.

Top comments (0)