¿Cómo creo un efecto de desplazamiento de página en un iMac con Divi?

Actualizado el 05/11/2018 | Publicado el 03/05/2018 | 17 comentarios

¿Un efecto de desplazamiento de página en un iMac con Divi? Confieso que no sé realmente cuál es el término, pero un lector de Divi Tips me envió un correo electrónico ayer preguntándome cómo podía lograr este efecto de desplazamiento de página en un iMac de desplazamiento en mi página de inicio.

Es cierto que este efecto de desplazamiento es agradable y tuve que hacer varias pruebas antes de poder lograrlo. Estoy feliz de compartir esto con ustedes hoy.

 

¿Cómo analizar un diseño web que te gusta?

Para ser honesto, este efecto de desplazamiento de página en un iMac, no lo inventé porque ya lo he visto en un sitio hecho con Divi. Me pareció genial y pensé que debería analizar el diseño y tratar de hacer algo similar, sin copiarlo por supuesto!

Si miras de cerca, no hay nada mágico: no hay JS, sólo un poco de CSS, ¡no mucho! ¡Está todo en las imágenes!

Eso es lo que suelo decir a mis estudiantes o clientes, que el diseño web depende mucho de las imágenes. Cuando hablo de imágenes, no hablo de fotos sino de creaciones creadas desde cero con un software específico. Por cierto, todo en Divi Tips ha sido creado: no hay fotos, sólo elementos vectoriales...

Para este tutorial que voy a presentarles, podrían imaginar miles de variaciones como..:

  • una ventana abierta en un paisaje que se desplazaría con el desplazamiento de la página
  • un ojo de buey submarino que daría un vistazo a la vida marina en el pergamino de la página.
  • un teléfono inteligente,
  • una ventana del avión, etc...

Cualquier cosa puede ser imaginada siempre y cuando se considere un pergamino y se tengan (o se creen) los recursos apropiados.

 

Lo que necesitas para hacer que esta página se "desplace" en un iMac

Sólo necesitas dos cosas: una maqueta y una imagen de fondo. Sin embargo, dependiendo del resultado que se quiera obtener, los tamaños tendrán que cambiar. Elegir los tamaños de imagen correctos es lo más complejo de este tutorial.

No olvidemos tampoco que este tutorial está destinado a los usuarios del tema Divi que podrán procura aquí....

 

1. Elija una maqueta

En mi caso es un iMac que me encargué de recortar su interior y lo exporté en formato .png ya que mantiene la transparencia. Para información, hice estas acciones con Affinity Designer pero podrías hacer lo mismo con Photoshop.

Después de varias pruebas, la imagen más adecuada fue de 847 x 704 píxeles. Especifico bien que este tamaño era adecuado para el formato de mi línea Divi que se divide en 3 columnas. Supongo que si quieres lograr el mismo efecto en una línea de 1/1, sin duda tendrás que cambiar el tamaño.

Mockup pour iMac Scroll

Maqueta para el iMac Scroll: ten cuidado, esta imagen debe ser de 847×704 píxeles

 

2. Crear una imagen de fondo

En mi caso, hice una creación con el logo de Divi Tips y los "espejos" que multipliqué y puse en transparencia. Siempre con Affinity Designer.

Para esta foto también tuve que hacer varias pruebas hasta que encontré el tamaño ideal de 1500 x 2500 px

Background Fixed pour iMac scroll effect

Fondo fijado para el efecto de desplazamiento del iMac: esta imagen es de 1500×2500 píxeles

Esta imagen debe ser "gráfica" para que el efecto de desplazamiento tenga éxito. Es decir, si la imagen de fondo es de un color sólido, no funcionará y eso es lógico...

 

Conseguir el efecto de desplazamiento en 4 simples pasos

Una vez que hayas reunido las imágenes correctas, podrás realizar los pocos pasos necesarios para lograr este gran efecto de desplazamiento en una iMac.

Le aconsejo que tenga paciencia si los tamaños de las imágenes no se prestan a la representación que desea obtener y que las modifique hasta que encuentre el tamaño ideal.

 

Paso 1: Añadir una sección y una línea Divi

Ajouter une section Divi

Agregar una sección Divi

En este primer paso, tendrás que hacerlo:

  1. activar el Divi Builder
  2. añadir una sección estándar (color azul)
  3. añadir una línea (color verde) de tipo 1/4 + 1/2 + 1/4

