How can you add and use Divi anchor links?

How can you add and use Divi anchor links?

Do you want to improve the usability and navigation of your Divi website? Anchor links can effectively structure your content and enhance navigation, especially on a website with long-form content. Apart from navigation, one of the most important advantages of Divi anchor links is perfect for SEO

However, it can be hard to know where to start while the concept of anchor links is clear. Therefore, when you initially started designing WordPress websites, it was one of the first things you must hunt for. 

This article will demonstrate how to add, use, and make cool effects with Divi anchor links. You’ll learn how to improve your site’s navigation and general user experience at the end of this tutorial. But first, we start with the defining anchor link for those who don’t know about it. So let’s begin!

What is an anchor link?

An anchor link is each id you can use to link to a specific content block or element on a page or post. It will take a user to that particular “anchored” portion if they click (or search for) the page/post URL followed by the anchor link.

Divi anchor links payment process

You have the option of using CSS IDs as anchor links in Divi. Using the Divi Builder, you can add a CSS ID to any part or module you have access It. For example, let’s say you want to give a portion of a webpage the CSS ID “demo” Let’s also evaluate the website’s URL: “www.domain.com/sample-post.”

So now, if you type “www.domain.com/sample-post#demo” into your browser, it will open the website and immediately scroll you to the portion with the anchor link. 

How do I anchor a link in Divi?

Using the Divi anchor links on your website will enhance your user experience. But first, we will give you a basic idea of how anchor links function at this level and how can you include them into your website’s UI and UX? So, here are a few practical examples of how to use Anchor Links in the Divi theme.

Create a one-page website 

Create a one-page website using Divi builder either you can use the prebuilt template or customize the template. Single-page or one-page websites are great for giving users all the information they need without requiring them to jump around your site.

However, if the one-page webpage is too long, it may not be easy to navigate between sections. As a result, here’s a step-by-step tutorial on making a one-page navigation menu with anchor links.

 Assign anchor links to Divi sections

You can use connections to create anchor links for the various sections of your one-page website. Then under the Menu, establish links that allow customers to jump between sections easily. We’ll use one of Divi’s predefined templates for the sake of this article. Here’s a basic example of how to integrate this functionality on your website.

One Page Layout Example

We use a predefine Digital payment layout that is the perfect example of a one-page format with multiple scrollable sections. So now the question comes, how to add anchor links to the areas and make the page easy to navigate?

One Page Layout Example

The dome template we equipped has several sections like home, our services, sending payments, getting paid, our customers, reliable Partner, and many more. So now we add anchor links that will skip some sections to get us to the destination. 

Divi Anchor links step by step procedure

Well, the first step is to understand which sections on the page you need to link. So, we connect the Learn More button to the bottom of the page named Getting Paid.  For that purpose, we use CSS Id to apply this feature. Navigate to the Advanced tab and add the Demo as a CSS Id to the Getting Page section. Then, click the Green Tick icon to store your CSS Id, as shown below.

Now go top of your page using the back to the top button, or scroll up and add this id to the post, section, or button. For example, we gave this id to the Learn More button by clicking on the settings. Once the settings are open, scroll down to the Link and add #demo into it. Now you may use this feature in different sections or buttons. 

What is an anchor link?

Build a One Page Navigational Menu

For one-page websites, this type of menu design is popular. Creating links in the Menu to go from section to section on your page can be effective. It will work with any predefined layout, but we will use the same template design that we already used above.  

First, you need to login into the WordPress admin penal dashboard, and on the left sidebar, navigate to Appearance and then click on the Menu. Once the new page opens, you’ll have to create a new Primary menu and add custom links for each page section.

Build a One Page Navigational Menu

Build a Primary Menu

