In this tutorial, you will learn how to create an effect on your website using the free version of Elementor. The effect consists of reducing the height of the header and the size of the logo when scrolling, as well as changing the background color of the header. To achieve this, we will follow the steps below:
Preparation
1.1. Make sure you have the free version of Elementor installed on your website. If you have the Pro version, you don't need to install any additional plugins.
1.2. Access the WordPress dashboard and go to “Appearance > Elementor Header and Footer”.
1.3. Click “Add New” and give your header a name. Make sure to select the option to make this header appear on all parts of your website and be visible to all users. Then, click “Publish.”
Designing the Header
2.1. After publishing the header, click on “Edit with Elementor”.
2.2. Add a horizontally oriented container. You can customize this container to your preferences, such as font weight.
2.3. In the container, first place your website logo and then the menu.
2.4. Define a breakpoint for the mobile version if you wish.
2.5. Vertically align the container and set the content justification to “space between”.
Creating the Transition
3.1. To create the transition, we will use JavaScript and CSS. Go to the “Advanced Container” and assign a class, for example, “myhead” to the container.
3.2. Assign another class, such as “myimage”, to the website logo.
3.3. To make the header stay fixed at the top when scrolling, go to “Motion Effects” and enable “Stick”. Set the value to your needs.
Customize the Effect with Code
4.1. You need to change the header background color and height before and after scrolling. To do this, open the related code file.
4.2. In the code, find line 6 to define the initial background color and line 19 for the background color after scrolling.
4.3. Lines 5 and 18 set the height of the header before and after scrolling. Adjust these values to your liking.
4.4. To modify the number of scroll pixels at which the effect is applied, go to line 10 and adjust the value.
Test and Adjust
5.1. Refresh your page and check the effect created. The header should shrink, the logo should resize and the background color should adjust when scrolling.
Ending
Congratulations! You have successfully created a header and logo zoom out effect on scroll with Elementor. Now you can customize it further and adjust it to your design.
Always remember to save your changes and test to make sure the effect works properly on your website.
If you found this tutorial useful, don't forget to give it a like, subscribe and activate notifications on the author's channel. Also, you can leave your doubts or questions in the comments and share the content on your social networks.
See you next time!
