A field guide to feeling good.

Install Happy, create a page and choose a Happy template. The four homepage designs are starting points. Every content section can be moved, removed or reused. Replace the sample studio, people and project details before publishing.

Open theme settings to edit the page and text colors, four brand accent surfaces with separately configurable text colors, heading and body fonts, heading sizes, section spacing and content width. Buttons have separate default and hover text and background colors. Forms have dedicated label, field, error and submit controls. Check contrast after changing colors.

The header and footer are global content. Edit the brand name, optional uploaded logo, links and call to action in their global editor. An uploaded logo replaces the text brand automatically. Set each link destination for your own site. Navigation can contain as many or as few items as you need. Landing pages have their own simpler global header.

Create a multi-language variation from the page actions in HubSpot, choose its language, translate the content and publish it. Keep translated pages in the same multi-language group so HubSpot can provide the correct destination for each page. The Site Header automatically displays a language dropdown when the current page has more than one language available. Edit the global Site Header and open Language switcher to choose language names in their own language, the current page language, or both. The accessible label is editable so you can translate it too. Translate global navigation and footer content using HubSpot global content language variations. The landing page header has the same language controls. For blog translations, configure the blog language variations in HubSpot. A page with only one language does not display an empty switcher. Visitors can open the dropdown with a keyboard and close it with Escape.

Hero Composition uses a standard HubSpot image field and an optional Desktop video (MP4) file picker. Video plays muted on desktop; the image is used on mobile and with reduced motion. For a forward then backward loop, select that loop mode and upload a prepared forward-and-reverse MP4 in the additional file field. This plays as a continuous file, without browser reverse-seeking. The video has a pause control and also follows the header motion control. Upload your own image and video, choose the media fit and shape, and adjust the layout. The title, supporting text and buttons stay separate and editable. Clear both video files and the image to use a text-only hero. Image Feature provides a reusable image, optional caption and optional link for any column.

Upload or replace the Hero Composition image in the standard image field. Clearing it removes the image and the layout expands to fit the text. Other modules render optional images only when a source exists. Project Story offers optional images within each chapter, so its image radius applies to those images. Avoid placing essential text only inside an image.

Project Grid and Project Explorer use standard image fields for every cover. Upload a photo, screenshot, campaign artwork or product mockup, and edit its alternative text. Clear an image to show a text-only card. Project title, summary, category and link are separate content fields. Demo graphics are ordinary replaceable assets, with no preset brand graphics or face controls.

Open Add > Sections to use a reusable section, or add individual modules to a drag and drop column. Modules have surface, content width, spacing, optional border and reveal controls. Width and layout adapt to their column. A hero heading defaults to H1; use H2 or H3 for additional hero-style modules lower on a page. Keep one H1 per page.

Select your own native HubSpot form in Form Panel. The distributable theme contains no portal form IDs. Configure form response settings and notifications in HubSpot. Journal Posts can use a selected blog or editable starter articles. Assign Blog Listing and Blog Post in the blog settings. Blog publishing, membership and platform features depend on the account subscription.

Project Explorer, Team Directory and Resource Library filter their own editable items. Feature Tabs support arrow keys, Home and End. Quote Carousel is manual. Image Gallery opens a dialog that closes with Escape and returns focus. Brief Builder creates a local note; it does not submit data. Pair it with Form Panel when you want an enquiry flow.

Theme settings can disable decorative motion globally and change the overall duration multiplier. The header pause control stops decorative loops. Marquee Strip has a separate speed and direction. Buttons and cards have restrained hover interactions. The theme respects the visitor’s reduced-motion preference. Scroll reveals are optional and are off by default.

Set page titles and descriptions, check navigation and footer links, replace fictional content, verify image alt text, and test forms with your real account settings. Review at desktop and mobile widths and with a keyboard. Assign system templates only when you are ready to change the corresponding account setting. Contact stephen@hoplyy.com for theme installation support or optional professional website setup.