Build and launch an Oxygen service website
Build a small service website through six practical stages: plan the content, import native designs, build pages in Oxygen, check real content and prepare for launch.
Before you start
A private WordPress test installation with Oxygen 6, permission to edit pages, familiarity with adding an element and using Content and Design controls. Optional BO elements require the workflow plugin. Keep a recoverable backup. Do not upgrade a production builder to follow this example.
What you will build
Build Home, Services, About and Contact pages for a small service business, with clear navigation, readable layouts and a working contact route.
A reviewed four-page website, a content stress-test report and a launch checklist with evidence and outstanding tasks. Finishing the checklist is not automatic certification.
Progress stays in this browser, not an account. It is not shared between devices. Reset clears only this path.
Step 1 · Browser
Plan the pages and visitor task
Define one audience and one main action for the fictional studio. Draft the purpose of Home, Services, About and Contact before styling them. Use Project Brief if you have the workflow elements installed, or write the same outline locally.
Try it
Write a one-sentence promise, three services and the information a visitor needs before contacting the studio. Use fictional contact details until you prepare a real launch.
Check your result
Each page has a clear purpose. The main action leads to Contact. You have not invented testimonials, client results or business facts.
Step 2 · Oxygen
Start with the native General Website Library
Open the General Website Design Library page and use its documented native Oxygen library URL and access instructions. Add the library through Oxygen’s Design Library interface, then insert an introduction and a process or FAQ design on a draft Home page. This is the native library workflow; it does not require downloading a design-library plugin.
Try it
Replace example text with your fictional studio outline. Change colours, typography and spacing through Oxygen Design controls. Keep the imported elements editable.
Check your result
The designs are ordinary editable Oxygen elements. Save, close and reopen the page to check your changes. If the import reports an error, stop and report it with your Oxygen version.
Step 3 · Oxygen
Build the four pages and navigation
Build Home, Services, About and Contact with native Containers, text, links and Images. Use a consistent heading hierarchy and spacing. Build or reuse the shared header/footer and connect their navigation to the actual pages. A contact form needs its own configured form plugin and verified mail transport; a visible working contact link is sufficient for this project.
Try it
At a narrow breakpoint, shorten a long navigation label and check that headings and buttons still fit. Use an informative image with appropriate alternative text, or omit a decorative image.
Check your result
Every navigation link reaches the intended page. Contact is usable with a keyboard. The main heading describes the page and images do not distort or create horizontal overflow.
Step 4 · Oxygen
Present services with an optional estimate or comparison
Keep a clear text description of each service first. If useful, add BO Service Calculator or BO Package Compare using the workflow plugin. Set content and Design controls in Oxygen. Enter explicit fictional sample prices and label the estimate as illustrative. You can finish this step with simple service descriptions instead.
Try it
For an estimate, enter base 1,000 and a quantity priced at 200; verify quantities 0, 1 and 3 produce 1,000, 1,200 and 1,600. For a comparison, enter two packages with one shared feature and one difference.
Check your result
Visitors understand the service without depending on the widget. Calculations match manual checks. Package differences remain readable on mobile, and contact links work. No payment or binding quotation is implied.
Step 5 · Browser
Check layouts with realistic content
Use the browser Responsive Content Tester with exported HTML and inline styling, or the WordPress plugin on staging for a real Oxygen page. Try long headings, missing images and narrow widths. Check image size with Image Optimizer, colour pairs with Contrast Checker and actual internal links with a scan or manual review.
Try it
Try 375, 768 and a desktop width. Inspect overflow, clipping, wrapping, keyboard focus and the contact route. Change the original layout through Oxygen controls, then repeat the tests.
Check your result
The tested content stays readable and controls remain usable. Preview tools do not save content changes. Automated overflow and colour checks are limited evidence; record anything still needing manual review.
Step 6 · WordPress
Prepare a launch with evidence
Open the launch checklist and record actual checks. Review page titles, descriptions, canonical URLs, public indexing settings and sitemap entries with your installed SEO setup. Verify contact delivery by receiving a real test message. Review backups, permissions and outstanding issues before making the site public.
Try it
Record evidence for contact delivery, navigation, mobile layouts and intended sitemap URLs. Leave incomplete checks open. On staging keep indexing disabled; review production visibility only when a launch is authorised.
Check your result
The checklist distinguishes completed work from assumptions. You can show what was tested, what still needs work and who will maintain the website. Do not submit a blanket reindexing request.