Animated iPhone Mockup Layout (Elementor Pro Tutorial)

In this Elementor Pro tutorial I will show you how I created this animated iPhone CTA section.

Get Elementor Pro:
https://wicky.co/get-elementor

Timestamps:

  • 0:00 Introduction
  • 0:58 iPhone Mockup Tutorial Begins
  • 2:53 Photoshop Crop iPhone Mockup
  • 4:11 Convert PNG to WebP
  • 5:10 Download Lottie Animation
  • 7:01 Elementor iPhone Mockup Begins
  • 10:09 Add iPhone Mockup Background Image
  • 10:55 Add Lottie Animation
  • 13:21 Create Right Container
  • 14:48 Step 1 Layout Example
  • 18:37 Step 2 Layout Example
  • 20:01 Step 3 Layout Example
  • 23:22 Enable Motion Effects
  • 24:16 Responsive Settings

Create Mockups:
https://shots.so/

Compress Images to WebP:
https://squoosh.app/

LottieFiles:
https://lottiefiles.com/

Free Brand Messaging Worksheet

Define Your Voice and Connect with Your Audience

More Free Resources

Let's Work Together

Big ideas start with a quick chat. Let’s talk!