To build the primary through custom links, you must enter the specific CSS ID for the area you want to jump to must be prefixed by a hash-tag (#) in the URL field. If you need an anchor link for the Our Services, type  #OurServices to establish a menu anchor in the URL field for our Services section. We’ve now developed a special link for each area of the website based on this logic.

Build a Primary Menu

Next, you will have to complete the menu by adding the sections or pages in it. We create a menu list home, Our Services, Sending Payments, Our Customers, Reliable Partner, and Contact Us. You can create your custom menu as per your requirements. Click the Save Menu button when you’re finished. Also, double-check that Primary Menu is selected as the display position.

If you have an issue while setting the contact form, check out this article that assists you in configuring with step by step procedure.

Finally, go to the main page, and assign the ID as per the menu list. Next, you need to add CSS IDs to each section you want to link (or scroll).   

Build a One Page Navigational Menu Divi

However, open the settings section, click the advanced tab, and add CSS IDs. Once you are done with all the CSS IDs, Save these settings and check that everything is working fine.

a guide to Divi anchor links

 

Build Table of Content using anchor links

Suppose you’re creating a long-form article of more than 2000 words. Within the content, you most likely have a lot of headings and subheadings. If that’s the case, wouldn’t it be good to be able to jump between the many titles and subheadings quickly? You may have already noticed this functionality on other websites that use a table of contents.

To make this feature available in WordPress, you’ll need a “table of content” plugin. Users of Divi, on the other hand, do not need to install any additional software. Instead, the full functionality can be controlled solely by anchor links. 

Add ID attribute to header tags.

Use the Divi Builder to open an existing post or create a new one to add the Id for headings. Now open the module settings for a text module that contains the article headings. Next, open the Text section under the Content tab and switch to Text view. It will display the material in HTML format, however, if you want to hide the header or footer, check out our other article which will assist you in hiding them.

Add CSS ID to Heading

The heading should have HTML formatting by default like this:

<h2>Heading First </h2>

We require to tweak it and add an ID properties like this:

<h2 id=”heading-first”>Heading First </h2>

All you have to do is assign each of the headings in the post a unique ID. It’s now time to start making the table of contents.

Assigning Divi anchor links to the Table of Content

A table of contents is a bullet list that represents the entire content. However, you should use a nested bullet list to highlight the headings and sub-headings to make a beautiful table of content. It’s time to add the anchor links to your table of contents after you’ve finished creating it.

Again, we will use the href tag to get the id’s, and like previously, the id property will be followed by a hash-tag (#) in the URL. After you’ve finished customizing the text module, click the Green Tick and Save your changes. Now it’s time to put this feature to the test anchor Links in the Table of Content, and there you have it: a unique Table of Content created with anchor links and Divi.

Use the Divi Dot Navigation

To explain this, we can take the previous example. We can now jump to three sections on the website ( Our services, Contact Us, and two more areas) not just through our menu anchor links but also from a completely different page to add CSS IDs to those sections. 

When creating a link on a separate page, you have to use the anchor link’s URL. So, for example, it would look like this: www.yourdomain.com/page/#ourservices if you wanted to link to the services section with the ID our-services. It works well for various calls to action (e.g., learn more, Read me! etc.) that you might want to link to from multiple pages on your site.

Divi dot navigation is technically built-in anchor connections. You won’t need to add any CSS section ids of your own. The Dot Navigation function builds anchor connections from your sections automatically.

Use the Divi Dot Navigation

Switch the Dot Navigation option to ON in the Divi Page Settings at the top right of the screen while editing your page to enable dot navigation. That’s it.

Conclusion 

So there you have it, a short tutorial on using Divi anchor links in the Divi theme. We hope that you find this article informative and that it inspired you to improve the UI and UX of your Divi website by using anchor links.

That being said, if you’ve already figured out a clever way to use anchor links, please share your strategies in the comments section below. It might even inspire one of your patterns, so share your opinion in the comments below.

 

How to Change Divi Logo Size?

How to Change Divi Logo Size?

Your company’s logo appears in various places, from a small favicon on your website to a massive billboard on a busy highway. Your logo can be placed in multiple locations, with multiple orientations and sizes within your website. We’ll show you how to add, change and adjust the Divi logo size for distinct size orientations. 

It will be much easier to integrate your logo to your website and your social media, print items, and other brand collateral. However, it will be easier to build a perfect logo if you know the different logo dimensions and sizes. Fortunately, Divi comes with several useful features for customizing the logo height. We’ll look at how to determine the optimum Divi logo size for your website in this article.

Divi logo height is an essential consideration while developing the site because the appropriate logo helps in branding, and many users remember your logo’s elegance. In this article, we will show you how to add, change the height, and use a little CSS for tablet and mobile devices for a suitable appearance. First, we discuss some common questions, and then we’ll deep dive. So let’s start! 

What size should the Divi logo be?

The logo should be around 45 x 250 pixels on your website, but I recommend making it larger and using the Divi theme customizer settings to get the exact size. A dimension of approximately 95 × 450 pixels is ideal for allowing for modifications of Divi logo size. For Retina displays, the higher resolution keeps the logo sharp. The Perfect dimension of the Divi logo size is wider than its height.  

What size should the Divi logo be?

In the header, portrait logos can leave too much vertical space. The finest shapes for logos are either landscape or square. However, if you have a portrait logo, you might convert it to a landscape logo. If your logo contains two words, you can arrange them side by side instead of accumulating them. 

A logo with an icon on top and text on the bottom is another option. You can change the icon to the left of the text. It’s also possible to utilize just the text or just the icon, rather than both. As a result, many businesses design different logos: one that looks great in a portrait layout and can be used on stationery, business cards, and advertisements, and another that looks great in a landscape style and can be used on websites.

What size is the Divi logo?

The default Divi logo is a PNG with a resolution of 93 × 43 pixels. You can change the logo’s size in Divi’s theme customizer. However, you can’t change the raw pixel size of the logo. Therefore, the PNG files are always a good decision because they are small and have transparent backgrounds. 

Divi logo size on different devices 

If you customize the logo with perfect logo sizing, the logo’s Appearance on any device is excellent. The ideal logo is wider than its height with the maximum pixel. Divi theme gives enough white space in the header to avoid looking crowded. The whitespace design principles are also beneficial to logos and also for the user. We’ll show you how you can adjust the logo for different devices and upload the customized logo.

How to upload the customized logo to Divi

You first need to replace the Divi logo and update your logo when creating the new Divi site. To do so, click on the Divi Theme Options settings and submit your logo image.

  •  First, log in to the WordPress admin dashboard to change the logo, navigate the Divi and click on Theme Options. It will redirect to the new page, and you can upload the logo here by clicking on the Upload button.

Divi Logo Size

  • You can choose the image from the Media Library or browse from a local computer.
  • When you select Set As Logo, the URL for your logo will be added to the chosen area.
  • When you click the Remove button, your logo will be removed and replaced with the Divi logo.

upload the customized logo to Divi

How to change Divi Logo Height using theme customizer

To change the height of the Divi logo, you need to log in to the WordPress admin dashboard. Then on the left sidebar, navigate to the Divi and click on Theme Customizer.It will redirect to the new window, go to the Header & Navigation, and click on the Primary Menu bar.

Now the Divi logo height selections vary from 30 to 100 pixels in the theme customizer. In addition, the menu height varies between 30 and 300 pixels. The default logo height is 54 pixels, while the menu height is 66 pixels. 

Examples

The menu and the logo are set to 30 to check the logo size is quite small. The menu height is set to the minimum in this case, but the logo is set to the maximum. It takes up the entire menu’s size(you can change the height from the Fixed Navigation Settings). It appears to be a little uneasy. Unfortunately, it’s so little in this situation that it’s barely discernible.

How to change Divi Logo Height

The header contains way too much whitespace. It would be acceptable to feature social buttons, a call to action, a patterned background, and other elements to balance the design. You can also adjust the Divi logo size for mobile by using the little icon and modify the setting whatever you want to implement. 

You don’t want the text to be so prominent that it overrides the logo, or the header to have so much whitespace that everything appears lonely, or the logo to be so enormous that it seems crowded. Colors play a part in defining what seems balanced. For example, the text of the logo should be slightly larger than the text of the menu in a typical acceptable design.

The ideal logo height is determined by your menu’s height and font size. With this in mind, it’s a good idea to try with all three variables until you find something that offers you the ideal amount of whitespace and balance.

For tablet and mobile

The above approach only works on a desktop computer. However, you may modify the logo on a tablet or mobile device by utilizing this CSS snippet code. First, add the following CSS to your page.

 

@media (max-width: 981px) {

#logo {

    max-height: 80% !important;

}
}

tablet and mobile CSS Divi

The maximum height percentage represents the height of your logo in the menu bar; you can adjust this amount to suit your needs.

When utilizing a very wide logo, the menu items may overlap on smaller screen sizes.

Logo size overlaps the menu.

I like to use a square or landscape logo in orientation because it fits better inside a slim header menu bar. However, suppose you have a portrait logo that you can’t change to a landscape one. In that case, you might want to try overlapping it over the bottom of the menu bar so it doesn’t get squeezed into a tiny illegible logo within the menu bar’s specified height.

 

@media only screen and (max-width: 980px) {
#logo {
min-height: 100px;

}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}

 

