A page scroll effect in an iMac with Divi? I confess I'm not sure what term to use but a Divi Tips reader emailed me yesterday to ask how I managed to achieve this scrolling page effect in an iMac when scrolling my home page.
It's true that this scroll effect is nice and I had to make several attempts before I could achieve it. I am happy to share this with you today.
How to analyse a web design you like?
To be honest, I didn't invent this page scroll effect in an iMac because I've seen it on a site made with Divi. I thought it was great and I thought I should just analyse the design and try to do something similar, without copying of course!
If you look closely, there is nothing fancy: no JS, just a little CSS, nothing! It's all in the images!
That's what I often tell my students or clients, that WebDesign depends a lot on images. When I talk about images, I'm not talking about photos, but rather creations created from scratch with specific software. By the way, everything on Divi Tips has been created: no photos, just vector elements...
For this tutorial I am going to present to you, you could imagine thousands of variations like :
- an open window on a landscape that scrolls down the page
- a submarine window that would allow a glimpse of the marine fauna when the page is scrolled
- a smartphone,
- a plane window etc...
Anything can be imagined as soon as you consider a scroll and you have (or create) the appropriate resources.
What you need to make this scrollable page in an iMac
You only need two things: a mockup and a background image. However, depending on the result you want to achieve, the sizes will have to change. Choosing the right image sizes is the most complex part of this tutorial.
Let's not forget either that this tutorial is intended for users of the Divi theme that you can use to create your own website. get here.
1. Choose a mockup
In my case it's an iMac which I took care to cut out its interior and exported in .png format since it keeps the transparency. For your information, I did these actions with Affinity Designer but you could do the same thing with Photoshop.
After several attempts, the image that was most suitable was 847 x 704 pixels. I should point out that this size suited the format of my Divi line which is divided into 3 columns. I suppose that if you want to achieve the same effect on a 1/1 line, you will certainly have to change the size.
Mockup for iMac Scroll : attention this image must be 847×704 pixels
2. Create a background image
In my case, I made a creation with the Divi Tips logo and the "ice creams" that I multiplied and made transparent. Always with Affinity Designer.
For this image too I had to do several tests until I found the ideal size of 1500 x 2500 px
Background Fixed for iMac scroll effect: this image is 1500×2500 pixels
This image must be "graphic" in order for the scroll effect to be successful. That is to say, if the background image is a solid colour, it won't work and that's logical...
Achieving the scroll effect in 4 simple steps
Once you have gathered the right images, you can carry out the few steps necessary to achieve this beautiful scroll effect in an iMac.
I advise you to be patient if the image sizes do not lend themselves to the rendering you wish to obtain and to modify until you find the ideal size.
Step 1: Add a Divi section and row
Add a Divi section
In this first step, you will need to :
- activate the Divi Builder
- add a standard section (blue colour)
- add a line (green colour) of type 1/4 + 1/2 + 1/4
You don't have to change anything, you can leave the section and the row with the default settings.
Step 2: Add and set up the image module
In column 1/2 of the row, i.e. in the middle column, you will add an IMAGE MODULE that you must set up like this:
Add and set up the image module
- Image URL: choose the image for your mockup. This image will be the foreground image.
- Open in a viewer: NO
- Background: this is where you insert the background image you have created (1500 x 2500 px)
- Use the parallax effect: YES
- Parallax method: CSS
- Still in the IMAGE MODULE, go to the ADVANCED tab, add a CSS class to the module: for my example, I gave the class " imac-bg ".
Adding a CSS class to the image module
This will allow us to add a small piece of CSS that is essential for the scroll rendering.
- Click on the green "Save and Exit" button.
Step 3: Adding custom CSS
Once you have added the CSS class in the ADVANCED tab of the IMAGE MODULE, you can go to the APPEARANCE > CUSTOMISE > ADDITIONAL CSS tab to add a simple piece of code. This step is very important if you want the scroll effect to work properly.
Additional CSS for successful SCROLL
This piece of code is as follows:
/* background imac homepage*/
.imac-bg .et_parallax_bg {
background-size: contain !important;
}
.et_pb_section_parallax .et_pb_parallax_css {
-webkit-transform: none;
}
Do not forget to save your changes.
Step 4: Check the rendering
Finally, you must go to the FRONT to check your page. Does it suit you? You may have to adjust some details due to the size...
Video recap...
I hope I have answered your question dear Dolli. It was a pleasure and above all a good topic that will help many Divi users. To finish, I let you discover the tutorial in video version...
Oh yes, I forgot one important thing: for the scroll effect to be successful, your page must be long enough, i.e. with enough content. In the video below, you'll see that I've added two lines of text in order to take advantage of the scroll effect.
PS: sorry for the slow video...
Scroll effect in Divi: say it on Pinterest!
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.