Error: Elementor Not Loading 

Error: Elementor Not Loading 

Do you have an issue with your site’s Elementor Not Loading? If yes, then you are one of the many users who have had this problem. Elementor is the first web page builder that provides endless design options. In addition, it comes with many useful widgets, a beautifully designed template library, a mobile editing toolkit, and a visible revision history feature. 

You can achieve top-notch design quality without utilizing coding or CSS or depending on developers with the elementor page builder. These are just a few of the things that this free plugin has to offer. But sometimes, it will show an error while loading. Many factors can cause Elementor to fail to load, including plugin incompatibilities, server restrictions, and so on. 

However, Some third-party Elementor extensions aren’t built with performance-level code. These circumstances may cause Elementor to malfunction and become stuck on the loading screen. So In this article, We will show you how to fix the error and prevent it from happening in the feature. So let’s Start!

Why is Elementor not loading?

Several reasons can cause Elementor not loading or Elementor Widgets Panel not loading. Limited server resources, plugin conflicts, third-party add-ons, and other factors could be the issue. We found that using multiple Elementor extensions resulted in significant resource use the majority of the time.

Why is Elementor not loading?

In addition, with Elementor’s growing popularity, new add-ons are being released daily. However, many of these do not follow appropriate coding techniques or are copying code from one another.

Causes Elementor not loading?

Elementor is not loading due to the following scenarios that arise as a result:

  1. When Elementor is active on any page, the Widgets panel is inactive.
  2. When trying to load Elementor, you get a blank screen.

The page builder becomes unusable since the widgets aren’t loaded and active. However, we’ve discovered that you can sometimes edit the page’s existing content without any problems. However, It is not available to add additional sections or information to the page.  

 Check Plugin Conflicts

Check for potential plugin conflicts as the first step in debugging any such problems. First, all plugins on your site except Elementor and Elementor Pro should be disabled. Next, check to see if Elementor is loading correctly, then we’re probably dealing with a plugin conflict or a server resource shortage.

Begin enabling plugins one at a time while also testing Elementor’s functionality. For example, if Elementor stops loading after you activate a plugin, you may have a plugin conflict. When you try to load Elementor on a page, look in the Console for any JS problems or Messages.

Disable Unused Widgets

You can try deactivating unnecessary Elementor Widgets if you’re using Elementor add-ons. So you can disable the extra widgets to release the resources and prevent loading issues. That might be releasing the load from the Elementor and execute accurately. 

Disable Unused Widgets wordpress elementor

Check .htaccess File

If your website is hosted on an Apache server (which most shared hosting companies do), you can edit the contents of the .htaccess file. However, incorrect settings in the .htaccess file might also cause issues. So, create a backup of the existing .htaccess file and replace it with the default content described here.

 Increase Apache Service Limit to fix Elementor Not Loading 

When the server’s resource limits are reached, you can increase them by editing the .htaccess file using the following code:

<IfModule mod_substitute.c>
SubstituteMaxLineLength 30m
</IfModule>
LimitRequestBody 9999999

Check PHP Memory Limit & PHP Version

The Elementor not loading issue can also be caused by an old version of PHP or a PHP memory limit on the web hosting server. Elementor recommends PHP 7.0 or higher for the best performance, with a 256M or greater memory limit. In addition, if your site uses third-party Elementor add-ons and plugins, a higher memory limit is recommended. To check the Php version and memory limit, you need to follow these steps: 

First, you can do it through FTP or logging into your cPanel account and navigating to the File Manager. Then on the left, identify the root directory of your WordPress installation, and find the wp-config.php in the root directory. 

File manager WordPress

Once you find the wp-config.php, edit it by right-clicking on it and find the wp_memory_limit. After seeing the wp memory limit change it to the define(‘WP_MEMORY_LIMIT’, ‘512M’); and click on the save button on the top of the screen.

wp_memory_limit

Now increase your server .php memory limit, so you need to find the Mutiphp INI Editor and open it. Next, you need to select your domain and in the dropdown menu that shows up below, enter 512M for the memory_limit

Mutiphp INI Editor

Mutiphp INI Editor

Finally, return to the cPanel and search for the .php version mostly you can find in the software section. Make sure the .php version is above 7+ and check the memory limit is 512M. Now go back to the WordPress admin dashboard, check the Elementor is working fine. If it’s not, then move to the next solution.

Elementor Not Loading image

 

Change Editor Loading Method

