Vamos a ver qué es y cómo implementar el efecto parallax con la plantilla Divi (mi plantilla favorita) que incluye esta funcionalidad por defecto.
No te preocupes si usas otra plantilla, también veremos un plugin gratuito para wordpress que permitirá añadir el efecto parallax independientemente de la plantilla que estés utilizando.
Ahora 20% de descuento Plantilla DIVI
->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.
Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA
NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.
->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.
Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA
NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.
DESCUENTO PLAN LIFETIME ACCESS
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE DEL POST
- 1.- ¿Qué es el efecto Parallax?
- 2.- Entendiendo el efecto Parallax con la plantilla Divi para Wordpress
- 3.- Qué tipo de imágenes de fondo debemos usar para el efecto Parallax de la web
- 4.- Tamaños de las imágenes de fondo para efecto Parallax
- 5.- Cómo crear el efecto Parallax con la plantilla Divi (Módulo título de anchura completa)
- 6.- Plugin Parallax Wordpress para usar el efecto con cualquier plantilla
1.- ¿Qué es el efecto Parallax?
El efecto Parallax es hoy en día una tendencia en el diseño web.
Pero, ¿qué es el efecto Parallax?
El efecto Parallax consiste en el movimiento de los diferentes elementos de una web a distintas velocidades mientras se hace scroll, dando la sensación de un movimiento real.
Este efecto ya se utilizó hasta la extenuación en los videojuegos de plataformas en 2D donde los diferentes elementos de la pantalla avanzaban a distintas velocidades en función de su distancia con el observador, y dando de esta manera la sensación de movimiento.
2.- Entendiendo el efecto Parallax con la plantilla Divi para WordPress
El efecto Parallax en la plantilla Divi es muy fácil de implementar en cualquier imagen de fondo dentro de cualquier sección, fila, columna o módulo.
Simplemente habrá que marcar en el selector “usar efecto de paralaje” seleccionar “SI” y luego elegir el método de paralaje: “Paralaje verdadero” o “CSS”.
Configurar Efecto Parallax en Divi
Vamos a ver ahora en que consiste cada uno de los dos métodos de paralaje de que dispone la plantilla Divi para WordPress
SUPER DESCUENTO DIVI
2.1.- El método CSS de Parallax con Divi
Este método de paralaje se denomina CSS porque para su funcionamiento solo utiliza CSS.
Este método usa CSS para mantener fija la imagen de fondo mientras que el resto de elementos de la página se desplazan normalmente conforme vamos haciendo scroll provocando la sensación de que el contenido se mueve frente al fondo.
2.2.- El método real de Parallax con Divi
Este método se denomina método real porque su funcionamiento es más fiel con la definición del efecto parallax.
En este caso el fondo no se queda fijo como sucedía con el método CSS, sino que se desplaza a distinta velocidad que los elementos superpuestos.
Esto da una sensación más real del efecto Parallax. Para conseguir este efecto Divi utiliza tanto CSS como JavaScript.
3.- Qué tipo de imágenes de fondo debemos usar para el efecto Parallax de la web
La correcta elección de la imagen de fondo para la realización del efecto parallax es crucial. La imagen no debe distraer la atención pero tampoco puede ser una imagen aburrida.
Vamos a ver una serie de puntos interesantes que debe cumplir una buena imagen de fondo para realizar el efecto parallax:
a.- Imágenes sin muchos elementos: debemos utilizar imágenes sin muchos detalles ya que estos pueden provocar distracciones sin sentido en el visitante.
b.- temática de la foto: es importante escoger una imagen para el efecto parallax cuya temática coincida con la del sitio web.
c.- Imagen simple y grande: recuerda que la imagen de fondo también se va a ver en dispositivos móviles más pequeños por lo que lo más recomendable es utilizar imágenes grandes y poco cargadas.
d.- Imagen de superposición: según donde estés utilizando la imagen de fondo con Divi podrás añadir una capa que oscurezca o aclare la imagen. Esto puede ser crucial para la correcta visualización de los textos que se superponen a la imagen en el efecto parallax.
El plugin para efecto parallax en wordpress que vamos a ver también dispone de la opción de añadir una capa sobre la imagen de fondo
Es cierto que esto siempre lo puedes realizar previamente con una aplicación de fotografía como Photoshop donde puede añadir capas semitransparentes.
e.- Imagen interesante: que la imagen tenga algo, que no sea una imagen insulsa y aburrida.
SUPER DESCUENTO DIVI
4.- Tamaños de las imágenes de fondo para efecto Parallax
No existe una regla general que nos sirva para cualquier caso. Pero vamos a ver en este apartado una recomendación general para las imágenes con las que vayamos a aplicar el efecto Parallax, ya sea con Divi o con el plugin gratuito que veremos más adelante.
Ya que el tamaño más utilizado de interfaces es de 1366×766 lo suyo es que cualquier imagen para usar de fondo con el efecto parallax sea por lo menos de ese tamaño. Pero hoy en día cada vez se usan más los monitores panorámicos por lo que lo suyo sería utilizar imágenes de 1920×1080 px.
El problema es que rara vez tendremos una sección visible de 1080 px de altura por lo parte de la parte inferior de la imagen permanecerá oculta.
5.- Cómo crear el efecto Parallax con la plantilla Divi (Módulo título de anchura completa)
Vamos a ver, por fin, como crear el efecto Parallax con la plantilla Divi para WordPress.
El módulo más adecuado para realizar el efecto parallax con Divi es el “módulo título de anchura completa” (Fullwidth header module).
i.- Añadir sección de achura completa: en primer lugar añadiremos una sección de anchura completa
ii.- Añadir un módulo título de anchura completa: en segundo lugar lo que haremos será añadir un módulo de título de anchura completa (Fullwidth header module) a la nueva sección que acabamos de añadir.
iii.- Añadir imagen de fondo: ahora configuraremos el módulo de título de anchura completa y seleccionaremos una imagen de fondo de 1920×1080 px.
Añadir imagen de fondo efecto parallax con Divi
iv.- Texto de primer plano: Ahora pondremos los textos que aparecerán en primer plano sobre el fondo.
Esto se puede hacer de varias maneras, pero yo lo que haré será rellenar los campos: título y texto de subtítulo.
Textos superpuestos sobre imagen de fondo para efecto parallax
v.- Diseño texto: Ahora personalizaremos el diseño de los textos. Para ello iremos a la pestaña “Diseño” del “módulo título de anchura completa”.
Y personalizaremos colores y tamaños de texto de los apartados: “Título de texto” y “Subtítulo Texto”.
Personalizar diseño del texto efecto parallax para que se distinga bien del fondo
vi.- Añadir capa semitransparente: opcionalmente, en caso de que el texto no contraste lo suficiente con el fondo, podemos añadir una cobertura o capa semitransparente a la imagen de fondo.
Esto lo podremos hacer desde la pestaña “Contenido” del módulo. En el apartado “Fondo” verás un campo denominado: “Color de capa superpuesta sobre el fondo”.
Elige si es necesario un color claro u oscuro según tus circunstancias, con un determinado grado de transparencia.
vii.- Añadir Padding: si haces una pre visualización de la página o estás utilizando el constructor en modo visual apreciarás que solo se visualiza una parte muy pequeña de la imagen en altura.
Para ajustar la altura de la imagen de fondo iremos a la pestaña “Avanzado” del “módulo de título de anchura completa”.
Ahora buscaremos dentro del apartado “CSS Personalizado” el bloque “Elemento Principal” y dentro de él escribiremos el siguiente código CSS:
padding: 250px 0px 250px 0px;
Añadir padding superior e inferior de la imagen de fondo para parallax con Divi
Lo que he hecho ha sido añadir un margen interior o padding de 250 px en la parte superior y otro de 250 px en la parte inferior.
Tú puedes cambiar 250 px por la cantidad que creas conveniente.
Te explico el código.
Como puedes ver hay cuatro cifras: 250px 0px 250px 0px
Pues bien, la primera corresponde al margen superior, la segunda al margen derecho, la tercera al margen inferior y la cuarta al margen izquierdo. Es decir el orden sigue el camino de las agujas del reloj
viii.- Activación efecto Parallax: finalmente procederemos a activar el efecto parallax. Para lo que iremos a la pestaña “Contenido” del módulo y en el apartado “Fondo” veremos el selector “Usar efecto Paralaje” que pondremos en “SI”.
En método de paralaje probaremos con las dos opciones (CSS y Paralaje verdadero) y elegiremos la que más nos guste.
Activar efecto parallax con la plantilla Divi
SUPER DESCUENTO DIVI
6.- Plugin Parallax WordPress para usar el efecto con cualquier plantilla
Si no usas la plantilla Divi es posible que tu plantilla también incluya esta funcionalidad, pero si no lo hace no te preocupes porque a través de un plugin gratuito también podrás incluir una imagen de fondo con efecto Parallax.
Vamos a usar el plugin gratuito: “Advanced WordPress Backgrounds” del repositorio de WordPress.
Una vez hayas instalado y activado el plugin “Advanced WordPress Backgrounds” para añadir el efecto parallax a wordpress, añade una nueva página.
En el editor de texto verás un nuevo icono en forma de monitor. Este icono te servirá para configurar y añadir un shortcode que implemente la funcionalidad parallax.
i.- Comenzar configuración: Haz clic en el icono en forma de monitor para comenzar la configuración del efecto parallax.
Icono en forma de monitor para configurar el efecto parallax
ii.- Background type: en este selector elige “Image” y marca el checkbox “Stretch”.
iii.- Elegir imagen: ahora haz clic en el botón “Select image” y carga la imagen de fondo. Sigue las recomendaciones que dimos en el punto 4.
Añadir imagen para efecto parallax con plugin wordpress
iv.- Capa superpuesta: si quieres que haya un mayor contraste entre la imagen de fondo y el texto que vayas a añadir, puedes añadir una capa superpuesta semitransparente sobre la imagen de fondo.
Esto lo puedes realizar desde “Overlay Color”, elige un color y el grado de transparencia.
v.- Activar parallax: para activar el efecto parallax con el plugin en el apartado “Parallax” en el selector “Type” elige la opción “Scroll”.
vi.- Márgenes interiores: para añadir un padding superior e inferior para que la imagen se vea de manera más completa ve a la pestaña “Styles”.
En el apartado “Padding” incluye 250 en Top y 250 en Bottom
Luego podrás personalizar estos valores directamente en el shortcode.
vii.- Crear Shortcode: Haz clic en el botón “Insertar” para crear el shortcode
Shortcode plugin Advanced WordPress Backgrounds wordpress para efecto parallax
Donde dice “Your content Here” podrás introducir el texto que quieras y darle el color que te apetezca.
Es posible que tengas que cambiar el tamaño del texto, para ello puedes usar CSS en línea como te muestro en el vídeo de este post.
viii.- Modificaciones shortcode: Si quieres realizar modificaciones del padding, de la transparencia de la capa superpuesta o de lo que sea, lo debes hacer directamente en el shortcode.
Por ejemplo para modificar el padding superior tendrás que modificar el valor “250px” de “padding-top” por el valor que quieras.
Nota: Se ha obtenido parte de la documentación en la elaboración de este post del blog oficial de Elegant themes
SUPER DESCUENTO DIVI + REGALO
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquín, el efecto con divi sin plugins me sale excelente en la versión de escritorio, pero en la versión movil no me funciona el efecto, me podes indicar a que obedece esto?. De antemano gracias!!!
Hola Eduardo.
Los elementos suelen omitir el efecto parallax en dispositivos móviles. De hecho, el efecto parallax en móviles está eliminado en el divi builder.
Si quires añadir este efecto parallax en móviles con el divi builder, te dejo algunos posts que te pueden ayudar:
https://divihype.com/how-to-add-mobile-parallax-to-your-divi-website/
https://divihacks.com/docs/mobile-parallax/
***Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, blog wordpress, SEO, Analytics, Cursos sobre Woocommerce, Cursos sobre SEO para ecommerce, sobre Mailchimp, etc. etc.****
Hola, me gustaría crear este efecto en mi pagina web: lo que pasa con el mapa de google map y el color gris de fondo (al final de la página
http://www.uryc.cl/es/home/Sabes como se realiza en divi?… estoy confundida ya que solo puedo poner el efecto paralax sobre imágenes.
Gracias
Buenas.
Efectivamente, el efecto parallax en Divi solo es posible con Imágenes de fondo
Hola! Me ayudó mucho tu post. Gracias =)
Estoy usando el efecto parallax con DIVI. En el PC muy bien, sin embargo no funciona en dispositivos móviles (se queda la imagen de fondo como si no hubiera efecto). Tanto el CSS como el verdadero. ¿Tendré que hacer algún ajuste en DIVI?
Hola Carla,
1.- Por lo que he podido leer por ahí en foros de habla inglesa, parece que el efecto parallax con Divi viene no activo para móviles a posta. Ya que parece que consumiría bastantes recursos y haría que la carga del móvil fuera muy lenta.
Divi help Parallax
2.- En cualquier caso, lo mejor es que accedas al soporte de Divi y realices tu consulta ahí. A ver si los chicos de Elegant Themes pueden decirnos algo al respecto de este tema, y luego nos cuentas
Hola Joaquin. Un gusto saludarte!
Estoy intentando crear un efecto paralaje en una sección de ancho completo con una imagen de 1920x1080px. Todo sale perfecto pero el problema es al visualizarlo desde un dispositivo móvil ya que la imagen de distorsiona. Sabes como solventar esto? De mas esta decir que estoy utilizando Divi y Divi Builder. Desde ya muchas gracias.
Buenas Juan Miguel.
Las imágenes de fondo se muestran diferentes en diferentes dispositivos, ya que son imágenes de fondo. muchos utilizan texturas como fondos donde no importa la parte que salga en cada dispositivo.
Para que una imagen se muestre completa en diferentes dispositivos se debe utilizar un módulo tipo imagen.
Hola Joaquín muy buen video me ha dado una idea clara de lo que podria hacer para una web. Estoy pensando hacer una páginas como esta (http://www.petermckinnon.com/) y en el texto poner solo el nombre de la empresa y los íconos de las redes sociales. Se podría hacer con los plugin que explicas en el video?
Buenas,
No veo ningún efecto Parallax en el enlace que me pasas.
No creo que puedas hacer con el plugin de Parallax lo que ves en la web que me pasas. Tendrás que utilizar alguna plantilla con page builder como Divi y otra por el estilo.