How to create a wedding website

A wedding website is a convenient way to send out invitations, provide guests with accurate information about the place and time of the celebration, dress code and other points. After the wedding, you can post successful photos and videos on the site, access to which will be open forever.

Another question is how to do all this efficiently and invest a minimum of funds. For such purposes, there are special services in which you can create websites yourself without the involvement of a programmer and designer.

How to use them and what is included in the development of a site for a wedding invitation – I will tell you in today’s article.

Stage 1: We select references

References are auxiliary layouts of ready-made web pages or individual design elements that you can rely on when building a site layout. Any web designer starts with them. Properly chosen references will help to avoid mistakes with style, color scheme and even marketing component. They can also help determine the type of site, its structure, typography. Usually 3-5 references are enough: there is no point in taking more, as you will only confuse yourself more.

You can find references on special sites. Here are the most popular ones:

• Behance
• Dribbble
• pinterest
• Awwwards
• Land book

To find a suitable reference, just visit one of the above sites and enter the appropriate request. For example, on Behance it looks like this:

1. We open the main page of the service and enter the request we need. In our case, we are interested in wedding-themed sites, so we’ll enter “Wedding Site”. As a result, we will see a list of works posted by other users. Let’s open one of them and see what’s in it.
2. We opened a case for a bridal salon. The theme and style of the site fit perfectly – from here we can, for example, take fonts and colors. Learn how the layout is built and use the same transitions between blocks, buttons, and so on.

I recommend to look at several works and save about 5 in one place. Subsequently, you can refer to them and see the design solutions for a particular element. You can even look at other topics, but it is important that they are similar to this style. You can also check out the minimalist examples on Pinterest for countless cool ideas.

When the references are selected, and the style of the site is determined, you can proceed to the development of the site itself. How to do this – I will show and tell in the next section.

Stage 2: Create a wedding website

How to develop a good site, similar to the layouts that are on Behance and other sites, you ask. To do this, we will use the Craftum website builder , which allows you to create unique web pages that can lure users with their beauty and originality.

You can say that builders are boilerplate sites, and you would be absolutely right, but only if we are talking about low-level platforms. Today, modern services offer cool features – now you can create almost any site that would previously require a team of specialists.

For example, Craftum allows you to use special design blocks in which complete freedom of creativity is open – you can move elements as you please. But that’s not all: if you need to create a website as quickly as possible, you can use the template library. With its help, you can choose a site for your theme and change it for yourself. You can also add various blocks from the library to these templates, including the design block.

We will go both the first and the second way – we will create a website based on a template using a design block. Let’s start:

