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 your Design Page
To start experimenting with the design of your website, click on Design from your admin dashboard.
2. Edit Your Layout, Colors, and Art
On the Design page, you’ll be able to edit your website layout, accent color, 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.
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. The graphic will be displayed under your photo on each page of your website.
If you decide to use the multi-page layout, you’ll be able to choose ‘Transparency’ for some designs by clicking the arrow to the right of the layout. Play around with this effect to see if it gives you the desired look!
Let’s move on to your color:
Located under Layout, the Accent Colors section gives you the ability to choose a color for your site and app. When you click on Accent Color, you can determine your link color and how your text contrasts with the background (light or dark).
With the single-page layout, you’ll see the option to use your Accent Color as your art background. 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 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.
If you select the blank theme for the single-page layout you can use another color for the background. You can set this color by navigating to the Accent Colors section and selecting ‘Use as art background.’)
When using the blank option with the multi-page layout you cannot use another color for the background.
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).
The CSS feature is only available when using the single-page 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.
NOTE: We have the CSS feature available for those who know CSS and want to tinker with the style of their sites. We do not, however, currently offer complete CSS support. You’re welcome to play around, but we just don’t have the resources to answer CSS-specific questions. Additionally, if you do add CSS overrides, it’s possible future updates to Joy will impact those changes you make.
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 on your mobile — your guests may still visit the site from their mobile!
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 Publish 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!