Elementor’s page builder frequently asked questions (FAQs)

I found the most Frequently Asked Questions (FAQs) on Elementor’s community and forum.

How to manually change the social share icons widget?

Some people might tell you to change icons as other widgets have but the thing is there are no options available to choose from except adding a new item from libraries.

Now the question is how to change the social share icon manually?

There are 2 ways to change the icon and here are the steps you need to follow

01

Using Inline SVG Method –

This method is the best for optimizing website performance because this will not be called any font and icon libraries but at the same time, it will save you around 70 to 80 KB. It requires a little bit of CSS knowledge.

There are so many icons collection available one of them is iconmonstr. This is one of my favorite icons libraries because you can choose inline SVG, SVG, PNG, EPS, and PNG as the file format. But in this demo, I am going to use inline SVG because of performance benefits.

First go to iconmonstr and search your icons.

In this demo, I will use the Facebook logo

Second choose your icon and follow the step below

1. Choose icon ( Facebook)
2. Select I agree to the License Agreement
3. Embed – choose inline not Base64

1. Go to page/post you want to add social share buttons or go to single post template .
2. Edit with Elementor
3. Click the share buttons widget
4. Select “view” as Text, this will remove all the default icon.

Copy and paste SVG code to the custom label area.

This will create a styling issue when you add the code. See the screenshot below.

Instead of adding code directly to the Custom Label. Open up your favorite code editor & paste the code there, create a div with class, and add class to the SVG for styling.

<! –– Before ––>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path
        d="M22.675 0h-21.35c-......"
    />
</svg>
Facebook


<! –– After ––>
<div class="icon-wrapper">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-......"/></svg> Facebook
</div>

/*This is the svg wrapper class*/
.icon-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*svg class*/
.icon{
    /*You cannot use color attributes to the inline svg that is why we are using fill property*/ 
    fill:#fff;
    /* Width of SVG*/
    width:1em;
    /*This will add margin to the right side of svg , so there will be some breading room*/ 
    margin-right:5px;
}

Here is the result.

What about the icons that you create in vector tools?

You’ve got it covered.

1. First to svgminify
2. Upload your svg icon or Drag & Drop SVG icon
3. Click start button
4. It will print out SVG code

Don’t copy and paste entire code just copy <svg>……</svg>. SVGMinify will split the code and then minify

<! –– This is How Unminify looks ––> 
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.4142" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    <path
        d="m22.675 0h-21.35c-0.732 0-1.325 0.593-1.325 1.325v21.351c0 0.731 0.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463 0.099 2.795 0.143v3.24l-1.918 1e-3c-1.504 0-1.795 0.715-1.795 1.763v2.313h3.587l-0.467 3.622h-3.12v9.293h6.116c0.73 0 1.323-0.593 1.323-1.325v-21.35c0-0.732-0.593-1.325-1.325-1.325z"
        fill="#00f"
        fill-rule="nonzero"
    />
</svg>

<! –– After minification ––> 
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.4142" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    <path d="m22.675 0h-21.35c-0.732 0-1.325 0.593-1.325 1.325v21.351c0 0.731 0.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463 0.099 2.795 0.143v3.24l-1.918 1e-3c-1.504 0-1.795 0.715-1.795 1.763v2.313h3.587l-0.467 3.622h-3.12v9.293h6.116c0.73 0 1.323-0.593 1.323-1.325v-21.35c0-0.732-0.593-1.325-1.325-1.325z" fill="#00f" fill-rule="nonzero"/>
</svg>

If you add this code directly, this will cause some styling issues like the ugly screenshot below.

To fix the issue on the editor, you need to add width and height to the SVG itself. See the screenshot below.

If you want to define your own color follow the step below –

1. Want to define fill color with CSS to the svg?
2. First remove fill=” from the SVG code
3. Add it to Social share button – Custom Label

<! –– After defining with and height of SVG ––>
<! –– Remove comments when adding ––>

<div class="icon-wrapper">
    <svg class="icon"  width="20" height="20" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.4142" version="1.1" viewBox="0 0 24 24" xml:space="preserve"  xmlns="http://www.w3.org/2000/svg">
        <path
            d="m22.675 0h-21.35c-0.732 0-1.325 0.593-1.325 1.325v21.351c0 0.731 0.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463 0.099 2.795 0.143v3.24l-1.918 1e-3c-1.504 0-1.795 0.715-1.795 1.763v2.313h3.587l-0.467 3.622h-3.12v9.293h6.116c0.73 0 1.323-0.593 1.323-1.325v-21.35c0-0.732-0.593-1.325-1.325-1.325z"            
            fill-rule="nonzero"
             
        />
    </svg>
    Facebook
</div>

Result

02

Base64 Data-URL/Data-URI Method

Let say you download icons from somewhere and it doesn’t provide you SVG format. In this case, you can use the Base64 Data-URI method which will inline in the document of your page similar to inline SVG.

This method is mainly useful for small images but doesn’t use it on large images because your document size will significantly increase like double the size of your images.

