Table of Contents
- 1 Change the color of Elementor Button icon widget
- 2 Change font-family from Font-Awesome to Elementor Eicons
- 3 Design touch on background image
- 4 Elementor pro : Portfolio - Custom label
- 5 Add menu to Elementor Pro - Hamburger Menu
- 6 As CSS Tooltip
- 7 Animated Hover effect on Links
- 8 Added Icons to Headings
1. Code i provider below is not minified yet,you have to minified it for yourself for better performance.
2. You have to write your own media Queries if any.
3. Disclaimer: This site contains Affiliate Link, which means that if you buy, Foxscribbler will earn a small commission. This commission comes at no additional cost to you.
4. For best browser compatibility, you need to head over to Autoprefixer CSS online to work on all devices.
Examples using before & after pseudo-Elements
Yes you can use it without any problem but when it come to positioning or any complicated stuff you need Elementor pro because whatever CSS you're-adding will reflect directly to the editor and screen. Which make it super easy
Otherwise if you use Free version it will consume more and more time. Round trips between Elementor editor to Customizer take time
01
But can you change the color,size of the icon itself ?
No out of the box though but you can with little bit of css.
In order to do it you need basic CSS it can even Change the Font Awesome icons to Eicons and vice-versa.
Follow this guide to learn more -
-
Follow the process
- Head over to Elementor button.
- Then Go to Button Advanced tab
- Under Advanced tab - Choose CSS id/ Classes (You prefer).
- Choose whicher you prefer for CSS id use Pound sign or Hash sign or if you are using CSS classes then use (.)
.btn-color-icon .fa:before{
color:purple;
}
.fa - That how FontAwesome use their name
.fa:before - that how Elementor add the fontAwesome icon in pseudo elements
02
Change font-family from Font-Awesome to Elementor Eicons
Then how to change FontAwesome icon to Eicons or Elementor icons vice-versa. It is easy peasy you need to specify Font-family as Eicons and change the content property.
.bt-color-fa .fa-long-arrow-alt-right:before {
content: "\f30b";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}We swap out FontAwesome icon with Eicons by specifying font-family and content.
.bt-color-eicon .fa-long-arrow-alt-right:before{
content: '\e837';
font-family: "Eicons";
font-weight: normal;
font-style: normal;
padding-left:4px;
color:purple;
}03
Design touch on background image
This CSS is inspired by Kevin Powell YouTube Channel and in this post, I will going to demonstrate how to use it with the help of the Elementor pro.
This design can be useful for small touches, decoration etc and you can see the demo down below
In order to see the hover effects, you have to hover on image.
Hover me
Follow the process
- Head over to image widget
- Then Go to Image widget Advanced tab
- Under Advanced tab – Choose CSS id/ Classes (You prefer).
- Choose whichever you prefer for CSS id use Pound sign or Hash sign or if you are using CSS classes then use (.)
.decoration{
position:relative
}
.decoration::after,
.decoration::before {
content: '';
position: absolute;
top:2em;
bottom: 2em;
left: 2em;
right: 2em;
opacity: 1;
transition: transform 300ms ease-in;
}
.decoration::before {
border-top: 3px solid yellow;
border-bottom: 3px solid yellow;
transform: scale(0, 1);
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
}
.decoration::after {
border-left: 3px solid yellow;
border-right: 3px solid yellow;
transform: scale(1, 0);
-ms-transform: scale(1, 0);
-webkit-transform: scale(1, 0)
}
.decoration:hover::before {
-webkit-transform: scale(1.015, 1);
-ms-transform: scale(1.015, 1);
transform: scale(1.015, 1);
}
.decoration:hover::after {
transform: scale(1, 1.05);
-ms-transform: scale(1, 1.05);
-webkit-transform: scale(1, 1.05)
}04
Elementor pro : Portfolio - Custom label
- Follow the process
- Head over to Portfolio widget (only available for Elementor pro user)
- Then click the Portfolio widget Advanced tab
- Under Advanced tab – Choose CSS id/ Classes (You prefer).
- You know the step after that
.portfolio .elementor-portfolio__filters{
display:flex;
justify-content:flex-end;
position: relative;
margin-bottom:0;
z-index:1;
}
.portfolio .elementor-portfolio__filters::before{
content:"Category";
color:#fff;
font-size:1.2rem;
position:absolute;
right:0;
left:0;
top:6%;
bottom:0;
z-index:-1;
}
@media(max-width:768px){
.portfolio .elementor-portfolio__filters::before{
font-size:1rem;
right:0%;
top:-20px;
font-weight:600;
}
}
@media(max-width:480px){
.portfolio .elementor-portfolio__filters{
justify-content:flex-start;
align-items:center;
margin:20px 0 0 ;
padding: 10px 0 10px 0;
}
}
05
Do you prefer default Hamburger menu or added some text next to the hamburger menu like ( Browse) or ( MENU) for Accessibility.
Most of them didn’t know what the Hamburger menu is for, so providing a name give visitors some insights what is it for.
Follow the process
- Head over to Nav menu widget (only available for Elementor pro user)
- Then click the Nav menu widget Advanced tab
- Under Advanced tab – Choose CSS id/ Classes (You prefer).
- You know the step after that
.hamburger .elementor-menu-toggle i::after{
content:'MENU';
Padding-left:10px;
/*specify your font family*/
font-family: 'helvetica',san-serif;
/*Adjust your font size as needed*/
font-size: 1.4rem;
}
.hamburger .elementor-active i:after{
content:'CLOSE';
font-size: 1.4rem;
}06
As CSS Tooltip
A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:
Here are the css if you need :
.top .elementor-button{
position: relative;
}
.top .elementor-button:hover::after{
content:'Surprise';
position:absolute;
display:inline-block;
background-color:#000;
color:#fff;
padding:20px 60px;
margin:-108px -100px;
font-size: 1rem;
}
This is totally optional but can be use for small touch .When you hover button you got small triangle below black background this is the CSS you need – more info from CSS-Tricks and do you know Even Official Elementor website use it on their Sub-menu too
.top .elementor-button:hover::before{
content: "";
position: absolute;
top: -15px;
left: 50%;
margin-left: -5px;
border-width: 8px;
border-style: solid;
border-color: currentcolor transparent transparent transparent;
}07
Animated Hover effect on Links
When you hover any link on my website or on menu after you click the Hamburger menu . You get nice hover effect or animated underline effects .
This can be done with simple CSS and you will get tutorials from Link underline animation from LetsWP.io or if you want more fancier then go to specky boy to learn more.
08
Added Icons to Headings
Font Awesome icons to display before the heading
Do you know you can add font awesome icons before and after using FontAwesome ? See the gif
Elementor icons or eicons to display before or after
Have fun with Elementor icons (eicons) too if you know the CSS.
Here are the css :
.icons .elementor-heading-title::before or ::after{
content:'\e801';
font-family: 'eicons';
padding-right:5px;
}
