How to Create an App Landing Page with Elementor

Play Video

In this Elementor tutorial, you will learn how to create an app landing page from scratch.  You can also import the Elementor template files to quickly add the landing page to your website.  This tutorial focuses on using the Elementor page builder plugin for WordPress, general WordPress set up and how to import an Elementor template into an existing website for rapid development.

Requirements:

  • Backup: If you are adding an app landing page to an existing website, you must create a backup your website files and database before following along. I am not responsible for any damage done to an existing website or set up. By following along with this tutorial, you are taking full responsibility for managing all aspects of your website. 
  • Website hosting set up: You will need a domain name, website hosting, MySQL database
  • WordPress: download and install from WordPress.org or install via your host control panel and use the Twenty Nineteen Theme
  • Elementor Pro: WordPress page builder plugin
  • Minimal experience navigating and using the WordPress back end editor environment

Additional resources that were used to design the fictional BumbleSort App in the tutorial:

Part 1: Creating a Split Screen App Landing Page from Scratch

In this Elementor tutorial, I will show you how to create a split screen app landing page that stretches to the edges of the browser window.  I use the homepage of a draft website as the app’s landing page, but you could also create a custom downstream page. Download the project files from my free online course.

  1. Go to Pages > Add New
  • Page Title: Home
  • Publish
  1. Go to Appearance > Themes
  • Download / Activate the WordPress Twenty Nineteen if necessary
  1. Plugins – make sure the following plugins are installed activated:
  • Elementor
  • Elementor Pro
  1. Adjust WordPress settings:
  • Settings > General
    • Title: BumbleSort App – for iPhone and Android
    • Tagline: The BumbleSort app helps style-challenged souls become overnight fashion models.  Never wear the same outfit more than once a month using the patented BumbleSort algorithm.
  • Settings > Reading
    • Your homepage displays: A static page
      • Homepage: Home
  1. Go to Templates > Add New
  • The New Template window should open. If not, click the Add New button.
  • Choose Template Type: Header
  • Name your template: my header
  • Click the Create Template button
  1. Editing the Header Template:

Note:  The purpose of adding and editing the header template is to remove the WordPress Twenty Nineteen header completely from the theme.  I also added custom CSS below to remove the short horizontal line that appears above the H1 and H2 tags in the content.  If you are using a different theme, these instructions may not be applicable.

  • After creating the header template, the Elementor editor should load with the Library window open.
  • Close the Library window.
  • Click the + button in the page content area and choose the 1 column structure.
  • Click the Advanced tab under the edit section and scroll down. Click on Custom CSS.

Add this Custom CSS:

selector{
  display: none;
}
header{
  display: none;
}
h1:not(.site-title)::before, h2::before{
  display: none;
}

  • Click the PUBLISH button and the Publish Settings window should open. Click Add Condition and make sure Include > Entire Site is selected.  Click the Save & Close button.
  • Exit to the Dashboard.
  1. Editing the app landing page (Home) page:
    1. Go to Pages > All Pages
    2. Under Home, click Edit.
    3. When the page loads up in WordPress, click the Edit with Elementor button.
    4. The Elementor editor will load.
    5. Click the gear icon in the lower left corner to open Page Settings.
      • Next to Page Layout, choose: Elementor Full Width
    6. Click the + button in the page content area to add a new section and choose the two-column structure. Here are the settings for this new section:
      • Layout
        • Content Width: Full Width
        • Height: Fit to Screen
        • Column Position: Stretch
        • Content Position: Middle
    7. Click the left column to select it. Here are the settings for the left column:
      • Layout
        • Vertical Align: Middle
      • Style
        • Background > Normal > Classic > Color: #cbad1a
    8. Drag an Image block into the left column. Here are the settings for the image:
      • Content:
        • Choose Image: Upload and insert the phone image with a transparent background
        • Image Size: Large – 1024 x 1024
        • Alignment: Center
      • Style:
        • Image:
          • Width: 325 PX
          • Max Width (%): 100
    9. Click the right column to select it: Here are the settings for the right column:
      • Layout
        • Vertical Align: Middle
      • Style
        • Background > Normal > Classic > Color: #f3f4f3
    10. Drag an Image block into the right column. Here are the settings for the image:
      • Content:
        • Choose Image: Upload and insert the logo image with a transparent background
        • Image Size: Large – 1024 x 1024
        • Alignment: Center
      • Style:
        • Image:
          • Width: 155 PX
          • Max Width (%): 100
        • Advanced:
          • Motion Effects > Entrance Animation: Fade In Up
    11. Drag a Heading block into the right column placing it under the logo image. Here are the settings for the heading block:
      • Content:
        • Title: Download BumbleSort App
        • HTML Tag: H1
        • Alignment: Center
      • Style:
        • Title
          • Text Color: #27231b
          • Typography:
            • Family: Muli
            • Size: 34 PX
            • Weight: Bold
          • Advanced:
            • Motion Effects:
              • Entrance Animation: Fade In Up
              • Animation Delay (ms): 300
    12. Drag a Text Editor block into the right column placing it under the heading block. Here are the settings for the Text Editor block:
      • Content: The BumbleSort app helps style-challenged souls become overnight fashion models.  Never wear the same outfit more than once a month using the patented BumbleSort algorithm.
      • Style:
        • Text Editor
          • Alignment: Center
          • Text Color: #7f5c1d
          • Typography:
            • Family: Mukta Vaani
            • Size: 16
          • Advanced:
            • Advanced:
              • Margin (PX): -25 Top, 0 Right, 0 Bottom, 0 Left
              • Padding (PX): 0 Top, 50 Right, 0 Bottom, 50 Left
            • Motion Effects
              • Entrance Animation: Fade In Up
              • Animation Delay (ms): 300
    13. Drag a Star Rating block into the right column placing it under the Text Editor block. Here are the settings for the Star Rating block:
      • Content:
        • Rating:
          • Rating Scale: 0-5
          • Rating: 5
          • Title: (643)
        • Style:
          • Title:
            • Text Color: #27231b
            • Typography:
              • Family: Rambla
              • Gap: 6
            • Stars:
              • Spacing: 4
              • Color: #cbad1a
            • Advanced:
              • Margin (px): -30 Top, 0 Right, 0 Bottom, 0 Left
              • Motion Effects
                • Entrance Animation: Fade In Up
                • Animation Delay (ms): 300
    14. Drag an Inner Section block into the right column, placing it under the Star Rating block. There should be two columns included in this Inner Section block. Here are the settings for the Inner Section block:
      • Layout:
        • Content Width: Boxed, 400
      • Advanced:
        • Motion Effects:
          • Entrance Animation: Zoom In
          • Animation Delay (ms): 500
    15. Drag an Image Block into the left column of the Inner Section block. Here are the settings for this image block:
      • Content:
        • Image > Choose Image: Upload and insert the App Store button image
        • Image Size: Large – 1024 x 1024
        • Alignment: Center
        • Link: https://www.apple.com/ios/app-store/
      • Style:
        • Image > Width: 150px
        • Image > Hover:
          • Hover Animation: Grow
    16. Copy the App Store button image and paste it into the right column of the Inner Section block. Here are the settings to change for this image:
      • Content:
        • Image > Delete the App Store image and upload and insert the Google Play button image.
        • Link: https://play.google.com/store

