Elementor iOS 17 Landing Page Info Toggle Overlay Design

Elementor iOS 17 Landing Page Info Toggle Overlay Design

Level up your game with the CSS Course for Elementor Users

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:

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.

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
  • 30 day 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.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • 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.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* 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 2701 Elements right here:

Checkout the Elementor Addon Finder directly

2 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!

Leave a Reply