How to Create a vCard Website with Video Background – WP Tavern


Today we continue with our new series Building with Blocks, where we show fun things you can build with blocks.

In this tutorial, I’ll show you how to create a simple vCard website with a video background in less than five minutes. I wanted to create a website like this a while ago and searched for a block theme that would work, but couldn’t find anything that would instantly give me what I was looking for. I also searched the WordPress template directory for a vCard style template and couldn’t find one. Luckily, this type of site is easy to build in minutes with just 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 wallet theme that you can grow into if you decide to expand beyond a simple vCard website.

The five-minute video below shows you how to add the theme, starting with one of the included templates, and adding all the necessary blocks for the social icons and video background.

A few notes on specifics: I found the sample videos 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 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 cover height.

Here is the CSS for the border around the circular profile picture. You can add this to the additional CSS section of the customizer: img {
    border-style: solid;
    border-color: #FFFFFF;
    border-width: 10px;

If you plan to keep the website simple in vCard format, you’ll want to assign the page you created as your homepage. This can be done in the Customizer under the Home Page Settings panel.

Instead of using Eksell, if your site is on, you can achieve a similar result by using Automattic’s Blank Canvas theme and adding and arranging the blocks individually.

It’s a quick way to customize a site after buying a new domain. Choose any combination of blocks to create a beautiful placeholder until you decide to add more to the website. If you end up building it, drop a link in the comments so we can check it out.

Source link


Comments are closed.