HTML to Elementor
Website kits

Mobile app landing page

App landing page with its own top bar, store buttons, three features, three steps, screenshot deep-dives, user quotes, plans, FAQ and a get-the-link form.

Page Mobile app Landing page App download FAQ Full page
Preview of the Mobile app landing page template

The top of the template as it renders in a browser. Images become placeholders when you import it.

When to use it

The page your ads, App Store search campaigns and QR codes point to, built so a stranger can decide to install within one scroll. The top bar carries only the name and one Get the app button, because a landing page that offers a menu loses visitors to it. The hero states the job in one line and puts both store buttons beside the phone screenshot, with the price and system requirements in small print so nobody installs and then feels misled. Three feature cards and the three-step walkthrough answer what the app does and how much effort it takes; the screenshot deep-dives show the product to anyone still unsure. Quotes, the plan teaser and the FAQ handle the remaining doubts, and the closing band repeats the store buttons beside an email-me-the-link form for desktop visitors. Replace the screenshots first with real captures from your app, then the store links. For paid traffic, make the H1 echo the ad headline people clicked; a mismatch between ad and page costs installs.

What it converts to

Converted with the Native components mode. The component list below is what this template produces — not a generic example.

  • Container × 43
  • Container (grid) × 2
  • Container (grid, 3 columns) × 4
  • Container (grid, 2 columns) × 1
  • HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
  • Text Editor × 32
  • Button × 7
  • Heading × 15
  • Image × 4
  • Counter × 3
  • Icon Box × 3
  • Icon List × 5
  • Star Rating × 3
  • Testimonial × 3
  • Accordion × 1
  • Form × 1

Things worth knowing

  • The top bar is part of the page, not a header template: the wordmark becomes a Text Editor and Get the app a Button. Set the page to Elementor Canvas (Page Settings, Page Layout) so the theme’s own header and footer do not appear around it.
  • The three feature cards convert to Icon Box widgets (redo, check and bullseye icons in rounded dark frames), the three numbers in the dark band to Counter widgets, and each quote card to a Star Rating widget above a Testimonial widget with the name and role in separate fields.
  • The store buttons are ordinary Button widgets, not official store badges, and point to the page’s #download anchor; replace each link with your App Store or Google Play URL. The five questions become one Accordion widget.
  • The email-me-the-link form converts to an Elementor Pro Form with one email field and its label. It needs Elementor Pro and the original action is removed, so after import add a Redirect action that points to the thank-you page.
  • The deep-dive rows keep their alternating image side on desktop (the middle row is a reversed flex row) and stack text first, image second below 780px. The screenshots arrive as Image widgets with empty image slots; select your own captures from the Media Library.

The HTML

This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.