How to change Favicon Logo Size

The Divi favicon is an area that appears on the top browser as an icon. Because the site will be too little for any text to be readable, you should use your icon-only logo in a small space like the favicon. If your logo is a text, you can use the first letter of the word or, if there are two or more words, a monogram version. Amazon’s one-letter logo is utilized in a variety of places, including on some of their gift cards, as shown in the example below:

P.S. The favicon is the small image that appears next to the web page title in the search bar. Standard favicon sizes are as follows:

  • 16 x 16 pixels (most common)
  • 32 x 32 pixels
  • 48 x 48 pixels

You can change the favicon, but first, you need to log in to the WordPress admin penal dashboard. Then navigate to the Divi and click on the Theme Customizer button.

Theme options divi

Now Goto the general settings and click on the Site Identity > Select the Icon button. After that, you can add an icon from the Library or your local computer and click on the Save button.

How to change Favicon Logo Size

That’s it!

Conclusion

That concludes our discussion of how to select the optimum Divi logo size for your website. Large logos might be distracting. Therefore we recommended keeping your logo small most of the time. But, if you want to use a large logo, you’ll get greater results if you incorporate it into the web’s design, as some examples demonstrate.

Check that the logo appears excellent on both a white and a black background. Next, check your logo in the theme customizer for desktop, tablet, and phone screen sizes. Finally, play around with your header’s settings, like menu height, Divi logo height, and menu fonts, until you find a good balance that looks good.

