{"id":4306,"date":"2024-08-09T10:25:50","date_gmt":"2024-08-09T09:25:50","guid":{"rendered":"https:\/\/www.lucushost.com\/blog\/?p=4306"},"modified":"2024-08-20T13:08:04","modified_gmt":"2024-08-20T12:08:04","slug":"parallax-con-elementor","status":"publish","type":"post","link":"https:\/\/www.lucushost.com\/blog\/parallax-con-elementor\/","title":{"rendered":"C\u00f3mo crear el efecto Parallax con Elementor"},"content":{"rendered":"<p>No es la primera vez que un cliente nos escribe para saber c\u00f3mo crear el efecto <strong>Parallax con <a href=\"https:\/\/www.lucushost.com\/blog\/elementor\/\">Elementor<\/a><\/strong>, as\u00ed que hemos dicho\u2026 \u00bfPor qu\u00e9 no hacemos un post sobre esto?<\/p>\n<p><!--more--><\/p>\n<p>Ea, pues ya lo tenemos listo \ud83d\ude42<\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Tabla de contenidos:<\/p><ul class=\"toc_list\"><li><a href=\"#Que_es_el_efecto_Parallax\">\u00bfQu\u00e9 es el efecto Parallax?<\/a><\/li><li><a href=\"#Cuando_deberias_usar_el_efecto_Parallax_y_cuando_no\">Cu\u00e1ndo deber\u00edas usar el efecto Parallax (y cu\u00e1ndo no)<\/a><ul><li><a href=\"#Tipos_de_webs_perfectas_para_el_efecto_Parallax\">Tipos de webs perfectas para el efecto Parallax<\/a><\/li><\/ul><\/li><li><a href=\"#Como_crear_el_efecto_Parallax_con_Elementor\">C\u00f3mo crear el efecto Parallax con Elementor<\/a><ul><li><a href=\"#1_Edita_tu_pagina_con_Elementor\">1. Edita tu p\u00e1gina con Elementor<\/a><\/li><li><a href=\"#2_Activa_los_efectos_de_movimiento\">2. Activa los efectos de movimiento<\/a><\/li><li><a href=\"#3_Personaliza_a_tu_gusto\">3. Personaliza a tu gusto<\/a><\/li><li><a href=\"#4_Efectos_del_raton\">4. Efectos del rat\u00f3n<\/a><\/li><li><a href=\"#Anadir_el_efecto_Parallax_al_fondo_de_tu_web\">A\u00f1adir el efecto Parallax al fondo de tu web<\/a><\/li><\/ul><\/li><li><a href=\"#No_utilizas_Elementor_o_no_tienes_la_licencia_Pro\">\u00bfNo utilizas Elementor o no tienes la licencia Pro?<\/a><ul><li><a href=\"#Crear_el_efecto_Parallax_en_WordPress_de_forma_manual\">Crear el efecto Parallax en WordPress de forma manual<\/a><\/li><li><a href=\"#Plugin_Parallax_para_WordPress\">Plugin Parallax para WordPress<\/a><\/li><\/ul><\/li><li><a href=\"#Crear_el_efecto_Parallax_con_Elementor_es_facilisimo\">Crear el efecto Parallax con Elementor es facil\u00edsimo<\/a><\/li><\/ul><\/div>\n\n<h2><span id=\"Que_es_el_efecto_Parallax\">\u00bfQu\u00e9 es el efecto Parallax?<\/span><\/h2>\n<p>Estoy segura de que, aunque no sepas la definici\u00f3n de Parallax, conoces de sobra este efecto. \u00bfNunca has entrado en una web y has visto que, al hacer scroll, la imagen del fondo de la p\u00e1gina se mueve m\u00e1s lentamente que los elementos del primer plano? Pues esto es el efecto Parallax y es muy utilizado en dise\u00f1o web, especialmente en WordPress.<\/p>\n<p>El efecto Parallax en una web busca dar una sensaci\u00f3n de profundidad y dinamismo, como si fuese en 3D. Eso s\u00ed, se trata totalmente de una ilusi\u00f3n \u00f3ptica en la cual la posici\u00f3n de un objeto en el campo visual cambia en funci\u00f3n del punto desde que se observa. Para ello, los elementos e im\u00e1genes de la web se ordenan en capas que se mueven a diferente velocidad a medida que navegas por la p\u00e1gina.<\/p>\n<p>Aunque el uso del efecto Parallax se remonta a las pel\u00edculas de Disney, fue tambi\u00e9n muy utilizado en videojuegos y hace solo unos a\u00f1os se instaur\u00f3 en el mundo del dise\u00f1o web, y parece que es una tendencia que va para largo&#8230;<\/p>\n<p>El objetivo de este efecto es sorprender al usuario, que se queden prendados de nuestra p\u00e1gina y, de paso, que este <em>engagement<\/em> ayude a bajar nuestra tasa de rebote. Aunque, como cualquier elemento de dise\u00f1o, hay que utilizarlo con precauci\u00f3n. Puede que en una estrategia de <em>storytelling<\/em> quede muy chulo, pero si no tienes nada que contar, puede que el usuario se termine cansando. En la siguiente secci\u00f3n te doy un poco m\u00e1s de informaci\u00f3n sobre este tema.<\/p>\n<p>Pero antes, aqu\u00ed te dejo un ejemplo muy chulo de Weglot, uno de los plugins multidioma m\u00e1s utilizados de WordPress, para que veas en funcionamiento el <em>Parallax effect<\/em>:<\/p>\n<div style=\"width: 738px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-4306-1\" width=\"738\" height=\"326\" autoplay=\"1\" preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ejemplo-parallax-weglot.mp4?_=1\" \/><a href=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ejemplo-parallax-weglot.mp4\">https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ejemplo-parallax-weglot.mp4<\/a><\/video><\/div>\n<h2><span id=\"Cuando_deberias_usar_el_efecto_Parallax_y_cuando_no\">Cu\u00e1ndo deber\u00edas usar el efecto Parallax (y cu\u00e1ndo no)<\/span><\/h2>\n<p>Como te dec\u00eda m\u00e1s arriba, el efecto Parallax o <em>Parallax effect<\/em> sirve para convertir un sitio web normal en un sitio web visualmente impactante, pero tienes que utilizarlo con cuidado si quieres asegurar una experiencia de usuario \u00f3ptima. \u00a1Nunca hay que sacrificar la funcionalidad por la est\u00e9tica! Para evitar problemas, te recomiendo que sigas estos consejos:<\/p>\n<ul>\n<li>Aseg\u00farate de que la transici\u00f3n sea suave: al hacer scroll, los cambios en las im\u00e1genes de fondo y los elementos que se mueven a diferentes velocidades deben ocurrir de manera gradual y sin saltos bruscos (imag\u00ednate qu\u00e9 mareo).<\/li>\n<li>Revisa que el efecto Parallax de tu web sea compatible con dispositivos m\u00f3viles.<\/li>\n<li>Haz pruebas de rendimiento para garantizar que la velocidad de tu web no se haya visto afectada al a\u00f1adir el efecto Parallax, especialmente si has usado varias im\u00e1genes de alta resoluci\u00f3n.<\/li>\n<\/ul>\n<p>Adem\u00e1s, hay sectores en los que el efecto Parallax va a encajar mejor que en otros. \u00bfLos vemos?<\/p>\n<h3><span id=\"Tipos_de_webs_perfectas_para_el_efecto_Parallax\">Tipos de webs perfectas para el efecto Parallax<\/span><\/h3>\n<p>Como te imaginar\u00e1s, el efecto Parallax brilla mucho m\u00e1s en aquellos sitios web en los que la presentaci\u00f3n visual del contenido tiene un peso especial. \u00bfA qu\u00e9 me refiero? D\u00e9jame darte un mont\u00f3n de ejemplos:<\/p>\n<ul>\n<li><strong>Creativos y artistas<\/strong>: Fot\u00f3grafos, dise\u00f1adores, animadores&#8230; Todos ellos deben mostrar su creatividad y sus habilidades de dise\u00f1o de una manera din\u00e1mica y que destaque visualmente.<\/li>\n<li><strong>Sitios web de entretenimiento: <\/strong>Te dec\u00eda m\u00e1s arriba que el efecto Parallax es perfecto para ayudarte con la narrativa de tu web, es decir, a contar una historia. Y los sitios web de ocio y entretenimiento (los de pel\u00edculas, videojuegos o eventos en directo, por ejemplo) pueden usarlo para crear una experiencia m\u00e1s inmersiva.<\/li>\n<li><strong>Sector del turismo<\/strong>: Si tienes un hotel o una agencia de viajes (o hasta un restaurante), el efecto Parallax te va a venir como anillo al dedo. Piensa que, gracias al <em>Parallax<\/em> effect, las im\u00e1genes de tu web \u00abcobran vida\u00bb. \u00bfNo crees que esto puede ayudar a que el visitante tome la decisi\u00f3n de reservar?<\/li>\n<li><strong>Comercios premium o de lujo<\/strong>: Piensa en joyer\u00edas, tecnolog\u00eda de \u00faltima generaci\u00f3n, autom\u00f3viles, etc. Una presentaci\u00f3n de la informaci\u00f3n interactiva y atractiva va a mejorar la percepci\u00f3n del producto y a mantener al cliente m\u00e1s tiempo en la p\u00e1gina.<\/li>\n<\/ul>\n<p>Y ahora que tenemos claro lo anterior, pasamos a la parte pr\u00e1ctica \ud83d\ude42<\/p>\n<h2><span id=\"Como_crear_el_efecto_Parallax_con_Elementor\">C\u00f3mo crear el efecto Parallax con Elementor<\/span><\/h2>\n<p>Muchos consideran Elementor como el <strong><a href=\"https:\/\/www.lucushost.com\/blog\/mejor-editor-para-wordpress\/\">mejor editor visual de WordPress<\/a><\/strong>, y no es para menos. Tiene un mont\u00f3n de opciones para crear cualquier tipo de web, muchas <a href=\"https:\/\/www.lucushost.com\/blog\/mejores-plantillas-wordpress\/\">plantillas de WordPress<\/a> son totalmente compatibles con este <em>website builder<\/em>, tiene m\u00e1s de 30 widgets b\u00e1sicos y m\u00e1s de 50 avanzados, opciones de personalizaci\u00f3n\u2026 Y, c\u00f3mo no, tambi\u00e9n la posibilidad de <strong>crear el efecto Parallax<\/strong>.<\/p>\n<p>\u00bfLo mejor de todo? Que crear el efecto Parallax con Elementor es muy, pero que muy f\u00e1cil. Desde el propio panel del plugin puedes hacerlo sin tocar nada de c\u00f3digo. \u00a1Son solo un par de clics!<\/p>\n<p><strong>Importante:<\/strong> Para crear el efecto Parallax con Elementor es necesario tener la licencia Pro de este editor visual. En el caso de no tenerla, en el siguiente apartado te mostramos c\u00f3mo a\u00f1adirlo manualmente o utilizando plugins del repositorio oficial de WordPress.<\/p>\n<h3><span id=\"1_Edita_tu_pagina_con_Elementor\">1. Edita tu p\u00e1gina con Elementor<\/span><\/h3>\n<p>Lo primero que debes hacer es abrir la p\u00e1gina que quieres modificar y seleccionar \u00abEditar con Elementor\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4345\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/editar-pagina-con-elementor-1.png\" alt=\"Editar p\u00e1gina con Elementor\" width=\"764\" height=\"474\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/editar-pagina-con-elementor-1.png 764w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/editar-pagina-con-elementor-1-300x186.png 300w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/editar-pagina-con-elementor-1-700x434.png 700w\" sizes=\"(max-width: 764px) 100vw, 764px\" \/><\/p>\n<p>A continuaci\u00f3n,\u00a0 selecciona la secci\u00f3n en la que deseas crear el efecto Parallax y abre la pesta\u00f1a \u00abAvanzado\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4346\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ajustes-avanzados-elementor.png\" alt=\"Ajustes avanzados de Elementor\" width=\"447\" height=\"397\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ajustes-avanzados-elementor.png 447w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ajustes-avanzados-elementor-300x266.png 300w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/p>\n<h3><span id=\"2_Activa_los_efectos_de_movimiento\">2. Activa los efectos de movimiento<\/span><\/h3>\n<p>Ahora se desplegar\u00e1n todas las opciones disponibles. Para crear el efecto Parallax, pulsa en \u00abEfectos de movimiento\u00bb o \u00abMotion Effects\u00bb (si est\u00e1 en ingl\u00e9s) y activa la opci\u00f3n \u00abScrolling effects\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4349\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-ajustes-de-movimiento-elementor.png\" alt=\"\" width=\"446\" height=\"581\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-ajustes-de-movimiento-elementor.png 446w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/activar-ajustes-de-movimiento-elementor-230x300.png 230w\" sizes=\"(max-width: 446px) 100vw, 446px\" \/><\/p>\n<h3><span id=\"3_Personaliza_a_tu_gusto\">3. Personaliza a tu gusto<\/span><\/h3>\n<p>Una vez activados los efectos de movimiento podr\u00e1s configurar a tu gusto cada una de estas opciones:<\/p>\n<ul>\n<li>Vertical scroll<\/li>\n<li>Horizontal scroll<\/li>\n<li>Transparency<\/li>\n<li>Blu<\/li>\n<li>Rotate<\/li>\n<li>Scale<\/li>\n<\/ul>\n<p>Tambi\u00e9n podr\u00e1s elegir en qu\u00e9 dispositivos y en cu\u00e1les no se muestra el efecto Parallax.<\/p>\n<p>En este ejemplo, voy a modificar \u00abVertical Scroll\u00bb para configurar c\u00f3mo queremos que se muestre el fondo de una secci\u00f3n cuando el usuario hace scroll vertical. Desde aqu\u00ed podremos ajustar tambi\u00e9n la direcci\u00f3n, la velocidad y la ventana gr\u00e1fica que controla cu\u00e1ndo empieza y cu\u00e1ndo termina la animaci\u00f3n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4350\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/personalizar-efecto-parallax-con-elementor.png\" alt=\"Personalizar el efecto Parallax con Elementor\" width=\"439\" height=\"613\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/personalizar-efecto-parallax-con-elementor.png 439w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/personalizar-efecto-parallax-con-elementor-215x300.png 215w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/p>\n<h3><span id=\"4_Efectos_del_raton\">4. Efectos del rat\u00f3n<\/span><\/h3>\n<p>Adem\u00e1s de los efectos de scroll, tambi\u00e9n tienes la opci\u00f3n de configurar los efectos del rat\u00f3n para la versi\u00f3n de escritorio. Puedes hacer que los elementos se muevan o se inclinen cada vez que tus visitas mueven el rat\u00f3n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4351\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/efectos-del-raton-elementor.png\" alt=\"Activar los efectos del rat\u00f3n con Elementor\" width=\"448\" height=\"658\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/efectos-del-raton-elementor.png 448w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/efectos-del-raton-elementor-204x300.png 204w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><\/p>\n<p>Lo ideal es que hagas pruebas, \u00a1muchas pruebas! Ten en cuenta que el efecto Parallax puede quedar muy chulo en una web pero, si no lo haces bien, puede interferir bastante en la navegaci\u00f3n del usuario. Y lo \u00faltimo que queremos es que nuestras visitas tengan una mala <a href=\"https:\/\/www.lucushost.com\/blog\/5-tips-para-mejorar-la-experiencia-de-usuario-de-tu-web\/\"><strong>experiencia de usuario<\/strong><\/a>.<\/p>\n<h3><span id=\"Anadir_el_efecto_Parallax_al_fondo_de_tu_web\">A\u00f1adir el efecto Parallax al fondo de tu web<\/span><\/h3>\n<p>Acabamos de ver c\u00f3mo crear el efecto scroll en determinada secci\u00f3n de Elementor, pero si quieres hacerlo con el fondo de la web, tambi\u00e9n puedes hacerlo de esta forma:<\/p>\n<p>1\u00ba. Selecciona la p\u00e1gina principal de tu web y haz clic en \u00abEditar con Elementor\u00bb. A continuaci\u00f3n, selecciona la pesta\u00f1a \u00abEstilo\u00bb o \u00abStyle\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4352\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ajustes-de-estilo-elementor.png\" alt=\"Ajustes de estilo en Elementor\" width=\"448\" height=\"303\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ajustes-de-estilo-elementor.png 448w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/ajustes-de-estilo-elementor-300x203.png 300w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><\/p>\n<p>2\u00ba. Si todav\u00eda no tienes una imagen de fondo, s\u00fabela y elige el efecto que quieras crear: Scrolling effects o Mouse effects.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4353\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/efecto-parallax-con-elementor-fondo-web.png\" alt=\"Crear el efecto Parallax con Elementor en el fondo de la web\" width=\"447\" height=\"985\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/efecto-parallax-con-elementor-fondo-web.png 447w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/efecto-parallax-con-elementor-fondo-web-136x300.png 136w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/p>\n<h2><span id=\"No_utilizas_Elementor_o_no_tienes_la_licencia_Pro\">\u00bfNo utilizas Elementor o no tienes la licencia Pro?<\/span><\/h2>\n<p>Crear el efecto <strong>Parallax con Elementor<\/strong> es muy sencillo pero, como te hemos comentado al principio, es necesario tener la licencia Pro para poder hacerlo.<\/p>\n<p>Entonces, \u00bfsi no tengo la licencia no puedo crear el efecto Parallax en Elementor? S\u00ed, ya sabes que con WordPress hay alternativas para todo. Yo te propongo dos:<\/p>\n<ul>\n<li>Crear el efecto Parallax en WordPress de forma manual.<\/li>\n<li>Utilizar un plugin Parallax para WordPress.<\/li>\n<\/ul>\n<p>\u00bfVemos c\u00f3mo se hace?<\/p>\n<h3><span id=\"Crear_el_efecto_Parallax_en_WordPress_de_forma_manual\">Crear el efecto Parallax en WordPress de forma manual<\/span><\/h3>\n<p>Una de las mejores opciones, sobre todo si no quieres a\u00f1adir m\u00e1s plugins a tu web, es crear el efecto Parallax de forma manual, es decir, con c\u00f3digo HTML.<\/p>\n<p>Lo primero que tienes que hacer es subir la imagen que quieres utilizar como fondo a la galer\u00eda de medios de WordPress. Una vez subida, copia la URL de la imagen al portapapeles.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4359\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/copiar-url-imagen-wordpress.png\" alt=\"Copiar la URL de una imagen de WordPress\" width=\"475\" height=\"597\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/copiar-url-imagen-wordpress.png 475w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/copiar-url-imagen-wordpress-239x300.png 239w\" sizes=\"(max-width: 475px) 100vw, 475px\" \/><\/p>\n<p>A continuaci\u00f3n, a\u00f1ade las siguientes l\u00edneas de c\u00f3digo HTML en la p\u00e1gina que quieras conseguir el efecto Parallax. Recuerda sustituir los valores <em>url-imagen.png<\/em>, <em>height<\/em> y <em>texto opcional<\/em> por los que necesites en tu caso:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;style&gt;\r\n.parallax {\r\nbackground-image: url(\"url-imagen.png\");\r\nheight: 600px;\r\nbackground-attachment: fixed;\r\nbackground-position: center;\r\nbackground-repeat: no-repeat;\r\nbackground-size: cover;\r\n}\r\n&lt;\/style&gt;\r\n&lt;div class=\"parallax\"&gt;Texto opcional&lt;\/div&gt;<\/pre>\n<h3><span id=\"Plugin_Parallax_para_WordPress\">Plugin Parallax para WordPress<\/span><\/h3>\n<p>En el repositorio oficial hay m\u00e1s de 58.000 plugins disponibles, as\u00ed que alguno habr\u00e1 para conseguir el efecto Parallax en WordPress, \u00bfo no?<\/p>\n<p>Uno de los mejores plugins para conseguir este efecto es <strong>Advanced WordPress Backgrounds<\/strong>. Es uno de los plugins m\u00e1s populares con m\u00e1s de 20.000 instalaciones activas, adem\u00e1s es compatible con <a href=\"https:\/\/www.lucushost.com\/blog\/gutenberg-wordpress\/\">Gutenberg<\/a> y WPBakery Page Builder. Podr\u00e1s a\u00f1adir la imagen o el v\u00eddeo que quieras, personalizar el color, personalizar los efectos de scroll, a\u00f1adir <a href=\"https:\/\/www.lucushost.com\/blog\/css\/\">CSS<\/a> personalizado, etc.<\/p>\n<p>Te explico brevemente c\u00f3mo funciona.<\/p>\n<p>1\u00ba. A\u00f1ade el plugin a WordPress desde la secci\u00f3n \u00abPlugins\u00bb \u2192 \u00abA\u00f1adir nuevo\u00bb. En el buscador escribe \u00abAdvanced WordPress Backgrounds\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4354\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/advanced-wordpress-backgrounds.png\" alt=\"Plugin Advanced WordPress Backgrounds\" width=\"570\" height=\"280\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/advanced-wordpress-backgrounds.png 570w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/advanced-wordpress-backgrounds-300x147.png 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/p>\n<p>2\u00ba. Una vez instalado y activado el plugin, se crear\u00e1 un nuevo bloque en Gutenberg que te permitir\u00e1 a\u00f1adir una imagen o v\u00eddeo como fondo de tu p\u00e1gina.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4355\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/crear-bloque-fondo-parallax.png\" alt=\"Crear un bloque de fondo\" width=\"351\" height=\"336\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/crear-bloque-fondo-parallax.png 351w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/crear-bloque-fondo-parallax-300x287.png 300w\" sizes=\"(max-width: 351px) 100vw, 351px\" \/><\/p>\n<p>3\u00ba. En el men\u00fa de la izquierda se crear\u00e1 una secci\u00f3n llamada \u00abAjustes de medios\u00bb. Para crear el efecto Parallax, activa la opci\u00f3n \u00abFondo fijo\u00bb y establece las dimensiones, el color de superposici\u00f3n. Si lo necesitas, tambi\u00e9n tienes la opci\u00f3n de a\u00f1adir c\u00f3digo CSS personalizado desde la pesta\u00f1a \u00abAvanzado\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4356\" src=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/asjutes-bloque-fondo-parallax.png\" alt=\"Ajustes del bloque de fondo para crear el efecto Parallax en WordPress\" width=\"274\" height=\"741\" title=\"\" srcset=\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/asjutes-bloque-fondo-parallax.png 274w, https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2020\/12\/asjutes-bloque-fondo-parallax-111x300.png 111w\" sizes=\"(max-width: 274px) 100vw, 274px\" \/><\/p>\n<h2><span id=\"Crear_el_efecto_Parallax_con_Elementor_es_facilisimo\">Crear el efecto Parallax con Elementor es facil\u00edsimo<\/span><\/h2>\n<p>La licencia Pro de Elementor permite crear el efecto Parallax en tan solo unos clics y ofrece un mont\u00f3n de opciones de personalizaci\u00f3n para que puedas configurarlo totalmente a medida.<\/p>\n<p>Si utilizas la licencia b\u00e1sica o no utilizas Elementor, tambi\u00e9n tienes la opci\u00f3n de crearlo con c\u00f3digo HTML o utilizando el plugin Advanced WordPress Backgrounds, totalmente gratuito y muy completo para conseguir este efecto en tu web.<\/p>\n<p>Ahora dinos, \u00bfhas conseguido crear el efecto Parallax con Elementor? \u00bfY en qu\u00e9 tipo de web lo has implementado? \u00bfConoces alg\u00fan plugin Parallax que podamos recomendar? Deja un comentario y cu\u00e9ntanos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>No es la primera vez que un cliente nos escribe para saber c\u00f3mo crear el efecto Parallax con Elementor, as\u00ed que hemos dicho\u2026 \u00bfPor qu\u00e9 no hacemos un post sobre esto?<\/p>\n","protected":false},"author":3,"featured_media":4307,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[50],"_links":{"self":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/4306"}],"collection":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/comments?post=4306"}],"version-history":[{"count":13,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/4306\/revisions"}],"predecessor-version":[{"id":9769,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/posts\/4306\/revisions\/9769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media\/4307"}],"wp:attachment":[{"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/media?parent=4306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/categories?post=4306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lucushost.com\/blog\/wp-json\/wp\/v2\/tags?post=4306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}