How to Display Your Invitation on Your Website

If you’ve gotten an invitation custom designed, you may want to showcase that on your website.

You can do that by uploading your invitation as a photo in the “Photos” section, and setting it to be your Welcome Page Cover Photo. (For more details on setting your cover photos, go here.)

Here is an example of how that looks in our multi-page layout.

And here’s an example of how that looks in our single-page layout.

If you are using our single-page layout, there is a third, more advanced way to reuse your design on the right pane of the website. This method works best if you have a large graphic of the texture or background used on your invitation (namely, something that does not have text on it.)

Catalina and Charles had this graphic asset they were using for their invitations.

With a little extra work and some basic understanding of CSS, they were able to customize their site to match their invitations.

There are 2 parts to this process.

Part 1

First you need a url of where your image is hosted. If you already have that, you can skip to the next step.

Otherwise, you will need to upload your graphic in a way that allows you to get a URL of the image. There are different ways of doing this, but one way is to upload your logo to Dropbox.

  1. If you don’t already have a Dropbox account, you can go to https://www.dropbox.com/basic to set up a free account. Once your account is created, upload your logo/monogram to the “Public” folder.
  2. Once the photo is uploaded, hover over the image file and click on the “Share” button that appear for the image you just uploaded.
  3. This will open a dialog. In the dialog, under “Share a link instead”, click “Create link.”
  4. Then click “Copy link.”
  5. Paste that url somewhere. It will look like this – “https://www.dropbox.com/s/hu1km8hzj4aao1d/deckled%20edge%20cotton%20rag%20paper.jpg?dl=0”.
  6. Then this is a key step. The link above will NOT work for embedding images. You will need to alter the link slightly in order to use that URL for your CSS overrides in Step 2. Delete the “dl=0” at the end of the link and replace that with “raw=1”. Your final url will look like this – “https://www.dropbox.com/s/hu1km8hzj4aao1d/deckled%20edge%20cotton%20rag%20paper.jpg?raw=1”. Keep this url handy because you will need it in Step 2.

Part 2

The next thing you do is add custom CSS to your website.

  1. Go to your wedding dashboard.
  2. Click “Edit Design.”
  3. Double check that you are using the Single Page Layout.
  4. Open up the CSS tab (next to Themes and Fonts.)
  5. Paste in this code snippet.
#welcome {

background-image: url(https://www.dropbox.com/s/hu1km8hzj4aao1d/deckled%20edge%20cotton%20rag%20paper.jpg?raw=1);
background-size: cover;
background-repeat: no-repeat;

}
  1. Now this will add the above background to your site. To use your own background, replace the URL used for “background-image” in the snippet above with the URL you created from Step 1, or the URL of your logo.
  2. Click “Apply Changes.” You should be able to see your background on the right side of the page now. (Not seeing your image? Double-check that you did Step 6 in Part 1.)

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 20, 2021

Was this article helpful?

Related Articles