So, you're ready to build your site. Here's where it starts to feel real.
Design is often the first thing people touch in Joy and for good reason. It's easier to picture your event when you can see what the site might look like. Pick a layout, choose some colors, find a theme that feels right. You can always come back and adjust, but starting here helps everything else fall into place.
This guide covers how to design your site: layouts, headers, colors, fonts, and themes.
Getting Started
From your Event Dashboard, click the Design icon. You'll see your site preview on the right and all your design options in the left panel.
Site Layout
Your layout determines how your site is structured and how guests navigate through it. You have three options:
Split View displays your content horizontally with photos on the left and information on the right. This layout works well if you want your images to stay visible as guests scroll through your details.
Classic Navigation organizes your content across multiple linked pages with a navigation bar at the top. Guests click through each section like a traditional website. This layout gives each page room to breathe and works especially well if you have a lot of content to share.
Simple Scroll places all your content on one continuous page. The navigation bar still appears at the top, but instead of loading separate pages, the links scroll guests smoothly to each section. This layout keeps everything in one place and works well for shorter, focused sites.
Extra Design Options for Simple Scroll and Classic Navigation
Simple Scroll and Classic Navigation include additional polish options: graphic accents, transparency, and page shadow.
Graphic Accents
Graphic accents are small decorative emblems that appear beneath your photos.
In the left panel, click Art
Select a design theme
Click Graphic Accent (the blue link at the top)
Choose your accent
The accent will appear below the photo in the preview
Page Shadow and Transparency
These options adjust how your page background looks. Page Shadow adds a soft border around the content area for depth. Transparency lets your background theme show through subtly for a lighter feel.
In the left panel, click Color
Scroll down to Effects
Check Page Shadow to add a soft border around your content
Check Page Transparency to let your background theme show through
Page Shadow:
Page Transparency:
Hero Design
Your header is the first thing guests see when they visit your site. For Split View, it sits on the left side. For Classic Navigation and Simple Scroll, it appears at the top.
You can choose between Photo Headers and Video Headers (video is available for Classic Navigation and Simple Scroll only).
Photo Headers let you upload one or multiple images and adjust the alignment and crop for desktop and mobile views.
Video Headers add motion to the top of your site with a looping video. You can upload your own video or link to YouTube or Vimeo. For step-by-step instructions and video requirements, see Adding a Video Header to Your Website.
Color
Colors set the tone for your site and help your text and buttons feel easy to read. You can customize colors for your background, text, buttons, and page elements.
In the left panel, click Color
Click the color element you want to update (like Page Background, Page Text, or Buttons & Links)
Use the slider to choose a color or enter a hex code
The preview updates as you make changes
For a detailed walkthrough of what each color option controls, see Guide to Customizing Website Colors.
Font
Your font choice affects readability and personality. Joy includes dozens of fonts to choose from.
In the left panel, click Font
Browse through the font options
Use the slider to adjust text size
Use the search box if you have a specific font in mind
Click Customize Fonts to select different fonts for different parts of your site (headings, body text, buttons)
Art
Your art is the background design and decorative elements that appear throughout your site. Joy offers themes ranging from minimal and modern to botanical and illustrative.
In the left panel, click Art
Scroll through the available art
Click one to preview it on your site
Use the Style or Matching Suites filters above the art to narrow your options
Use the search box to find a theme by name
Click the heart icon to favorite themes you're considering
If you prefer no background design, select Blank from the Art section.
Link Preview
Your link preview is the image that appears when you share your website link in text messages, social posts, or chats. This helps your site stand out when guests receive the link.
Click Link Preview
Upload the photo you want to appear when your link is shared
The preview shows how it will look when shared
Custom CSS
If you're comfortable writing CSS code, you can add it site.
In the left panel, click Custom CSS
Add your CSS code in the editor
CSS customization is available for advanced users who want full control over styling. Joy doesn't provide CSS support, and future product updates may affect custom code you add.
Preview Your Design
Use the device icons at the top of the preview to see how your site looks on desktop, and mobile. This helps you check readability and layout across different screen sizes.
Matching Stationery
Many Joy themes are also available as printed invitations, save-the-dates, and other stationery. Click the stationery icon above the preview to browse matching print designs.
Still have some questions?
Ask us directly! Click on the black and white chat bubble in the bottom-right corner of this page to ask us your questions, or you can email us at support@withjoy.com. You'll get a friendly response from someone on our team! 🙂