In this tutorial you’ll learn how to create a shareable digital (virtual) business card to promote your business on your own website. Your card will look great on desktop and mobile devices, and you can share it in a variety of ways.
Prerequisites: This intermediate level tutorial assumes basic knowledge of Elementor widgets and styling. We’ll leave relevant links in the description, if you’d like to review.
The tutorial will cover:
✔︎ Creating a digital business card
✔︎ Using share buttons and social icons
✔︎ Showcase your portfolio
✔︎ Adding and connecting a popup
✔︎ How to share your card
✔︎ And much more!
See Also:
Icon List widget
Social Icons
Media Carousel
Share Buttons
QR Code Monkey
Remember paper business cards? We had to carry them everywhere we went. We’d print a few thousand at a time, only to toss and reprint them for every small change. Good times!
Hey there, I’m Aviva from Elementor. These days, digital business cards are a must-have for networking professionals.
And while there’s no shortage of websites offering this service, today we’ll learn how we can create and fully customize our own digital card landing page, in Elementor.
Creating your own card comes with lots of benefits.
- First of all, it’s free! Use any feature on your Elementor plan to create your business card, at no additional cost.
- You’ll bring more traffic to your own website and can use your existing analytics to monitor specific stats about your audience.
- It showcases your web creation skills to potential clients, right off the bat.
- Creating cards as a service can be an extra source of revenue.
- It’s earth friendly. No more wasted paper.
- And finally, it can easily be shared with anyone, anywhere.
In this video we’ll create a shareable digital card for Jenna Saunders, a New York City based web creator. We’ll begin by creating the business card landing page, complete with all her contact information and a preview of her work.
Next we’ll create a Popup, which will display a QR code and share buttons, so visitors can share her card with others. And finally, we’ll connect the Popup to her card. Let’s see how it’s done.
In a new page, we’ll start by setting up the page structure. Click the Plus icon to add a Container with one column.
We’ll leave it on Boxed, and set the width to 540 pixels. For Min Height, change the unit to VH or viewport height, and set it to 100, so it takes up the full height of the visible screen..
In style, we’ll choose a dark color for the background color.
Then, in Advanced, unlink and add some padding to the top and bottom.
From the widget panel, we’ll drag in a Container, and head straight to the Style tab. For the background, we’ll add a portrait-style image. Then set the position and size.
Great. Now back to the Layout tab, and adjust the Min Height a bit .
Next, we’ll grab a heading widget, and drag it into our container. Update the text, and switch the HTML Tag to H1. Now style it.
Ok, let’s duplicate it, and change the text. Switch the HTML Tag back to H2 for this one. Style it as well.
Next, we’ll align the Headings. Select the Container, and back in Layout, expand “Items.” Justify Content to Flex End, and increase the Elements Gap.
Looking good. Next, in Style, we’ll use a Gradient Background overlay to add even more contrast between the text and photo. For the first color, we’ll select full transparency.
For the Second Color, we’ll choose a solid dark color. Drag the First color’s location slider to the right. In Advanced, add some padding.
Great, let’s drag in a new Container, where we’ll place Jenna’s contact info and showcase a few pieces of her work. In Style, give it a Gradient background, and select two colors. In Advanced, set the same padding as before.
Drag in an icon list widget. Update the items. And style them.
Next, we’ll drag in a Text Editor widget, and add our text.
Select the Container, and in Layout, increase the Items Elements Gap.
Let’s show off some of Jenna’s work, using the Pro media carousel widget to draw in potential clients.
We’ll go ahead and update the items with images and links to Jenna’s work. Remove any unneeded items.
Next we’ll Style it by changing the border size, and border color. In Advanced, unlink the margin and give the right and left sides a negative margin.
Whoa. That’s looking kind of weird, but don’t worry, we’ll fix it right up in a jiffy.
Go back to Content and adjust the Height.
Ok, now we’ll go ahead and hide that bit outside the Container. Select the Container again, and set the Overflow to Hidden. Voila!
Time to add the social icons.
For our first item, We’ll select the Whatsapp icon, and create an Action link, which is a Pro feature. It allows visitors to click and go directly to Whatsapp to send a message.
Click the Dynamic tags icon and select Contact URL. Choose Whatsapp for the Type, and add the contact phone number.
We’ll duplicate this icon and set it up with Action links for email and phone, using the same method as we did for Whatsapp. Great.
Edit the next icon, and feel free to add as many as needed.
Change Shape to Circle.
Ok, time to style our icons and make them look great.
Now we could stop here, and have a perfectly fine and functioning digital card. But let’s make it even better, and add an option for visitors to share our card, for maximum reach.
But before we do, Hit that Like button if you’re enjoying the video so far!
We’ll click Command or Control E to open the Finder, begin typing in “Popups,” and open it in a new tab by holding down Control or Command, while clicking. Click to Add a new popup, and give it a name.
We’ll close out of the Library, to design our Popup from scratch. Click Settings, and align the Vertical Position to Bottom.
Next we’ll add sleek animations by setting the Entrance Animation to Slide In Up and Exit Animation to Slide Out Down.
To save time on setting up the structure here, we’ll hop back into our business card page, copy the container, and paste it into our popup. Then open the Navigator, and select and delete the unneeded elements.
Drag in a Heading widget. Type in the share text, and align it.
Next we’ll drag in the Share Buttons. Share buttons are a Pro feature and differ from social icons. Instead of directing your visitors to your social pages, share buttons prompt visitors to share your content directly from their profiles.
This is a great way to gather social proof, and encourage your happy clients to recommend your services.
Edit the settings for each button, and as well as layout options. Now, over to Style, and well, you know the drill, style it! Looking good!
Next we’ll add a QR code with a link to Jenna’s card, so it can be scanned by anyone from their phone. There are several great resources for generating QR codes. We’ll use the website QR Code Monkey for this tutorial, but feel free to use your favorite. You’ll find the link in the description.
We’ll paste in our page’s URL. Feel free to check out the other options, as well. Click Create QR Code and then Download PNG.
Drag the file directly into the Editor. Set the size unit to pixels, and adjust the size. We’re ready to Publish our Popup!
Time to set the Popup display conditions. Add a condition, choose singular, Pages. Then begin typing the name of your business card page, and select it.
And Save and Close.
Ok, back to editing our business card. Last time, I promise!
Drag in an Icon widget and select an icon. We’ll set it to open the popup, by clicking Link > Dynamic Tags > Popup. Click the wrench, begin typing in the popup name, and select it.
Set the View to Framed.
Next we’ll style the icon to match Jenna’s branding.
And finally, we’ll position it by going to Advanced > Position: Absolute. Set the Horizontal Orientation to Right and adjust the offset. Adjust the Vertical Orientation offset as well.
Ok, the card is all set for Desktop view. But as we know, most of our visitors will likely be arriving at this page from smaller devices.
So let’s switch to responsive mode, and make sure everything is optimized. We’ll begin in Tablet. That looks great already, so no need to make any changes here.
Moving on to Mobile, we see it could use a few tweaks. Select the main container, and in Advanced, set the Padding to zero.
We’ll select the first heading, and modify the typography. We’ll do the same for the other text elements on the page.
Next we’ll fix up the media carousel. Set the Slides Per View to 3, and adjust the Height.
Last, we’ll take care of the social icons. Adjust the columns, spacing, and rows gap, till we have a result we’re happy with.
Ok, ready to check it out? Click Update and Preview. Amazing! All of Jenna’s information is right there, at a glance, and she can easily share her card QR code.
For even further reach, Jenna can also share the link on her social profiles.
Yet another way for Jenna to share her card is by saving a shortcut to her business card landing page on her mobile home screen.
We can do this from Chrome on Android and Safari on iPhone.
Now you know how to design a digital business card with Elementor and include handy sharing options. So toss…I mean recycle! those paper cards.
Next time you unexpectedly need a card, you’ll be prepared.
Do you use a digital business card? Let us know in the comments below.
Thanks for watching! For more tutorials, check out the Elementor Academy, and subscribe to our Youtube channel. Don’t forget to hit that notification bell.