There are 2 ways to do which choose one – Data-URL is provided & Added directly to Pseudo-elements classes

1 ^st Option – If Data-URL is provided

1. copy data:image/svg+xml;base64,…..
2. Open Code editor
3. Create Div with class & img with class of icon-wrapper and icon respectively
4. And add your code there (see screenshot below)

Code will be something like this

<! –– Before ––>
<img src="data:image/svg+xml;base64,........" alt="facebook-icon">
Facebook


<! –– After ––>
 <div class="icon-wrapper">
    <img class="icon" src="data:image/svg+xml;base64,........" alt="facebook-icon">
        </svg>
         Facebook
</div>

The problem with this method is you don’t have any control over color which makes it harder to style. Since it is not vector-based so the quality is not so good.

What about if you don’t want to add the code as I have shown above ? that time you can change & replace the code with fontawesome icons or Data-URL.

2^nd Options – Inline directly with CSS pseudo-elements

Let say you don’t want to load font-awesome icon at all, here are the solution. ( I’m referring to Base64 Data-URL/Data-URI Method)

1. Download your icon from Font-awesome, it can be in any format – svg or png
2. Go to websemantics
3. Drag and drop your icon directly to the area
4. Choose Data-URL as prefer selection (see screenshot)
5. Click the social Share button( Follow base-64 tutorials above)
6. Go to Advanced – CSS classes – add your class name( Follow tutorials above)
7. Custom CSS( Follow tutorials above)

03

Replace old Font-Awesome icons with New FontAwesome icons using Pseudo Elements

1. Right click on icon you want to change and right click on inspect elements
2. This will open Dev tools
3. find the ::before
4. Copy the code and paste in your code editor

Now –

1. Go to Font-Awesome website
2. Copy the unicode by clicking (f082)
3. Go to single post template and find the template that has your social share icons
4. Click the Edit with Elementor to open Elementor’s editor
5. Click the social Share button
6. Go to Advanced tab and find CSS classes – add your unique class name or id as “social”
7. Now go to Custom CSS area and add your CSS there

Here the CSS code

.social .fa-facebook:before{
     content: "\f39e";
}

Here are some examples you can do it with Pseudo-elements

How to style the last-menu item with CSS?

So here the simplest solution I found and it is really easy to do it.

1. Go to Appearance then Menus
2. Click the “Screen Options” on top right corner
3. Checked “CSS Classes” option
4. Select your menu
5. Click the last item ( most likely Contact us page)
6. Go to CSS Classes (optional) – Add your unique name (contact-form)

Now we need to add custom CSS to the header template, This is for Elementor pro users –

1. Go to Elementor Templates
2. Click the Theme Builder
3. Click Header tab
4. Choose your header, you want to add CSS
5. Edit with Elementor
6. Click “nav menu Elementor’s” widget
7. Go to Advanced tab – advanced
8. Find CSS classes – add your unique class as last-item
9. Go to Custom CSS and start adding your CSS

/* .last-item is the nav class i define and .contact-form is the css for nav menu*/
.last-item .contact-form{
    background: #000;
}
/* This CSS is for link color*/
.last-item .contact-form a{
    color:#fff;
}

if you’re not using Elementor pro then you can head over to Customize or child theme – style.min.css area or if you’re using a plugin to add your own CSS. Add the CSS rule –

/* Style as needed*/
.contact-form{
    background-color: #000;
}
/* This CSS is for link color*/
.contact-form a{
    color:#fff;
}

FontAwesome icons not loading on browser

You have created a beautiful landing page for your project. On Editor, icons are loaded perfectly but on the live site, you saw a border around an icon. Something like this

Turn out it an easy fix. When Elementor released v2.6 which includes an update to the Font Awesome 5. Due to the migration and updating process, some of your FontAwesome 4 libraries might not load.

To fix the issue, Elementor has added a feature in the Advanced tab to Load Font Awesome 4 Support which adds

Font Awesome 4 support script (shim.js) is a script that makes sure all previously selected Font Awesome 4 icons are displayed correctly while using Font Awesome 5 library

Migration to Font Awesome 5

1. Go to Elementor
2. Then click the Settings items.
3. Then Go to Advanced tab
4. Set to “Yes” to Load Font Awesome 4 Support

Is it OK To Remove Font Awesome icons and Elementor icons for performance?

It is great to remove Font Awesome and Elementor icons for Performance purposes because this can save you more than 100 KB + 6 stylesheets that huge for a website or page itself.

But nobody method what is going to happen if you remove them?

Before

After

Did you see the difference?

See the Search icon, Sub-Menu navigation, Close Menu, Hamburger menu ( if you’re using Elementor nav menu widget), etc on first then see the second.

Please keep that in mind that before implementing such a thing you must make sure that all the Font Awesome and Eicons are not loaded.

If You have any questions related to Elementor that come up regularly. Please post your question in the comment section?

I will properly credit you

Thank you