They say digital design is like paint that never dries. Today, we're going to create our own piece of digital art. And WIX will become our ultimate drawing kit. But while paintings take years to get finished, our wedding website will be up and running in a few moments. Let's get into it.
Look, I'm starting from scratch! A clean slate for crisp design.
Stage 1
First things first - we are starting with building a Hero Unit to grab attention and showcase key content. For that, I'm uploading a couple of fancy wedding images.
Then we need to resize and update the sub-heading on our first block.
To add an aesthetic appeal to our website, let's upload the flowers image with a transparent background. Looks sweet, right?
After that, I am proceeding with the next slides. Again, I resize the box, choose the font, adjust the font size, and change other text settings to my taste.
Don't forget to center all messages. Otherwise, it won't look as sweet with the animation.
As my next step, I am creating the links that will let the user switch from one website section to another. For that, I'm making necessary adjustments in the site menu.
Now let's go over to the main menu setup.
At this stage, I'm playing with the main menu settings to fine-tune the look-and-feel to my preferences.
Bingo, the first part of the website is visible online to the delight of potential visitors.
Stage 2
At this point, the header doesn't look its sharpest, so we need to play more. Let's spruce up the second section by tailoring the text settings and such.
Stage 3
Here goes the fun part with rounded images. Oops, I couldn't find how to round an image from the builder side. I hope you can forgive me.
Ok, now on to the next block - the one with a summer field background. Mind that it should look good while scrolling.
Now I'm placing the first button as demonstrated on the screenshot and adjust its design.
Here, I'm just watching and admiring the result.
After that, I am switching to building a block with a couple's story. I am changing the design and resizing the box as usual. You can take a look at the screenshots below.
Finally, I am setting up the 'Best moments' slideshow with awesome animations to better communicate the emotions.
NEXT PART
Now let's unfold the next stage. I want to see some more fonts on this page, so I'm uploading them into Font Manager. Convenient, isn't it? Especially for picky users like me. I decided to extend the font coverage with some Playfair Font.
After that, I'm moving to the next block.
Here, I'm changing the layouts and columns as you can see on the screenshot.
Hooray, I found how to round the images with the built-in functionality. It took me just 2 hours to get there.
Next, I'm cloning a friend. (wish it were that easy in real life)
Looks geeewd now.
And even better now.
Now let's get to grips with the bridesmaids part.
The editor helped me create the Major jquery method. And I even didn't use stackoverflow for that!
Just think, this is how we used to build animations only a decade ago. Also, a big thank you to Mozilla and Google for killing IE browsers.
It's also useful to see some help when you are typing. I always keep forgetting what we have there.
At last, our tabs are working in a fancy way.
But this is a static website. So let's get real mature and enliven things a bit. For that, I'm enabling the Dev Mode, updating some blocks, and adding some logic into it.
Previously, I have made the Best Friends section. We can create a similar section.
Let's put a few text blocks with a placeholder that we will replace soon.
Don't forget about the aesthetic aspect. Each block should look sharp and remind you about our huge upcoming event.
Velo wouldn't enable itself - so click a butttttoooonnnn and become a MASTER OF DEVELOPMENT.
We'll pull our guest list from a free API that has some users inside: dummyapi.io.
Yes, I'm suggesting you find out more about Velo API, because these guys have done an excellent job. Besides, the documentation is pretty cool.
Here I'm doing my first velo-code-lines... feeling so young and excited ❤️
It's important to add the #id field because we'll use it in our selectors pretty soon.
Now, I'm copy-pasting the guests. This is how I usually throw a huge offline party.
This magic line will help us to get some data from an API.
`getJSON("[https://dummyapi.io/data/api/user?limit=5](https://dummyapi.io/data/api/user?limit=5)", { headers: { 'app-id': '60436c90593c82659855844c' }} });`
yes, it's a basic code, nothing hard.
Ok, I can't show this code to you. Don't come after me!
Let's create a loop and make it work. If you did some C++ at college - then share this article.
Let's try and see if our code works. For that, I'm enabling Preview.
I was able to take a screenshot of how slowly it's updating :) Looks like Wix has speedlimit rules! Should we call the police? 😂
Also, it's great that you can see an error report.
For some reason, the last clone didn't want to be replaced. Probably I made some mistakes when I was setting an ID for it.
Let's populate the names of our guests as well.
This is what I run on a preview
As you can see on the screenshot, it works just fine. I scored 0 errors (yes, I skipped the part when I had to debug 5 lines of my code)
I decided to invite more people to our party. Nothing hard, just copy-pasting elements and updating their selectors.
So, do you like the results? You can construct a similar website with your own hands. There's nothing hard. The interface looks user-friendly and intuitive to me.
If you think, you can craft a better website, go ahead and prove it to me. I'm sure I'm unbeatable! Oh, my secret for success? Attention to details. Because everything matters.
We can also enable the contact form, but I don't feel like doing it.
This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to enter here and take a shot at winning $1000 every month, from March 1st, 2021 to May 31st, 2021