No tienes que cambiar nada, puedes dejar la sección y la línea con la configuración predeterminada.

 

Paso 2: añadir y configurar el módulo de imagen

En la columna 1/2 de la fila, es decir, en la columna del medio, añadirá un MÓDULO DE IMAGEN que tiene que configurar así :

Ajouter le module image

Añadir y configurar el módulo de imagen

 

  1. URL de la imagen: elige la imagen de tu maqueta. Esta imagen será entonces la imagen en primer plano.
  2. Abrir en un visor: NO
  3. Fondo: aquí es donde insertarás la imagen de fondo que has creado previamente (1500 x 2500 px)
  4. Use el efecto de paralaje:
  5. Método de paralaje: CSS
  6. Todavía en el MÓDULO DE IMAGEN, ir a la TABLA AVANZADA, añadir una clase CSS al módulo: para mi ejemplo, di la clase "imac-bg".
    Ajout d'une classe CSS au module image

    Añadiendo una clase CSS al módulo de imágenes

    Esto nos permitirá añadir un pequeño trozo de CSS que es esencial para la representación del pergamino.

  7. Haga clic en el botón verde "Guardar y Salir".

 

Paso 3: Añadir un CSS personalizado

Una vez que la clase CSS es añadida en la pestaña AVANZADA del MÓDULO DE IMAGEN, podrás ir a la pestaña APARIENCIA > PERSONALIZACIÓN > ADICIONAL CSS para añadir un simple trozo de código. Este paso es muy importante si quieres que el efecto de desplazamiento funcione correctamente.

CSS additionnel pour que le SCROLL soit réussi

CSS adicional para el éxito de SCROLL

 

Este pedazo de código es este:

/* background imac homepage*/
.imac-bg .et_parallax_bg {
background-size: contain !important;
}

.et_pb_section_parallax .et_pb_parallax_css {
    -webkit-transform: none;
}

No te olvides de guardar tus cambios.

 

Paso 4: comprobar la representación

Finalmente, tienes que ir a FRONT para comprobar tu página. ¿Es adecuado para usted? Puede que tengas que ajustar algunos detalles debido al tamaño...

 

Recapitulación de video...

Espero haber respondido a su pregunta, querida Dolli. Fue un placer y sobre todo un buen tema que ayudará a muchos usuarios de Divi. Para terminar, les dejo descubrir el tutorial en versión de video...

Oh sí, olvidé una cosa importante: para que el efecto de desplazamiento tenga éxito, su página debe ser lo suficientemente larga, es decir, con suficiente contenido. En el siguiente video, verán que agregué dos líneas de texto para aprovechar el efecto de desplazamiento.

PD: Perdón por la lentitud del video...

Effet de scroll dans Divi

Efecto de desplazamiento en Divi: ¡dilo en Pinterest!

1.147 palabras

5

A ti también debería gustarte:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que sus imágenes sean más gráficas y dan originalidad a su diseño. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

