How to change logo color when scroll in Elementor

This is a very basic and quick tutorial. Ever wonder how you can change the logo color when you scroll down? This is the tutorial about it.

There are tons of ways to make this happen. I think SVG logo method is the better way. But I think SVG is a little bit hard for now user. So I will show the easiest method.

We just need the the save logo in 2 different colors one in black (or any color you want) and other is white (or any color you want).

Lets design our header with elementor theme builder.
In my case I am just adding a logo and a menu.

Set the background color of the header what ever you want. In my case it will be white. Also set a z-index value to a higher value, so that it sits on top of all other contents.
Finally lets make the header sticky (Advanced > motion effects > sticky > top )

For the next part Lets duplicate our logo and replace the duplicated logo with the white logo.


Perfect ! Now we need to add classes to our logos. Lets say the class of our black logo is 'logo_show' and the white one is 'logo_hide' .



Let's jump into the CSS part.
First we need to hide our white logo. We only want to show it when scroll. So let's hide it. The class of our white logo was 'logo_hide'.

.logo_hide{display:none}

This will hide our white logo initially.
Now if we inspect our header when scroll, we will see elementor adds a class to it called 'elementor-sticky--active'. We need to target that class.


When sticky is activated we need to hide our black logo and show the white one. So here is the CSS

.elementor-sticky--active .logo_show{display:none}
.elementor-sticky--active .logo_hide{display:block}

Now if you scroll you will see our logo is changing when we scroll.
If you want to change the backgound color and the menu text color also when scroll here is the complete code. You need to change it according to your need.

