Today we are continuing on with our new Building with Blocks series, where we demonstrate some fun things you can create with blocks.
In this tutorial I am going to show you how to build a simple vCard website with a video background in under five minutes. I wanted to build a website like this awhile back and searched for a block theme that would work but didn’t find anything that would instantly give me what I was looking for. I also searched the WordPress Pattern Directory for a vCard style pattern and could not find one. Fortunately, this type of a site is easy to build in just a few minutes with a handful of blocks.
I selected the free Eksell theme for this project, because it includes a Blank Canvas Template for pages that removes the menu, header, and footer. The only content that appears are the blocks you add to the page. Eksell is also a full-featured portfolio theme that you can grow into, if you decide to expand beyond a simple vCard website.
The five-minute video below walks you through adding the theme, starting from one of the included patterns, and adding all the necessary blocks for the social icons and the video background.
A few notes about specifics: I found the video examples used in this tutorial on Pixabay, which has a nice selection of short videos that lend themselves well to looping in the background of a website.
If you have some extra white space at the bottom after adding the video to the cover block, you can set the minimum height. Go to your cover block, click Settings, and scroll down to Dimensions where you can adjust the minimum height of the cover.
Here is the CSS for the border around the circular profile image. You can add this to the Additional CSS section of the Customizer:
.wp-block-image.is-style-rounded img {
border-style: solid;
border-color: #FFFFFF;
border-width: 10px;
}If you plan to keep the website simple in vCard format, you will want to assign the page you created as the Homepage. This can be done in the Customizer under the Homepage Settings panel.
As an alternative to using Eksell, if your site is on WordPress.com, you can achieve a similar result by using Automattic’s Blank Canvas theme and adding and arranging the blocks individually.
This is a fast way to customize a site after a new domain purchase. Choose any combination of blocks to create a nice placeholder until you decide to add more to the website. If you end up building this, drop a link in the comments so we can check it out.
