{"id":55921,"date":"2020-02-11T23:19:06","date_gmt":"2020-02-11T17:49:06","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?p=55921"},"modified":"2023-12-28T16:08:34","modified_gmt":"2023-12-28T10:38:34","slug":"parallax-effects-with-elementor","status":"publish","type":"post","link":"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/parallax-effects-with-elementor\/","title":{"rendered":"C\u00f3mo crear efectos de paralaje con Elementor Free y Pro"},"content":{"rendered":"
<\/div>\n

Todos hemos visto\nsitios web incre\u00edbles que hacen un gran uso del parallax scrolling.\nfondo se mueve a menor velocidad que los elementos en primer plano para transmitir\nprofundidad. Puede encontrar parallax en todo tipo de sitios web, desde consultas dentales y agencias de marketing hasta carteras creativas y sitios web de juegos.\ndentales y agencias de marketing, carteras creativas y sitios web de juegos.<\/p>\n\n\n\n

Parallax es sin duda un efecto llamativo, y realmente puede hacer que su sitio web destaque entre la multitud y darle un aspecto profesional. Pero, \u00bfes posible a\u00f1adirlo a su sitio web WordPress utilizando Elementor<\/a> sin tener muchos conocimientos t\u00e9cnicos? <\/p>\n\n\n\n

La respuesta es s\u00ed. <\/p>\n\n\n\n

Parallax es una funci\u00f3n integrada en Elementor Pro<\/a>pero tambi\u00e9n puedes crear un efecto de paralaje en la versi\u00f3n gratuita de Elementor. \u00a1Sigue leyendo para descubrir c\u00f3mo se hace!<\/p>\n\n\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTabla de contenidos\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. Parallax\nen acci\u00f3n<\/a>
  2. \u00bfPuedes\nCrear Efecto Parallax Con Elementor Gratis?<\/a>
  3. C\u00f3mo crear\nCrear paralaje con Elementor Pro<\/a>
  4. En\nVentajas de Parallax<\/a>
  5. Conclusi\u00f3n<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    Parallax\nen acci\u00f3n<\/h2>\n\n\n\n

    En primer lugar, \u00bfpor qu\u00e9 un efecto de paralaje? Compru\u00e9belo usted mismo:<\/p>\n\n\n\n\n\n\n\n

    Este es el sitio web\nde un popular videojuego llamado Firewatch. En su sitio web, el desarrollador del juego\nutiliz\u00f3 paralaje para la secci\u00f3n del h\u00e9roe con un efecto hermoso. Si se hace bien,\nel paralaje puede aumentar dr\u00e1sticamente el factor \"wow\" de tu sitio web.<\/p>\n\n\n\n

    He aqu\u00ed otro ejemplo de una empresa de la que probablemente haya o\u00eddo hablar:<\/p>\n\n\n\n\n\n\n\n

    F\u00edjese en lo\ncon todos estos elementos entrando y saliendo. Obviamente, Apple tiene a\u00fan\ntrucos bajo la manga para deslumbrar a sus visitantes, pero el paralaje es una raz\u00f3n enorme\npor la que sus p\u00e1ginas de productos son tan llamativas.<\/p>\n\n\n\n

    \u00bfPuedes\nCrear Efecto Parallax Con Elementor Gratis?<\/h2>\n\n\n\n

    Si actualmente utilizando Elementor Libre<\/a> y quieres un efecto de paralaje, tengo buenas noticias - es m\u00e1s f\u00e1cil de lo que piensas. Puedes utilizar un plugin de paralaje o trabajar un poco con un c\u00f3digo sencillo.<\/p>\n\n\n\n

    Vamos a caminar a trav\u00e9s de\nel proceso juntos muy r\u00e1pido.<\/p>\n\n\n\n

    C\u00f3mo\nCrear Parallax con Elementor Free<\/h3>\n\n\n\n

    Para crear paralaje con Elementor <\/a>Gratis, primero inicia sesi\u00f3n en tu panel de WordPress. Si a\u00fan no tienes instalado Elementor, puedes ir a a la p\u00e1gina de inicio de Elementor <\/a>para obtener el archivo ZIP gratuito del plugin a cambio de su direcci\u00f3n de correo electr\u00f3nico.<\/p>\n\n\n\n

    Una vez instalado, es hora de crear, editar una p\u00e1gina o un post con Elementor. S\u00f3lo tienes que ir a la barra lateral y haga clic en \"A\u00f1adir nuevo,<\/strong>\"Aseg\u00farate de pulsar el bot\u00f3n \"Editar con Elementor.<\/strong>\"<\/p>\n\n\n\n

    \"Edit<\/figure>\n\n\n\n

    Con una nueva p\u00e1gina en blanco lista, voy a tomar una plantilla existente como punto de partida para nuestro efecto de paralaje. Puedes seguirme pulsando Control-May\u00fasculas-L (Comando-May\u00fasculas-L en Mac) para abrir Biblioteca de plantillas de Elementor<\/a>.<\/p>\n\n\n\n

    \"elementor<\/figure>\n\n\n\n

    He elegido el \"P\u00e1gina de inicio - Estudio<\/strong>\" de la Biblioteca Elementor. Basta con pasar el rat\u00f3n por encima y hacer clic en \"Inserte<\/strong>\" para a\u00f1adir toda la plantilla a su p\u00e1gina en blanco.<\/p>\n\n\n\n

    Cuando empieces a desplazarte hacia abajo, ver\u00e1s que ya hay un efecto de paralaje. Esto se debe a que la imagen de fondo para la secci\u00f3n de h\u00e9roe se establece en fijo<\/strong>.<\/p>\n\n\n\n\n\n\n\n

    Incluso en la versi\u00f3n gratuita de Elementor, deber\u00edas poder modificar algunos ajustes b\u00e1sicos como \u00e9ste para imitar un efecto de paralaje. Tambi\u00e9n puedes utilizar una cabecera adhesiva para obtener un resultado similar. Consulte este art\u00edculo para obtener m\u00e1s informaci\u00f3n sobre la creaci\u00f3n de un encabezado adhesivo<\/a>. Sin embargo, si quieres conseguir un verdadero efecto de paralaje con elementos en la p\u00e1gina que se desplacen a diferentes velocidades, entonces necesitar\u00e1s alg\u00fan control adicional. <\/p>\n\n\n\n

    Para crear tu propio efecto de paralaje en Elementor Free, tendr\u00e1s que utilizar c\u00f3digo o un plugin independiente. Ninguna de estas opciones es tan efectiva como lo que puedes hacer con Elementor Pro, pero esperamos que sean suficientes para lo que necesitas hacer.<\/p>\n\n\n\n

    C\u00f3digo para\nParallax<\/h4>\n\n\n\n

    Antes incluso de dar\nel siguiente paso, debes determinar qu\u00e9 tipo de look quieres. En\nEl enfoque de paralaje m\u00e1s b\u00e1sico es tener dos velocidades de desplazamiento diferentes para unas pocas\nim\u00e1genes o secciones de la p\u00e1gina para que se superpongan. <\/p>\n\n\n\n

    Sin embargo, puede simplificarlo a\u00fan m\u00e1s asignando una imagen de fondo en una secci\u00f3n con el bot\u00f3n \"Fijo<\/strong>\"para que el resto de la p\u00e1gina se desplace a su alrededor. <\/p>\n\n\n\n

    Si quieres personalizar el efecto de paralaje, es \u00fatil tener conocimientos de c\u00f3digo. Sin embargo, esta p\u00e1gina tiene c\u00f3digo<\/a> que puedes utilizar como punto de partida para tu secci\u00f3n de paralaje en Elementor.<\/p>\n\n\n\n

    Las instrucciones son bastante sencillas: Cualquier c\u00f3digo CSS va en Panel > Apariencia > Personalizar > CSS adicional<\/em>y, a continuaci\u00f3n, a\u00f1adir la clase paralaje<\/em> en el Avanzado<\/strong> para la secci\u00f3n que desea tener el efecto de paralaje en su p\u00e1gina web. <\/p>\n\n\n\n

    Para el c\u00f3digo JavaScript, puede obtener el plugin Code Snippets<\/a> y p\u00e9galo all\u00ed directamente. <\/p>\n\n\n\n

    Plugins\npara Parallax<\/h4>\n\n\n\n

    Tambi\u00e9n es posible\nencontrar plugins para Elementor Free que ofrezcan una funci\u00f3n de paralaje, aunque estos\nno est\u00e1n totalmente actualizados, por lo que su kilometraje puede variar. <\/p>\n\n\n\n

    El m\u00e1s popular en los \u00faltimos a\u00f1os ha sido el plugin gratuito Controles granulares para Elementor<\/a>que a\u00f1ade otras funciones adem\u00e1s de las opciones de paralaje. <\/p>\n\n\n\n

    C\u00f3mo crear\nCrear paralaje con Elementor Pro<\/h2>\n\n\n\n

    Si por casualidad\nla versi\u00f3n de pago de Elementor - tambi\u00e9n conocida como Elementor Pro - entonces todo este\nproceso es mucho m\u00e1s f\u00e1cil y vers\u00e1til. Cr\u00e9eme.<\/p>\n\n\n\n

    Todo lo que tienes que hacer es ir a la pesta\u00f1a Avanzado de cualquier secci\u00f3n o elemento (puedes llegar all\u00ed haciendo clic en los seis puntos). A partir de ah\u00ed, encontrar\u00e1s una serie de efectos de movimiento diferentes que puedes emplear en tu p\u00e1gina. <\/p>\n\n\n\n

    Conceptualmente, piense\nel paralaje como la manipulaci\u00f3n de una serie de elementos separados en un espacio tridimensional. Con\nim\u00e1genes transparentes alfa y diferentes velocidades de desplazamiento, aqu\u00ed est\u00e1n s\u00f3lo algunas\ncosas que puedes hacer:<\/p>\n\n\n\n

      \n
    • Hacer que los t\u00edtulos se muestren\ndetr\u00e1s de una imagen<\/li>\n\n\n\n
    • Hacer que elementos que empiezan\nvisibles queden ocultos tras otros<\/li>\n\n\n\n
    • Hacer que los elementos se muevan por la p\u00e1gina\nhorizontalmente<\/li>\n<\/ul>\n\n\n\n

      Si tiene varios\nelementos y necesita colocarlos en orden, hay un campo Z-Index en el campo Avanzado<\/strong> ajustes. Cuanto mayor sea el\nn\u00famero, m\u00e1s cerca estar\u00e1 del espectador y viceversa. <\/p>\n\n\n\n

      Puedes ver f\u00e1cilmente\nestas capas con el Navegador de Elementor, que se encuentra en la parte inferior de la\nbarra lateral. <\/p>\n\n\n\n

      \"elementor<\/figure>\n\n\n\n

      Para cambiar la velocidad de desplazamiento de estos elementos, vaya a Avanzado > Efectos de movimiento<\/em> y haz clic en el efecto de desplazamiento que quieras cambiar. Hay una barra que puedes arrastrar para ajustar la velocidad de desplazamiento.<\/p>\n\n\n\n

      \"elementor<\/figure>\n\n\n\n

      Si quieres saber\nm\u00e1s acerca de c\u00f3mo configurar un efecto de paralaje, aqu\u00ed hay un video directamente de\nElementor sobre el tema: <\/p>\n\n\n\n

      \n