How to Add Divi Back to Top Button and customize it?

How to Add Divi Back to Top Button and customize it?

The elegant theme provides Divi builder with multiple functions that developers can use for a better user experience. So today, we will show you how to add Divi back to the top button on the Elegant theme, but we also customize it. Adding a button is a simple and easy procedure, but the customer or users can easily identify that you’re using the Divi theme or WordPress platform.

Several elements on your website can recognize the Divi framework. However, if you want to make your site stand out and hide the fact that it was designed with Divi, it should customize all of these aspects to appear nothing like the default look.

In this article, we will show the simple process of adding back to the top button and customize it with different features. I’ll start with adding a Divi back to the top button and then change its shape and color to round. Then I’ll add some hover effects. So let’s start!

How to Add Divi Back to Top Button

You might be wondering why you need this button whether everything is working fine. This button will enhance the user experience, and it’s more effective with the mobile user. However, this feature will undoubtedly help your site’s users, whether you have a one-page website (with or without parallax scrolling) or merely a long page with a lot of content that takes a lot of scrolling to the bottom. So to activate this feature follow this procedure:

First, log in to the WordPress admin panel and navigate to the Divi on the left sidebar. 

General Settings divi

Select the Theme Options and then click on the General Settings button, and there are many settings options. Next, scroll down to the bottom, where you can find the Back to Top Button to enable it. That’s it!

Customize Back to Top Button

Customizing the button is the most significant part of this article because you need to look different from the crowd. Therefore, I will show you how to make this button round or circle shape and add effect. 

Circle Back to Top Button

I’ll show you how to make the default button in a circle shape and color in this example, and I recommend you change the color and make it in accordance with your website. It’s an easy process, even if you don’t have any knowledge of coding or custom CSS. All you need is to add this code to the right place in Divi>Theme Options>Custom CSS; that’s it. 

Customize Back to Top Button

Note: The text in the backlash is comments

/* Default button appearance */
.et_pb_scroll_top.et-pb-icon {
    right: 30px; /* space from right */
    bottom: 30px; /* space from bottom */
    padding: 8px; /*padding size*/
    border-radius: 30px; /* make the circle */
    background: rgb(0,206,209) /* button color */;	
    font-size: 32px; /* icon size */
    transition: all .1s ease-in-out; /* add transition */
}

After you successfully including the code, the button will look like below Screenshot:

Back to Top Button

Add Effects in Back to Top Button

Now I’ll add some effect to this button for its better appearance and fancy look. You may not need this, but some of the users like these kinds of animations. To add the hover-over effect in the button, you need to add this code in the next line of the previous code. It will give you a stunning result while you click on the button.

/* Button Appearance on Mouseover */
.et_pb_scroll_top.et-pb-icon:hover {
    bottom: 32px /* space from bottom */;
    background: rgb(0,255,255) /*button hover color*/;
    transition: all .1s ease-in-out; /*add transition*/
    box-shadow: 0 10px 15px #162c4e4a; /*hover box shadow */
}

Add Effects in Back to Top Button

Using GIF Image in Divi Back to Top Button

Using an image or a GIF offers us a range of opportunities. For example, we can build our own back-to-top button and use it instead of the default style. I’ll teach you how to replace the back-to-top button with a GIF or image and making some cooler effects in this example. We’ll utilize a premade GIF image that I created earlier. First, upload the Gif image to your Media Library, which you want to add in the back to the top button. After uploading the Gif image, you need to add this code into the custom CSS. 

Login to the WordPress admin panel and navigate to Divi>Theme Options> Custom CSS; add the code here. Then in the URL code line, you insert your URL to accomplishing the task.


.et_pb_scroll_top:before {
    content: url(Your GIF URL);/*Your image URL*/
}
.et_pb_scroll_top.et-pb-icon {
    background: none;
    right:1%;
    bottom: -7px;
	}

Using GIF Image in Back to Top Button

How to Add Divi Back to Top Button with Text

I’ll show how to modify the default back to the top button with a circle and add some text in this example. First, we need to change the code for the icon then add the text to this icon. This code also includes the hover effect that makes some cool effects. 

.et_pb_scroll_top:after {
    content: "Back To Top";/*button text*/
    font-family: "Open Sans",Arial,sans-serif;/*text font*/
    font-size:10px;/*text size*/
} 
.et_pb_scroll_top:before {
    content: "\21";/*select icon*/
    font-family: ETmodules !important;
    font-size:12px;/*icon size*/
    margin-right: 5px;
} 
.et_pb_scroll_top.et-pb-icon {
    padding: 0px 20px 17px;
    right: 20px;
    bottom: 30px;
    border-radius: 100px;
    background: #1dbbe1;/*button color*/
    box-shadow: 0 10px 20px #37798940;
    transition: all .1s ease-in-out;
}
.et_pb_scroll_top.et-pb-icon:hover {
    background: #00ffff;;/*button color on hover*/
    transition: all .1s ease-in-out; /*add transition*/
}

With text Back to Top Button

All of the styles shown in this post are easy and simple to use on your website. You can use them as is or combine multiple designs to make your own Back To Top button. Of course, it would be best to practice all these things in the child theme or any staging website. Then, after a successful experiment, you can use it on your live website. If you have any queries about this post, comment to us below. 

 

Warning: Creating default object from empty value

Warning: Creating default object from empty value

Responsive site design and the active site are a must in today’s world because approximately billions of devices are in use. Everybody has no time to wait for anything, so these kinds of errors “Creating default object from empty value” will lead your business and position down.

An immeasurable first impression on any new user is critical and requires our attention. Unfortunately, early versions of Elegant Themes’ update checking code contained a tiny flaw. Occasionally, an error displays in the WordPress Dashboard. It may be the cause of some plugin or shortcode that you last entered.

Many of Elegant Theme’s products fix the error such as the Divi Theme and Extra Theme. However, some of their shortcode and portable plugins continue to have issues.

Warning: Creating default object from empty value in Divi theme 

Creating default object from empty value

 Warning: Creating default object from empty value in C:\aggregate\wp-content\plugins\et-codes\et-shortcodes5.php on line 180

 It’s a slight inconvenience that does not affect the functionality of the themes or plugins. 

$last update->last checked = time()

This line of code (which can be in the file and at the line number specified in the warning notice) causes the problem.

It’s trying to set a property of the last_update object. The issue is that the previous update object hasn’t been declared yet, so PHP issues the warning to remind developers to declare the object first.

So, How to fix this issue? Here are a few possibilities:

  • First, this error can be fixed by updating the WordPress admin dashboard’s elegant theme and clicking on the update button. So, install the latest version of your Divi theme.
  • Second Disable the php.ini file: This method can tell the PHP not to show these notifications or warnings. 
  • Find the “error_reporting = E_ALL” in the .php.ini file and replace with “error_reporting = E_ALL & ~E_NOTICE & ~E_WARNING”
  • Follow the appropriate change to the plugin/theme line: @$last update->last checked = time(); 

 Empty Value In PHP

It seems that after upgrading my PHP environment to PHP 5.4 and beyond encounter this problem. The error is leading to the following line of code: 

Error:

Creating default object from empty value

Code:

$res->success = false; 

Solution:

E_STRICT warnings may be enabled in error reporting for PHP versions >= 5.3.x, or error reporting set to at least E_WARNING for PHP versions >= 5.4 in your new environment. For example, when $res is NULL or not yet initialized, an error occurs:

