Enable a Gradient Overlay with a Parallax Background in Divi

by Phoenix | Oct 26, 2024 | Uncategorized

Gradient Overlay with Parallax Background

Enable a Gradient Overlay with a Parallax Background in Divi

Want to give your Divi section that sleek, layered look with a gradient overlay on a parallax background? 💥 You’ve come to the right place! Normally, Divi doesn’t make this combo easy—but we’ve got a quick CSS trick to make it happen directly in the section’s settings. Let’s dive in! 🚀

content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #359f99 0%, #1d2a54 95%);
opacity: 0.9;
z-index: 2;
pointer-events: none;

Divi Mobile Menu

Step 01:

Add the CSS Directly to the Section

In the Divi Builder, open the section where you want to create this effect.
Head to the Advanced tab, then click on Custom CSS.
In the Before field, paste the following CSS:

Step 03:

Set the Background Image and Enable Parallax

Go to the section’s Background settings and open the Image tab.
Select your background image, then turn on the Parallax option. ✨

Gradient Overlay with a Parallax Background

Damm! You can also inspect below comment section for result!

Step 04:

Configure Your Gradient Overlay

You can easily change the gradient in the code
Choose your colors, set the direction, and adjust opacity to get the perfect overlay effect. 🎉

Gradient Generator | More Tutorials

Pro Tip:

💡 This works by adding custom CSS to the section’s Before styling. If you’ve already got any custom styles in the Before box, you might want to double-check to avoid conflicts! 🧐

How To Add Multiple Recipient Email Addresses In Divi Contact Form

by Phoenix | Oct 26, 2024 | Uncategorized

multiple recipient email addresses in divi

How To Add Multiple Recipient Email Addresses In Divi Contact Form

Yo, Divi Enthusiasts! Ever wanted your Divi contact form to send emails to more than one person? Whether you’re running a business or just need multiple team members in the loop, adding multiple recipient email addresses is a breeze. Let’s dive in and show you how to make this happen—no sweat! 😎

Step 01:

Open Your Divi Contact Form Module💻

First things first—jump into your Divi Builder and find the page that contains your contact form. Once you’ve located the form, click on the module settings (you know the gear icon 🔧) to get started.

Step 02:

Head to the “Email” Section

In the Contact Form Module settings, scroll down to the Email section. This is where the magic happens. ✨

multiple recipient email addresses in divi

Step 03:

Add Multiple Recipients (Separated by Commas)

Here’s the hack: You can send form submissions to multiple recipients by simply adding their email addresses, separated by commas.

For example:
youremail@domain.com, teammate@domain.com, boss@domain.com

*Pro Tip*: Make sure to check for typos! You don’t want those emails getting lost in the void.

Step 04:

A Test It Out

Before you celebrate, make sure to test it! Send a test message through the form and confirm that everyone on your recipient list gets the email.

Divi Documentation | More Tutorials

Step 5: You’re Done—Enjoy the Power of Multiple Email Recipients!

And just like that, you’ve leveled up your Divi contact form game. Now you can easily keep your whole team in the loop with every submission. 🙌
Feeling like a web wizard yet? Explore more Divi tricks and level up your website skills with our other tutorials. Stay tuned, DiviDaddy’s got your back! 🚀

How to Change the Divi Mobile Menu Icon

by Phoenix | Oct 25, 2024 | Uncategorized

Divi Mobile Menu

How to Change the Divi Mobile Menu Icon

Are you looking to give your Divi mobile menu a unique touch? Changing the mobile menu icon can elevate your site’s look and feel, providing a personalized experience for your users. In this tutorial, we’ll go through how to easily replace the default Divi hamburger menu icon with a custom one using simple CSS techniques.

Divi Mobile Menu

Step 01:

Log In to Your WordPress Dashboard 🔐

First things first, log in to your WordPress dashboard.

Step 02:

Access the Theme Customizer

The Divi Theme Customizer is where you’ll make most design changes. To get started, navigate to your WordPress dashboard, then go to Appearance > Customize. This will open the theme customizer where you can preview changes live.

L

/* Change Divi Mobile Menu Icon */
.et_mobile_nav_menu:before {
content: ‘\63’; /* Replace ‘\63’ with the code for your desired icon */
}

Step 03:

Add Custom CSS to Replace the Icon 💻

To change the mobile menu icon, we’ll add a bit of custom CSS. Scroll down in the Theme Customizer to Additional CSS and paste the following code:

Step 04:

Customize the Icon Code

The \63 code corresponds to the hamburger icon. You can replace it with any other FontAwesome icon code. Check FontAwesome’s website for a wide range of icons to find one that suits your website’s vibe.

Elegant Icon Font | More Tutorials

Step 05: Save and Preview 💾

Once you’ve made your changes, click the Publish button in the Customizer to save them. After that, preview your site on a mobile device to ensure the icon appears as expected.

Additional Tips

• Ensure your custom icon is compatible with the Divi theme for optimal display.
• Test on multiple devices to confirm responsiveness.
• Experiment with icon colors by adding color properties in the CSS code.
Changing your Divi mobile menu icon is a great way to add a personal touch to your website. With just a few steps, you can enhance your site’s visual appeal and improve the mobile user experience. Try out different icons and find the one that best reflects your brand!

How to Disable Top Tier Dropdown Menu Links in Divi

by Phoenix | Oct 25, 2024 | Uncategorized

Divi Mobile Menu

How to Disable Top Tier Dropdown Menu Links in Divi

Hey DiviDaddys community! 🌟 Want to make your top-tier dropdown menu links unclickable? Here’s a straightforward guide to help you achieve that.

Divi Mobile Menu

Step 01:

Log In to Your WordPress Dashboard 🔐

First things first, log in to your WordPress dashboard.

Step 02:

Create Your Menu in Appearance

Navigate to Appearance > Menus.
Create the menu structure you want, for example, a top-tier “Services” link with submenus like “Web Design,” “SEO,” etc.

Step 03:

Save the Menu and Adjust Theme Options 🛠️

Save your menu settings.
Go to Divi > Theme Options.
Navigate to the Navigation tab.
Under General Settings, enable the option Disable top tier dropdown menu links.
Save your theme option settings.

Step 04:

Clear Cache and Reload Your Page 🔄

After saving your settings, reload your page to see the changes. If the top-tier links are still clickable, try clearing your browser cache or any caching plugins you might be using.

Divi Documentation | More Tutorials