1. To begin with, let’s go through a simple registration – for this we open the official website of the designer  and click on the “Create a website for free” button.
2. In the window that appears, enter the name and email address, then click on “Create a site.”
3. This completes the registration. Account login details will be sent to your email, but for now they are not needed, because after registration, an automatic login to the account occurs. Please also note that access to all features is free, but only for 10 days. After that, you will need to pay a tariff, the cost of which is 197 rubles per month.
4. Let’s proceed directly to the development of the site – for this we will choose the appropriate template. Craftum has a “Wedding Planning” template that fits perfectly with our theme. Since this template is not designed specifically for wedding invitations, we will remake it for ourselves. You can find it in the template library, which opens immediately after registration.
5. As a result, we get to the site editor – here we will carry out all subsequent manipulations. First of all, let’s take on the first screen – it should immediately show the whole essence of the site and talk about the main thing. In our case, we should say that this is a site for an invitation to a wedding that takes place in such and such a place at such and such a time. The template offers us the first screen, but it is a simple slider. You can’t add text to it, so let’s remove it and add another block. To get started, move the mouse cursor to the first screen and click on the basket in the upper right corner.
6. Now let’s add a block suitable for us – to do this, click on the plus sign that appears when you hover the mouse between the blocks.
7. The Cover-14 block is perfect for us, which has a title, subtitle, time and place of the event, and a button. Enter the request in the upper left corner and click on the displayed block. You can also find this block in the “Cover” section, it is located at the very bottom of the section.
8. As a result, the block is applied to our layout. Now it doesn’t look like what we need at all, so let’s transform it. To get started, enter your data – just click on the text and enter new information. The name of the button changes in the same way.
9. The next step is to change the background image to match our theme. To do this, click on the “Customize” button in the upper left corner and in the “Design” tab open the “Block” item, then click on “Customize”.
10. Here we can either select a photo from the gallery of the Craftum constructor or upload it from a computer. Let’s go the second way and embed our image. If you do not have a suitable photo, you can download it from the free Unsplash service. But first, we need to remove the old background – for this, go to the “Photo” tab and click on the cross there.
11. Now we can add our picture – just move it to the field. Then it remains only to click on the “Use in the block” button. Please note that we can also apply filters to the photo or disable them altogether.
12. Now let’s move on to the design part – edit the text a bit and change the color and font of the button. To do this, go to the “Design” tab in the block settings. Let’s start with the heading – set the font for it to IBM Plex Serif with a regular weight and a bottom indent of 40px.
13. For the subtitle, set the font to Gilroy, size – 18px, line spacing – 160%.
14. To edit the time and date, go to “Events” and click on the gear next to the title.
15. Set the Gilroy font to 16px. Note that I’m using the same font as the subhead – this should be followed to keep the site consistent. The same should be done with headers.
16. Let’s make the subtitle in Gilroy font, size – 16px, and add a padding from the button of 40px so that the block does not look squeezed.
17. Now let’s change the button – change its color and set the font that is used in the text content. To do this, open the “Button” item and change the font size to 16px, Gilroy, remove the rounding of the corners and add a background color similar to pearl, also make the text color black. This color is not in the palette, but we can use the HEX code – just write #1D1D1D in the input field.
18. As a result, we got this first screen:
19. The block has an inactive button for now. We’ll set it up at the very end, but for now let me show you how to create a unique block. In this, as I said above, the design block will help us. You can add it from the block library, which we entered when creating the first screen.
20. We get into block editing. Let’s tell in it what awaits visitors at the wedding. First, let’s delete everything from the block – to do this, select all the elements and press the “Delete” key.
21. Open the settings on the left and delete the background image.
22. As a result, we get a white sheet. Let’s first add a heading to it and call it “What awaits you at the wedding.” To do this, click on the plus sign in the upper left corner and select “Text”.
23. Before editing the header, let’s turn on the grid – we need it so that all the content of the site is in the central part. Thus, it will be convenient for the user to study the material, and his eyes will not run back and forth. You can do this in the upper right corner using the “Grid” button.
24. Now let’s move on to setting up the text – set the font for it, which we used in the header above, and also change the color to black and make it 36px in size.
25. Let’s add the rest of the text in a similar way – it will tell about what awaits the visitors of the event. For it, I will set the font to Gilroy with a size of 16px – this will be the content, and for its title I will set the size of 18px with boldness.
26. After that, I will also change the height of the block, since by default it was large, and I have little content. To do this, in the settings in the line “Block height” I will set the value to 630px.
27. This completes the editing of the block, but it still needs to be adapted for mobile devices. If everything in the template blocks is automated, then here you should play a little with adaptive design. For example, let’s set up the screen for phones – go through the top menu to the desired resolution and rebuild all the content in the center there. From the settings, I only changed the size of the header so that it fits into the block and is not so huge – everything should look smaller on phones.
28. All available permissions will need to be edited so that users can conveniently use the site on all devices. Your screen doesn’t have to look like this. In the design block, you can do anything – rely on references and build your own unique solutions. This applies to both the adaptive version and the desktop version. In conclusion, it remains only to click on the “Close” button, and all work will be saved.
29. Now let’s set up the button on the first screen so that when it is clicked, a form opens and users can submit a request to receive an invitation. To do this, add a block with a form.
30. Let’s set it up – first, change the title and subtitle in the “Content” tab.
31. Also, in the “Form” section, we will remove all the items and add an email so that visitors can leave their email to receive an invitation.
32. In the “Form” tab, we will make sure that the application goes to our mail.
33. And the last step is to work with the design of the form – change the color of the button to exactly the same that is used on the first screen, and also make all the text in Gilroy font.
34. Thus, I get the following result:
35. It remains to make this form open on click of the button. To do this, go to the settings of the first screen and in the “Content” -> “Link Type” tab, select “Pop-up window”, and in the “Block” line, select “Window 1”.
36. Ready! The button is configured, and now after clicking on it, the form we created will open, applications from which will be sent to us by mail. This concludes my tutorial. You will also need to further work on the entire site, but there is nothing complicated about it. Everything is exactly the same – use template blocks, change them for yourself and try to create unique solutions in design blocks. And, of course, do not forget about the overall style of the site – stick to the style and rely on references to make the site beautiful.
37. After you complete the work, you will need to publish the site – for this there is a special button in the upper right corner.

Please note that the site is published on a test domain, which is quite suitable for showing the site to friends and family, but it is best to connect a unique domain name, for example ourwedding.ru. You can pay for a tariff plan for 1 year, and then you will be provided with a free domain. This will be relevant if you want to leave your site and post on it, for example, videos and photos from a past wedding.

You can find out how to connect your domain in the constructor’s chat, where they will promptly help you with any question.