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

SUPER DESCUENTO 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.

DESCUENTO PLAN YEARLY ACCESS

 

->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


VER CURSOS

 

 

 

 

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.

 

¿Aun no conoces la mejor plantilla para WordPress? En este post puedes ver sus principales características: Plantilla Divi

 

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”.

 

activar efecto parallax en una imagen con Divi

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.

 

En el blog hay una categoría dedicada únicamente a la plantilla Divi, te invito a visitarla: Categoría Divi

 

 

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.

 

poner imagen de fondo para efecto parallax con la plantilla divi

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.

 

texto añadido efecto parallax sobre fondo divi

Textos superpuestos sobre imagen de fondo para efecto parallax