Cómo hacer un efecto de paralaje en el tema Extra

por | 3 Comentarios

Temas Elegant Themes

En la demo del tema Extra de Elegant Themes, podemos ver en una de sus páginas de muestra un artículo en el que se incluye una imagen con efecto de paralaje o parallax sobre otra. Para realizar esta composición sólo necesitamos que las imágenes tengan el formato adecuado y jugar con el Constructor Divi.

Suscríbete a mi canal:

 

Efecto de paralaje con dos imágenes

El efecto de paralaje, o en inglés parallax, queda muy llamativo al deslizarse una imagen entre los límites que la contienen, si estos límites están marcados por los bordes de otra fotografía, el efecto es aún más impresionante.

En el vídeo muestro cómo reproducir el efecto que encontramos en la demo de la página oficial del tema Extra. Pero aquí voy a realizar todo el proceso, desde recortar las imágenes a montarlas con el Divi Builder en Extra.

 

 

Acondicionar las imágenes para el efecto de paralaje

Para conseguir este efecto, necesitamos que la imagen que se va a superponer sobre la foto del fondo, tenga un formato que permita mantener transparencias y recortes. Para eso, tras tratar la imagen con un editor de imágenes como Photoshop o Pixlr Editor, la guardaremos como PNG.

El tamaño de las imágenes debe ser lo más aproximado posible al tamaño que mostraremos en la web, de esta forma no ralentizaremos la carga de la página.

Estas son las imágenes que voy a utilizar, ambas las he descargado del banco de imágenes gratuito Pixabay, y podéis utilizarlas con libertad

[su_row][su_column size=»1/2″]foto 1 efecto paralaje. parallax[/su_column] [su_column size=»1/2″]foto 2 efecto paralaje. parallax[/su_column][/su_row]

En este vídeo podéis ver cómo recortar la imagen para utilizarla en el paralaje.

Suscríbete a mi canal:

 

Montar los módulos de Divi Builder

Todo se basa en un juego de módulos, filas y secciones del Constructor Divi para conseguir el efecto de paralaje o parallax. Hay varias formas de realizarlo, todas siguen el mismo patrón.

Vamos a realizar el ejemplo como el que nos muestra el tema Extra en su página oficial de Elegant Themes.

Creamos o abrimos una página o una entrada donde queramos colocar este efecto. A continuación, activamos el constructor Divi y montamos el siguiente diseño de módulos. Debemos hacerlo en una Sección estándar exclusiva para esto. Si vamos a tener más contenido, crearemos otras secciones diferentes.

efecto de paralaje. Configuracion

 

Configuración de la Sección estándar

Las opciones a configurar para la Sección estándar son las que contendrán la imagen de fondo y hará que tenga el efecto de paralaje o desplazamiento.

  • Imagen de fondo: Elegiremos una de la carpeta Medios o subiremos la que necesitemos al servidor.
  • Usar efecto de paralaje: Marcaremos SI. Se abrirá otra opción debajo de esta para elegir el tipo de paralaje que queremos utilizar.
    • Método de paralaje: Elegir la opción de Paralaje verdaderoCSS.
  • Relleno personalizado: Para eliminar la configuración por defecto, ponemos en todas las casillas el valor de 0px.
  • Etiqueta de administración: Podemos elegir un nombre a modo de gestión interna, por ejemplo, Imagen de Fondo.

El resto de las opciones las dejamos por defecto. En esto momentos sólo veremos una franja en la parte frontal de nuestro sitio, ya que lo que marca la altura es el contenido que tenga la sección, en este caso el módulo de la imagen.

Efecto paralaje. Sección estándar

 

Configuración de la Fila

Esta parte es la más importante, ya que es la que va a indicar a la imagen superior como adaptarse, y para ello tendremos que incluir unos estilos (muy básicos), en la pestaña de CSS Personalizado de la fila.

 

Pestaña «Ajustes Generales»

  • Hacer que esta fila tenga anchura completa: Marcamos la opción SI.
  • Usar anchura personalizada: Volvemos a marcar SI. Aparecerán debajo otras opciones para elegir el tipo de medida y el tamaño.
    • Unidad: Elegimos % (tanto por ciento).
    • Anchura personalizada: Marcamos el 100%.
  • Relleno personalizado: Eliminamos las opciones por defecto poniendo 0px en todas las casillas.
  • Etiqueta de administración: Sólo si queremos tener una organización, to pondré Fila para la imagen superior.

 

Pestaña «Ajustes Avanzados de Diseño»

  • Margen personalizado: Hay que poner 0px en todas las casillas.
  • Columna Relleno: Igual que en los márgenes, ponemos 0px.

 

Pestaña «CSS Personalizado»

