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

As we speak we’re persevering with on with our new Building with Blocks collection, the place we show some enjoyable issues you possibly can create with blocks.

On this tutorial I’m going to point out you how you can construct a easy vCard web site with a video background in beneath 5 minutes. I wished to construct an internet site like this awhile again and looked for a block theme that may work however didn’t discover something that may immediately give me what I used to be searching for. I additionally searched the WordPress Pattern Directory for a vCard model sample and couldn’t discover one. Fortuitously, the sort of a web site is straightforward to construct in only a few minutes with a handful of blocks.

I chosen the free Eksell theme for this mission, as a result of it features a Blank Canvas Template for pages that removes the menu, header, and footer. The one content material that seems are the blocks you add to the web page. Eksell can also be a full-featured portfolio theme you can develop into, should you determine to increase past a easy vCard web site.

The five-minute video under walks you thru including the theme, ranging from one of many included patterns, and including all the mandatory blocks for the social icons and the video background.

Just a few notes about specifics: I discovered the video examples used on this tutorial on Pixabay, which has a pleasant choice of quick movies that lend themselves properly to looping within the background of an internet site.

You probably have some additional white house on the backside after including the video to the quilt block, you possibly can set the minimal peak. Go to your cowl block, click on Settings, and scroll all the way down to Dimensions the place you possibly can alter the minimal peak of the quilt.

Right here is the CSS for the border across the round profile picture. You may add this to the Further CSS part of the Customizer:

.wp-block-image.is-style-rounded img {
    border-style: strong;
    border-color: #FFFFFF;
    border-width: 10px;
	
}

If you happen to plan to maintain the web site easy in vCard format, it would be best to assign the web page you created because the Homepage. This may be carried out within the Customizer beneath the Homepage Settings panel.

As an alternative choice to utilizing Eksell, in case your web site is on WordPress.com, you possibly can obtain an analogous consequence by utilizing Automattic’s Clean Canvas theme and including and arranging the blocks individually.

It is a quick strategy to customise a web site after a brand new area buy. Select any mixture of blocks to create a pleasant placeholder till you determine so as to add extra to the web site. If you find yourself constructing this, drop a hyperlink within the feedback so we are able to test it out.