Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

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.

 

DESCUENTOS DIVI

 

 

 

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

 

 

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.

 

 

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

 

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 texto parallax con constructor Divi

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;

 

padding imagen de fondo para efecto parallax con divi

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.

 

encender el efecto parallax con la plantilla divi

Activar efecto parallax con la plantilla 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.

 

IR AL PLUGIN

 

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.

 

activar efecto parallax con plugin para wordpress

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 efecto parallax con cualquiera plantilla wordpress

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 añadido por plugin Advanced WordPress Backgrounds para efecto parallax

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

 

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto.
Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies