¿Un efecto de desplazamiento de página en un iMac con Divi? J'avoue ne pas savoir vraiment quel est le terme que l'on peut employer mais un lecteur de Astuces Divi m'a envoyé un email hier pour me demander comment j'avais pu réaliser cet effet de page qui défile dans un iMac au scroll de ma page d'accueil.
Il est vrai que cet effet de scroll est sympa et que j'ai dû réalisé plusieurs essais avant d'y parvenir. Je suis heureuse de partager cela aujourd'hui avec vous.
¿Cómo analizar un diseño web que te gusta?
Para ser honesto, este efecto de desplazamiento de página en un iMac, je ne l'ai pas inventé car je l'ai déjà vu sur un sitio hecho con Divi. J'avais trouvé cela génial et je m'étais dit qu'il fallait simplement análisis de diseño tratar de hacer algo similar, sin copiar por supuesto!
Si vous regardez bien, il n'y a rien de sorcier : pas de JS, simplement un peu de CSS, trois fois rien ! Tout est dans les images !
C'est d'ailleurs ce que je dis souvent à mes élèves ou mes clients, le WebDesign dépend beaucoup des images. Quand je parle d'images, je ne parle pas de photos mais plutôt de réalisations créées de toute pièce avec un logiciel spécifique. D'ailleurs, tout ce qui se trouve sur Astuces Divi a été créé : pas de photos, juste des éléments vectoriels...
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,
- un hublot d'avion, etc.
Tout peut être imaginé dès lors qu'on envisage un défilement et que l'on possède (ou crée) les ressources adéquates.
Ce que vous avez besoin pour réaliser cette page qui se "scrolle" dans un iMac
Sólo necesitas dos cosas: d'un mockup et d'une image d'arrière plan. Toutefois, en fonction du résultat que vous souhaitez obtenir, les tailles vont devoir changer. Choisir les bonnes tailles d'image est d'ailleurs la chose la plus complexe de ce tuto.
N'oublions pas non plus que ce tuto est destiné aux utilisateurs du Tema Divi que puedes proporcionar aquí.
1. Elija un mockup
Dans mon cas, c'est un iMac dont j'ai pris le soin de découper son intérieur et que j'ai exporté au format .png puisqu'il conserve la transparence. Pour info, j'ai fait ces actions avec Affinity Designer Pero podrías hacer lo mismo con Photoshop.
Après plusieurs essais, l'image qui était la plus convenable était 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. Créez une image d'arrière-plan
Dans mon cas, j'ai fait une création avec le logo d'Astuces Divi et les "glaces" que j'ai multiplié et mis en transparence. Toujours avec Affinity Designer.
Pour cette image aussi j'ai dû réaliser plusieurs essais jusqu'à trouver el tamaño ideal de 1500 x 2500 px
Cette image doit être "graphique" afin que l'effet du scroll soit réussi. C'est-à-dire que si l'image d'arrière-plan est de couleur unie, ça ne fonctionnera pas et c'est logique...
Réaliser l'effet de scroll en 4 étapes simples
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.
Je vous conseille de vous armer de patience si les tailles des images ne se prêtent pas au rendu que vous souhaitez obtenir et de modifier jusqu'à trouver la taille idéale.
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
Vous n'avez rien à changer, vous pouvez laisser la section et la ligne avec les paramètres par défaut.
Paso 2: Agregar y establecer el módulo de imagen
In columna 1/2 de la línea, c'est-à-dire dans la colonne du milieu, vous allez ajouter IMAGE MODULE que tienes que poner así:
- URL de l'image : choisissez l'image de votre mockup. Cette image sera donc l'image de premier plan.
- Abierto en un espectador: NO
- Antecedentes: c'est ici que vous allez insérer l'image d'arrière-plan que vous avez préalablement créée (1500 x 2500 px)
- Utiliser l'effet de parallaxe : Sí.
- Método paralax: CSS
- Todavía en el IMAGE MODULE, vaya a l'ONGLET AVANCÉ, añadir un Clase CSS au module : pour mon exemple, j'ai donné la classe "imac-bg"
Cela va nous permettre d'ajouter un petit morceau de CSS qui est indispensable pour le rendu du scroll.
Paso 3: Agregar CSS personalizado
Une fois la classe CSS ajoutée dans l'onglet AVANCÉ du MODULE IMAGE, vous allez pouvoir vous rendre dans l'onglet APPARENCE > PERSONNALISER > CSS ADDITIONNEL pour ajouter un simple bout de code. Cette étape est très importante si vous voulez que l'effet de scroll 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; }
N'oublier pas d'enregistrer vos modifications.
Paso 4: Revisar el renderizado
Enfin, vous devez vous rendre en FRONT pour vérifier votre page. Vous convient-elle ? Peut-être devrez-vous régler quelques détails dus à la taille...
Récapitulatif en vidéo...
J'espère que j'ai répondu à votre question cher Dolli. Ce fût un plaisir et surtout un bon sujet qui pourra aider de nombreux utilisateurs de Divi. Pour finir, je vous laisse découvrir le tuto en version vidéo...
Ah oui, j'oubliais une chose importante : pour que l'effet de scroll soit réussi, votre page doit être suffisamment longue, c'est-à-dire avec assez de contenus. Dans la vidéo ci-dessous, vous verrez que j'ai ajouté deux lignes de texte afin de pouvoir profiter de l'effet du scroll.
PS : désolée pour les lenteurs de la vidéo...
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.