• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

Dani Sánchez

  • ¿Eres agencia?
  • Quién soy
  • Servicios WordPress
    • Mantenimiento
    • Maquetación & Desarrollo
    • Soporte técnico
  • Portfolio
  • Blog
  • Presupuestos
Estás en: Inicio / Publicaciones / Crear un efecto Parallax (paralaje) con DIVI Builder

Crear un efecto Parallax (paralaje) con DIVI Builder

El 24 de marzo de 2018 por dani.sanchez

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

Publicado en: Publicaciones, Tutoriales, WordPress Etiquetado como: divi, páginas web, parallax, publicaciones, tutoriales, wordpress

¿Quiéres invitarme a un café?

Si te has fijado en este blog no hay ni rastro de publicidad, todo el contenido publicado lo hago de forma artruista al igual que yo recurro a otros sitios cuando necesito algo. Pero si te he servido de ayuda y quieres agradecérmelo, puedes hacer una pequeña donación (el importe que quieras):

Botón Donar con PayPal

Entradas similares

  • Cerrar modales de Elementor con JavaScript (jQuery)
  • Redirección 301 para cambios de dominio
  • Guía rápida de Flexbox
  • Filtro de WooCommerce para personalizar el mensaje de «Gracias por tu pedido»
  • Portátiles reacondicionados, ¿mejor que uno nuevo?

Interacciones con los lectores

Comentarios

  1. Vio dice

    30 de agosto de 2020 a las 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

  2. ANTONIO dice

    5 de abril de 2021 a las 13:30

    hOLA: nECESITO HACER PARALAX PERO NO SOBRE UNA IMAGEN SINO SOBRE UN DESLIZADOR DE ANCHURA COMPLETA. aL HACER SCROL SE TAPE EL DESLIZADOR CON LA SECCIÓN SIGUIENTE.
    GRACIAS.

Barra lateral principal

Autor

Dani Sánchez

logo mastodon @danisanchez

Entradas recientes

  • Iniciar sesión en nuestros VPS mediante SSH Keys
  • Cerrar modales de Elementor con JavaScript (jQuery)
  • Redirección 301 para cambios de dominio
  • Guía rápida de Flexbox
  • Filtro de WooCommerce para personalizar el mensaje de «Gracias por tu pedido»

Comentarios recientes

  1. Brandon Portes en Taller de verano de WooCommerce #1
  2. Sebastian en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  3. Rigol en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora
  4. dani.sanchez en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  5. rikylinux en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress
Medium banner says Support Inkscape
Banner pie de página

Maquetación web, landings, blogs y tiendas online
cuidando hasta el mínimo detalle

Si necesitas que desarrolle tu proyecto web ponte en contacto conmigo.

Contacto
  • Mastodon
  • YouTube
  • LinkedIn

Alojado con energía 100% verde

Dani Sánchez © 2025 · Política de privacidad · Política de cookies