¿Un efecto de desplazamiento de página en un iMac con Divi? Confeso que realmente no sé cuál es el término sino un lector Astuces Divi E-mailed ayer para preguntarme cómo podía darme cuenta de este efecto de página que se desplaza en un iMac al pergamino de mi página de inicio.
Es cierto que este efecto de desplazamiento es agradable y que tuve que realizar varias pruebas antes de lograrlo. Me alegra compartir esto hoy contigo.
¿Cómo analizar un diseño web que te gusta?
Para ser honesto, este efecto de desplazamiento de página en un iMacNo lo inventé porque ya lo he visto. un sitio hecho con Divi. Pensé que era genial y pensé que era sólo cuestión de análisis de diseño tratar de hacer algo similar, sin copiar por supuesto!
Si miras con cuidado, no hay nada más brujo: ninguna JS, sólo un poco de CSS, tres veces nada! ¡Está todo en las fotos!
Esto también es lo que a menudo digo a mis estudiantes o clientes, el WebDesign depende mucho de las imágenes. Cuando hablo de imágenes, no estoy hablando de fotos sino más bien de creaciones creadas de cualquier pieza con software específico. Además, todo lo que está pasando Astuces Divi fue creado: no hay fotos, sólo elementos vectoriales...
Para este tutorial Te presentaré, podrías imaginar miles de variaciones como:
- una ventana abierta en un paisaje que desplazaría al pergamino de la página
- un bache submarino que permitiría ver la fauna marina en el pergamino de la página
- un smartphone,
- una ventana de avión, etc.
Todo se puede imaginar cuando uno considera un pergamino y cuando uno posee (o crea) los recursos apropiados.
Lo que usted necesita para darse cuenta de esta página que "crolles" en un iMac
Sólo necesitas dos cosas: una imagen de mockup y fondo. Sin embargo, dependiendo del resultado que desee, los tamaños tendrán que cambiar. Elegir los tamaños de imagen adecuados es también lo más complejo en este tutorial.
Tampoco debemos olvidar que este tutorial está destinado a los usuarios del Tema Divi que puedes proporcionar aquí.
1. Elija un mockup
En mi caso, es un iMac que me encargué de cortar su interior y exporté en formato .png porque mantiene la transparencia. Para que conste, hice estas acciones con Affinity Designer Pero podrías hacer lo mismo con Photoshop.
Después de varias pruebas, la imagen más adecuada era de 847 x 704 píxeles. Dejo claro que este tamaño se ajusta al formato de mi línea Divi, que se divide en 3 columnas. Supongo que si quieres lograr el mismo efecto en una línea 1/1, seguramente tendrás que cambiar el tamaño.
2. Crear una imagen de fondo
En mi caso, hice una creación con la Divi Tips logo y las "ices" que he multiplicado y hecho transparente. Siempre con Affinity Designer.
Para esta imagen también tuve que realizar varias pruebas hasta encontrar el tamaño ideal de 1500 x 2500 px
Esta imagen debe ser "gráfico" para que el efecto de desplazamiento sea exitoso. Es decir, si la imagen de fondo está en un color sólido, no funcionará y tiene sentido...
Realizar el efecto de desplazamiento en 4 sencillos pasos
Una vez que te hayas reunido imágenes apropiadas, usted será capaz de realizar los pocos pasos necesarios para lograr este superb efecto de desplazamiento en un iMac.
Le aconsejo que se arme con paciencia si los tamaños de las imágenes no son adecuados para el renderizado que desea obtener y modificar hasta que encuentre el tamaño ideal.
Paso 1: Agregar una sección y una línea Divi
En este primer paso, tendrá que:
- habilitar el Divi Builder
- añadir una sección estándar (color azul)
- añadir una línea (color verde) de tipo 1/4 + 1/2 + 1/4
No tiene nada que cambiar, puede dejar la sección y la línea con la configuración predeterminada.
Paso 2: Agregar y establecer el módulo de imagen
In columna 1/2 de la línea, es decir, en la columna media, añadirás IMAGE MODULE que tienes que poner así:
- URL de imagen: Elige la imagen de tu burla. Por lo tanto, esta imagen será la primera imagen.
- Abierto en un espectador: NO
- Antecedentes: Aquí es donde insertará la imagen de fondo que creó anteriormente (1500 x 2500 px)
- Use el efecto paralaje: Sí.
- Método paralax: CSS
- Todavía en el IMAGE MODULE, vaya a ADVANCED LANGUAGE, añadir un Clase CSS al módulo: por mi ejemplo, le di la clase "imac-bg«
Esto nos permitirá añadir un pequeño pedazo de CSS que es esencial para renderizar el pergamino.
Paso 3: Agregar CSS personalizado
Una vez que la clase CSS se añada a la pestaña ADVANCED de la IMAGE MODULE, usted será capaz de ir a la pestaña APPARENCE > PERSONNALIST > ADDITIONAL CSS para añadir un simple poco de código. Este paso es muy importante si quieres Efecto de la fractura funciona correctamente.
Esta pieza de código es:
/* background imac homepage*/ .imac-bg .et_parallax_bg { background-size: contents !important; } } .et_pb_section_parallax .et_pb_parallax_css { -webkit-transform: none; }
Recuerda salvar tus cambios.
Paso 4: Revisar el renderizado
Por último, debe ir a FRONT para revisar su página. ¿Te cabe? Tal vez usted tendrá que ajustar algunos detalles debido al tamaño ...
Resumen de vídeo...
Espero haber respondido a tu querida pregunta de Doll. Fue un placer y especialmente un buen tema que podría ayudar a muchos usuarios de Divi. Finalmente, te dejo descubrir el tutorial en versión de vídeo...
Ah sí, olvidé una cosa importante: para que el efecto de desplazamiento sea exitoso, su página debe ser lo suficientemente larga, es decir, con suficiente contenido. En el video a continuación verá que he añadido dos líneas de texto para disfrutar del efecto del pergamino.
PS: Siento la lentitud del video...
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 !
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.
Trop top, l’astuce….
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
Merci beaucoup Patrick 😉
Merci Lycia pour vos tutos et votre générosité
Merci Stan !
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 ?
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 😉
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
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 ?
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 😉
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 😉
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
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
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.
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.