Build your Fieldwork site.
Setup, content editing and practical guidance for your new theme. Version 1.0.
Start here
Fieldwork is a HubSpot website theme for environmental consulting and engineering practices. It includes 38 custom modules, 36 reusable sections, page and landing layouts, native blog templates and ten system templates.
Install Fieldwork from your purchased assets, then create a website page and choose a Fieldwork template. Begin with Home, Services, Projects and Contact. Save a draft before changing your existing live site.
Alder Environmental, its team, projects and business details are fictional demonstration content. Replace the sample content and links before publishing your own site. Landscape imagery is original generated demonstration artwork, supplied with the theme.
Brand and theme settings
In the page editor, open Design, then Edit theme settings. The Colors group controls forest, lime, paper, white, main text, supporting text and borders. Typography sets the display and body families and heading sizes. Fieldwork bundles Instrument Serif and Manrope with their open font licenses.
Layout controls the content width, side gutters, section spacing and default image corners. Buttons, forms, links, header, footer, blog and system pages have separate settings. Make changes in preview, check desktop and mobile, then publish the theme settings when ready.
Use a child theme for code changes so future updates can be adopted safely. Keep custom CSS in the child theme and preserve the parent module and template paths.
Header, footer and navigation
The header and footer are global content. Open either from the page editor and select Edit global content. Changes apply across every page using that global partial. The header supports a text brand or uploaded logo, repeatable navigation items, a project enquiry action and a mobile menu. The footer provides contact details, link columns and a short practice description.
Update every destination to your own published pages. Use root-relative links for pages on the same domain and full addresses for external destinations. Fieldwork supports HubSpot's language switcher when translated page groups are configured. Translation is managed in HubSpot, rather than generated by the theme.
Pages and reusable sections
Templates are starting compositions. Add, remove and reorder modules in their drag and drop areas. Reusable sections provide a complete module with sensible defaults. Content modules provide surface, spacing and divider controls. Image corner controls appear only where supported. Header and footer appearance uses theme settings. Page Introduction shows the eyebrow in enabled breadcrumbs or above the heading when breadcrumbs are disabled. Add a photograph to show it; clear the photograph to remove it.
Use the landscape home for a project-led practice or Studio Home for a more editorial introduction. Service, sector, project, specialist, role and article detail templates can each create any number of pages. Landing pages simplify the header to keep attention on a guide or consultation.
Use one main heading per page. Detail headings should use H2 or H3 when a page introduction is already present. Add descriptive image alternatives and check all links after duplicating a page.
Expertise and project experience
Expertise Index provides numbered service rows. Service Finder maps visitor questions to editable service recommendations. Change its stages, descriptions and destinations in the module fields. Deliverables Register, Scope Comparison, Survey Calendar and Fieldwork Timeline explain the work and what a client can expect.
Project Showcase highlights selected case studies. Project Atlas combines a schematic map with an accessible project list, keyword search and discipline filtering. Add each project's title, discipline, sector, region, year, summary, image, destination and marker position. Marker positions are percentages within an illustrative map. This is not a geographic mapping service or a source of precise coordinates.
Project Facts and Project Story organize a case study's context, approach and outputs. Use real permissions and accurate outcomes when replacing the fictional examples.
People, careers and events
Team Directory filters specialists by expertise and searches their names and descriptions. Link each person to a Specialist Profile page. Initials-based profile artwork provides a consistent option when headshots are unavailable.
Career Openings lists editable roles and destinations. Role Description covers responsibilities, relevant experience and application information. Event Programme and Event Agenda support session summaries, speakers and schedules. Replace all demonstration dates, roles and session descriptions with your own current information.
These are content modules. They do not provide applicant tracking, ticketing, bookings or webinar hosting. Link to your chosen service or use an appropriate HubSpot form when you need those workflows.
Forms and project brief builder
Create a form in HubSpot, then select it in Consultation Panel. Choose an inline thank-you message or an existing thank-you destination. Publish the form and page, then test with a clearly identified internal submission. Configure follow-up, consent and notification settings in HubSpot for your own process.
The theme contains no fixed customer form identifier. Its standalone default shows a contact action until you select a form. The public demo uses a separate demonstration form and must not be used for confidential project details.
Project Brief Builder is a browser-only preparation tool. Visitors enter a project name, choose a stage and tick the information they have. The tool assembles a note they can copy into an enquiry. It does not send data, create a contact or store a brief. Clipboard access requires a secure page and browser permission; a manual selection fallback is available.
Resources, documents and the blog
Resource Library supports keyword search and format filtering across editable resource cards. Document Register organizes file or page links by category. Upload your own documents to HubSpot Files, choose suitable visibility, then link them from the module. Guide Feature pairs a resource with an image, checklist and action.
For a native blog, create or select a HubSpot blog in Settings, Content, Blog. Assign Fieldwork's Blog Listing and Blog Post templates. Add real authors, topics, featured images and post content in HubSpot. Journal Posts can pull recent native posts when a blog is selected or show editable starter cards.
The website resource article template is separate from native blog posts. It is useful for evergreen guides with chapter navigation. Blog comments, subscription and membership features depend on the relevant HubSpot configuration and plan.
System pages and accessibility
System pages are coded HTML/HubL templates with a specific template type. Assign error, password prompt and search templates in HubSpot website page settings, and subscription templates in email settings. For the included membership sign-in, password reset request and new-password templates, open Settings > Content > Private Content, select your domain, then choose each template on the Pages tab. HubSpot supplies the native forms and handles authentication, permissions and password resets. Customize system template markup and supported form text parameters in Design Manager, ideally in a child theme. The native membership forms are protected from editing in the ordinary page editor because they do not have a supported module settings panel there. The /system-preview/ website pages demonstrate appearance only; configure and test actual workflows in the relevant HubSpot system settings. See HubSpot's private content setup guide.
The theme includes visible focus states, keyboard-operable controls, skip navigation, accessible input labels, a list alternative to the project map and reduced-motion support. The image gallery uses a native dialog with Escape support and returns focus to its trigger.
Your final accessibility depends on your content, chosen colors and installed scripts. Keep strong color contrast, use meaningful labels, avoid text baked into images and check the page at narrow widths and browser zoom.
Performance and publishing checklist
Compress replacement photographs before uploading, use appropriate dimensions and keep each asset below the marketplace limit. Give the first meaningful hero image priority and lazy-load images lower on the page. Avoid adding multiple analytics or animation libraries that do the same job.
Before launch, replace sample business details, confirm navigation and document links, test forms, review search metadata and social images, check desktop and mobile layouts, assign system templates and verify the connected domain's HTTPS status.
Survey windows, scope examples and project figures in the demo are illustrative content, not environmental or regulatory guidance. Have a relevant specialist review your published service descriptions.
Troubleshooting and support
If an image is missing, confirm the file is public and reselect it in the image field. If a form is absent, select a published form in Consultation Panel and confirm its visibility. If changes appear on one page but not another, check whether you edited a local module or global content, and publish the correct draft.
If filters return no results, reset them and check the spelling of category values. If a map marker seems misplaced, adjust its X and Y percentages and verify that its project remains available in the list.
For theme support, contact Hoplyy through the support details on your marketplace purchase. Include the page URL, browser, screen width and a description of the issue. Never send account passwords or private access tokens. Version 1.0 documentation accompanies the packaged source, field inventory and asset licenses.