A photography site has one job that most business sites do not: the work has to land before anything else is read. Someone arrives from an Instagram link or a search for a wedding photographer in their city, and the first frame decides whether they scroll. Everything after that — the pricing, the process, the contact form — only matters if the first frame held them.
That makes photography sites easy to get wrong in a specific way. Either the design competes with the photographs, or the site is so stripped back that a visitor who is ready to book cannot find out what anything costs or how to reach you.
This is how to build one on HubSpot CMS: the pages you need, how to structure the work, and the parts photographers usually discover too late.
Fewer than most people build, and in a specific order.
You do not need a page per shoot. You need a portfolio structure that scales as the work accumulates.
The most common mistake is a portfolio organised by chronology or by personal preference. A visitor looking for a family portrait photographer does not want to scroll past four editorial fashion sets to find out whether you shoot families.
Group by discipline first — weddings, portraits, editorial, commercial, fashion, travel — and let each group hold as many projects as it needs. A category listing that filters is worth more than a beautiful single grid, because it lets a visitor self-select in one click and it gives you a URL per discipline that can rank on its own.
Each project page then wants the same skeleton: a hero frame, a short account of what the work was, the sequence of images at full width, and a way to move to the next project without going back to the index. Photographers lose visitors at the end of a project page more than anywhere else on the site.
Grid layout gets most of the design attention and the lightbox gets almost none, which is backwards. The grid decides whether someone stops. The lightbox is where they look at your photographs.
What a lightbox needs to do: open fast, fill the screen, move with arrow keys and swipe, carry a caption if the image needs one, close on escape, and return focus to the tile it opened from. That last one is an accessibility requirement and almost nothing gets it right.
Give yourself layout options too — bento, masonry, and an equal grid all read differently depending on whether your frames are consistent or wildly varied in shape. And leave room for motion: a short muted clip sitting in the grid beside the stills is often the strongest thing on the page.
Two devices are worth adding beyond the grid, because they answer questions a still frame cannot.
A before-and-after slider — a draggable divider that wipes one image over another — is the clearest way to show retouching, a colour grade, or restoration work. Clients paying for post-production want to see what post-production buys them, and a slider shows it faster than any paragraph can. Our Before and After module handles it on HubSpot.
Hotspots pin markers to points on an image and open a small card when clicked. The use here is annotation rather than portfolio: the lighting setup behind a frame, the gear that shot it, or the details in a wide image a viewer would otherwise scroll past. It belongs in behind-the-scenes posts and gear breakdowns, and our Image Hotspot Pro module covers it.
The instinct is to leave pricing off and make people ask. The reasoning is that a conversation converts better than a number.
What happens in practice is that you spend your week answering inquiries from people who were never going to afford you, and you lose the ones who assumed you were out of reach and never wrote. Both of those cost more than publishing a starting figure.
You do not have to publish a full rate card. A starting price per discipline, a couple of package tiers, and a line about what changes the number does the qualifying work for you. Add-ons — extra hours, a second shooter, albums, rush delivery, travel — belong on the same page, because they are the questions that arrive by email otherwise.
An email address in the footer is not a contact strategy. The inquiry form is where the site pays for itself, and on HubSpot it should be a real form wired into your CRM, so an inquiry creates a contact and a deal rather than sitting in an inbox.
Ask for what you need to quote: date, location, discipline, and a sentence about the shoot. Ask for nothing else. Every additional field costs you inquiries, and you can learn the rest on the call.
Then connect it: a thank-you page, a confirmation email, and a follow-up if you do not reply within a day. Photographers lose more work to slow replies than to price.
Commercial and editorial clients will ask about usage rights before they ask about price. If your site does not address licensing anywhere, you signal that you have not worked at that level — and you invite the negotiation that starts from the assumption that the images are theirs forever.
A short, plain section on how you license work, what a standard usage term looks like, and how extensions are priced will do more for your commercial rate than any portfolio change. It belongs on the services page or a service detail page, not buried in terms.
This is where photography sites break, and it is the part that affects your search rankings directly.
A full-bleed hero image and a grid of high-resolution frames is the heaviest kind of page on the web. Core Web Vitals are a ranking factor, and Largest Contentful Paint is measured on exactly the element you care about most: the hero photograph.
What to do about it:
A photography site that takes six seconds to show its first photograph has already lost the visitor it was built for.
Scroll animation suits this kind of site. Sections stacking over one another, images drifting inside their frames at their own speed, headings filling in word by word as they cross the viewport — it reads as craft when it is done with restraint, and it holds people on the page longer.
Two things have to be true for it to be worth having.
First, it has to be switchable. Some clients want the motion and some want a page that scrolls plainly, and that should be a setting rather than a rebuild.
Second, it has to respect the visitor. Anyone browsing with reduced motion enabled at OS level should get the calm version automatically, with the layout left stacked in place and nothing hidden. Motion that hides content until an animation fires becomes an empty page for those visitors, which is both an accessibility failure and a conversion one.
Photographs are opaque to a crawler. Structured data is how you tell search engines what they are looking at.
Worth marking up: your studio as an organisation with a location and service area, each project as creative work, your services, your reviews, and your FAQ. Review markup in particular earns the star ratings that lift click-through, and it matters more in a field where the decision is largely about trust.
Local intent runs through everything here. "Wedding photographer" plus a city name is the search that books work, so your location, service area, and the places you travel to should appear in your copy and your markup rather than only in a footer.
Building this from scratch is eight to sixteen weeks with a designer and a developer, most of it spent on the portfolio architecture and the gallery behaviour rather than the visual design.
Starting from a theme built for the purpose, a photographer working alone gets a site live in a week or two. The time goes into selecting and sequencing the work, writing the service pages, and setting the prices — which is where it should go.
Lumen scrolling end to end. No sound.Lumen is our HubSpot CMS theme for photographers and creative studios, and it is built around everything above. Full-bleed heroes that take a still or a muted video. A portfolio index, single project pages with a pager, and a standalone gallery with a lightbox. Services and service detail, pricing with tiers and add-ons, and a contact form tied to a HubSpot form.
The scroll system — stacking sections, framed parallax, word-by-word reveals, and a card carousel turned in real perspective — runs on GSAP and Lenis, and stands down from a single theme setting or from the visitor's own reduced-motion preference.
Colour, type scale, spacing, radii, button shape, and form input styling are theme settings wired to CSS variables, so the whole site repaints from a handful of fields. Monochrome by default, with Urbanist, Public Sans, and an Instrument Serif accent.
You can walk through the demo, or read what ships with it. If you would rather have it installed and your work migrated for you, tell us what you shoot.