The “vCard Widget” allows users to download contact information in a format that can be easily read in other e-mail programs and phones quickly and easily. A lot of customization options are available to create exactly the look you want for your Elementor page. Let’s look at each of the options in the “vCard Widget” below.
Install vCard Widget for Elementor #
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for vCard
- Hover over the widget in the search results and click install
- Add your vCard widget to any Elementor Page
General Settings #
Show Image
Show/Hide the image.
Show Name
Show/Hide the Name.
Show Job Title
Show/Hide the job title.
Show Company
Show/Hide the company name.
Show Contacts
Show/Hide the contact element.
Show QR Code
Show/Hide the QR code.
QR Resolution (px)
Set the QR resolution in px.
QR Position
Set the QR position.
- Above Button
- Below Button
Align Content
Set the alignment of content.
- Left
- Center
- Right
vCard Button Settings #
Button Text
Type text to show in the button.
Show Icon
Show/Hide the icon in the button.
Icon
Choose an icon to display.
Personal Details Settings #
Prefix
Type prefix for the name.
First Name
Type the first name.
Middle Name
Type the middle name.
Last Name
Type the last name.
Suffix
Type suffix for the name.
Nickname
Type the nickname.
Company
Type the company name.
Job Title
Type the job title.
Role
Type the role of person.
vCard Note
Type note for vCard.
Contact Details Settings #
Phone (preferred/work)
Type phone number.
Email Address
Type email address of person.
Website
Type website url.
Address Settings #
Type the address of person.
Contact Item Animation #
Contact Hover Animation
Select the hover animation for contact hover.
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
- Buzz
- Buzz Out
Entrance Animation
Set the entrance animation.
Contact Items Settings #
Manage the contact items using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set the title for contact item.
Source
Select the contact source from given options.
- Phone Work Preferred
- Phone Work
- Phone Home
- Website
- Custom Link
Contact Icon
Choose an icon for contact item.
vCard Widget Styling #
A variety of styling options are provided to control every aspect of the widget’s appearance. Select the colors that match the theme of your site. Make the widget look exactly how you want it to, by customizing the text, buttons, fonts, and layout.
Card Styling #
Style the card padding, border radius, box shadow, border, and background.
Image Styling #
In this section, style the image width, height, image fit, border radius, border and hover animation.
Name Styling #
Set the name typography, color, and gap.
Job Title Styling #
Set the typography, color, and gap job title.
Company Styling #
Set the typography, color, and gap of company element.
Contacts Styling #
Set the typography, color, background, icon size, border, border radius and gap of contacts elements.
Contact Title Styling #
Set the typography, text color, text color hover, and gap of contact title.
Button Styling #
Style the button typography, padding, margin, text color, background color, border, and border radius.
Button Icon Styling #
Style the button icon color, size, and icon gap.
QR Code Styling #
Style the QR code size, margin, background color, and color.
Usage Examples #
Here are some live use cases for the vCard Widget.
