• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página

Dani Sánchez - Gestionatuweb

Desarrollador web freelance - Dani Sánchez Gestionatuweb

  • ¿Eres agencia?
  • WordPress
    • Mantenimiento
    • Desarrollo
    • Soporte técnico
  • Cursos
  • Porfolio
  • Blog
  • Contacto
  • Solicita Presupuesto
Estás aquí: Inicio / Publicaciones / Crear un efecto Parallax (paralaje) con DIVI Builder

Publicaciones, Tutoriales, Wordpress / 24 de marzo de 2018

Crear un efecto Parallax (paralaje) con DIVI Builder

Uno de los recursos hoy en día más utilizados en el diseño de portadas, sobre todo en web corporativas, es mostrar la mayor parte de la información del proyecto o empresa en una única página, separando cada sección con un efecto Parallax o parajale, consistente en una imágen fija de fondo que al hacer scroll va desapareciendo dejando paso a la siguiente, consiguiendo un llamativo efecto.

Podemos diseñar una portada de este estilo fácilmente con DIVI Builder.

Para ello nos situamos en una página en blanco, habilitamos el constructor visual y creamos 4 áreas de página de tipo regular (las áreas que tienen el marco azul). Por defecto ya tenemos la primera área creada, solo tenemos que añadir una nueva en botón inferior:

O duplicarla haciendo clic en el icono de duplicar:

Una vez tengamos las 4 áreas (o el número que necesitemos para nuestro proyecto), procedemos a insertar los fondos de pantalla. Estos fondos es recomendable que al menos estén en resolución 1920px de ancho. El alto puede variar en función del contenido que vayamos a insertar en esa sección.

Nos vamos a herramientas de sección:

Y escogemos dentro de la pestaña Contenido, la sección Fondo. Y dentro de los tipos de fondo disponibles (color, degradado, imagen y video), seleccionamos imagen y hacemos clic en el icono (+) para insertar nuestra imagen de la biblioteca de WordPress.

Seleccionamos la imagen de fondo deseada:

Y dentro de las opciones de imagen, seleccionamos, Usar efecto de paralaje y Método de paralaje: CSS.

Ahora podemos estirar un poco el área hacia abajo para agrandar la sección hasta dejarla a nuestro gusto:

Repetimos el mismo procedimiento con las demás áreas, hasta tener las 4 secciones con sus imágenes de fondo y el efecto paralaje activado en modo CSS.

Ya solo queda rellenar las secciones con el contenido que queramos utilizando los múltiples módulos disponibles en DIVI.

Os dejo el vídeo explicativo completo:

Y recordad que si tenéis alguna duda, podéis dejarme vuestros comentarios. Nos vemos en el siguiente post! 😉

Archivado en:Publicaciones, Tutoriales, Wordpress Etiquetado con:divi, páginas web, parallax, publicaciones, tutoriales, wordpress

Interacciones con los lectores

Este artículo puede contener código que podría no funcionar correctamente en tu versión de WordPress o causar incompatibilidad con tu plantilla o plugins. Úsalo bajo tu responsabilidad y haz siempre copia de tus archivos antes de modificarlos.

Comentarios

  1. Vio dice

    30 de agosto de 2020 en 19:42

    Hola, gracias por el tutorial.
    Es posible realizar el efecto en vez de con una imagen con un video?. porque no sale la opcion para activar el paralaje. De ser así como se haría.
    Gracias!!!
    Un saludo

    Responder

Deja una respuesta Cancelar la respuesta

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

  Acepto la política de privacidad

Barra lateral primaria

Daniel Sánchez

@danisanchez82
t.me/gestionatuweb

Buscar en la web

Entradas recientes

  • Adiós WhatsApp…
  • Configuración de WP Fastest Cache
  • Cómo añadir un enlace personalizado en el menú admin de WordPress
  • Hooks de Genesis Framework (init, header y framework) – Parte 1
  • Añade el soporte de Genesis Framework para tus Custom Post

Categorías

  • Actualidad
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • Wordpress

Comentarios recientes

  • Carlos en Crear un WebView con Android Studio para cargar una web en una APP Android
  • william maffiold en Instalar LAMP y phpMyAdmin en MX Linux 19
  • dani en Divi, diseñar una plantilla predeterminada para cargar Custom Posts
  • dani en Subir un WordPress terminado de tu ordenador (local) al servidor final (hosting)
  • Carlos en Divi, diseñar una plantilla predeterminada para cargar Custom Posts

Hosting de confianza

Footer

Buscar en la web

  • Inicio
  • Agencias
  • Mantenimiento WordPress
  • Desarrollo WordPress
  • Soporte técnico WordPress
  • Cursos
  • Portfolio
  • Blog
  • Contacto
  • Política de privacidad

Mis redes

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

© 2016–2021 Gestionatuweb · Programado con Genesis Framework · Iniciar sesión

Utilizo cookies para obtener datos estadísticos sobre el uso de mi sitio web y personalizar la publicidad (no intrusiva) del blog según tus intereses. En ningún caso estas cookies te identifican como persona, solo a tu dispositivo en la Red. Aceptando el uso de cookies me ayudarás a mantenener el blog gracias a la publicidad y podré mejorar la experiencia de uso gracias a la analítica web. Puedes navegar por mi sitio web sin que se instale ninguna de estas cookies, aunque este mensaje permanecerá visible en todo momento.AceptoPolítica de privacidad