Elementor iOS 17 Landing Page Info Toggle Overlay Design
Get Premium

Elementor iOS 17 Landing Page Info Toggle Overlay Design

Element.How also offers premium tutorials! Check them here:

Elementor iOS 17 Landing Page Info Toggle Overlay Design

Table of Contents

In this tutorial, you will learn how to recreate the overlay toggle that Apple has on its iOS 17 landing page.

We will be creating this iOS 17-like info toggle with Elementor.

With a little (+) icon in the lower right corner, we are toggling on and off an extra set of information. All with a nice, sequential animation.

Check out the demo here, and be certain to click the little + toggle icons in the bottom right corners:

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

You can also visit the demo page directly.

A premium user requested this tutorial, and I liked the design and look, so here it is.

Features:

  • Sleek: Great way to show more information, only for those seeking it
  • Responsive: Works well on mobile devices too
  • Customizable: use the icon of your choice, and style the text that shows up as you wish

Let's get started!

First, import the template on your page

This is a premium tutorial. Purchase access to unlock the full tutorial.

Elementor iOS 17 Landing Page Info Toggle Overlay Design

Access tutorial

$29/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor iOS 17 Landing Page Info Toggle Overlay Design
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 6 months money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Support not needed!Due to personal circumstances, I no longer offer support. The vast majority of customers never needed support to start with, so chances are you will be just fine, the tutorials and templates provided are complete.

    I also extended the refund window from 1 to 6 months, during which you can get a full refund for any reason.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

4 Responses

  1. This looks incredible.
    I'd like to leverage this in a project coming soon to the internets near you.

    For lazy / ignorant users, would it be possible to make the whole block clickable? And still rotate the icon, display the popup, etc? I've dealt with users not clicking on icons even when they're obvious.

    1. Hey Market!

      Thank you glad it's to your liking!

      I agree that little toggle isn't very remarkable, even less so actually on Apple's own page.

      I had a discussion with this through email with an Element.how user, here was my thoughts:

      Yes you are quite right [about the toggle being easy to miss], that's the first thing I noticed when someone sent me that design, asking for a tutorial...

      I was like, nobody even sees these little toggles, or have any clue what they do, what's the point?

      So in my demo I tried to make them stand out quite a bit more than what Apple has...

      But probably this IS the point, Apple didn't want to distract people with too much information and text... but still wanted it there for those who REALLY wanted more information.

      Something like this anyway. So 100% intentional on their part.

      Back to your question: yes the whole thing could be clickable. For this, add this CSS:

      .contentSwapToggle.contentSwapToggle.contentSwapToggle {
    position: static;
}

.contentSwapToggle.contentSwapToggle.contentSwapToggle.contentSwapToggle button::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
}

      It reverts back the toggle to be position:static though, so you will need to use flexbox, padding and margin to position it, and to remove the extra padding at the bottom of the containers. (You will understand what I mean easily after adding the CSS)

      Cheers!

  2. Hi Maxime, thanks for this tutorial! One question.. i can't seem to keep the front and overlay containers the same height. Sometimes the overlay container will be a higher height than the front container when I toggle it. Is there a way to make both heights the same throughout all screen sizes?

    1. Hey Shay!

      Could you share your page with me where you are testing this?

      In theory, the overlay is always the same height as the other container. However in some scenarios this might not hold true, if for instance there is so much content in the overlay that it has to be taller to accommodate it all.

      Maybe there are other scenarios too? That's why I'd need to see your page.

      Cheers!

Leave a Reply