Divi’s Animated WhatsApp Button: The Ultimate Tool for Instant Calls!
Today, we have an exciting tutorial for you: creating a floating WhatsApp button for instant calls. This button is a fantastic addition to any site, allowing visitors to easily start a chat on WhatsApp with a single click. Let’s dive into the step-by-step guide on how to set this up.
Why Add a WhatsApp Button?
Before we get started with the technical details, let’s discuss why adding a WhatsApp button to your website is beneficial.
1. **Instant Communication**: In today’s fast-paced digital world, visitors expect instant communication. A WhatsApp button allows them to contact you directly without the hassle of filling out forms or waiting for email responses.
2. **User-Friendly**: WhatsApp is one of the most popular messaging apps globally, with over 2 billion users. Most visitors are already familiar with it, making the communication process seamless.
3. **Enhanced Engagement**: Adding interactive elements like a WhatsApp button can significantly enhance user engagement. It provides a direct line of communication, making visitors feel more connected to your business.
4. **Versatility**: Whether your visitors are using a desktop, tablet, or mobile phone, a WhatsApp button ensures they can reach you effortlessly.
### Step-by-Step Guide to Adding the Animated WhatsApp Button
1. Setting Up the Button
First, let’s look at our site. On the left-hand side, you’ll see our WhatsApp button, subtly pulsing to grab attention without being too distracting. As you scroll down the site, the button remains fixed in position. Hovering over it stops the animation, and clicking on it will open WhatsApp on a mobile device, prompting a chat.
2. Enabling the Visual Builder
To get started, enable the Visual Builder in Divi. This feature allows you to build your site visually and see the changes in real-time. Delete any existing elements you don’t need, and we’ll create our button from scratch. Add a new row; the placement doesn’t matter since we’ll use fixed positioning.
3. Adding the Icon Module
Within the new row, add a single-column layout and insert an Icon Module. This module will serve as our WhatsApp button.
1. **Select the Icon**: Choose the WhatsApp icon from the icon library. Select the one without a background since we will create our own background.
2. **Customize the Icon**: Set the icon color to white and adjust the size to around 50px. You can experiment with different sizes to see what works best for your design.
4. Customizing the Background
Now, let’s customize the background of the icon to match WhatsApp’s green color scheme.
1. **Set Background Color**: Go to the background settings and select a green color that matches WhatsApp’s branding.
2. **Adjust Padding**: Use the padding settings to center the icon within the background. Adjust the padding values until the icon looks perfectly centered.
3. **Round the Corners**: To round the corners, set the border radius to 5px for a slightly rounded look or higher for a fully circular button. This adds a polished, professional touch to your button.
5. Creating the WhatsApp Link
Next, we’ll create a live link to your WhatsApp number. This link will open WhatsApp directly when clicked, allowing visitors to start a chat instantly.
1. **Format the URL**: In the icon’s link settings, type the following URL format to create a live link to your WhatsApp number:
“`
https://wa.me/YourNumber
“`
Replace “YourNumber” with your full international phone number, including the country code without spaces. For example, if your number is in the United States, it would look like this:
“`
https://wa.me/1234567890
“`
2. **Open in New Tab**: For a better user experience, set the link to open in a new tab. This way, your website remains open, and users can easily return after initiating the chat.
6. Positioning the Button
Now, let’s position the button so that it stays fixed as visitors scroll down the page.
1. **Go to Row Settings**: Navigate to the row settings and select Advanced > Position.
2. **Set to Fixed**: Change the position from Relative to Fixed. This will ensure the button stays in the same place as users scroll.
3. **Adjust Placement**: Use the positioning grid to place the button at the desired location on the page. Adjust the horizontal and vertical offsets to fine-tune the position.
4. **Ensure Visibility**: Ensure the button stays on top of other elements by adjusting the Z-index in the Advanced settings. A higher Z-index value ensures the button remains visible above other elements.
7. Adding the Animation
To make the button pulse, go to the module’s Advanced settings and add the following CSS in the Custom CSS section:
“`css
selector {
animation: scale 3s infinite;
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
“`
This code creates a smooth pulsing effect, scaling the icon up and down.
Final Touches and Publishing
Now that we’ve set up the button, let’s make sure everything works perfectly.
1. **Save Changes**: Save your changes and exit the Visual Builder.
2. **Test the Button**: Ensure the button remains visible and functional as you scroll through your site. Clicking the button should open WhatsApp and prompt a chat.
3. **Adjust if Needed**: If the button is not perfectly positioned or visible at all times, go back into the Visual Builder and tweak the settings until it’s just right.
Conclusion
And there you have it! A simple, yet effective animated WhatsApp button for instant calls on your website. This interactive feature can significantly enhance user experience by providing a quick and easy way for visitors to contact you.
Benefits Recap
1. **Improved User Engagement**: The pulsing animation draws attention to the button, encouraging visitors to use it.
2. **Instant Communication**: Provides a direct line of communication, enhancing customer service and satisfaction.
3. **Versatile**: Works seamlessly on both desktop and mobile devices.
4. **Professional Appearance**: Customizing the button to match your site’s design adds a polished, professional look.
Encouragement and Final Words
Adding a WhatsApp button to your website can greatly improve how you interact with your visitors. It’s an easy way to offer instant support and answers, making your site more user-friendly and engaging. Plus, with the added animation, it’s sure to catch the eye of anyone visiting your site.
If you found this tutorial helpful, please like, share, and comment below. Don’t forget to subscribe to our channel for more tips and tutorials. If you have any questions, feel free to ask in the comments, and I’ll be happy to help. Your feedback is valuable and helps us create more content that meets your needs.
Try out the Divi theme:
Divi Supreme Modules Pro Plugin 10% Off:
Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6
Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU
Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw
Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
Why Divi?
Divi is a popular WordPress theme known for its ease of use and versatile design. It is a versatile theme that can be used for a variety of websites, including business, personal, and eCommerce stores.
The Divi Theme offers a wide range of customization options, allowing users to create a unique website that is tailored to their needs. The theme has a drag and drop page builder, which makes it easy to create custom layouts and pages. This feature makes it easy to customize the look and feel of your site without having to do any coding.
The Divi Theme also offers a variety of pre-made layouts and designs, making it easy to find something that meets your needs. It also has a library of modules, which are snippets of code that can be used to add functionality to your website. This makes it easy to add contact forms, social media buttons, and other features to your website quickly and easily.
The Divi Theme also comes with a wide range of customization options, allowing users to easily change the colors, fonts, and other elements on their website. It also has a wide range of plugins, which can be used to extend the functionality of the theme and add more features to your website.
The Divi Theme is also optimized for speed and performance, making sure that your website loads quickly and runs smoothly. It is also optimized for search engine optimization, making sure that your website is visible in search engine results.
The Divi Theme also comes with a wide range of support options, including video tutorials and a dedicated support forum. This makes it easy to get help if you have any questions or need assistance with the theme.
Overall, the Divi Theme is a great option for anyone looking to create a professional website quickly and easily. It is easy to use, versatile, and offers a wide range of customization options. It is also optimized for speed, performance, and search engine optimization, making sure that your website is visible in search engine results. With its powerful features and great support options, the Divi Theme is an excellent choice for
anyone looking to create a website.
Using the Divi WordPress theme.
**Drag-and-Drop Page Builder**:
Divi’s hallmark feature is its intuitive drag-and-drop page builder. This visual editor allows you to create, edit, and design pages without needing any coding skills. You can easily move elements, add content blocks, and adjust layouts by simply dragging and dropping. This flexibility empowers you to experiment with different page designs and see changes in real-time, making it an ideal choice for those who appreciate a hands-on approach to web design.
**Global Elements and Styles**:
Divi simplifies the process of maintaining consistency throughout your website. With the Global Elements and Styles feature, you can create and save custom modules, sections, and design styles to use across multiple pages. This not only saves time but ensures a uniform look and feel for your site, reinforcing your brand identity and improving user experience.
**Header and Footer Builder**:
Divi offers a built-in header and footer builder, allowing you to design and customize these crucial sections with ease. You can create sticky headers, transparent headers, and various styles to make your website’s navigation and branding stand out. With Divi’s Header and Footer Builder, you have full control over the structure and appearance of these key elements.
**WYSIWYG Editing**:
Divi employs a What You See Is What You Get (WYSIWYG) editor that makes content editing straightforward. You can edit text directly on the page, which is especially beneficial when making quick changes to content. This real-time editing experience offers convenience and efficiency.
**Advanced Effects and Animations**:
To enhance user engagement and visual appeal, Divi offers a wide range of advanced effects and animations. You can apply elegant animations to your modules and sections, creating a dynamic and interactive user experience. These animations are customizable and can be fine-tuned to match your site’s unique style.
**Monarch Social Sharing Plugin and Bloom Email Opt-In Plugin**:
When you choose Divi, you gain access to Elegant Themes’ plugins, including Monarch and Bloom. Monarch is a versatile social sharing plugin that enables you to display social sharing buttons in strategic locations on your website. Bloom, on the other hand, is an email opt-in plugin that simplifies the process of building your email list. These two plugins seamlessly integrate with Divi, giving you added functionality to enhance your website’s social presence and audience engagement.
**Affordable Pricing and Licensing**:
Divi’s pricing structure is reasonable and accessible. You can choose between an annual subscription or a one-time payment for lifetime access. Both options provide you with access to Divi, Extra (a magazine-style theme by Elegant Themes), Bloom, Monarch, and constant updates and support.
**A Thriving Community and Resources**:
Divi boasts a thriving user community and an abundance of resources. This community-driven environment includes forums, tutorials, online courses, and third-party Divi-related tools. Whether you’re seeking advice, design inspiration, or technical solutions, you’re likely to find answers within the Divi community.
In conclusion, the Divi WordPress theme is a comprehensive and versatile tool that caters to web designers, developers, business owners, bloggers, and anyone seeking a robust yet user-friendly platform for website creation. Its feature-rich environment, user-friendliness, customization capabilities, and integration of essential plugins make it a standout choice for those looking to build stunning and functional websites. With Divi, you can tap into the magic of web design wizardry and create websites that leave a lasting impression on your visitors.
Free Stock Photos
Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.
There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.
Free Stock Photos – Where to get an unlimited supply
Latest YouTube Videos
