- #Animationist business card update
- #Animationist business card code
- #Animationist business card free
In keeping with this CSS class, we will add CSS code that will show the before the card's content through flip animation. Since the placement and customization of all our modules are done, we will now select them using Divi's multi-select feature and add a common CSS class. It will change the do the job.Īlso, from the design tab, align the social media follow icons in right. To make all icons transparent, open each social media module and drag the white marked bar down. Add this module under last blurb module.įrom the settings, make every social icon transparent and add a URL if you need it. The final module we'll add on back card is social media follow module. Copy the previous blurb module and change the content. Add: The Websiteĭo same as we did for email section.
#Animationist business card update
update the body content with phone number and add a icon.įrom the design settings, update the following:ĭuplicate the previous blurb module and update the body content as email address. add a blurb module under the company text module. To add the contact number of the individual. Text Text Size: 22px (desktop and tablet), 18px (phone).To add the company name, duplicate the previous text module and change the body content. Text Text Size: 16px (desktop and tablet), 14px (phone).An edit the body content and make adjustments on the design tab. Text Text Size: 28px (desktop and tablet), 22px (phone)ĭuplicate the previous text module to add the job position.Make this following changed on design tab. And update the name of the person you want to feature. Now add a text module under logo module to the card for name. Horizontal Offset: 50px (desktop and tablet), 10px (phone).Vertical Offset: 30px (desktop and tablet), 15px (phone).We have our back card in place, we'll add logo on it now. Now add the CSS class to the divider and update the position. Place Gradient Above Background Image: YES.Background Gradient Right Color: #322b3f.Then we turn off the divider visibility from the divider setting because we will only use the divider to attach the image to the card.
To create this, we will attach a Divider in column 1. Here we will put all the information about an individual. Building The Back Cardįirst, we will create the business card that will usually be on the back and come to the front when clicked. Now we have a to-column layout and each of them have same padding and CSS Class. This code will work as a trigger to click for our flip animation.
#Animationist business card free
With the best free page builder Elementor Start Now Start with adding an one-column row to the regular section. Looks interesting, huh? Part 1: Design Of Business Card That Flips On Click Add: Row 1
0 kommentar(er)
