Frequently Asked Questions (FAQs) Related To Elementor Here Are The Step By Step Process

  • kishorchand
  • Freebie
  • May 25, 2020
  • Join the Conversation
  • Modified 10:14 am

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 i found on Elementor’s community and forum and here are the answer step by step tutorials easily to digest

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 icon from libraries
No way to choose icon 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 method for optimizing website performance because this will not called any font and icon libraries but at the same time it will save you around 70 to 80 KB . It require 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 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 icon from IconMonstr and select I agree to the license Agreement
Choose inline after that select the svg
Choose inline method 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.
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 text 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-.732 0-1.325.593-1.325 1.325v21.351c0 .731.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.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"
    />
</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-.732 0-1.325.593-1.325 1.325v21.351c0 .731.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.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></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
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

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
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
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
Copy & paste svg code to the Custom label area

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 don’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
Data-URL
Adding class to data-uri code

Code will be something like this

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


<! –– After ––>
 <div class="icon-wrapper">
    <img class="icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIuNjc1IDBoLTIxLjM1Yy0uNzMyIDAtMS4zMjUuNTkzLTEuMzI1IDEuMzI1djIxLjM1MWMwIC43MzEuNTkzIDEuMzI0IDEuMzI1IDEuMzI0aDExLjQ5NXYtOS4yOTRoLTMuMTI4di0zLjYyMmgzLjEyOHYtMi42NzFjMC0zLjEgMS44OTMtNC43ODggNC42NTktNC43ODggMS4zMjUgMCAyLjQ2My4wOTkgMi43OTUuMTQzdjMuMjRsLTEuOTE4LjAwMWMtMS41MDQgMC0xLjc5NS43MTUtMS43OTUgMS43NjN2Mi4zMTNoMy41ODdsLS40NjcgMy42MjJoLTMuMTJ2OS4yOTNoNi4xMTZjLjczIDAgMS4zMjMtLjU5MyAxLjMyMy0xLjMyNXYtMjEuMzVjMC0uNzMyLS41OTMtMS4zMjUtMS4zMjUtMS4zMjV6Ii8+PC9zdmc+" 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 pseudo class

Let say you don’t want to load fontawesome icon at all, here are the solution. Watch the video above

  1. Download your icon 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 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 websemantics.uk
Data-URL generator from websemantics
Embedding Data-URI in Pseudo elements
Embedding Data-URI in Pseudo elements

03

Replace Old FontAwesome 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 FontAwesome
  2. Copy the unicode by clicking (f082)
  3. Go to single post template or post
  4. Edit with Elementor
  5. Click the social Share button
  6. Go to Advanced – CSS classes – add your class name
  7. Custom CSS
Choose FontAwesome unicode by clicking unicode tab
Choose FontAwesome unicode by clicking
Add social share classes under social share button then Advanced then CSS class
Add social share classes under social share button then Advanced then CSS class
Replace with Fontawesome unicode with CSS
Replace with Fontawesome unicode

Here the code

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

Here are some examples you can do it with Pseudo elements

How to style last menu item with CSS?

People might tell you to use last item or nth-child item selector it works most of time but it is not that easy to figure it out unless you know CSS very well.

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
How to change last item
Last item steps
Add class to the last item
Last item unique class

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

  1. Go to Templates
  2. Theme Builder
  3. Header
  4. Choose your header
  5. Edit with Elementor
  6. Click nav menu widget
  7. Advanced tab – advanced
  8. CSS classes – Define your unique class
  9. Custom CSS
Theme builder -header tab
Theme builder -header tab
Last item CSS class with Elementor
Last item CSS class
Custom CSS under Navigation (nav) menu
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;
}
CSS is added to the customize section for Elementor free user
CSS is added to the customize section for Elementor free user

FontAwesome icons not loading on browser

You have created 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
Missing Fontawesome icon

Turn out to 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 loaded.

In order to fixed the issue Elementor has added a feature in Advanced tab – 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
Fixed Font Awesome issue by enabling Load Font Awesome 4 support
Fixed Font Awesome issue

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 because this can save you more than 100 KB + 6 stylesheets that huge. If you want to remove globally and speed up a slow website .

Removing icon for performance
Removing icon for performance

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

Before

Before removing FonAwesome icons
Before

After

Font Awesome icon and Eicons are missing
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 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