You can change the front-end editor’s loading method in Elementor. First, switch the front-end editor loader tool with the option switch front-end editor loader method. You’ll find it under Elementor’s settings in your WordPress Dashboard. Then navigate to the Elementor and click on the Settings> Advanced and Enable Switch Editor Loader Method option, and now the problem has been resolved.

Change Editor Loading Method

Use well-coded Elementor add-ons.

Many free elementor add-ons will use more server resources, cause conflicts, and cause a slew of problems. As a result, choosing one or two of the top elementor add-ons is always a good idea for optimal outcomes.

The Elementor add-on has a glowing reputation, is frequently updated, and is backed by a solid team of WordPress professionals before selecting. In addition, it’s lightweight, fast, and comes with more than 70 elementor widgets. Did these suggestions help you? Comments below let us know if you find another approach to fix the Elementor not loading problem.

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.

 

Which Is The Best WordPress SEO Plugin – Yoast Or Rank Math?

Which Is The Best WordPress SEO Plugin – Yoast Or Rank Math?

Choosing a WordPress SEO plugin, especially between Yoast and Rank Math, can be tricky. It isn’t easy for beginners to pick between them because they pretty much work the same way. However, before choosing one of them, there are a few factors you should consider. If we talk about Yoast SEO, it has been in the market for a long time with almost around 5 million active installations.

This plugin has established a solid user base as many creators use and trust it worldwide. Yoast SEO is unquestionably the best plugin available in the market. In comparison, Rank Math is new in the market, but we have seen users liking it and reviewing it as a trusted plugin. However, its features are gaining popularity in the SEO market as it attracts so many users already.

In such a scenario, users can get confused between both plugins. Therefore, we will compare both top SEO plugins in this article to help you make the best decision based on facts and figures, so if you’re looking for the answer of why you should use Yoast or Rank Math, this is the right place. So let’s Start!

How Does an SEO Plugin Improve a WordPress Website?

How Does an SEO Plugin Improve a WordPress Website?

The primary goal of SEO plugins is to optimize the content for different search engines, including Google, Bing, and others, to be ranked better than your competitors, also called On-Page SEO. The SEO plugins are not sufficient to keep the overall SEO approach. However, these plugins help content creators with basic guidelines while creating the website content. These plugins also work even if you have install WordPress on your computer .The core things that these plugins help through are titles, keyword density, meta description, readability, length of the content, use of key phrases, and many other areas. You can create robots.txt and sitemap.xml through these plugins, automate your WordPress SEO and get your site among top-ranked searches.

Yoast SEO Plugin

Yoast SEO Plugin

Right now, the most downloaded and considerably the best WordPress plugin is Yoast SEO. It has helped millions of users in search engine optimization using the advanced features available for content creators. Yoast plugin was launched in 2008, and since then, it has been the most trusted and helping SEO plugin for users worldwide.It has everything that ensures to satisfy the users coming to the website and the search engines.

There are highly professional and expert developers, testers, SEO experts, and architects who regularly improve the plugin for a better user experience.

The Yoast SEO plugin is a reliable option for business owners, bloggers, content creators, developers, and SEO experts. This dedicated plugin keeps the website in its top form and generates high traffic.

Take a look at some core Yoast SEO plugin features.

Features of Yoast

  • Snippet preview for desktop and mobile
  • Detailed SEO analysis
  • Readability analysis
  • Advanced XML sitemaps functionality
  • Control over site’s breadcrumbs
  • An indexable feature introduced from version 14.0
  • Authoritative URL to avoid duplicate content

Following are the features provided in the premium Yoast subscription

  • Social previews
  • Optimization for synonyms and related keyphrases
  • Auto internal linking hints
  • Tools for focused keywords and many other essential features

Yoast SEO Plugin – Pros and Cons

The Yoast SEO plugin is popular because of the flexibility it offers for your content creation.

Pros

  • You can easily set up the titles, meta descriptions, and other social media sharing info for different pages.
  • The most important thing about the Yoast SEO plugin is that it is beginner-friendly.
  • To help beginners using Yoast, the developers have hidden advanced options, allowing you to turn on the custom fields manually.

Cons

  • The Yoast SEO and readability suggestions for you stuffing the keywords sometimes disregard the LSI importance. In that scenario, as a beginner, I take suggestions as only suggestions.

Rank Math Plugin

Rank Math Plugin