Part 2: Importing the Elementor Templates for Rapid Development

Note:  You should be able to import the Elementor template files into your website and apply them to any page.  This part of the tutorial assumes that you are using the WordPress Twenty Nineteen theme with the Elementor Pro plugin installed and activated.  You will also need to download the free Elementor template files from my online course website.

  1. Go to Pages > Add New
  • Title: App
  • Click Publish
  1. Go to Templates > Theme Builder > Import Templates
  • Browse to find the file app-split-screen-header.json file on your computer.
  • Select it and the click the Import Now button
  1. Place your cursor over App Split Screen Header and choose Edit with Elementor. The Elementor editor will open.
  • If you are not using the WordPress Twenty Nineteen theme, or if your current Elementor set up has a footer, sidebar, etc…more Custom CSS might be necessary.
    For example, here’s how you would “turn off” a footer if your theme has a footer and you don’t want it to display on your app’s landing page.  Select the main app section in elementor, click the Advanced Tab, scroll down to Custom CSS and add this CSS:

    .elementor-location-footer{
     display: none;
    }
  • Click the up arrow next to Update in the bottom left and choose Display Conditions. The Publish Settings box will open.
    • Choose to Include this template on your new App page:
      1. Click the Add Condition button if necessary
      2. Change from Entire Site to Singular
      3. Then Change from All Singular to Pages
      4. Then click All and then type App and select it when it appears in the list
      5. Then click the Save & Close button.
      6. Exit to Dashboard
      7. Go to Templates. Click the Import Templates button.
    • Browse to find the app-split-screen-landing-page-section.json file on your computer.
    • Select it and click the Import Now button.
  1. Go to Pages and click the title of the App page to open the homepage in the WordPress Editor. Then click the Edit with Elementor button.
  2. Click the folder icon in the content area and the Library window should open.
  3. Click the My Templates tab and then click the Insert button in the Split Screen App Landing Page row. Choose No on Import Document Settings.
  4. Review the page and make tweaks as needed.  Some of the elements might not layout correctly depending on your current WordPress theme or Elementor set up.
  5. Click the gear icon in the bottom left to open the Page Settings interface.
  6. For Page Layout, choose Elementor Full Width.
  7. Then click the Update button.
  8. Preview Changes.

Conclusion

In this Elementor tutorial, you learned how to build a split screen app landing page using the Elementor page builder plugin for WordPress.  You also learned how to import Elementor templates for rapid page development.  Subscribe to my email newsletter or connect with me on social media to get notifications when I release new Elementor tutorials in the future.  Download the project files and Elementor templates used in this tutorial from my free online course.