Table of Contents
- 1 Examples using before & after pseudo-Elements
- 2 Icon position to right or after on Elementor Button widget
- 3 Change font-family from Font-Awesome to Elementor Eicons
- 4 Design touch on background image
- 5 Elementor pro : Portfolio - Custom label
- 6 Add menu to Elementor Pro - Hamburger Menu
- 7 As CSS Tooltip
- 8 Animated Hover effect on Links
- 9 Added Icons to Headings
1. Code i provider 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 contain Affiliate Link,which means that if you buy, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.
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 inspire from Kevin Powell YouTube Channel & in this post i will going to demonstrate how to use with Elementor pro.
This can be useful for small touches, decoration etc.
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;
}
.portfolio .elementor-portfolio__filters::before{
content:"Category";
color:#fff;
font-size:1.2rem;
position:absolute;
right:0;
left:0;
top:6%;
bottom:0
}
@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;
}
}- All
- Elementor Page Builder
- Freebie
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;
}05
As CSS Tooltip
A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:
.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;
}
.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;
}06
Animated Hover effect on Links
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.
See the Pen Link Underline Animation from LetsWP.io by Firsh (@Firsh) on CodePen.
07
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;
}
If you have other example and want to contribute,please do consider using comments.
Thank you
Reference :
