How to Design Your Website: Layouts, Colors, Themes, and Fonts

We designed Joy to empower you to make your website uniquely you. Whether you’re using Joy to plan a wedding or different event altogether, we offer many design tools that will help you create a site you and your guests will love. From mixing and matching layouts and graphic themes to adjusting fonts and colors until they’re just right, you have endless opportunities to play website designer — without any of the complications or fuss. Here are seven easy steps to create the event website of your dreams!

1. Navigate to Templates

To start experimenting with the design of your website, navigate to the Edit Design function from your admin dashboard.

2. Edit Your Layout, Colors, and Art

On the next page, you’ll be able to edit your website layout, colors, and art (among other options we will get to below), and these are functionalities you can conveniently find on the left-hand side of the page. On the right-hand side, you’ll also notice that any changes you make will be reflected in real-time. That way, you can see how your site will look on the spot (instead of having to open a new tab).

Let’s start with your Layout:

You have two layouts from which to choose, a single-page layout and a multi-page layout, which you can switch between at any point in the designing process.

The single-page layout allows you to showcase your photos and details in a horizontal, modern design using cued scrolling for a unique and engaging experience.

Meanwhile, the multi-page layout offers a more vertical, classic look with your information in plain view on the main page. One of the best parts about using the multi-page layout is the ability to customize the graphic accents and background in the theme of your choice to fit your design completely. To find the available graphic accents, select the multi-page layout, scroll over the art you want to use, and find the drop-down arrow.

When you click on the dropdown arrow, you’ll see dozens of lovely graphic accents at your disposal.

Note: If you decide to use the multi-page layout, you’ll be able to choose the “translucent effect” using some themes from the drop-down menu. Play around with this effect to see if it gives you the desired look!

Let’s move on to your colors:

Located under Layout, the Accent Colors section gives you the ability to choose a color scheme for your site and app. When you click on Accent Colors, you can determine your link color and how your text contrasts with the background (light or dark).

With the single-page layout, you’ll notice the option to use your accent color as your art background:

You’ll notice the Multi-Page layout does not have the option to use your link color as your art background.

Last but not least, your theme:

If you scroll down in the Art section, located under Accent Colors, you’ll see hundreds of various themes — from subdued and modern to vibrant and floral — to choose from for your website design. Play around to find a theme that looks great with your photos! You can even filter the themes by description if you have a particular style in mind.

Note: Some themes may not yet be available for the multi-page layout.

Would you rather not have a theme on your site? You can opt for a more minimalist look using both the single-page and multi-page layout. By selecting the Blank option in the Art section, you’ll see that any theme you may have previously selected has now disappeared and been replaced with a white background.

Blank option for the single-page layout (Note that you can use another color for the background with the single-page layout. You can set this color by navigating to the Accent Colors section.)

Blank option for the multi-page layout (Note that you cannot use another color for the background with the multi-page layout.)

3. Edit and Filter Through Fonts

Your website’s font is also important for getting the look and feel you want. Change the font by navigating to Fonts at the top of the website design page (listed next to Themes). Then, experiment with dozens of fonts in real-time to find the perfect combination.

Just like with Themes, you can also filter by font name in case you already have a font style in mind.

4. Apply CSS

CSS (aka Cascading Style Sheets) describes how HTML elements like layout, colors, and fonts are displayed on a screen. This can be useful if you want a certain element to appear in a specific way (that is otherwise impossible in its current form).

If you’ve selected the multi-page layout for your website, you won’t be able to use CSS. However, you can use it for the single-page, horizontal layout.

With the single-page layout selected, navigate to CSS at the top of the website design page, next to Fonts. Then, enter your Custom CSS code in the field box below. You can either use your own code or ask the Joy support team for assistance by clicking on the black and white chat tool on the bottom right-hand side of the page.

5. View Your Website in Desktop and Mobile View

As you edit your website, you’ll be able to switch from desktop view to mobile view with the click of a button. On the website editor page at the top of the preview, you will see a desktop icon and mobile phone icon.

It’s best to switch between the two screen views now and again even if you don’t plan on using Joy’s mobile app to accompany your site — your guests may still visit the site from their phone!

Desktop view:

Mobile view:

6. Discover Whether Your Theme Has Available Stationery

Are you interested in exploring printed stationery to accompany your event? You should note that not all of Joy’s themes have available stationery. As you experiment with themes and find the ones that best suit your style, navigate to the right of the website editor page where you will see a printer icon.

If your theme does not have matching stationery, a “This theme doesn’t currently have matching stationery” message will appear. There will also be links to Paperlust and Paper Culture, Joy’s printing partners, where you can still find a similar, complementary design to the theme you chose and order prints (even internationally!).

If your theme does have matching stationery, an “Available Stationery for [Theme Name]” message will appear, along with examples of available stationery and a link to “Customize and buy” directly from the print partner that designed the theme.

7. Publish Your Design

As you play around with your design, the changes you make to your layout, color, theme, and font will be automatically saved. However, note that these changes will not show up on your live site until you click Apply Changes on the top right-hand corner of the website editor.

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! 🙂

Updated on October 17, 2020

Was this article helpful?

Related Articles