In this WordPress and Elementor tutorial, we will see how to create a wave effect on our web pages using Elementor and a bit of CSS. If you don't know CSS, don't worry, this tutorial will not require programming knowledge. The final result will be as follows:
Well, let's begin... The first thing is to have Elementor installed. If you do not have Elementor as a plugin, you should go to the Plugins > Add New section and enter "Elementor" in the search bar. Click on the first option, then "Install Now" and "Activate.".
Once Elementor is installed, we need to create or go to the page where we want to add the effect. In my case, I already have a page made with Elementor to which I want to add the effect; the page is named: Home Page.
We must click on the "Edit" button.
The Gutenberg editor will appear; in this case, we will click on "Edit with Elementor.".
A screen like the following will appear; we must wait for the Elementor plugin to finish loading.
Once finished, we will be able to see our page that I previously created with Elementor.
On this page, we must click on a section to be able to add the wave divider.
After clicking on a section, we must click on the "Style" tab of that section:
We should go to the "Divider Shape" section.
Upon clicking on "Divider Shape," two more options will appear: "Top" or "Bottom." These are the places where we can add the waves. In my case, I will only use "Bottom," but you can use either position or both; it is your decision.
Then it will ask us to select the type of divider. For the effect we want, we will use "Waves." I have tried animating other dividers, and the animation works, but it doesn't look good with all of them. I suggest that once you finish the tutorial, you experiment with this part of Elementor and see the results you can achieve.
Once the divider type is selected as "Waves," it will show some settings. You can leave them as you wish regarding height, width, color, and depth. Here is how I have configured it.
After finishing configuring the "Divider Shape" element, we can see that our waves are already displayed, but still without animation. Simply click the green "Update" button to save the changes. Now, let's move to the important part.
How to animate the Divider Shape?
For this, we will see two options. The first and simplest is for Elementor Pro on your WordPress: simply go to the "Advanced" tab in the same section where we placed the Divider Shape, look for the "Custom CSS" tab, and paste the code below:
body{ overflow-x:hidden}How to do it without Elementor Pro?
body{ overflow-x:hidden}We must copy the code above this text into the stylesheet of our activated child theme. To do this, we will go to Appearance > Theme File Editor.
Simply paste the code and click on the "Update File" button..
Done. Upon returning to the page made with Elementor, we will see that the waves have animated, and you will obtain a result like the following:
BONUS: How to do it without a Child Theme?
Before teaching you how to do it without a child theme, I recommend that you always use a child theme on your website, because if your theme is updated, you will lose all your changes.
To enter the CSS code without a Child Theme, we should go to the Appearance > Customize tab.
A menu like the following will appear; it will depend on the theme you have active on your website. In my case, I am using the Storefront Theme, and the menu says: Additional CSS.
Then simply paste the CSS code from this post and click the blue "Publish" button.
Still have questions or need help with a Project?
Do you need help with a web project? Don't hesitate to contact me. I develop complete and customized solutions with WordPress and PHP, using modern tools and processes, HTML, CSS, SCSS, PHP, JavaScript, Bootstrap, and more. Ready? Send me a message and let's talk about your web project!