17 Commentaires

  1. Dolli

    Super, c’est ce dont je voulais haha ! Merci pour tes tutos, c’est super gentil de ta part de les partager avec nous 🙂
    Bonne continuation !

  2. Lycia

    Ce qui est fou, c’est qu’on se décarcasse à faire des tutos sympas et on voit que les lecteurs laissent une seule note : 1/5 !!! Mais c’est honteux ! Quand je pense qu’on prend du temps à soi pour partager des astuces sur Divi et qu’il y a toujours des gens qui sont là pour rabaisser le travail des autres. Que celui qui a mis 1 étoile sur 5 se manifeste afin que je puisse comprendre ce qui ne va pas dans ce blog ou cet article.

  3. Thierry Moizan

    Trop top, l’astuce….

  4. frossard

    super tuto merci de votre temps pour partager vos tips…heureusement que des gens comme vous sont là pour nous aider ..car on commence tous un jour
    encore merci
    Patrick

  5. Lycia

    Merci beaucoup Patrick 😉

  6. Stan

    Merci Lycia pour vos tutos et votre générosité

  7. Lycia

    Merci Stan !

  8. Jean-Michel

    Bonsoir
    Je suis interesser a utiliser le meme « formulaire » que celui sur lequel j’ecris ces lignes pour mon blog. Je ne trouve rien, pouvez-vous m’aiguiller svp ?

  9. Lycia Diaz

    Hello Jean-Michel !
    De quel formulaire parlez-vous ? Celui des commentaires ? Si oui, généralement il est activé par défaut sur les articles et désactivé par défaut sur les pages d’un site WordPress. Mais vous pouvez activer les commentaires soit dans les réglages de WordPress (onglet Discussion) soit page par page. Dans les réglages de la page ou de l’article. Quand vous êtes sur l’écran de la liste de vos pages ou articles, vous pouvez passer la souris sur le post et cliquer sur MODIFICATION RAPIDE. Vous verrez une option à cocher ou à décocher. J’espère avoir été claire.
    Vous me direz 😉

  10. Steeve

    Hello Lycia,
    Merci pour le travail fournis et les astuces. Nouvel arrivant dans l’unniver Divi c’est appréciable ;).

    J’ai une question concernant cet article : Est-il possible au lieu d’intégrer une image, d’intégrer un Iframe pour afficher une autre page web (avec une URl différente) ?
    En gros j’ai une app web sur une url diférrente ei j’aimerai l’intégrer dans un mockup.

    Merci par avance 🙂
    Steeve

  11. Lycia Diaz

    Salut Steeve,
    Merci à toi 😉
    Pour être honnête, tu me poses une colle… J’ai envie de te répondre « non, c’est pas possible » mais je n’en sais rien… Pourquoi ne prends-tu pas une capture d’écran de cette deuxième page web ? C’est plus simple, non ?

  12. Steeve

    Merci pour ta réponse rapide.
    Alors pour te répondre au « pourquoi pas de capture écran ? » : Car j’ai besoin que l’utilisateur puisse utiliser cette fameuse app web sur le site.

    Mais j’ai (je pense) trouver la solution.
    – intégrer une Iframe src url.
    – mettre en fond un iPad ou MacBook en fond transparent (png)
    -s’arracher les cheveux pour adapter les tailles et faire en sorte que le code iframe rentre parfaitement dans le « mockup »

    Actuellement je bosse en local mais si tu es intéressée et que ma bidouille tient la route je t’enverrai le résultat.

    Bon week-end 😉

  13. Lycia Diaz

    Salut Steeve, oui je suis curieuse du résultat, tu me diras !

    Pour que le code iframe s’adapte totalement à la taille du mockup, tu penses que c’est possible d’utiliser la propriété background-size en donnant des valeurs comme contain ou cover, ça peut peut-être fonctionner (à tester) ?

    Je me suis servi de cette propriété pour les mockups suivants :

    https://demo.astucesdivi.com/scroll-mockup-1/
    https://demo.astucesdivi.com/scroll-mockup-n3/
    https://demo.astucesdivi.com/scroll-mockup-n4/

    A bientôt 😉

  14. Célia

    Bonjour ! Merci infiniment pour vos nombreux tutos !

    J’ai suivi celui-ci cependant l’image de fond n’apparait pas au milieu de mon Mock Up alors que j’ai repris les memes dimensions que vous (photo de fond a 1500×2500 px et mock up a 847×704).

    Auriez-vous une solution a me proposer ?
    Merci d’avance

    Célia

  15. Pierre-Louis Beller

    Bonjour,

    Je vous remercie pour l’ensemble de vos tutoriels, qui sont autant agréable à lire que pertinent.
    J’ai bien réussi à suivre votre manipulation. Cependant, j’aimerais placer le mockup sur la gauche et n’utiliser que deux vignettes vertes. Dans ce cadre, je n’ai pas réussi à faire apparaitre l’image de fond qui se scrolle dans le mockup (l’image de fond semble rester au centre).
    Sauriez-vous quelle est le démarche à réaliser pour palier ce problème ?

    Merci à vous,
    Pierre-Louis

  16. Lycia Diaz

    Salut Célia, cela peut dépendre de nombreux facteurs. Par exemple, si tu n’utilises pas les mêmes marges que moi, tu peux obtenir un décalage. Tu dois faire plusieurs tests pour trouver la bonne taille.

  17. Lycia Diaz

    Salut Pierre-Louis et merci.
    J’imagine que cela complique la tâche. Peut-être que tu dois utiliser une image de fond qui soit placée sur le premier tiers (et conserver les deux autres tiers vide). Il faut tester.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Ponerlo en el interés

Acciones
Comparte esto