In this tutorial, I’ll show you how to create a full-screen Elementor vCard with a floating image, text, a portfolio auto-download button on click and a quick contact form that appear in a modal popup. All you’ll need is the free version of elementor and premium addons.

This section can be used as a one page fullscreen website or a one-page scrollable website, or you can even add it to your other pages on your site. It will also be tablet and mobile-friendly.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Create an Elementor vCard Step by Step

Creating Elementor Sections

To start off, go to your WordPress Dashboard, under the Pages section on the left side, create a new page, name it; Full Screen vCard then click the Publish button on the upper right side, click on the Edit with Elementor button. (00:59)

After this go to Page Settings on the left side and under Page Layout change to Elementor canvas (01:13)

Next is to add a full column section, go to the plus (+) button, click on it, and in the next window, click on the single-column section. (01:18)

On the left side, you’ll find the Edit Section area where you can make some changes to your section.

Under Content Width, leave it as Boxed

Make Width 1280 pixels and Height Fit to screen

To add an inner section to this section; go over to the Widgets Icon (01:35).

In the menu that shows up find Inner Section, drag and drop it into the previous section (01:38).

By default, the inner section will give you two columns.

Select the first column inside the inner section and go over to the Edit Column area on the left side, under Column Width type 40 to make it 40% of the width of the inner section, since this is where the column content is going to be.

Go back to the main section, select it then go to Style; which is in the middle option under the Edit Section area.

Under style go to Background Type and choose Image, then go select an image to use from your Media Library. (02:10)

Now, go and select the first column, the one that is carrying the inner section to give it a background color.

Go to Style on the left and under Background type select Color and choose a background color.

After this go to the Advanced option; under advanced go to Padding and give it 100 pixels for top, bottom, left, and right.

With that section still selected, go under Style, go down to Border and give it 50. This will give you rounded borders. (02:49)

Still under style, go back to Background>Color and make it a bit transparent, so that you can be able to see what’s happening in the background.

Click the Update button at the bottom left, then go to the Preview option next to the Update button, to preview what you’ve done so far. (03:08)

The image here is not covering the whole section. To fix that go back and select the main section, go to Style and under Size choose Cover, then preview again.

Now that the main section is done, the next step is to customize the inner sections.

To Read: Max Mega Menu for Elementor – Create Free Elementor Mega Menus

Adding Floating Image with an Elementor Mask

First is to add an image. To do this, go to the Widgets icon on the upper left, look for the Image widget then drag and drop it into the first column of the inner section. (03:39)

Select the image you just dropped and go over to the media library to select an image to insert. Insert it into the column. (03:48)

At this point we want this image to be in a circle. So select the image you just inserted, go to Advanced on the left, go down to the Mask option and click to enable it, the image automatically becomes circular, but you have to options to change it to whatever shape you want or even upload your own shape. (04:04)

Now go to the Style of the image and make Max Width 80%

After that, you need to add a border to the image. However, do not apply the border to the image itself, instead, add a widget and move it to the back of the image.

So go back to the Widgets area look for the Icon Widget, click on it to take you to the Icons Library. Here look for a Circle, click to insert it. Then under the View option choose Stacked. Then go to Style and under Primary Color choose a different color, then use that same color for Secondary Color. 

The Stacked view option enables you to increase the size of the Circle icon, so set the size to 165 (05:14).

And now it’s time to move the image widget up, you do this with negative margins.

Go to Advanced, under Margin, make the top margin -403, this makes the image sort of sit on top of the icon circle shape. (05:33)

Select the icon widget again and increase its size a bit, then select the image and move it up some more via Margin, for it to fit right into the Icon circle. (05:44)

Next is to make the image float on top of the icon. To do this:

Select the image widget, go to Advanced then select the Floating Effects option. Floating effects come with the Premium Addons for Elementor.

So when you select the Floating Effects, enable it then go under Motion and enable the Translate option. This will give the image a floating effect. (06:14)

Update and preview.

When you look at the original demo, you’ll notice that the image color is transitioning from grayscale to full color. So the next thing we’re going to do is to achieve that look.

Back to Elementor editor, select the image widget and in the Edit Image section, under Floating Effects go to the Filters then enable the Grayscale feature. 

You can also increase the border of the image by reducing the image itself from 80 to 75%, and bring the margins down to -420 instead of -403, both under Advanced.

The Second Column

Now that the image widget is done, it’s time to work on the second column. This column has a text editor widget, a heading, another text widget, and 2 buttons. (07:28)

Also Read: 5000+ Elementor Template Kits – Free and Premium

Let’s get to it.

Start off by going back to the Editor. Go to the Widgets icon on the right and click on it. In the menu find a Text Editor widget, drag and drop it in the column, find a Heading widget and do the same, then another Text editor widget below the heading, and finally drag and drop a button widget. The second button will be added later on. (08:02)

To format the text in the widgets, select each widget then go over to the left and type in the text you want for the text and heading sections, as well as the button. 

If you want to use the same styling as I have in the demo, the font in the first text box is Poppins, size 20 pixels. The heading is Poppins size 66 pixels. 

Create a Direct Download CV Button in Elementor vCard

Select the buttons widget, go to button text and type in “Download CV”, then down on the button Link option; this is where you’ll add the link to the file, and you need to make sure when someone clicks on the download button they’re able to download the file. 

First, you need to upload a file to the media library and then link to it. To do this; CMD/CTRL+E to go to the Finder then type in Dashboard then open it in a new tab. Now in the Dashboard menu go to Media and then to Library, choose your CV, or first upload it from your computer.