Rank Math is a relatively new plugin but a fantastic option for WordPress SEO. It works better than the accessible version of Yoast as it comes with its premium features for free. Well, should you choose Rank Math over Yoast?

You can see some features in Rank Maths that are not seen in Yoast, including Schema support and 404 monitors.

Features of Rank Math SEO Plugin

  • Simple and Easy User Interface
  • Easy to Follow Setup
  • Lightweight (Code optimized)
  • Excellent Support
  • Modular Framework
  • OpenGraph mark-up
  • Bulk Edit Titles and Descriptions of All Content
  • Rich Snippets
  • XML sitemaps
  • Woocommerce SEO
  • 404 monitor

Rank Math SEO Plugin – Pros and Cons

Rank Math is a handy SEO plugin, and as you set it up, it makes WordPress SEO friendly. The plugin is easy to understand, simple and loads up immediately. It is because of the clean and optimized Rank Math plugin code.

Pros

  • An intuitive user interface.
  • Quick SEO setup
  • The keyword comparison tool
  • FAQ by plugin add-on that enables you to add Schema for google SERP snippets
  • Site audit
  • Premium features offered in Yoast are free in Rank Math.

Cons

  • The absence of a native option for migrating to Yoast SEO, having conflicts with other plugins as it is new.
  • The free plugin business model is bound not to sustain, making the premium plan shifting necessary. In that case, it will lose its unique selling proposition, known as USP.

Now, it’s time to compare some core things that might help you make a better decision based on your needs.

Setup Configuration – Yoast vs. Rank Maths

Setup Configuration - Yoast vs. Rank Maths

We are going to compare the setup configuration of each plugin. The first impression of software is the setting up, and it makes a considerable difference indeed.

Yoast SEO

Yoast SEO plugin setup provides eight steps: setting up the basic settings like site type, organization type, search engine visibility, authors options, title setting, etc. Also, you can see the embedded video guide that can be helpful, especially for beginners during the setup process.

Rank Math

Rank Math setup, on the other hand, is straightforward in design. There is a five steps installation wizard after the initial installation of Rank Math. A user can create an account using Google, Facebook, or email. Then you will name the site, search console details, sitemap configuration, optimization, and confirm the setting. You can go for more advanced settings after you finance the initial stages.

So, I think both SEO plugins offer a great user experience. However, Rank Math offers extra options, including search console, sitemap, and optimization, that can help automate some SEO tasks, i.e., external links no-follow and redirecting pages.

User Interface – Yoast vs. Rank Math

User Interface - Yoast vs. Rank Math

The fact is, the user interface is one of the essential parts of any software. The more the clean and straightforward interface, the more it attracts the users and increases the value. We are going to compare or discuss the user interface for both plugins.

Yoast SEO Plugin

The Yoast UI is not as appealing because it focuses more on functionality. The plugin provides you with everything that is well organized and defines categories. A beginner can easily understand what’s happening and perform specific tasks using this neat but straightforward user interface.

Rank Math

The UI of Rank Math is pretty clean, allowing you ease in turning on and off available features. All features are explained inside the box with their status. Compared to Yoast UI, Rank Math has a more visually engaging user interface that looks stylish and improves the user experience with attractive and well-organized features.

I think the Rank Math user interface is easier to use; on the other hand, Yoast also has no difficulty setting.

Performance Comparison – Yoast vs. Rank Math

Performance Comparison - Yoast vs. Rank Math

Performance is not sure for these plugins because it is a technical term, but Rank Math claims and is reviewed positively for its lightweight, fast, efficient, and optimized coding. Compared to Rank Math, the 14.0 version release of the Yoast SEO plugin comes with an advanced feature, ‘indexable.’ This feature allows Yoast SEO to index pages. It enhances the performance of the site and makes it work even faster.

Pricing – Yoast vs. Rank Math

Pricing - Yoast vs. Rank Math

If we look at the pricing of these top SEO plugins, the Rank Math is free. Whereas the Yoast SEO plugin is not entirely free; you have to pay to access some premium features. You can easily enjoy the features for free at Rank Math before it offers the premium version.

Conclusion

You can see there are no significant differences in both plugins. So, it could be hard to suggest a particular plugin that meets your needs. However, I like Rank Math as it is easy to use, but your goals might not be the same as mine. Rank Math is new, whereas Yoast SEO has been in the market for a long time and is trusted by millions of users.

If you’re already using the Yoast SEO premium, you better not switch to Rank Math. However, you can try both plugins for free and then decide based on your personal experiences.

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.