Aquí nos desplazaremos hasta la casilla del Elemento Principal y escribimos los cambios en los estilos que harán que la imagen se ajuste siempre al 100%

La palabra !important, harás que prevalezca este cambio sobre los básicos que trae el tema Extra.

 

Configuración del módulo de la imagen

El último paso, aunque sea la imagen que ayudará a tener el efecto de paralaje, es la que más flexible es en su configuración.

Dependiendo del tipo de la imagen, debemos elegir las opciones que mejor se ajusten a nuestro sitio. La imagen que estoy utilizando tiene un recorte a la izquierda, por lo que me interesa colocarla a la derecha y que ella marque la altura que tendrá la Sección.

Pero si tenemos una imagen que se apoya en la parte inferior y el recorte en la parte superior, tendremos que elegir que la imagen tenga una anchura máxima para que no se note el borde lateral de la fotografía.

Teniendo en cuenta que las opciones a tener que valorar son la anchura y la posición que tendrán la imagen, el resto de opciones son personales.

 

Pestaña «Ajustes Generales»

  • URL de imagen: Elegimos la imagen de la parte superior del efecto de paralaje.
  • Animación: Esta es una elección personal, como el resto que no he mencioado, pero la marco porque elegiré la opción Sin animación.
  • Eliminar espacio bajo la imagen: .
  • Alineación de imagen: Al tener el recorte en la izquierda, colocaré la imagen pegada a la derecha.
  • Etiqueta de administración: Esto es opcional en todos los casos, pero me gusta tener un orden y yo siempre pongo un nombre para poder identificar el módulo. Lo llamaré Imagen fija de efecto parallax.

 

Pestaña «Ajustes Avanzados de Diseño»

En esta pestaña es donde decidimos si queremos la anchura total y el espacio que queremos dejar de márgenes.

  • Hacer que tenga anchura completa: Yo he elegido NO, por la razón antes expuesta.
  • Margen personalizado: Si queremos que la imagen respire por algún lado, pondremos la medida necesaria para separar la imagen del borde. En mi caso, y para que no quede pegada la imagen en la parte superior, he puesto 50px hacia la parte superior.

 

Las opciones que no he mostrado son porque no se necesitan para realizar este efecto, pero están ahí para que podamos utilizarlas y hagamos pruebas si nos apetece.

Efecto paralaje. Resultado final

 

Este efecto de paralaje, o también llamado parallax, no es exclusivo de las Secciones, podemos realizarlo en columnas dentro de una fila acompañando un texto, por ejemplo. Al final del vídeo os muestro un ejemplo de cómo se hace, si habéis realizado todo el tutorial con éxito, hacerlo en una columna está chupado.

 

Temas Elegant Themes

 

Puedes pinchar aquí para ver todas las entradas relacionadas con esta plantilla.


Suscríbete para no perderte ningún artículo nuevo, te aviso por email


Si necesitas alguna aclaración puedes dejar un comentario e intentaré ayudarte en la medida de mis posibilidades.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

3 Comentarios

  1. Alex

    amigo llevo esperando un post asi desde que subieron el genial tema Extra no sabia hacer el efecto por que me metia en slider y tu lo haces con imagen y fondo de modulo, el efecto queda impresionante mi pregunta es por que usas genesis en vez de este tema tan genial

    Responder
    • Juan

      Hola Alex, Extra es un gran theme, he de confesar que me encanta y que lo utilizo en otras webs que tengo. Pero la elección de un tema u otro depende de muchos factores. Mirando bajo el capó, Génesis tiene un código más limpio y optimizado de cara a los buscadores, al no tener integradas tantas funcionalidades la carga de las páginas debería ser más rápida, digo debería porque depende del servidor y la conexión a internet.
      No es ni mejor ni peor, depende del gusto, las necesidades y al público al que va dirigido. A mi que me gusta trastear con el código, prefiero para esta web Génesis. Para otras que tengo de afiliación uso Divi o Extra.

      Responder
      • Alex

        Es cierto que añade mucho codigo divi sobre todo cuando usas su constructor, tiene el problema que muestra su código en vez del contenido en casos de compartir los post en google plus o correos automáticos (Esto parece solucionado con jetpack) también su lado oscuro es si te cambias de theme el código se te muestra. Ahora varias dudas que me asaltan del tema que se las hago saber por si quiere seguir haciendo vídeos ¿Como cambio el color del pie de pagina no la barra del fondo si no el espacio donde se alojan los widgets de abajo?, ¿Tienen mas opciones los layout? me parecen muy desaprovechados y por ultimo como se vinculan enlaces con módulos para navegan rápidamente en una sección en concreto de la pagina o post.

        Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Banner AzonPress

Esta web funciona gracias a:

Hosting WordPress de SiteGround

Pin It on Pinterest

Share This
Ir al contenido