Adding a click-to-call button next to the Divi mobile menu button is a great way to make it easier for your visitors to contact you. This setup ensures that your phone link is visible and accessible, particularly on mobile devices where users are more likely to use their phones to call.
To achieve this, follow these steps:
Step 1: Add PHP Code
First, add the following PHP code to your child theme's functions.php file or use a plugin like Code Snippets to insert it:
add_action('et_header_top', 'db_add_phone_link_before_hamburger');
function db_add_phone_link_before_hamburger() {
echo <<<END
<a id="db-info-phone-main" href="tel:0412341234" aria-label="Call us">
<span style="display:none;">Phone</span>
</a>
END;
}Related Post: Adding PHP to the Divi Theme
This snippet adds a clickable phone link before the hamburger menu, which ensures you have a functional click-to-call button. The aria-label attribute enhances accessibility by providing a description for screen readers.
Step 2: Add Custom CSS
Next, style the button by adding the following CSS to WP Admin > Divi > Theme Options > General > Custom CSS:
/* === Add phone icon next to mobile menu button === */
/* Position the icon */
#db-info-phone-main {
display: inline-block;
position: relative;
float: right;
top: 4px;
right: 60px;
width: 0;
}
/* Style the icon */
#db-info-phone-main:before {
font-family: ETmodules;
content: '\e090';
cursor: pointer;
}
/* Hide the icon on desktop */
@media (min-width: 981px) {
#db-info-phone-main {
display: none;
}
}
/* === END: Add phone icon next to mobile menu button === */Related Post: Adding CSS to the Divi Theme
Explanation
- Position the Icon: The
#db-info-phone-mainselector positions the icon next to the mobile menu button. It uses relative positioning and floats right to place it correctly. - Style the Icon: The
:beforepseudo-element is used to display the icon. Thefont-familyis set toETmodulesto use Divi's icon font, and thecontentvalue is the icon code. - Responsive Behavior: The
@mediaquery hides the icon on screens wider than 980px, ensuring it's only visible on mobile devices.
Conclusion
With these steps, you now have a functional and stylish click-to-call button next to your Divi mobile menu button, making it easier for your mobile visitors to reach you with a single tap. This simple addition enhances user experience and supports better engagement with your site.
0 Comments