Table of Contents
- 1 Change the color & Increase the width and height of the icon
- 2 Change the font family from Font-Awesome to Elementor icons
- 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 Sub-menu Triangle when hovering
- 8 Animated Hover effect on Links
- 9 Added Icons to Headings
- 10 Added Icons to Post Title in WordPress
- 11 As a Badge
- 11.1 Step#1: Appearance then Menus
- 11.2 Step#2: Select the Navigation menu item and add CSS class
- 11.3 Step#3: Go to Theme builder and search your active site header
- 11.4 Step#4: Click the nav menu widget handle and add CSS class
- 11.5 Step#5: Add Custom CSS to the Nav menu widget
- 11.6 Step#6: Live badge
- 12 Hover effects
- 13 Partial Underline color effects to the heading tag
- Code I have provided below is not minified yet, you have to go to this website to minified your CSS for better performance.
- You have to write your own media Queries if needed.
- Disclaimer: This site contain Affiliate Links, which means if you buy, website will earn a small commission. This commission comes at no additional cost to you.
- For browser compatibility, you need to head over to Autoprefixer CSS online.
- (Requirement) Learn how to how to add CSS class to an elementor's widget.
:before (::before) and :after (::after) Pseudo-Elements are really good ways to add style to the Elements without the need for adding extra Markup you don’t need.
Can I use it with the Free version of the Elementor plugin?
Yes, you can use the free version of Elementor without any issues but when it comes to convenience or any complicated stuff, you will need Elementor pro because you will see whatever CSS you’re writing and it will reflect directly to the editor itself in real-time that makes it super easy and faster and productive.
Otherwise, if you use the Free version it can consume more time and it is not as productive compared to the Pro version.
I am not trying to sell you the Elementor pro plan or anything but it is facts. You have to figure out which class you use and it can cause Conflict with other Custom CSS.
Head up: If you enabled inline font icons Elementor experiments in Elementor’s settings. The first and second methods will not work because they will replace icons with SVG.
The “Inline Font Icons” will render the icons as inline SVG without loading the Font-Awsome and the eicons libraries and its related CSS files and fonts. Learn More. Learn More
Change the color & Increase the width and height of the icon
But can you change the color,size of the icon itself?
Not out-of-the-box though but you can with little bit of css. Follow this guide to learn more -
- Head over to Elementor button.
- Then Go to Button Advanced tab
- Under Advanced tab - Choose CSS id/ Classes (You prefer) and give a name for styling. (btn-color-icon) this is the CSS class I choose.
- Choose whicher you prefer for CSS id use 'Pound sign' or 'Hash' or '#' sign or if you are using CSS classes then use (.)
/*
* .btn-color-icon is the CSS class, we have added to Elementor's button CSS classes
* .fa is the CSS classes for font-awesome icons.
* ::before or :before is the before and after pseudo-elements to insert CSS or anything to the elements.
*/
.btn-color-icon .fa:before {
color: purple;
}
/*
* If you enabled inline font icons experiments
*/
.bt-color-icon .elementor-button {
fill: purple !important
}
/*
*Free tips: Change the width and height of the icon or SVG
*When you increase the width and height of the icon, there will be an alignment issue.
*To fix it we add align-items to center
*/
.bt-color-icon .elementor-button-content-wrapper {
align-items: center
}
.bt-color-icon .elementor-button-icon svg {
/*
Default is 1em on width and height
To overwrite, we use !important CSS rule
*/
height: 2em !important;
width: 2em !important
}
I Choose CSS classes as "btn-color-icon" for that CSS, it will be .btn-color-icon = class name
.fa - That how FontAwesome use their name
.fa:before - that how Elementor add the fontAwesome icon with before and after pseudo-elements
Change the font family from Font-Awesome to Elementor icons
To change the font-family from Font-awesome (FA) to Elementor icons (Eicons) libraries, we have to specify the font-family CSS property in the syntax.
This is how it looks when you add Font-Awesome icon directly from icon libraries in the frontend editors.
/*
* This is the Code, Font-Awesome use it
* .btn-color-fa is the CSS class, we have added to Elementor's button CSS classes
* .fa-long-arrow-alt-right is the CSS classes for calling font-awesome icons for font-awesome libraries.
* ::before or :before is the before and after pseudo-elements to insert CSS or anything to the elements.
*/
.bt-color-fa .fa-long-arrow-alt-right:before {
content: "\f30b";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color:#000;
}
Now to change the FA font family to Eicons, we have to change the syntax from font-family: "Font Awesome 5 Free"; to font-family: "Eicons";
/*
* This is the Code, Font-Awesome use it
* .btn-color-fa is the CSS class, we have added to Elementor's button CSS classes
* .fa-long-arrow-alt-right is the CSS classes for calling font-awesome icons for font-awesome libraries.
* ::before or :before is the before and after pseudo-elements to insert CSS or anything to the elements.
*/
.bt-color-fa .fa-long-arrow-alt-right:before {
content: "\f30b";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color:#000;
}
Before
After
Now, you may be asking why the icon are the same as Font awesome icons this is mainly due to Inline Font Icons experiments. But if you disable the experiments, you will be able to see the icons.
Design touch on background image
This CSS is inspired by Kevin Powell: YouTube Channel and from 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 and video below.
I highly recommend watching Kevin Powell’s video to fully understand the code.
To see the hover effects, you have to hover upon an image below.
The demo below is built with an Elementor HTML widget and you can copy and paste the HTML and CSS to your project, just make sure you change the path of the images
<!-- Boilerplate -->
<div class="decoration">
<p class="dspan">Hover me</p>
<img
data-no-lazy="1"
class="dimage"
width="800" height="522"
loading="lazy"
src="/..1024x668.jpg"
srcset="
/image.jpg 480w,
/image5-1024x668.jpg 768w,
/image-1024x668.jpg 1024w,
/image-1536x668.jpg 1536w"
alt="Descriptive Alt tag"
sizes="(max-width: 800px) 100vw, 800px">
<!-- When Hover button will appear-->
<button role="button" class="dbutton"> Surprise </button>
</div>
/*
* CSS custom Properties
* Please use Autoprefixer to add all the browser compaitability tag (Highly recommended
* You still need to adjust CSS
*/
:root {
--site-transition: 300ms ease-in-out;
--clr-button: #ffce30;
--clr-button-text: #304ffe;
--clr-button-text-hover: #ffe485;
}
/*
* container
*/
.decoration {
position: relative;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
}
/*
* Button
*/
.dbutton {
transform: translateY(-120px);
z-index: 2;
width: 50%;
border-radius: 50px;
height: 50px;
margin: 0;
opacity: 0;
text-transform: uppercase;
font-weight: var(--fw-600);
letter-spacing: 2px;
/*
* Instead of using transition: all
*/
transition: opacity var(--site-transition),
transform var(--site-transition),
background var(--site-transition),
color var(--site-transition);
pointer-events: none;
}
/*
* Paragraph
*/
.dspan {
font-size: 4rem;
text-transform: uppercase;
font-weight: var(--fw-600, 600);
position: absolute;
transform: translate(-50%, -50%);
color: Blue;
top: 40%;
left: 50%;
transition: opacity var(--site-transition);
z-index: 1;
}
.decoration::after,
.decoration::before {
content: '';
position: absolute;
top: 5em;
bottom: 8em;
left: 1.7em;
right: 1.7em;
opacity: 1;
z-index: 2;
transition: transform var(--site-transition);
}
.decoration::before {
border-top: 3px solid var(--clr-button-text-hover);
border-bottom: 3px solid var(--clr-button-text-hover);
transform: scale(0, 1);
}
.decoration::after {
border-left: 3px solid var(--clr-button-text-hover);
border-right: 3px solid var(--clr-button-text-hover);
transform: scale(1, 0);
}
.decoration:hover::before {
transform: scale(1.015, 1);
}
.decoration:hover::after {
transform: scale(1, 1.05);
}
.decoration:hover .dbutton {
opacity: 1;
pointer-events: auto;
transform: translateY(-130px);
cursor: pointer;
z-index: 3;
}
.dbutton:hover {
background: var(--clr-button-text);
color: var(--clr-button-text-hover);
}
/*
* Media Queries
*/
@media(max-width:768px) {
.dspan {
font-size: 3rem;
transform: translateY(20vh);
}
.dbutton {
transform: translateY(-120px);
height: 50px;
font-size: 1.1rem;
}
.decoration:hover .dbutton {
transform: translateY(-110px);
}
}
@media(max-width:760px) {
.dspan {
font-size: 2.4rem;
transform: translateY(13vh);
}
.dbutton {
transform: translateY(-80px);
height: 40px;
font-size: .9rem;
}
.decoration:hover .dbutton {
transform: translateY(-100px);
}
}
.dbutton {
border: none;
}
.decoration:hover .dbutton {
background: var(--clr-button-text);
color: var(--foreground);
}
Elementor Pro: Portfolio - Custom label
Follow the process
- Head over to the Portfolio widget.
- Then click the Portfolio widget Advanced tab
- Under Advanced tab – Choose CSS id/ Classes (You prefer).
- You know the step after that
To understand the CSS properly, you need to learn the CSS FlexBox property first. So you will understand what is going on.
.portfolio .elementor-portfolio__filters {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
position: relative;
margin-bottom: 0;
z-index: 1;
}
/*
* box-shadow to all the post images
*/
.elementor-posts-container .elementor-post {
-webkit-box-shadow: #3539411c 0 10px 40px 0;
box-shadow: #3539411c 0 10px 40px 0;
}
.portfolio .elementor-portfolio__filters::before {
/* Replace the content*/
content: "'Category' Label are added with Pseudo-elements";
color: #000;
font-size: .95rem;
position: absolute;
right: 0;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
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 {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 20px 0 0;
padding: 10px 0 10px 0;
}
}
I have tested it in LocalHost and it has accessibility problems.
Do you prefer the default Hamburger menu or add some text next to the hamburger menu like ( Browse) or ( MENU) for the indicator.
Most of them didn’t know what the Hamburger menu is for, so providing a name gives visitors some insights into it.
Follow the process
Head over to the Nav menu widgetThen click the Nav menu widget then the Advanced tabUnder the Advanced tab – Choose CSS id/ Classes and give a class name, so you can style properly (.hamburger).You know the step after that
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: Blue;
color: #000;
padding: 20px 60px;
/*
* Adjust as per your requirements
*/
margin: -108px -100px;
font-size: 1rem;
}
When your mouse pointer hovers over (Old) Elementor’s navigation menu on the official Elementor’s website we see a small triangle with white color.
If you want to achieve the same things, you can use the code below.
.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;
}
Animated Hover effect on Links
When you hover any link on my website or on the menu after you click the Hamburger menu. You get nice hover effects or animated underline effects. You can experience the same thing on all my links too.
This can be done with simple CSS and you will get tutorials from Link underline animation from LetsWP.io or if you want fancier then go to specky boy to learn more.
I reuse the Kinsta hover effects on all my links
/*
* Your CSS class may varies but the process is all the same
* In this example, I am targeting only my single post template
* single-post-link is the parent container that wrap around all the content
* Change the Color Hex code to any color
*/
:root {
--site-transition: 300ms ease-in-out;
--color: red;
}
.single-post-links a {
background-image:
linear-gradient(transparent calc(100% - 1px), var(--color) 1px);
color: var(--color);
background-position: 100%;
background-repeat: no-repeat;
position: relative;
text-decoration: none;
transition: background-size var(--site-transition);
background-size: 100% 100%;
}
/*
* when hover
*/
.single-post-links a:hover {
background-size: 0 100%;
}
Added Icons to Headings
Display Font-Awesome icons before & after the heading widget
Do you know you can add font awesome icons before and after using FontAwesome?
This example you’re seeing in the video is not entirely done with before and after pseudo-elements but you can achieve it pretty easily.
See the video below for the demonstration-
/*
* Before heading
* It will not work if you enabled inline font icons
* See the sub heading for demo
*/
.fa-icon .elementor-heading-title {
position: relative;
}
.fa-icon .elementor-heading-title::before {
content: '\f641';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 20px;
}
/*
* After heading
*/
.fa-icon .elementor-heading-title::after {
content: '\f641';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 20px;
}
Elementor icons or eicons to display before or after
Have fun with Elementor icons (eicons) too if you know the CSS.
/*
* Before heading
*/
.icons .elementor-heading-title{
position: relative;
}
.icons .elementor-heading-title::before{
content:'\e801';
font-family: 'eicons';
padding-right:5px;
}
/*
* After heading
*/
.icons .elementor-heading-title::after{
content:'\e801';
font-family: 'eicons';
padding-left:5px;
}
Added Icons to Post Title in WordPress
I wrote an article on Quora on how to add an icon to post a title in WordPress, it is well documented in my opinion. Go check the page on how to implement your projects.
As a Badge
Have you ever thought of using it as a badge like if there is a notification?
This is the question asked on Facebook today on how to do it, most of the answers were straight on the point. For starters, this can overwhelm you but if you follow this process you can do it but you will still need to adjust it though.
Hover over to Appearance and click the menus.
Now select the navigation menu items you want to add the badge and add CSS class (shown in the picture below).
Add a span class of “nav” or any preferred.
if you don’t want a screen reader to read like “Our Mission New” you can add “aria-hidden=”true” ” to the span itself to skip “New“.
Step#3: Go to Theme builder and search your active site header
Now head over to Elementor Theme builder and find your active site header.
Now find your template – click the Edit with Elementor to edit your site header template.
You will be unstyled version (in the picture below) first because we haven’t styled it yet but we will.
We added this CSS class not to get conflict with other CSS classes or rules so it doesn’t get overwritten.
/*
* nav-menu is the CSS class we defined in Elementor CSS classes
* Nav is the CSS we define in Appearence - Menu
*/
.nav-menu .elementor-item{
position: relative;
}
.nav-menu .elementor-item .nav{
position: absolute;
right:0;
top: -5px;
background-color: #000;
border-radius: 30px;
width: 45px;
font-size: .8rem;
text-transform: capitalize;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
Result
Step#6: Live badge
By using before and after pseudo-elements CSS we can add the live badge features and then we can animate with @keyframes CSS.
.live-badge::before{
content:'';
color: red;
position: absolute;
left:5px;
top:5px;
background: red;
border-radius: 50%;
width: 10px;
height: 10px;
}
To animate the red dot, we need to add keyframes. So we had over to Animista – CSS animations on Demand this is my favorite CSS animation site.
.live-badge::before{
content:'';
color: red;
position: absolute;
left:5px;
top:5px;
background: red;
border-radius: 50%;
width: 10px;
height: 10px;
/* We define the animation name as heart heartbeat*/
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
/* ----------------------------------------------
* Generated by Animista on 2021-10-22 22:8:1
* Licensed under FreeBSD License.
* See https://animista.net/license for more info.
* w: https://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation heartbeat
* ----------------------------------------
*/
@-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
Related-
- If you’re facing a Layout shift issue on your navigation Sub-menu icon when you load the page. Follow my How to Fix the Submenu icon indicator delay? article.
- Navigation is broken when you update Elementor! Here is how to troubleshoot and fix the nav menu bug.
Hover effects
You can achieve amazing hover effects with before and after pseudo-elements. Here is the Codepen you can check out and it is created by me.
Partial Underline color effects to the heading tag
If you want to do the same thing to your headings, you can achieve the same things with before and after pseudo-elements or by using a linear gradient.
Step#1: Give A CSS class to your heading
Step#2: Add CSS to the Custom CSS area
/*
* Global Style
*/
:root {
--heading-color: #fbfbfb;
--underline-clr-bg: blue;
--font-weight: 800;
}
/*
* Heading Style
* This CSS can look weird, if you have long text
*/
.partial_bg_heading .elementor-heading-title{
color: var(--heading-color);
font-weight: var(--font-weight);
background: linear-gradient(
to bottom,
transparent 60%,
var(--underline-clr-bg) 60%);
background-repeat: no-repeat;
}
If you have other examples and want to contribute, please do consider using comments.
Thank you
Reference :
