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

Layouts, colors, and fonts….oh my. Step into the world of Joy’s design wonderland, where you’re not in Kansas anymore, and you certainly don’t need a wizard to design your event website. Whether you’re planning a wedding wonderland or any other kind of soirée, we’re here to ensure your website shines as brightly as the Emerald City itself. So, click your virtual heels together, and let’s design your site.


To start click the “Design” icon from the admin dashboard. You’ll see your canvas with all design aspects on the left panel.

Layout

You’ve got two cool layouts to choose from—single-page and multi-page.

  • The single-page layout offers a trendy horizontal design, perfect for scrolling through your photos and details in style. Photos on the left, info on the right.
  • Meanwhile, the multi-page layout rocks a classic vertical look with tabs at the top of each page and the added bonus of customizing graphic accents and background themes to match your vibe.

Plus, there’s a treasure trove of graphic accents to choose from – just click on that little drop-down arrow!

If you’re feeling adventurous and opt for the multi-page layout, you can embark on a wild journey by clicking the arrow to the right of the layout and unveiling the mystical ‘Transparency’ option.

Color

Below “Layout,” you’ll find the “Accent Colors” zone. Here’s where you can pick a color to shine on your website and app.

  • Enter a hex code or slide the finder to locate the perfect color.
  • The color will be applied to your links, buttons, and text under the Menu.
  • You can even choose how your text contrasts with the background – light or dark (only for the single-page layout)
  • With the single-page layout, you can make your accent color the background too by checking that little “Use as Art background” option.

Theme

Scroll a bit further, and you’ll discover the “Art” section. It’s like a treasure chest of themes, from subtle and modern to vibrant and floral.

  • Scroll through and click the one that clicks with your style, and you’re golden.
  • Filter by description if you’re in the mood for something specific.
  • If you’re all about that minimalist vibe, go for the “Blank” option in the Art section – it’s like starting with a clean canvas!

Font

Your website’s font is the icing on the cake!

  • Head to “Fonts” at the top of the design page and have a blast experimenting with dozens of fonts.
  • Filter by font name if you’ve got a font crush already.

Getting fancy with CSS

CSS, which stands for Cascading Style Sheets (aka the magic wand of web design), is how HTML elements, like font, colors, and layouts strut their stuff on your site. It’s available when using the single-page layout. Click on “CSS” at the top, next to “Fonts,” and start customizing your site’s style with your own CSS code.

Now, for those fluent in the language of CSS, you can edit to your heart’s content. But here’s the deal: while we encourage tinkering, we’re not able to offer CSS support. We’d love to help, but CSS-specific questions are a no-go for now. And a small heads-up: when you add CSS, future Joy updates might impact the codes you add.

Preview

Switch between desktop and mobile views with ease as you tweak your website. Find those icons at the top of the preview – it’s like magic that lets you see how your site looks on both screens.

Stationary

Want some printed stationery to match your event? We have two print partners, Paperlust and Paper Culture, who offer prints of some of our designs. Keep in mind that not all themes have stationery options. Learn how to find designs available for print here.

Publish

As you play around, your design changes will save automatically. But, they won’t appear on your live site until you hit “Publish Changes” in the top right-hand corner of the website editor.

And, just like that, your masterpiece is complete.

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 September 29, 2023

Was this article helpful?

Related Articles