{"id":1520,"date":"2022-10-24T10:00:00","date_gmt":"2022-10-24T15:00:00","guid":{"rendered":"http:\/\/racmanuel.dev\/?p=1520"},"modified":"2023-03-24T09:59:04","modified_gmt":"2023-03-24T15:59:04","slug":"como-hacer-un-efecto-de-olas-en-movimiento-con-elementor","status":"publish","type":"post","link":"https:\/\/racmanuel.dev\/en\/como-hacer-un-efecto-de-olas-en-movimiento-con-elementor\/","title":{"rendered":"How to create a moving wave effect with Elementor?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"630\" style=\"aspect-ratio: 1200 \/ 630;\" width=\"1200\" controls src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/Efecto-de-Olas-en-Elementor.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 <strong>Plugins &gt; Add New<\/strong> section and enter \"Elementor\" in the search bar. Click on the first option, then \"Install Now\" and \"Activate.\".<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-37.png\" alt=\"\" class=\"wp-image-1521\" width=\"537\" height=\"342\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-37.png 755w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-37-600x382.png 600w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-37-300x191.png 300w\" sizes=\"(max-width: 537px) 100vw, 537px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"537\" height=\"493\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-38.png\" alt=\"\" class=\"wp-image-1523\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-38.png 537w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-38-300x275.png 300w\" sizes=\"(max-width: 537px) 100vw, 537px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We must click on the \"Edit\" button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"100\" height=\"141\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-39.png\" alt=\"\" class=\"wp-image-1526\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Gutenberg editor will appear; in this case, we will click on \"Edit with Elementor.\".<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-40-1024x482.png\" alt=\"\" class=\"wp-image-1527\" width=\"769\" height=\"362\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-40-1024x482.png 1024w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-40-600x282.png 600w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-40-300x141.png 300w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-40-768x361.png 768w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-40.png 1362w\" sizes=\"(max-width: 769px) 100vw, 769px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A screen like the following will appear; we must wait for the Elementor plugin to finish loading.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-41-1024x488.png\" alt=\"\" class=\"wp-image-1528\" width=\"768\" height=\"365\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-41-1024x488.png 1024w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-41-600x286.png 600w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-41-300x143.png 300w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-41-768x366.png 768w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-41.png 1363w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once finished, we will be able to see our page that I previously created with Elementor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-42-1024x485.png\" alt=\"\" class=\"wp-image-1529\" width=\"766\" height=\"362\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-42-1024x485.png 1024w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-42-600x284.png 600w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-42-300x142.png 300w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-42-768x364.png 768w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-42.png 1366w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">On this page, we must click on a section to be able to add the wave divider.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-43-1024x352.png\" alt=\"\" class=\"wp-image-1534\" width=\"772\" height=\"265\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-43-1024x352.png 1024w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-43-600x206.png 600w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-43-300x103.png 300w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-43-768x264.png 768w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-43-1536x528.png 1536w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-43.png 1917w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking on a section, we must click on the \"Style\" tab of that section:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-44.png\" alt=\"\" class=\"wp-image-1535\" width=\"245\" height=\"371\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-44.png 397w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-44-198x300.png 198w\" sizes=\"(max-width: 245px) 100vw, 245px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We should go to the <strong>\"Divider Shape\" section.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-45.png\" alt=\"\" class=\"wp-image-1536\" width=\"245\" height=\"578\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-45.png 395w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-45-127x300.png 127w\" sizes=\"(max-width: 245px) 100vw, 245px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Upon clicking on <strong>\"Divider Shape,\"<\/strong> 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"402\" height=\"188\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-46.png\" alt=\"\" class=\"wp-image-1537\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-46.png 402w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-46-300x140.png 300w\" sizes=\"(max-width: 402px) 100vw, 402px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-47.png\" alt=\"\" class=\"wp-image-1539\" width=\"303\" height=\"439\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-47.png 371w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-47-207x300.png 207w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-48.png\" alt=\"\" class=\"wp-image-1541\" width=\"299\" height=\"417\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-48.png 372w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-48-215x300.png 215w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"397\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-49-1024x397.png\" alt=\"\" class=\"wp-image-1542\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-49-1024x397.png 1024w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-49-600x232.png 600w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-49-300x116.png 300w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-49-768x297.png 768w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-49-1536x595.png 1536w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-49.png 1916w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"como-animar-la-forma-de-divisor\"><span style=\"color: var(--theme-palette-color-2, #25ff00);\" class=\"stk-highlight\">How to animate the Divider Shape?<\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-50.png\" alt=\"\" class=\"wp-image-1543\" width=\"194\" height=\"483\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-50.png 374w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-50-121x300.png 121w\" sizes=\"(max-width: 194px) 100vw, 194px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">body{ overflow-x:hidden}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"como-animar-la-forma-de-divisor\"><span style=\"color: var(--theme-palette-color-2, #25ff00);\" class=\"stk-highlight\">How to do it <strong>without Elementor Pro<\/strong>?<\/span><\/h5>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-51.png\" alt=\"\" class=\"wp-image-1545\" width=\"139\" height=\"296\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-51.png 217w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-51-141x300.png 141w\" sizes=\"(max-width: 139px) 100vw, 139px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">body{ overflow-x:hidden}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">We must copy the code above this text into the stylesheet of our activated child theme. To do this, we will go to <strong>Appearance &gt; Theme File Editor.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"> Simply paste the code and click on the <strong>\"Update File\" button.<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"375\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-52-1024x375.png\" alt=\"\" class=\"wp-image-1547\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-52-1024x375.png 1024w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-52-600x220.png 600w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-52-300x110.png 300w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-52-768x281.png 768w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-52-1536x563.png 1536w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-52.png 1880w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"630\" style=\"aspect-ratio: 1200 \/ 630;\" width=\"1200\" controls src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/Efecto-de-Olas-en-Elementor.mp4\"><\/video><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"como-animar-la-forma-de-divisor\"><span style=\"color: var(--theme-palette-color-2, #25ff00);\" class=\"stk-highlight\">BONUS: How to do it without a Child Theme?<\/span><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To enter the CSS code without a Child Theme, we should go to the <strong>Appearance &gt; Customize tab.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"213\" height=\"191\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-53.png\" alt=\"\" class=\"wp-image-1549\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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: <strong>Additional CSS.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-54.png\" alt=\"\" class=\"wp-image-1550\" width=\"212\" height=\"524\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-54.png 377w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-54-121x300.png 121w\" sizes=\"(max-width: 212px) 100vw, 212px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then simply paste the CSS code from this post and click the blue \"Publish\" button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"932\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/image-55.png\" alt=\"\" class=\"wp-image-1552\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/image-55.png 376w, https:\/\/racmanuel.dev\/wp-content\/uploads\/image-55-121x300.png 121w\" sizes=\"(max-width: 376px) 100vw, 376px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aun-con-dudas-o-necesitas-ayuda-con-un-proyecto\"><span style=\"color: var(--theme-palette-color-2, #25ff00);\" class=\"stk-highlight\">Still have questions or need help with a Project?<\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Do you need help with a web project? Don&#039;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&#039;s talk about your web project!<\/p>\n\n\n\n<div class=\"wp-block-jetpack-contact-form\">\n\n\n\n\n\n\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>In this WordPress and Elementor tutorial, we&#039;ll see how to create a wave effect on our web pages using Elementor and a little CSS. If you don&#039;t know CSS, don&#039;t worry, this tutorial doesn&#039;t require any programming knowledge.<\/p>","protected":false},"author":1,"featured_media":1556,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"categories":[48],"tags":[41],"niveles":[38],"class_list":["post-1520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-elementor","niveles-intermedio"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/posts\/1520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/comments?post=1520"}],"version-history":[{"count":15,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/posts\/1520\/revisions"}],"predecessor-version":[{"id":1634,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/posts\/1520\/revisions\/1634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/media\/1556"}],"wp:attachment":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/media?parent=1520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/categories?post=1520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/tags?post=1520"},{"taxonomy":"niveles","embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/niveles?post=1520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}