Recreating the Divi Builder Demo Macbook Effect

by

If you’ve been on ThemeForest at any time in the past 5 years, no doubt you’ve noticed all the splashy effects & scroll animations commonly found in most themes today. Most are overkill and really serve no purpose other than to increase your sites load time. However, when used sparingly, effects such as the ones visible on the new Divi Builder Plugin demo can really catch your eye and help the viewer to pause and spend a little time looking at (or playing with) the effect.

This is how I felt about the Macbook parallax effect. It serves a purpose by drawing attention to the main point “Build Stunning Layouts” as well as the feature lists on either side. So how’d they do it? Let’s take a look! šŸ˜‰

Step 1: Setup your layout First, create your layout. It doesn’t have to be the exact same layout, but for the purposes of the demo we’ll recreate the cool effect as seen here, on the Divi Builder Plugin demo. If you look on our homepage, you’ll see we used the effect a little differently to display a little more of what each theme looks like on scroll. Screen Shot 2015-10-26 at 10.17.42 AM

Step 2: Adding the background image

To add the image behind the Macbook, you’ll need to add a background image to the appropriate column via the Divi module settings, adjust the background color and remove the padding. This is how is looks for our demo:

Screen Shot 2015-10-26 at 12.43.58 PM

Step 3: Fine Tuning

To pull off this effect, follow these customization steps:

  1. Remove the animation from your image module. Failing to do so will make the effect look a little wonky on page load.
  2. Assign a class to your image row. For the purposes of this demo, we’ll name it “macbook”.

Step 4: Apply someĀ CSS kung-fu

The CSS below is for the purposes of this demo. Simply copy and paste this to your style.css via ePanel or FTP.

 

.macbook .et_pb_column_5 { 
     background-attachment: fixed !important; 
     background-size: 32%; 
     background-repeat: no-repeat; 
     background-position: 50% 50%; 
} 

@media only screen and (max-width:981px) {
.macbook .et_pb_column_5 {
     background-size: 61% !important;
}
}

To use this for your own site, you’ll likely need to change the .et_pb_column_5Ā to whatever is applicable in your situation. If you’re unsure how to find this value, check out short video below for how to openĀ Inspect Element. Tip: this method is found in Chrome but is very similar in every other browser. Inspect Element is the single greatest tool I use as a web designer. Be sure to familiarize yourself with it!

Step 5:Ā Optional customizations

Depending on your use case, you may need to increase/decrease the size of the image the scrolls in the background. To do so, simply adjust the background-size value. Again, you can use Inspect Element to see what value will work the best.

One thing we’ve changed from the Divi Builder Demo is this value:Ā background-position: 50% 50%;

This allows you to position the image wherever you’d like on the screen. The first value controls it’s position left to right, the second, top to bottom. Adjust as necessary to achieve the look you’re going for.

Feel free to take this tutorial and run with it and be sure to share your results with us in the comments section below – we’d love to see how you use it!

Cheers!

signature

The Results

Build Stunning Layouts

Say Goodbye To Your Boring Website And Build Something Spectacular

Advanced Columns

Create interesting layouts that better showcase your content.

Custom Backgrounds

Create custom background colors, images and even fullwidth videos.

Fullwidth Layouts

Now you can take full advantage of your themeā€™s content area.

Custom Fonts & Colors

Everything is customizable when build with the Divi Builder.

Spacing Control

Let our content breath, and create a sense of rhythm and hierarchy.

A Fluid Grid

Everything build with the Divi Builder is fluid and responsive.

31 Comments

  1. Syed Shariefi

    Brilliant tutorial mate. Will definitely do something with it.
    I was just wondering how did you create that awesome gradient overlay effect on your homepage? Would really appreciate it.
    Thank you…

    Reply
    • gruffygoat

      Hi Syed, thanks for the kind words. I should probably make a little tutorial about that one as well, but here’s the jest of it:

      Just go to http://www.gradient-animator.com/ to create your gradient then copy and paste the CSS it provides into your style.css. Then assign a class (in our case “animated-gradient”) to the section you want to apply the gradient to. You’ll notice a portion of the generated CSS is listed in the class you created – this part is important to ensure the effect is displayed on your Divi site.

      @-webkit-keyframes AnimationName {
      0%{background-position:96% 0%}
      50%{background-position:5% 100%}
      100%{background-position:96% 0%}
      }
      @-moz-keyframes AnimationName {
      0%{background-position:96% 0%}
      50%{background-position:5% 100%}
      100%{background-position:96% 0%}
      }
      @keyframes AnimationName { 
      0%{background-position:96% 0%}
      50%{background-position:5% 100%}
      100%{background-position:96% 0%}
      }
      
      .animated-gradient {
      background: linear-gradient(270deg, #2dbac4, #005ca7, #4d105c);
      background-size: 600% 600%;
      -webkit-animation: AnimationName 33s ease infinite;
      -moz-animation: AnimationName 33s ease infinite;
      animation: AnimationName 33s ease infinite;
      }
      
      Reply
      • Syed Shariefi

        Thanks for the code Nathan. I applied the code to standard section and it doesn’t seem to be working. Is there anything else I should change in the section setting rather than what you’ve written above?

        Reply
        • gruffygoat

          Nope, that’s all you need to do. Give your section a class and then in your custom CSS tab or in your style.css paste in the code above.

          Reply
  2. Igor

    Hi team,

    Thanks for sharing Mac effect!

    Kind regards,
    Igor

    Reply
    • gruffygoat

      Thanks Igor – hope you’re able to use it in some way!

      Reply
  3. Erick

    Awesome tutorial Nathan! I’ve been following your works for some inspiration! Your design skills are so beautiful, responsive and clean! Thank you for this tutorial. Definately gonna use it on some website.

    Reply
    • gruffygoat

      Thanks for the kind words Erick!

      Reply
  4. John

    Thanks for the tutorial Nathan, I had done this effect with HTML and CSS based on Themeforest examples, but had major problems with responsiveness. Thanks to this tut I can now use it in Divi with the reponsiveness built in (albeit with a little tweaking).

    Reply
  5. Barry Garner

    What are the dimensions on the background image used in your example.

    Reply
    • gruffygoat

      Hey Barry. The dimensions in this particular example are 1078×1781 but that’s really irrelevant. You can use a Chrome extension like this one: http://bit.ly/1Ri8Z8L to create a screengrab of your site or whatever you want to display. Drop that in as your background image and then you can tweak the size and position to fit however you want with your background-size & background-position values.

      Reply
  6. James Fosker

    For some reason, the bottom of the screenshot is sticking under the mac. I can get rid of it by defining a pixel height, but that does not help with it being responsive, any idea on how I can fix this?

    Reply
    • gruffygoat

      Hey James. Got a link? This thing really isn’t responsive anyway – it’s a cool effect on desktop for sure but it doesn’t scroll on mobile devices. There’s probably a workaround for that but the point of this little tutorial was just to replicate the way ET had it.

      Reply
  7. Logan Ramirez

    Hey, man, seriously; this is a solid tut. Thank you. 100% of the folks who saw that Divi demo wanted to know how to do this.

    Keep up the good work.

    Reply
  8. Tony Barnett

    Hi,
    Thanks for making the tutorial. I am quite new to Divi and thought I’d try to follow your tut. Made some progress but just can’t get it right. The macbook moves up the screen but so to does the column image but slower so you do get the effect but not as it should be. I have tried changing a few things but no luck. I have the Row Parallax set to True Parallax as this is the only way I could get the image to size into the Macbook. If I changed type to CSS the image doesn’t size at all. I have checked the column number and am sure I have that correct. Pasted your code into Custom CSS in epanel . I changed the size % to see if this had an effect but nothing. I assigned the CSS Class macbook to the Row module. Just now going round in circles so I really hope you can help.

    Thank you.

    Reply
    • gruffygoat

      Hi Tony, mind shooting me the link where you’re trying this out? I’d be happy to help – just need to see where things are going wrong to put you in the right direction. We also released a free little child theme that also features this tutorial that may be of interest to you. You could install it and see how everything is setup that way too. Here’s the direct link: http://besuperfly.wpengine.com/product/demo1/

      Reply
  9. Tony Barnett

    Hi, Nathan,
    Thanks for taking the time to reply to my query. The link to the page in question is

    http://sgc.esag.net.au/macbook-2/

    The site is just a test site so has very little structure at the moment with me just playing around with Divi getting to know what I can and cannot do.

    Regarding the Elegant Themes demo I’d be more than happy to buy the child theme as I think effort should be rewarded. I also look on it as a way of learning. Whilst I haven’t yet got the expertise I can usually pick things up reasonably quickly.

    I also realise that there are many things that only work on a desktop which is a bit of a bummer. This is a busy time of the year for everyone so please don’t feel obliged to look at this any time soon.

    Have a safe and happy Xmas.

    Reply
    • gruffygoat

      Hey Tony, looks like you got it working on your test link there?

      Reply
  10. Kevin

    Hi nathan,

    Awesome guide. btw, tried using the Macbook Effect together with Ninja Kick Contact Form plugin and it doesnt seem to be compatible with each other. The macbook scrolling stops when the plugin gets activated and it works when the plugin is deactivated.

    What do you think is causing it? Thanks!

    Reply
    • gruffygoat

      Probably just a conflict with that particular plugin – not sure.

      Reply
  11. Kevin

    Hey Nathan,

    Have you tried this effect with the ninja kick contact form? Strange that it stops when I activate the plugin.

    Reply
    • gruffygoat

      Hey Kevin, I’ve never heard of the Ninja Kick Contact Form so I really couldn’t say what the conflict might be, unless they’re using some sort of parallax functionality. Sorry I don’t have a great answer for you.

      Reply
  12. Frans

    Hello Nathan,
    I hope all is well.
    I am trying to copy this amazing parallel effect, but have not been successful.
    What I don’t understand is where I exactly upload the background image and where the macbook image.
    And can that be any macbook image?
    By following the tutorial to the letter, I am not coming further that this: frans.online.
    This is project in the beginning, but I wanted this done at the welcome page first.
    I hope you can help me?
    Thanks a lot and best regards,
    Frans

    Reply
  13. Julia

    Hi Nathan! Thank you for sharing this tutorial. I tried to make this effect with divi builder but I cant find the way to increase the macbook image and to center it according to the height of the column. Could you help me, please? Thanks!

    Reply
    • gruffygoat

      Hi Julie, just shoot us an email and we’ll see what we can do to help.

      Reply
  14. Igor

    Hey Nathan,

    Sorry for disturbing again.

    Is it possible to integrate an image of a modern 27 inch iMac instead of a macbook with the same screen effect?

    Is there any easy way to do it?

    Thanks for your time!

    Igor

    Reply
    • gruffygoat

      Hi Igor, just shoot us an email and we’ll see what we can do to assist. Technically you can put any image in place of the Macbook and achieve the same effect.

      Reply
  15. d

    is that possible to obtain the source for the mac image with the transparent screen? Thank you!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.