$res = NULL;

$res->success = false; // Warning: Creating default object from empty value

 

If $res is already initialized to a value but is not an object, PHP will display a different error message:

$res = 33;

$res->success = false; // Warning: Attempt to assign property of non-object

Suppose you’re attempting to build a generic object and assign the property success. In that case, you’ll need to define $res as an object of stdClass in the global namespace to comply with E STRICT standards previous to PHP 5.4, or the regular E WARNING error level in PHP >= 5.4:

$res = new \stdClass();

$res->success = false; 

 

 

 

Divi Contact Form Not Working?

Divi Contact Form Not Working?

Divi builder has many built-in features, just like any other WordPress page builder. It also includes a module that allows you to add contact forms anywhere on your site. If you’re here, you’ve probably completed developing your WordPress site or a client’s website using Divi builder, but for some reason, the Divi contact form is not working.  

You may have experienced specific issues, such as user data not being sent to your email or its dedicated place or the anchor text issue. Contact forms are essential for your business’ growth and the process of community building. As one of the primary channels through which your customers communicate with you, these are valuable functions to fine-tune. 

If your Divi contact form is not working, it’s time to get it fixed! But, before you can figure out how to solve the problem, you must first understand what’s causing it. However, it shows some annoying issues such as can’t set the slider text position, can’t able to create a Divi child theme, etc.

Why is my Divi Contact Form Not Working?

Why is Divi Contact Form not working?

PC Error Web System Database System Error Codes

Using the PHP mail () function – your web server sends emails by default, using the PHP mail() function. However, there are several limitations in .PHP, such as:

  1. The PHP mail() function is limited to sending bulk emails, and it lacks server authentication, which causes some email systems to flag it as spam. 
  2. To overcome the influx of spam, some email providers check if emails are sent from the address they claim to be from. The emails sent from WordPress are often problematic in this regard. Your emails may be automatically blocked if your email server is Gmail and your email claims to come from your site’s domain.
  3. Some hosting servers aren’t set up to effectively use the PHP mail() function, which may be the root cause of the issue. In addition, most WordPress hosting companies limit how much of this functionality can be used per account. As a result, if you use the entirety of your daily or monthly capacity, your emails simply won’t be delivered.

These are the most common reasons behind Divi’s contact form not working. The good news is that you might be able to use SMTP (Simple Mail Transfer Protocol) solutions to fix these delivery issues. SMTP modifies the way emails are sent and authenticates them appropriately, ensuring that your communications are not flagged as spam by email services.

However you send your emails, we recommend using an SMTP service even if you don’t have many email problems. Now that we have a better understanding of the issue let’s fix it using the Divi Contact Form Module.

How Do I Fix Divi Contact Form Not Working

This guide will fill you in on every relevant piece of information that might help you in fixing this error. Firstly, we’ll start off with the default basic settings in order to remedy the Divi contact form that isn’t working right.

Check Divi Contact Form Settings

Although the Divi contact form module is pretty basic, there are still a few settings to look into to find out if something essential is causing the erroNavigateate to the contact form page and click on Edit With D to initiate your query.  

Edit With Divi

Once the contact page appears, click anywhere within the contact form and click on the gear icon to access the Contact Form SettingsNext, simply scroll down to the Email option on the content tab and expand it. Finally, fill in the email address to which you want your contact form notifications to be sent.

DiVI Contact Form Settings

After that, if you’ve added the Spam Protection settings, check that everything is accurate. If you did not add these settings, add them by enabling the Use a Spam Protection Service option.  Here you might be able to adjust the sensitivity or use a spam protection service like Google reCAPTCHA. Reduce the sensitivity to the absolute minimum since your Divi form isn’t functional. If this doesn’t work, we’ll need to download and install the WP Mail SMTP plugin if this doesn’t work. It will make use of a professional email service, replacing the default email sending method. So now we’ll be setting up an email delivery service that we’ll use later.

Set up the Email Delivery Service

Several options are available for email delivery services, but we’ll be using SendGrid for this tutorial. First, go to SendGrid and sign up for an account. There are both free and paid plans availablYouyou won’t need any premium features for these articles, so the free option will definitely work.

SendGrid wordpress

Next, create an account and use the web API or SMTP relay to integrate SendGrid with your server. We’ll utilize the SMTP relay approach instead of SendGrid’s supported Web API integration. 