Show the HTML source
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Simmerly — plan the week’s dinners in ten minutes</title>
  <style>
    body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2a1736;background:#ffffff}
    .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
    section{padding:88px 0}
    h1,h2,h3{font-family:'Outfit',Helvetica,Arial,sans-serif;color:#2a1736;font-weight:700}
    h1{font-size:60px;line-height:1.04;letter-spacing:-.03em;margin:0 0 20px}
    h2{font-size:42px;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
    h3{font-size:22px;line-height:1.3;margin:0 0 8px}
    p{font-size:17px;line-height:1.7;color:#6d5f75;margin:0 0 18px}
    .eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2e8b57;margin:0 0 14px}
    .top{background:#fff3d6}
    .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
    .logo{margin:0;font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#2a1736}
    .logo a{color:#2a1736;text-decoration:none}
    .get{display:inline-block;padding:11px 20px;border-radius:12px;background:#ff6b35;color:#2a1736;text-decoration:none;font-weight:800;font-size:15px}
    .hero{background:#fff3d6;padding:40px 0 96px}
    .hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
    .lead{font-size:19px;max-width:540px}
    .stores{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}
    .store{display:inline-block;padding:16px 24px;border-radius:14px;background:#2a1736;color:#ffffff;text-decoration:none;font-weight:800;font-size:16px}
    .store-alt{display:inline-block;padding:14px 22px;border-radius:14px;border:2px solid #2a1736;color:#2a1736;text-decoration:none;font-weight:800;font-size:16px}
    .fine{font-size:14px;margin:0}
    .phone{width:100%;max-width:420px;height:540px;object-fit:cover;border-radius:40px;display:block;margin:0 auto;background:#ffffff}
    .facts{background:#2a1736;padding:44px 0}
    .facts .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
    .fact{text-align:center}
    .fact .n{display:block;font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:46px;font-weight:700;line-height:1.1;color:#ff6b35;margin:0 0 6px}
    .fact .l{display:block;font-size:16px;color:#fff3d6}
    .head{max-width:660px;margin:0 0 44px}
    .head.center{text-align:center;margin-left:auto;margin-right:auto}
    .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
    .card{background:#fff3d6;border-radius:24px;padding:32px 30px}
    .card-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:#2a1736;color:#ff6b35;font-size:22px;margin:0 0 20px}
    .card p{font-size:16px;margin:0}
    .butter{background:#fff3d6}
    .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
    .step{background:#ffffff;border-radius:24px;padding:30px}
    .step-no{display:inline-block;margin:0 0 16px;padding:6px 14px;border-radius:999px;background:#ff6b35;color:#2a1736;font-size:14px;font-weight:800;letter-spacing:.04em}
    .step p{font-size:16px;margin:0}
    .dive{display:flex;gap:64px;align-items:center;margin:0 0 88px}
    .dive > *{flex:1 1 0;min-width:0}
    .dive.flip{flex-direction:row-reverse}
    .dive:last-child{margin-bottom:0}
    .shot{width:100%;height:520px;object-fit:cover;border-radius:32px;display:block;background:#fff3d6}
    .ticks{display:flex;flex-direction:column;gap:12px;margin:8px 0 0}
    .ticks > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#2a1736}
    .tk{color:#2e8b57;font-size:16px;font-weight:800}
    .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
    .quote{background:#ffffff;border-radius:24px;padding:30px}
    .stars{margin:0 0 14px;font-size:20px;letter-spacing:.12em;color:#ff6b35}
    .quote figure{margin:0}
    .quote blockquote{margin:0 0 18px;font-size:17px;line-height:1.65;color:#2a1736}
    .quote figcaption{font-size:14px;color:#6d5f75}
    .quote cite{font-style:normal;font-weight:800;color:#2a1736}
    .plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:900px;margin:0 auto}
    .plan{background:#fff3d6;border-radius:24px;padding:34px}
    .plan.dark{background:#2a1736}
    .plan.dark h3,.plan.dark .price{color:#ffffff}
    .plan.dark p{color:#fff3d6}
    .plan.dark .ticks > div{color:#ffffff}
    .plan.dark .tk{color:#ff6b35}
    .price{font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:44px;font-weight:700;line-height:1;color:#2a1736;margin:6px 0 12px}
    .price span{font-size:17px;font-weight:600}
    .plan .ticks{margin:0 0 26px}
    .buy{display:inline-block;padding:14px 24px;border-radius:14px;background:#2a1736;color:#ffffff;text-decoration:none;font-weight:800;font-size:15px}
    .buy-hot{display:inline-block;padding:14px 24px;border-radius:14px;background:#ff6b35;color:#2a1736;text-decoration:none;font-weight:800;font-size:15px}
    .more{text-align:center;margin:28px 0 0}
    .more a{color:#2a1736;font-weight:800}
    .faq{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
    details{background:#ffffff;border-radius:18px;padding:20px 24px}
    summary{font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:19px;font-weight:600;color:#2a1736;cursor:pointer}
    details p{margin:12px 0 0;font-size:16px}
    .final{background:#2a1736}
    .final .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
    .final h2{color:#ffffff}
    .final p{color:#fff3d6}
    .final .store{background:#ff6b35;color:#2a1736}
    .final .store-alt{border-color:#fff3d6;color:#ffffff}
    .final .form-title{color:#2a1736}
    form{background:#ffffff;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:14px}
    .form-title{font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;color:#2a1736;margin:0}
    label{font-size:14px;font-weight:800;color:#2a1736}
    input{font:inherit;font-size:16px;padding:13px 14px;border:2px solid #6d5f75;border-radius:12px;background:#ffffff;color:#2a1736}
    .send{padding:15px 24px;border:0;border-radius:14px;background:#2a1736;color:#ffffff;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
    form .fine{color:#6d5f75}
    .legal{background:#2a1736;border-top:1px solid #6d5f75;padding:24px 0}
    .legal .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
    .legal p{margin:0;font-size:14px;color:#fff3d6}
    .legal a{color:#fff3d6}
    @media(max-width:780px){
      section{padding:56px 0}
      .wrap{padding:0 16px}
      .top .wrap{padding-top:14px;padding-bottom:14px}
      .logo{font-size:22px}
      .get{padding:9px 16px;font-size:14px}
      .hero{padding:28px 0 56px}
      .hero .wrap,.final .wrap,.cards,.steps,.quotes,.plans{grid-template-columns:minmax(0,1fr);gap:28px}
      .dive,.dive.flip{flex-direction:column;align-items:stretch;gap:28px}
      .facts .wrap{grid-template-columns:minmax(0,1fr);gap:22px}
      .dive{margin:0 0 56px}
      h1{font-size:40px}
      h2{font-size:30px}
      .lead{font-size:17px}
      .phone{height:440px;max-width:340px}
      .shot{height:380px}
      .plan{padding:28px 24px}
      .legal .wrap{flex-direction:column;gap:6px}
    }
  </style>
</head>
<body>
  <header class="top">
    <div class="wrap">
      <p class="logo"><a href="/">Simmerly</a></p>
      <a class="get" href="#download">Get the app</a>
    </div>
  </header>

  <section class="hero">
    <div class="wrap">
      <div>
        <p class="eyebrow">Meal planner and grocery list</p>
        <h1>Plan the week’s dinners in ten minutes</h1>
        <p class="lead">Simmerly suggests seven dinners that fit your diet, your budget and what is already in the fridge, then turns them into one grocery list sorted by aisle.</p>
        <div class="stores">
          <a class="store" href="#download">Download on iPhone</a>
          <a class="store-alt" href="#download">Get it on Android</a>
        </div>
        <p class="fine">Free to download · Premium from $3.33 a month, billed yearly · iOS 16 and Android 10 or later</p>
      </div>
      <img class="phone" src="https://htmltoelementor.com/wp-content/uploads/hte-library/app/hero-phone.jpg" width="1000" height="1250" alt="Hand holding a smartphone whose screen shows colorful abstract meal plan cards against a pale yellow background">
    </div>
  </section>

  <section class="facts">
    <div class="wrap">
      <div class="fact"><span class="n">1,400</span><span class="l">tested recipes with prep times</span></div>
      <div class="fact"><span class="n">12</span><span class="l">diet and allergy filters</span></div>
      <div class="fact"><span class="n">6</span><span class="l">people on one shared list</span></div>
    </div>
  </section>

  <section>
    <div class="wrap">
      <div class="head center">
        <p class="eyebrow">Why people switch</p>
        <h2>Less deciding, fewer wasted groceries</h2>
        <p>Three things Simmerly does every week so you do not have to.</p>
      </div>
      <div class="cards">
        <div class="card"><span class="card-icon">↻</span><h3>A week planned for you</h3><p>Seven dinners suggested on Sunday morning. Swap any night with one tap and the plan rebalances around it.</p></div>
        <div class="card"><span class="card-icon">✓</span><h3>One list, sorted by aisle</h3><p>Every ingredient for the week merged into one list, with quantities added up and grouped the way a store is laid out.</p></div>
        <div class="card"><span class="card-icon">◎</span><h3>Cook from what you have</h3><p>Tell Simmerly what is in the fridge and it plans those ingredients in first, before they go off.</p></div>
      </div>
    </div>
  </section>

  <section class="butter">
    <div class="wrap">
      <div class="head center">
        <p class="eyebrow">How it works</p>
        <h2>From empty fridge to a full week in three steps</h2>
      </div>
      <div class="steps">
        <div class="step"><p class="step-no">Step 1</p><h3>Tell it how you eat</h3><p>Pick your diet, allergies, household size and how long you want to spend cooking on weeknights.</p></div>
        <div class="step"><p class="step-no">Step 2</p><h3>Review the week</h3><p>Look over the seven suggested dinners, swap the ones you do not fancy and lock the nights you eat out.</p></div>
        <div class="step"><p class="step-no">Step 3</p><h3>Shop and cook</h3><p>Take the list to the store or send it to your partner, then follow the step-by-step cook mode each night.</p></div>
      </div>
    </div>
  </section>

  <section>
    <div class="wrap">
      <div class="dive">
        <div>
          <p class="eyebrow">The weekly plan</p>
          <h2>See the whole week on one screen</h2>
          <p>Dinners sit in a simple seven-day view with cooking times and portions. Drag a meal to another night and leftovers move with it.</p>
          <div class="ticks">
            <div><span class="tk">✓</span><span>Leftover nights planned automatically</span></div>
            <div><span class="tk">✓</span><span>Quick meals on the nights you mark as busy</span></div>
            <div><span class="tk">✓</span><span>A weekly cost estimate before you shop</span></div>
          </div>
        </div>
        <img class="shot" src="https://htmltoelementor.com/wp-content/uploads/hte-library/app/planner-counter.jpg" width="1000" height="1250" alt="Smartphone on a kitchen counter beside fresh vegetables, its screen showing an abstract grid of colored tiles">
      </div>
      <div class="dive flip">
        <div>
          <p class="eyebrow">The grocery list</p>
          <h2>Shop once, without the second trip</h2>
          <p>The list groups items by aisle and ticks off what you already have at home. Share it and everyone in the household sees changes as they happen.</p>
          <div class="ticks">
            <div><span class="tk">✓</span><span>Quantities merged across recipes</span></div>
            <div><span class="tk">✓</span><span>Pantry staples hidden until they run low</span></div>
            <div><span class="tk">✓</span><span>Works offline in stores with no signal</span></div>
          </div>
        </div>
        <img class="shot" src="https://htmltoelementor.com/wp-content/uploads/hte-library/app/grocery-aisle.jpg" width="1000" height="1250" alt="Woman in a grocery store produce aisle checking her phone while holding a basket of vegetables">
      </div>
      <div class="dive">
        <div>
          <p class="eyebrow">Cook mode</p>
          <h2>Step-by-step, with the screen kept awake</h2>
          <p>Cook mode shows one step at a time in large type, runs the timers for you and keeps the phone from locking while your hands are busy.</p>
          <div class="ticks">
            <div><span class="tk">✓</span><span>Built-in timers for every timed step</span></div>
            <div><span class="tk">✓</span><span>Ingredients scaled to your household</span></div>
            <div><span class="tk">✓</span><span>Notes you add are kept for next time</span></div>
          </div>
        </div>
        <img class="shot" src="https://htmltoelementor.com/wp-content/uploads/hte-library/app/couple-cooking.jpg" width="1600" height="1000" alt="Couple cooking together in a bright home kitchen with a phone propped against a jar on the counter">
      </div>
    </div>
  </section>

  <section class="butter">
    <div class="wrap">
      <div class="head center">
        <p class="eyebrow">From people who plan with Simmerly</p>
        <h2>What changes after a month</h2>
      </div>
      <div class="quotes">
        <div class="quote">
          <p class="stars">★★★★★</p>
          <figure>
            <blockquote>“Sunday planning used to take an hour and a notebook. Now I swap two dinners over coffee and the list is done.”</blockquote>
            <figcaption><cite>Hannah K.</cite> — parent of two</figcaption>
          </figure>
        </div>
        <div class="quote">
          <p class="stars">★★★★★</p>
          <figure>
            <blockquote>“The pantry feature is the reason I pay. Half a bag of spinach no longer ends up in the bin every Friday.”</blockquote>
            <figcaption><cite>Luis M.</cite> — Premium since spring</figcaption>
          </figure>
        </div>
        <div class="quote">
          <p class="stars">★★★★☆</p>
          <figure>
            <blockquote>“We share one list between three flatmates. Whoever passes the store just opens it and buys what is left.”</blockquote>
            <figcaption><cite>Aisha B.</cite> — shared flat</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="wrap">
      <div class="head center">
        <p class="eyebrow">Plans</p>
        <h2>Start free, upgrade when the week gets busy</h2>
      </div>
      <div class="plans">
        <div class="plan">
          <h3>Free</h3>
          <p class="price">$0</p>
          <p>Everything you need to plan dinners for one household.</p>
          <div class="ticks">
            <div><span class="tk">✓</span><span>Seven-day dinner plan</span></div>
            <div><span class="tk">✓</span><span>Grocery list sorted by aisle</span></div>
            <div><span class="tk">✓</span><span>Cook mode with timers</span></div>
          </div>
          <a class="buy" href="#download">Download free</a>
        </div>
        <div class="plan dark">
          <h3>Premium</h3>
          <p class="price">$4.99<span> / month</span></p>
          <p>Or $39.99 a year. Try it free for 14 days from inside the app.</p>
          <div class="ticks">
            <div><span class="tk">✓</span><span>Pantry tracking and use-it-up plans</span></div>
            <div><span class="tk">✓</span><span>Shared list for two people</span></div>
            <div><span class="tk">✓</span><span>Nutrition breakdown per meal</span></div>
          </div>
          <a class="buy-hot" href="/pricing/">See Premium</a>
        </div>
      </div>
      <p class="more"><a href="/pricing/">Compare every feature and the family plan</a></p>
    </div>
  </section>

  <section class="butter">
    <div class="wrap">
      <div class="head center">
        <p class="eyebrow">Questions</p>
        <h2>Before you download</h2>
      </div>
      <div class="faq">
        <details><summary>Is Simmerly really free?</summary><p>Yes. The weekly plan, the grocery list and cook mode are free with no time limit. Premium adds pantry tracking, sharing and nutrition details.</p></details>
        <details><summary>Does it work for vegetarian or allergy-friendly diets?</summary><p>Choose from twelve diet and allergy filters, including vegetarian, vegan, gluten-free and nut-free. Recipes that do not match are never suggested.</p></details>
        <details><summary>Which phones does it run on?</summary><p>iPhone with iOS 16 or later and Android phones with Android 10 or later. Your plan syncs between devices when you sign in.</p></details>
        <details><summary>Can my partner and I use the same list?</summary><p>Yes, with Premium. Invite one other person to your household list; the family plan covers up to six people.</p></details>
        <details><summary>What happens to my data?</summary><p>Your plans and lists are stored to sync them between your devices. We do not sell personal data; the privacy policy explains what we keep and how to delete it.</p></details>
      </div>
    </div>
  </section>

  <section class="final" id="download">
    <div class="wrap">
      <div>
        <h2>Your first week, planned tonight</h2>
        <p>Download Simmerly on your phone and have next week’s dinners and grocery list ready in about ten minutes.</p>
        <div class="stores">
          <a class="store" href="#download">Download on iPhone</a>
          <a class="store-alt" href="#download">Get it on Android</a>
        </div>
      </div>
      <form action="#" method="post">
        <p class="form-title">On a computer? Get the link by email</p>
        <label for="dl-email">Email address</label>
        <input id="dl-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required>
        <button class="send" type="submit">Email me the download link</button>
        <p class="fine">One email with both store links. No newsletter unless you ask for it.</p>
      </form>
    </div>
  </section>

  <footer class="legal">
    <div class="wrap">
      <p>© 2026 Simmerly Labs, Inc. · 48 Quillon Lane, Brookhaven</p>
      <p><a href="/privacy/">Privacy policy</a> · <a href="/terms/">Terms of use</a> · <a href="mailto:[email protected]">[email protected]</a></p>
    </div>
  </footer>
</body>
</html>