It can be in PDF or even Zip format if you’re sharing more than one file. When you click on your file and check on the right side you’ll find an option that says “File Url” and below is a copy link button, click on that button to copy the file link (09:37).

Then just close the library and go back to the editor, paste the link, then click on the Link Options (the settings/gear icon on the side), then go to add custom attributes to your link. (09:52)

Type in a custom attribute; download|john deo resume, that’s the name the file (jonh deo resume) will have once it’s downloaded, go to update at the bottom, then preview. Now when you try to click on the download button, the cv automatically downloads, and it has the name you just typed in the attributes.

Customize the Elementor Download Button

To do this; go back to the editor and select the button. Go to Style, under Typography; change to Poppins on Family; size 20, text color off-white, color grey, border type solid 3 px, border-colour green, border-radius 35.

Under the Hover option; text color white, background color green. For drop shadow go down to box-shadow, choose vertical and make it 8, change it to a darker color.

Now go back to Advanced, enable the Floating Effects option, here go to the Scale option and enable it; with 1.1 scale X and 1.3 scale Y, duration 3000.

Still, under Advanced, go down to Positioning, make Width inline auto because you’ll be adding another button.

Also Read: 15 Fun Elementor Features You Don’t Know Exist

Create a Contact Modal Popup in Elementor

This second button is called a modal box popup, when someone clicks on it, it shows a popup. It comes with the free version of Premium Addons for Elementor, but you can also get it in Elementor Pro.

To set up this button:

Press CMD/CTRL+E to go to the Finder then type in Dashboard and open it up. Under Plugins find Premium Addons for Elementor (if you don’t have it currently enabled just enable it by making sure it’s green).

Premium Addons gives you access to all its widgets and addons whereby you can just enable all or find the specific one you want and turn it on. Here find the Modal Box and turn it on. (13:26)

Now go back to the editor, in the widgets area (click on the widgets icon) search for Modal Box and drag and drop it in the column.

It’s supposed to be positioned beside the Download button and to make it so, select it and go Advanced, go to Positioning and under Width set it to be inline auto, this will automatically move it next to the download button.(14:05)

Now select the button to edit it; go to Content, turn off the Header option, under Content to show choose Elementor template.

For the content of the Elementor template, we need to create a form template to use. First, press CMD/CTRL+E to go to the dashboard. 

In the dashboard under Templates go to saved templates,  it’s a one column template with text, a form and some social icons. I’m using the Contact Form 7 widget from Premium Addons for Elementor, you just drag this widget into your canvas then choose your contact form 7. When done, say save it as a template and give it a name. 

Below is a detailed video tutorial about how to create a contact form 7 with Elementor.

Back to your editor, under content locate the elementor template to use, that’s the contact form you created.

After that, go down and enable the Close Tab; for a user to be able to close the popup when done with it (15:15)

Next is the Entrance Animation for the form, leave it to default, that is; Fade in down. 

Moving on to the Trigger Options; here choose Button to be the trigger and enter Button Text as “Contact”. You can also add icons if you want.

Now, select your button and go under Style to make a few changes: set color to off-white, hover color gray. Under Typography choose Poppins and set it to 20 pixels. For background color choose the vGrey, border type solid with 3 pixels, border color off-white and border-radius 35pixels.

For Padding set Top to 10, Right 20, Bottom 10 and Left 20. For the Drop Shadow you can just go to the Download button, go to style, box shadow and copy the color code then paste it in the color option of the contact form shadow. Update and Preview. (17:14)

To edit the hover color; select the button, go to Hover option and set background color to off-white.

Now go down to the Lower Close Button option, set the text color to vGrey and the background color transparent. Over to the Hover option; set color to vGrey and background transparent. This makes it so that the close button remains the same even on hover.

The last setting is for the Modal Box so select it; here set the Width to 30%, then Update and Preview.

To Read: Reversed Elementor Horizontal Tabs with Gradient on Hover + a Tiny CSS

Elementor vCard Responsive Settings

Back to the editor go to the Responsive Settings icon at the bottom: 

Select the tablet device; select the first column and in the Edit section area set column width to 100%. Now select the next column (with the text and buttons) and make it column width 100% as well. 

Next, select the image, go to Style, and under Max Width set 45%, then go to Content, and under Alignment set it to align left. 

Now select the icon widget, go to Content and set it to align left. 

Back to the image, go to Advanced, under Padding make it -350, then select the icon widget, and in Advanced under margins set -12 for Left padding.

Section now looks good on the tablet device. (20:36)

Over to the mobile device:

Select the main section and go to Advanced, set padding to 20 pixels on all sides.

Select the first column text and under Advanced set Padding to 30 pixels on all sides.

Now select the icon, go to size under style to reduce it to fit with the image.

For the Download button: 

Under style set padding to Top 10, Right 20, Bottom 10 and Right 20.

Under Typography increase font size to 16

In the Advanced option; add 20 pixel padding to the bottom.

Select the Contact button:

In Advanced go to the positioning and change it to Full width.

Go to Content and under Trigger options set it to align center. 

The mobile device is now looking good too. (22:48)

Update, preview and publish.

In Closing

With this, our Elementor vCard is fully styled and functional! You are able to download a file, the modal popup opens up on click and can be closed too, our image is floating, and everything is also functional and responsive on desktop, tablet and mobile devices.

For any queries or comments, use the section below. Don’t forget to subscribe to my newsletter and youtube channel if you haven’t.