API or SMTP relay to integrate SendGrid

You’ll need to give your API key a name and generate it, and you should be able to receive it in a matter of seconds. Once the API is generated, copy the API key. We’ll use that later.

API key name

Install and Configure the WP Mail SMTP Plugin  

How to Fix Divi Contact Form Not Working?

In WordPress, several plugins are used to send emails, but the WP Mail SMTP is the, in our opinion, the best SMTP plugin. Both a free version and a paid edition with extra features that start at 49 USD per year on the WordPress website. In addition, it connects your website to an external email service, which enhances email deliverability. Aside from that, WP Mail SMTP (simple mail transfer protocol) allows you to:

  • Keep track of the emails that your WordPress site sends.
  • Keep track of who opens and clicks on your emails.
  • Save email attachments and export your logs.

To install the plugin, go to the admin dashboard area, hover over Plugins and click on Add New. Then search for the WP Mail SMTP plugin to install and activate it. After the activation, you are now ready to start the configuration. You can find the plugin settings section in your WordPress dashboard. In the Plugin Settings section, you’re From Email address ison the first thing you should play chess.

WP Mail SMTP Plugin WordPress

WordPress will use your admin email address as your From Email address by default, but you can modify it. There’s also the option to make the From Email address mandatory. In addition, it regulates all your emails so that they are sent from that address, even if third-party plugins send them. 

Then you must fill in the From Name section. Again, WP Mail SMTP will use the admin’s filled-in name by default, but you may change that as you please. You can force it to use the same name for all emails in the same manner that you moved it to use the email address. 

How to Fix Divi Contact Form Not Working?

Finally, you must select your desired Mailer from SMTP.com, Outlook, Gmail, SendGrid, Sendinblue, Pepipost, Mailgun, and Amazon SES, all famous mail services. Choose SendGrid as your server, and the customization choices will appear.

Install and Configure the WP Mail SMTP Plugin 

Once you select the mailer you want, several options will appear under the Mailer section. Now you can move on to inserting the API key that we generated earlier, and then click on Save Settings.

Api key integration

Test the Email

It’s always good to test the email functionality after setting up the email delivery provider and the SMTP plugin. For this purpose, WP Mail SMTP has a function to test your emails.

Enter an email address for the recipient and send a test email.

Test the email

A message indicating success will appear if the setup is accurately functioning.

test email divi contact form

Return to the SendGrid API page and check the Activity tab to see all your email activities. Once you click on it, you will be redirected to a new window to be able to see the actions.

SendGrid API page

 

Divi Contact Form Problem Resolved

After configuring the plugin and email delivery service, you’ll ensure that every email sent through your Divi contact form reaches its intended recipient. These SMTP tools will help you enhance your email delivery and resolve the problem. One of the top email delivery services is SendGrid. If you’d prefer to use anything else, we recommend Amazon SES or Google. It’s an excellent alternative for businesses and freelancers.

Bonus Tip

If you’re using an older version of Divi, the contact form module might not work. Instead, enable the option to get automatic updates to fix the problem. You’ll need to save the modifications after entering your Elegant Themes Username and API key.

older version of Divi

As a result, you’ll be able to upgrade Divi from the WordPress dashboard whenever a new version is released.

How Do You Fix the Divi Contact Form: Not Sending Email?

You may not receive the email in the inbox but check your email’s spam section. Sometimes, the Divi content may not be sent email due to several reasons, such as:

  1. Incorrect Divi configurations.
  2. If you are not using a plugin or some other source to get the emails then it might be possible that the Divi contact form does not send to all fields. For example, you may get the user’s name, and email but are unable to receive the message, contact number, and so on. For that, use the appropriate plugin for the contact form email and then set up the plugin.

You can check your settings using the aforementioned method and then configure the best plugin for your email with an easy step-by-step process.

Conclusion

Often, the contact form module in Divi stops operating. In most cases, this is due to an email deliverability issue. If that’s the case, you can resolve it by installing an SMTP plugin on your site. We suggest switching from PHP’s mail() function to a more reliable SMTP system.

This tutorial demonstrated how to use SendGrid and WP Mail SMTP to resolve various Divi Contact Form issues. Bookmark this site if you have any other issues like changing the Divi footer credits or other WordPress-related topics. We’ll update your knowledge with all that is current, and assist you in solving your problem in a matter of minutes.