.logo_hide{display:none}
.elementor-sticky--active .logo_show{display:none}
.elementor-sticky--active .logo_hide{display:block}
.elementor-sticky--active {background:#2c2c2c !important; }
.elementor-sticky--active a{color:#fff !important}
.elementor-sticky--active a.elementor-item-active{color:red !important}

Ever wondered how you can design your own post? Elementor is a great plugin to create a cool looking website with in a minute. It has tons of widgets and theme options as well. But one thing it still lacks is to "Create a custom post loop".
But we have an alternative solution for it.
In this tutorial I will show you how we can create our own post loop or how we can design our posts of our own.

We will use a plugin called "Elementor Custom Skin". Its a free plugin. You can download it from wordpress plugin repository.



Go to 'Plugins > Add new' from your wordpress dashboard and search for 'Elementor Custom Skin'. Install and activate it.
Now if you go to 'Templates > Theme Builder' you will see a new tab called 'Loop'.
Now lets add a new 'loop'. Click the 'Add new' button from the top.
Select 'Loop' as type and give it a name. And click the 'Create Template' button.


Now elementor editor will open. design the post just like you want. (Design it only for one post.)After finishing the design, we need to make everything dynamic. for e.g. Lets make the title dynamic so that it shows post title automatically.
Click the small 'Dynamic' text just above the title you have added and choose 'post title'.
Also to make the 'link' dynamic, click the dynamic button and choose 'Post URL'.



Perfect. Same for feature image and post description as well.

When everything is dynamic click the 'publish/update' button.

The display condition popup will show. Set the proper condition, where you want to show the loop design.


Our design is done. 🙂
Now how can we use this design to our post? That's actually very easy.
Go to your page where you want to show the custom designed post. Insert a 'Posts' widget.
Under 'Layout > Skin' you will see a new option called 'Custom'. Choose it and then set the 'Select a default template' to the template you have created.
Cool! we are all set. choose the correct post type from 'Query'.


Ever wonder how you can create a great looking background text clipping mask?
Here how you can do it.
First add you heading or text. Set the proper size and font family.
Now give that heading a CSS class. In my case it is 'mask_text'.
Go to Advanced > Background. And set the image you want to clip as a background. You can set any background position. Set the background size to cover.

Now lets add some CSS.
Elementor wraps every widget with div called 'elementor-widget-container'. We need to target that class. We need to set 'background-clip' property to 'text'.
We need to provide browser prefix so that it supports in every browser.

.mask_text .elementor-widget-container{
background-clip:text;
 -webkit-background-clip:text;
  -moz-background-clip:text;
  -o-background-clip:text;
}

You will see the background is gone and text is back to its original color. To fix that we need to change our text color to transparent.


.mask_text .elementor-widget-container h2{
color:transparent !important;
}

If you use H2 then it will be 'h2'. If you use H1 then it will be 'h1'. For text it will be 'p'.



As you can see the background clip is working perfectly now.

Let's animate it now !!!

We need to add a 'animation' property. That will have a animation name (you can use any name) , duration , type and loop.
Here is the code

.mask_text .elementor-widget-container{
background-clip:text;
 -webkit-background-clip:text;
  -moz-background-clip:text;
  -o-background-clip:text;
  animation: maskText 10s linear infinite;
    -webkit-animation: maskText 10s linear infinite;
}

Now lets make the keyframe animation.

@keyframes maskText{
  from{ background-position: 0px center}
  to{ background-position: 2000px center}
}

We will animate the background position. It will start from 0px to 2000px (any bigger value).

And we are done 🙂

Here is the full codes:

.mask_text .elementor-widget-container{
background-clip:text;
 -webkit-background-clip:text;
  -moz-background-clip:text;
  -o-background-clip:text;
  animation: maskText 10s linear infinite;
    -webkit-animation: maskText 10s linear infinite;
}
.mask_text .elementor-widget-container h2{
color:transparent !important;
}
@keyframes maskText{
  from{ background-position: 0px center}
  to{ background-position: 2000px center}
}
@-webkit-keyframes maskText{
  from{ background-position: 0px center}
  to{ background-position: 2000px center}
}

We can be very creative with Elementor popup builder.
In this tutorial we will make an awesome animated off-canvas section with Elementor popup builder.

So go to Templates > popups
and create a new popup

Set the width of the popup to 100vw and set height to 100vh.
Set the horizontal position to left and vertical to center.

Disable the overlay.

Choose a proper Entrance Animation. In my case I am choosing Fade In Left.

Same for the Exit animation. I am choosing Slide Out Left.


Go to style tab and set a transparent background color. we dont need any background for the popup. And also disable the default box shadow for the popup.

Lets set the close button to the top left hand side so that It shows when every content is loaded. For horizontal lets set it to 98% for the close button.

Now add the section for your content. I am choosing 3 columns layout. Set the section width to full width. column gap wider. For height set it to 100vh. Set column Position to Stretch and Vertical Align to Middle.


Now insert your content and design each column.

Now select the first column and go to Advanced > Motion effects and set the entrance animation to "Fade in left", You can choose other animation as well.
for animation delay lets set it to '0'.

Same for the second column. But for now lets set the animation delay to 500.

For last one lets set the animation delay to 1000.

So it will increase by 500 each time.

Save it. We dont need any condition or trigger.

Now add a button in which when user clicks the off canvas will show.
Click "Dynamic" just above the link field. Then choose popup.
Set 'Open popup' from action. And type the name of your popup. When it appears , select it and save.


We are done. Check how beautiful the off canvas section looks !!!

Ever though if you can animate the elementor shape divider? Yes you can. Lets try to animate it.
First of all add your section and set the shape divider you want and choose the appropriate color as well. Then give the section a class. In my case it is "my_shape".

If you inspect the shape divider you will see elementor wraps it with a div called "elementor-shape elementor-shape-bottom". It will be elementor-shape-top if you add shape divider on top.

Lets add some CSS.

.my_shape .elementor-shape-bottom{
width: 210%;
  animation: shape 22s cubic-bezier(.42,0,.58,1) infinite; 
}

As you can see we need to increase the width of our shape. Lets make it 210%. And then we need to add animation property so that we can animate the divider.

First we will provide the animation name.It can be any name. Then the duration of the animation. We will give a long duration to make it slow and smooth. Then we will use a cubic bezier animation to make it more dramatic. And finally make it infinite loop.

You can visit https://cubic-bezier.com/ for some awesome cubic bezier effect to use.

Now we need to create that 'shape' animation

@keyframes shape {
  0%{
  margin-left:0;
  }
  50%{
  margin-left:-1600px;
  }
    100%{
  margin-left:0;
  }

We will play with margin left. at 0% it will be 0. For 50% we need to set a bigger value. I found out 1600px works perfectly.
And for 100% we need to set it 0 again.

Lastly lets set the body overflow-x to hidden.

body{ overflow-x:hidden}

We are done !!! Here is the final codes.

.my_shape .elementor-shape-bottom{
width: 210%;
  animation: shape 22s cubic-bezier(.42,0,.58,1) infinite; 
}
@keyframes shape {
  0%{
  margin-left:0;
  }
  50%{
  margin-left:-1600px;
  }
    100%{
  margin-left:0;
  }
  body{ overflow-x:hidden}

Elementor has an awesome nav menu widget. In mobile view it switches to toggle hamburger button. But unfortunately it does not have many customization options. Like we can not change the toggle menu icon.
We actually can change the icon to any font awesome icon with the help of little bit CSS.
Elementor now supports font awesome 5 that means we have tons of icons to choose form.
If we inspect the toggle icon we can see the icon has a class called "eicon-menu-bar"


We need to target the eicon-menu-bar after pseudo class and add some CSS

.eicon-menu-bar:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "f037";
}

First of all we need to define the font family. As we are using free version of font awesome , our font family will be "Font Awesome 5 Free". Then we need to set our font weight and lastly we need to set the cheat code of any specific icon with in the "content".

So from where you will get the cheat code?

Go to fontawesome website click the 'i' icon from the right. Now all the cheat code will show for any specific icon.
Copy the code from your icon and inset with in the css.


Your toggle icon is now changed. But if you want to change the active 'X' icon as well you need to target the "elementor-active" before pseudo class.

.elementor-menu-toggle.elementor-active i:before {
    content: "f00d";
      font-family: "Font Awesome 5 Free";
}

Just change the icon cheat code here and we are good to go.

So here is the full codes

.eicon-menu-bar:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "f037";
}
.elementor-menu-toggle.elementor-active i:before {
    content: "f00d";
      font-family: "Font Awesome 5 Free";
}

We actually can make Horizontal scrolling website with elementor but we need some help of CSS.

First design and make all of your section just like you want.
Set each section height to "Fit to screen", so that each section covers the entire height of our screen.

Lets give all sections a common css class so that we can target all of them at once.
For my case I am calling it "section".
Now the CSS part. 🙂
Elementor by default wraps each page with 2 divs one is "elementor-inner" and another is "elementor-section-wrap".
So we need to target them.
Lets add the CSS

.elementor-inner{
width:100vh;
height:100vw;
overflow-x:hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position:absolute;
}

For "elementor-inner" we need to set the width and height first.
for width we have to set it to 100vh so that it equals to 100 view port height. And the height will be 100vw.

Then we need to hide the 'X' axis scroll so that we can only scroll to the 'Y' axis. so overflow-x will be hidden and overflow-y will be shown.

We need to add a transform property to rotate it -90 degree. and then translate it to 'X' by -100vh.
Then set the transform origin to top left so that it starts from top left of the screen.

Set the position to absolute.

Now lets target the "elementor-section-wrap" and add some CSS

.elementor-section-wrap{
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left; 
  display:flex;
  flex-direction: row; 
  width: 600vw;
}

In this case we need to change the transform rotate property to positive 90 degree instead of negative 90 degree. and translate to 'Y' axis by -100vh.
Lets set the display property to 'flex' and flex direction to 'row'.
Here is one thing to keep in mind. if you use 6 section in your website the width will be 600vw. If you use 5 then width will be 500vw. For 7 it will be 700vw.

Now for our section class (that means for every sections) lets give them a width and height.

.section{ width:100vw; height:10vh}

Almost perfect. But as you can see we have a scroll bar on top of the site. We need to hide it any how.


So we need to use prefix in for different browser. so lets add it to elementor inner div

.elementor-inner{
width:100vh;
  height:100vw;
  overflow-x:hidden;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left; 
  position:absolute;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

For chrome add this.

::-webkit-scrollbar{
display:none
}

Finally we are done. So here is the full Codes

.elementor-inner{
width:100vh;
  height:100vw;
  overflow-x:hidden;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left; 
  position:absolute;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.elementor-section-wrap{
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left; 
  display:flex;
  flex-direction: row; 
  width: 600vw;
}
.section{ width:100vw; height:10vh}
::-webkit-scrollbar{
display:none
}

As the website wont look good in mobile we will set these CSS only for Desktop view.

@media screen and (min-width:992px){
.elementor-inner{
width:100vh;
  height:100vw;
  overflow-x:hidden;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left; 
  position:absolute;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.elementor-section-wrap{
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left; 
  display:flex;
  flex-direction: row; 
  width: 600vw;
}
.section{ width:100vw; height:10vh}
::-webkit-scrollbar{
display:none
}
}

So now the horizontal scroll will only work for device which has bigger screen than 992px. You can set any design screen size if you wish.

This is actually very easy. You can show a popup message when user submit a form.
First create a popup using Elementor popup builder, that you want to show when user submits the form. we dont need to set and trigger or condition for the popup just save it.
Now go to the form. Form the left panel go to "Action After Submit". Click the field and scroll all the way down to the available options. Choose Popup.



A popup option will show up/ Choose "Open popup" from "Action". And in popup type the name of the popup you have created and choose it. Save it.
Now if you submit the form the popup will show up.


If we use Elementor nav menu widget and check the site on mobile, Elementor turns the menu to a Hamburger toggle button.
But sometimes we use multiple Nav menu widget in the site. Its very annoying to have multiple Hamburger menu, specially on footer.

In this tutorial We will learn how to can Disable that hamburger menu button and show the actual button.

We have to give a class name to that menu. Lets say it is "menu_mobile ".
Now open the CSS editor and lets add some CSS.

As we only need to show it on mobile so we will target only the mobile.

@media screen and (max-width:767px){
.menu_mobile .elementor-menu-toggle{ display:none}
 .menu_mobile .elementor-nav-menu--main{ display:block}
}

You can see there, we have used a media query and set the max-width to 767px so these codes only works on device smaller that 767px.

The we have to target the "elementor-menu-toggle" class and hide it by setting "display:none".
Then we need to show the main menu by showing "elementor-nav-menu--main" div.
Thats it !!!

In this tutorial we will learn how we can make a button fill effect without any plugin.

First add a button widget and make the size just like you want.

Then give the button a class name. I am calling it "fill_btn".
Elementor gives button a class called "elementor-button". So we need to target that class.
Lets open our CSS editor and do the magic.


.fill_btn .elementor-button{
background:linear-gradient(to right, red 50%, #fff 50%);
background-size:200% 100%;
background-position:right bottom;
transition: all 1s ease;
}

Here I have added a background gradient color to the button. "to right" means the color will go from left to right. then we will define 2 colors. You can use any color. In my case I am using red and white. So 50% red and 50% white.
Then we need to increase the background size to 200% width so the white color covers the entire button initially.

I have also set the background position and transition to smoother animation.

Now we have to set the hover CSS, so when someone hovers to the button the red color fills the entire button. So lets do it

.fill_btn .elementor-button:hover{
background-position:left bottom;
color:#fff !important;
}

When hovered I just Shifted the background position to left bottom instead of right bottom.
I also set the color to white. So that it is easier to read the text.

And we are done !!!

Here is the full codes.

.fill_btn .elementor-button{
background:linear-gradient(to right, red 50%, #fff 50%);
background-size:200% 100%;
background-position:right bottom;
transition: all 1s ease;
}
.fill_btn .elementor-button:hover{
background-position:left bottom;
color:#fff !important;
}
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram