It's always interesting seeing what you can build with Elementor Pro. It's an incredibly powerful tool, and it goes toe to toe with some of the best web design platforms out there.

Earlier this week, somebody in the Elementor Facebook group asked if it was possible to recreate an Apple landing page.

Apple is well known for their web design, and many of their pages offer users unique experiences in an effort to extend brand outreach, and drive more sales.

The Apple Version

☝That's the link to the page.

The page in question was the International Woman’s Day 2020 landing page that Apple had created for advertising campaigns. The page features a very unique effect, where the hero text is centered, but as you move your mouse around the page, underlying images moving in opposite direction. When you hover over each image, it displays a biography of a impactful woman.

We definitely recommend checking it out.

We wanted to see if recreating this effect was possible using Elementor Pro, or if it could only be hard coded.  

The Apple page is definitely completely custom, utilizing a unique blend of HTML, CSS positioning, and JavaScript. Each image has a hover effect applied to it. Here is some of the underlying code:

Keep in mind, that's only the hero of the page. The rest of the page contains information and call to actions, but this is relatively simple to do.

Our challenge was recreating the International Woman's Day 2020 Apple landing page using Elementor Pro, and nothing else. We're not even going to be adding JavaScript.

The Elementor Version

After spending a few hours messing around with Elementor Pro, we created a page that is almost identical to the Apple landing page, using only Elementor and native effects.

Get The Template

To follow along, we recommend to downloading the template file for this page and uploading it onto your Elementor installation. This will help you understand exactly how we achieved this effect.

Want the template JSON to install on your own Elementor (Pro) installation? Grab it here.

[purchase_link id="6092" text="Get Now" style="button" color="inherit" direct="true"]

*Pro tip: enter $0.00 to get it free. But don't tell anyone ?.

The Limitations Of Elementor

When discussing how we built the actual page, we're going to be primarily referring to the hero, as that's the complicated part of this build.

Elementor Pro has some limitations when it comes to this type of web design. The main issue is that it's very difficult to have content off of the page, and then bring it in to the viewport.

If you navigate to the Apple landing page or our template version of it, you'll see that as you move the mouse, content contained outside of the viewport is moved to the viewport. To add more depth, this movement is directly reactive to the movement of your mouse cursor.

In summary, we needed to find a way to work around the “off screen content” limitations.

How We Built It

Hero creation

Now, let's walk you through step by step how this page was created. We worked from the middle out, starting with the initial text, and adding the images.

To get the structure of the screen, we simply dragged 5 inner column sections with 5 inner columns each into the Elementor canvas. These were contained within a full height section.

The middle column contains the text, while images are radiating outwards from it.

Images were added using the element or image element, and made to be darker by setting the default opacity to 0.5. On hover, the opacity increases to 0.8.

Images were positioned on the screen by using a Percentage width and pixel padding and margins. We also used margins to move the overall columns that contain the images around the canvas. As you can see, all the images are contained within horizontal rows, but they are offset to make it look like they are placed haphazardly on the canvas of the page.

An important effect of this page was displaying the biography of the woman When hovering over her respective image. To do this, we first added the content using a text element, and positioned it absolutely within the column.

Using custom CSS, we also set the width of each text element. Most were 50% wide (respective to their column), while others were 60 to 80% wide. They were placed on top of the image using the index.

We had to use custom CSS too show and hide the biography based on the image hover. Doing this was quite simple, and all we needed to change on the image and text elements where the custom CSS classes.

We then used some very simple CSS to make the opacity of the text zero by default, and one when hovering over an image.

.des {
opacity:0;
}
.cat-img:hover + .des {
    opacity: 1;
    transition-duration: .5s
}Code language: CSS (css)

.cat-img refers to the underlying image while .des refers to the biography text.

That covers the majority of the hero section structure, now it is time to incorporate the movement effect and overflow effect.

As you can see, our current screen contains all of the images possible. The first order of business is making these images leave the viewport.

To do this, we utilized the CSS transform scale property. As you can see, everything is essentially half size on this canvas (so much of the text was .7em). This was done for a reason, as we expected to scale/zoom this content by two times.

⚠ Grab that page template to see exactly how the custom CSS works.

What this does is pushes most of the content out of the viewport, and gives us the ability to use our mouse effect which is a native Elementor Pro motion effect to move around the hero page, just like the original Apple landing page.

We applied this CSS code to the column that contained all of our intersections within the full screen section.

selector {
    transform: scale(2);
}Code language: CSS (css)

What that did was zoom all the content within that column, Increasing its size by two.

Now the page is looking much more similar to the original Apple landing page. If you hover over any image at this point, the biography will fade in for the respective person.

As you can see, this custom CSS also doubles the Elementor user interface for everything within that column. That's why this was applied at the end of the hero build.

The final effect is incorporating our “mouse movement”. This is one of the easier parts of the project, because it is a native effect included with Elementor.

Under advanced settings for the column, go to motion effects, and then toggle mouse effects.

We set our mouse track to move in the opposite direction, and set the speed to five. Changing the speed impacts how quickly the page will react to your mouse movement, and also determine how far to the right left, up or down, the content of the viewport will move.

An issue you may run into is the content displaying over the second section of the page, which will be discussed below. Another problem is the content causing the browsers vertical and horizontal scrollbars to move around.

To fix this, simply set overflow X and overflow Y to hidden using this CSS:

Also, ensure that the second section has a higher Z index than the first section.

And that's how we built the entire Apple IWC2020 hero using Elementor and nothing else (Well, other than some simple custom CSS).

This is a really unique effect that you can use in many different website builds . You don't have to copy Apple completely, but understanding this method and technique Will definitely make your websites much more interesting. If you liked this effect, we recommend reading our multilayer parallax tutorial article as well.

Second Section

But wait, we're not even done yet. The second section of the page contains several call to actions and additional information offering context into the unique hero above.

Creating this was a piece of cake with Elementor Pro, all we did was add a section, H2 Element, inner section with two columns, a couple of photos, text blocks, and buttons, and called it a day.

This is what we ended up with:

Keep in mind, this is completely zoomed out so you can see the entire structure of the page, and looks a lot different on the browser.

Conclusion

We decided to take this challenge on, and to (re)build an Apple landing page using only Elementor Pro. This shows that you can build incredibly professional websites, utilizing unique effects with this tool and nothing else.

If you would like to dive into exactly how the structure of this page works to create this effect, we recommend downloading the Elementor template file, which you can upload into your own installation and reverse engineer.

Something to keep in mind is that we didn't do anything to make this template responsive, and it is incredibly unpolished. It was just a proof of concept to show you that something like this was possible using the tool.

Also, all of the images and content within the template is copied directly from the Apple website. This is only meant to be for educational purposes only, and if you try to recreate a website completely, chances are there will be legal action against you (Intellectual property is real!).

Hopefully this gave you enough information as to how we created this unique effect, and if you have any questions feel free to reach out in the comments below.