How to achieve a page scroll effect in an iMac with Divi?

Updated on 05/11/2018 | Published on 03/05/2018 | 13 comments

A page scroll effect in an iMac with Divi? I admit I don't really know what term you can use, but a reader of Divi Tips sent me an email yesterday asking me how I could have achieved this page effect that scrolls through an iMac on the scroll of my home page.

It is true that this scroll effect is nice and that I had to make several tests before I could do it. I am happy to share this with you today.

 

How to analyze a web design that you like?

To be honest, this page scroll effect in an iMac, I didn't invent it because I've already seen it on a site made with Divi. I thought it was great and I thought it was just a matter of analyzing the design to try to do something similar, without copying of course!

If you look closely, there's nothing rocket science: no JS, just a little CSS, three times nothing! It's all in the pictures!

This is what I often say to my students or clients, WebDesign depends a lot on images. When I talk about images, I'm not talking about photos but rather about realizations created from scratch with specific software. By the way, everything on Divi Tips has been created: no photos, just vector elements....

For this tutorial that I will present to you, you could imagine thousands of variations like :

  • a window open on a landscape that would scroll through the scroll of the page
  • a submarine window that would show the marine fauna on the scroll of the page
  • a smartphone,
  • an aircraft window etc....

Anything can be imagined as long as you consider a scrolling and have (or create) the right resources.

 

What you need to create this page that scrolls 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 thing in this tutorial.

Let's not forget either that this tutorial is intended for users of the Divi theme that you can get here.

 

1. Choose a mockup

In my case it is an iMac that I took care of cutting out its interior and that I exported in.png format since it keeps the transparency. For the record, I did these actions with Affinity Designer but you could do the same thing with Photoshop.

After several tests, the most suitable image was 847 x 704 pixels. I would like to point out that this size was suitable for 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 pour iMac Scroll

Mockup for iMac Scroll: be careful this image must be 847×704 pixels

 

2. Create a background image

In my case, I created a creation with the Divi Tips logo and the "ice creams" that I multiplied and put in transparency. Always with Affinity Designer.

For this image too I had to carry out several tests until I found the ideal size of 1500 x 2500 px

Background Fixed pour iMac scroll effect

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 solid color, it will not work and it makes sense....

 

Achieve the scroll effect in 4 simple steps

Once you have gathered the appropriate images, you will be able to perform the few steps necessary to achieve this superb scroll effect in an iMac.

I advise you to be patient if the image sizes do not lend themselves to the rendering you want and to modify until you find the ideal size.

 

Step 1: Add a section and a Divi line

Ajouter une section Divi

Add a Divi section

In this first step, you will need to:

  1. activate the Divi Builder
  2. add a standard section (blue color)
  3. add a line (green color) of type 1/4 + 1/2 + 1/4

You don't have to change anything, you can leave the section and line with the default settings.

 

Step 2: add and configure 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 as follows:

Ajouter le module image

Add and configure the image module

 

  1. Image URL: choose the image of your mockup. This image will therefore be the foreground image.
  2. Open in a viewer: NO
  3. Background: this is where you will insert the background image you have previously created (1500 x 2500 px)
  4. Use the parallax effect: YES
  5. Parallax method: CSS
  6. Still in the IMAGE MODULE, go to the ADVANCED ONGLET, add a CSS class to the module: for my example, I gave the class "imac-bg"
    Ajout d'une classe CSS au module image

    Adding a CSS class to the image module

    This will allow us to add a small piece of CSS that is essential for scroll rendering.

  7. Click on the green "Save and exit" button.

 

Step 3: Add custom CSS

Once you have added the CSS class in the ADVANCED tab of the IMAGE MODULE, you will be able to go to the APPEARANCE tab > CUSTOMIZE > ADDITIONAL CSS to add a simple piece of code. This step is very important if you want the scroll effect to work properly.

CSS additionnel pour que le SCROLL soit réussi

Additional CSS to make the SCROLL successful

 

This piece of code is here:

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

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

Don't forget to save your changes.

 

Step 4: Check the rendering

Finally, you must go to FRONT to check your page. Is it suitable for you? You may need to adjust some details due to the size....

 

Video summary....

I hope I answered your dear Dolli's question. It was a pleasure and above all a good subject 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 will see that I have added two lines of text to take advantage of the scroll effect.

PS: sorry for the slowness of the video....

Effet de scroll dans Divi

Scroll effect in Divi: say it on Pinterest!

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

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

Soumettre un commentaire

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

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

Pin It on Pinterest

Shares
Share This