How to Create a Free Digital Business Card with Divi

Digital business cards are the on-line replacement for the traditional paper business card. It’s an easy way to share and save contact information quickly whether you are networking in-person or virtually over a Zoom call.

The best feature is that the person can click a “save contact” link to automatically create an entry in their contact app for you. You control what information is filled in, including a profile photo.

Sample digital business card

Aside from being an environmentally-friendly, contactless way to share, digital business cards can be updated instantly and provide links to texts, calls, emails, maps, and social media.

Finally, since you already have a Divi WordPress website, you won’t need to pay anyone anything. You don’t need a special app or monthly fees. You can create, host, and maintain your own digital business card for free.

Using a Digital Business Card

The typical way of sharing is through a QR Code. If you have a storefront or office, you can print out the QR code for people to scan. For in-person sharing, I like putting the QR code on your cell phone lock screen for fastest access. You can also just keep it as a favorite photo on your phone or watch.

The other method of sharing is through sending the URL link to your business card. That can be sent via text or email, or be put in your email signature.

There is also an NFC / RFID type of business card. I don’t recommended that one as you need to carry around an RFID tag, and it only works in-person. The QR Code is the way to go.

Creating Your Digital Business Card

There are three parts to creating your own digital business card.

  1. Create a QR code
  2. Create a VCF / vCard file
  3. Create a Divi page as your digital business card

It’s as simple as that. Ready to go? Let’s get started.

Create A Digital Business Card QR Code

There are a number of free QR code generators available online. The one I like is qrcodemonkey
It’s free and has a number of customizations like colors, adding your logo, and tweaking the design components.

Set Content To The URL Of Your Digital Business Card

qrcodemonkey screenshot of url

Choose QR Code Colors

qrcodemonkey screenshot of color

Add Your Logo To QR Code

Put a checkmark in the “Remove Background Behind Logo” box

qrcodemonkey screenshot of logo

Customize QR Code Design Elements

qrcodemonkey screenshot of design
  • Set Quality slider to 1000 x 1000 Px
  • Click “Create QR Code”
  • Click “Download PNG” (Note: you can also use the .SVG button if your site supports that format)

Create A Digital Business Card VCF File

There are lots of ways to create a vCard (.vcf file) or Virtual Business Card file. This file contains your name, company, addresses, emails, phones, and even a profile photo. The vCard can then be imported into your prospect’s contact list, whether they are using Apple Contacts, Google Contacts, Microsoft Outlook, etc.

The easiest way is to create your vCard file is to set it up in your own contact software then export it from there.

For example in Apple Contacts, create a contact then use the Share Contact link to save it as a file through AirDrop or email attachment.

apple contacts vcard screencapture
Apple Contacts share contact link

Another way to create a vCard is through a website, my favorite is vcardmaker

Go to the website, fill in the desired text fields, upload a square photo for your profile photo, then click the GENERATE button at the bottom of the form

vcardmaker screenshot of name
vcardmaker screenshot of address
vcardmaker screenshot of generate button

The generate button will download a file called vcard.vcf to your computer. Rename this to something easier to remember, like chelsea-vcard.vcf

IMPORTANT STEP: Using your web hosting control panel or sFTP file transfer upload this file to your website’s home directory (or another of your choosing). This is necessary so that the “save contact” on your digital business card will function properly.

Anytime you want to update your vCard information, repeat this step and overwrite the existing file with your new .vcf file.

Create A Divi WordPress Page For Your Digital Business Card

To speed things up, download these Divi export .json files for you to import at your site:

Tip: Try using a right-click, save link as…

Create Digital Business Card Page

First we will create a WordPress page for the digital business card using the Import Divi Builder Layout feature.

From WordPress Admin, go to: Pages > Add new

  • click Use Divi Builder > Build From Scratch
  • click “…” > Portability > Import tab
    • click Choose File = card-page.json
    • cick Import Divi Builder Layout
  • click Save Draft, Exit

After importing, you may notice the default header and footer overlaying your business card. The next subheading resets the header and footer to nothing to preserve the business card formatting.

After fixing the header and footer, return here to edit the business card page to your hearts content.

  • replace the demo QR code with the one you created.
  • link the Save Contact icon to the .vcf file you created.

This Divi code will turn off the default header and footer for the digital business card page.

From WordPress Admin, go to: Divi > Theme Builder : Add New Template

  • set “Use On” to “Specific Pages” > card (or whatever the name of your business card page)
  • click Create Template
  • click Add Custom Header > Build Custom Header
  • click “…” > Portability > Import tab
    • click Choose File = card-builder.json
    • click Import Divi Builder Layout
  • click Save, Exit
  • Repeat steps for Custom Footer
  • Click Save Changes to save the new template you created

Divi Design Customizations

Included in the digital business card json template are a couple of notable Design Tab and Advanced Tab customizations. These are already in the json template file so there is nothing for you to do. This is just for your information.

Formatting Card Details Text

In the business card details, there are blurbs for SMS texting and phone calling. Since these these are two functions on the same telephone number, we’ll put both blurbs on a single line.

For the SMS text blurb, have the icon only and no text. We’ll piggyback onto the phone call blurb text.

Set the Advanced tab > Blurb Position to Absolute. That shifts up the phone call blurb to be on the same line.

Screen capture of SMS Divi Blurb Advanced settings
SMS Divi Blurb Advanced Settings

For the phone call blurb: Set the Design > Margin > Left to 2.5em.
That will shift the blurb to the right to reveal the SMS text blurb icon.

Note: We set the units to em as it keeps the spacing proportional to the font size. The mobile view uses a smaller font.

Screen capture of phone number Divi Blurb Design Settings
Phone Number Divi Blurb Design Settings

Page Settings CSS

For the Page Settings > Advanced Tab > Custom CSS we have two lines to tweak the formatting of our digital business card.

@media (min-width:1200px) {.et_pb_gutters3 {display:flex;}}
a[href^=tel] {color:inherit; text-decoration:inherit;}

The first (@media) sets the business card to display side by side on the desktop view.
The default is that the card is stacked: front side first, then scroll to the back side.

The second (a[href]) resets the cell phone browser automatic phone number link formatting.
In Apple Safari on the iPhone for example, any text resembling a phone number is automatically converted into a telephone link. A side effect is that it causes the text to have the color and text-decoration of a link. For our purposes, we just want it to show up as regular text.

Divi Page Settings CSS

As a final note, you may want to exclude the page from search engines and your sitemap. That’s easiest to do with an SEO plug-in like RankMath or Yoast.

Show Off Your Digital Business Card QR Code

Now that you’ve got your digital business card up, it’s time to show it off. Print one out for your office.

Photo of an office sign with a digital business card QR code
QR Code for your business
Photo of a locked cell phone with a digital business card QR code
QR Code for your cell phone

One of the easiest ways to share is to put your business card QR code on your cell phone lock screen. Now it is quick and easy to share with people you meet in person.

As a bonus, if you ever lose your phone, your contact information is right there.

Leave a Reply

Your email address will not be published.