Elementor’s page builder frequently asked questions (FAQs)

Most Frequently Asked Questions (FAQs) i found on Elementor's community and forum and here are the answer step by step tutorials easily to digest

frequently asked questions

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

How to manually change the social share icons widget?

Some people might tell you to change icon like other widget have but the thing is there are no option available to choose from except adding new item from libraries.

No way to choose an icon from libraries
855

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 favourite 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 Facebook logo

Choose Facebook Icon

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
Agree to License Agreement
Choose Inline, after that select SVG
  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.
Now choose view on Text
View as text

Copy and paste svg code to the custom label area.

copy & paste svg text to the Custom label
copy & paste SVG to the Custom label

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

Styling issue
Styling issue

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

Add Inline SVG classes
Inline SVG classes
<! –– 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 are the result.

Custom label styling fixed
Fix the styling issue

What about the icons that you create in vector tools ?

You’ve got it cover.

  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
SVG minify interface
Drag and Drop or Upload your own SVG icon
Drag and Drop or Upload your own svg icon
SVGminify split the code and minify
SVGminify split the code and minify
Go to SVGminify.com and minify your SVG
Go to SVGminify.com and minify your SVG

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 issue like the screenshot below which is ugly.

Custom SVG styling issue

In order to fix the issue on the editor , you need to add width and height to the svg itself . See the screenshot below.

Fixed styling issue after defining Width and Height

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

Custom label styling fixed

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 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 in 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)
Data-URL method
Adding class to data-uri code

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 make it harder to style. Since it is not a vector base so the quality is not so good.

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

2nd 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)
Data-URL generator from web semantics
Drag and drop your icon directly to the area
Embedding Data-URI in Pseudo-elements

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
Choose FontAwesome Unicode by clicking Unicode tab
Copy the Unicode
Add social share classes under social share button then Advanced then CSS class
Replace with Fontawesome unicode with CSS

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)
How to change last item
Add class to the last item
Add class to the last item
Add “class” to the last item

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

  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
Theme builder -header tab
Last item CSS class with Elementor
Custom CSS under Navigation (nav) menu
/* .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 than you can head over to Customize or child theme – style.min.css area or if you’re using 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;
}
SS is added to the customize section for Elementor free user

FontAwesome icons not loading on browser

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

Missing Fontawesome icon

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

In order to fix the issue, Elementor has added a feature in 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
Fixed Font Awesome issue by enabling 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.

Removing icon for performance

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

Before

Before removing Font-Awesome icons
Before removing FA icon

After

Font Awesome icon and Eicons are missing from the navigation.
Icons are missing

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 second.

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

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

I will properly credited you

Thank you