Layouts, colors, and fonts....oh my. Step into the world of Joy's design wonderland. Whether you're planning a wedding or any other kind of soirée, we're here to ensure your website shines so 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.
Site Layout
You've got three cool layouts to choose from: Split View, Classic Navigation, and Simple Scroll.
The Split View layout offers a trendy horizontal design, perfect for scrolling through your photos and details in style. Photos on the left, info on the right.
The Classic Navigation is a traditional website layout that organizes content across multiple linked pages. Visitors can use the navigation bar at the top of the site to move between sections.
Simple Scroll is a variation of classic navigation and places all of your sections on one continuous, scrollable page instead of separating them into multiple linked pages. The navigation links at the top still appear, but instead of loading a new page, they smoothly scroll visitors to the corresponding section.
Extra Design Options in Simple Scroll and Classic Navigation
With Simple Scroll and Classic Navigation, you can give your site extra polish by adding graphic accents, transparency, and a shadow layer.
Graphic Accents
Graphic accents are small emblems that display under photos, adding a decorative touch.
Go to the Art tab and click the arrow next to your selected Art.
You'll see the accent populate below the photo in the preview.
Click Publish Changes to save your changes.
Transparency and Shadow Layer
These options change the look of your page background. Transparency lets the background design subtly show through the page area for a lighter, airy feel. The shadow layer adds a soft shaded border around the middle edges, creating depth and making the content stand out.
Go to the Color tab and click Page Background.
Check the box for Page Shadow and/or Transparency.
Page Shadow:
Page Transparency:
Header Style
Headers are the images that sit at the top of your site, for Classic Navigation and Simple Scroll, or on the left side for Split View, and help set the tone for your website. You can choose from Photo Headers or Video Headers (available for Classic Navigation and Simple Scroll) to make your site feel warm and personal.
Photo Headers let you upload one or more images and adjust the alignment and crop for both desktop and mobile.
Video Headers let you add a looping video to the top of your site for extra motion and personality. You can upload your own video. For step-by-step instructions and requirements for YouTube and Vimeo videos, see Adding a Video Header to Your Website.
Color
Colors help set the tone of your website and make sure your text and buttons feel easy to read and inviting. You can adjust colors for your site’s background, text, buttons, and more.
Click on the Color tab, then the colors you want to update.
Use the slider or enter a hex code, and the page preview will be updated.
For a step-by-step guide on how to change your colors and what each color controls, see Guide to Customizing Website Colors.
Font
Your website's font is the icing on the cake!
Head to Fonts and have a blast experimenting with dozens of fonts.
Use the slider to change the sizing.
Filter by font name if you've got a font crush already.
Click on Customize Fonts and you can select a different font for each part of the page:
Theme
Next up, 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.
Filter by description, or enter the name in the search section 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!
You can also favorite the ones you love.
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 Split View 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. We encourage tinkering, but 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 to see how your site will appear on different devices.
Check Out the Stationery
Want some printed stationery to match your event? We print most of our designs. Tap that little stationery icon above the preview and you'll be whisked off to our print gallery.
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! 🙂