Step-by-step guided content sections with conditional display functionality.

Learn more

Guide your users, One step at a time

About

Step 2 allows you to create marvelous step-by-step instructions that can inform or direct users to right where you need them.

    Step 1

    How it Works

    Step by step

    This step has a required option field below that can be used to conditionally load corresponding steps. First try advancing to the next step without selecting an option to see what happens when you don't provide input to a required field.

    Choose an option

    Step 2

    Required Fields

    You are able to advance past a step without filling in any required fields and an incomplete icon will display next to the step in the sidebar. However if any step has a display condition requesting a value from a required field you will not be able to advance.

    In this example the next step has a condition that uses the field found in Step 1. Clicking the next button will return you to step 1 so that you can provide the required input.

    Step 2

    Branching Steps

    This step displays when Option A has been selected. Further branches can be made using the provided input elements. Below is an example of radio input options. Select an option to advance to the next step.

    Choose an option

    Step 2

    Branching Steps

    This step displays when Option B has been selected. Further branches can be made using the provided input elements. Below is an example a select input field. Select an option to advance to the next step.

    Step 3

    Sidebar Navigation

    At any point you can return to a previous step to modify your input. The steps will automatically update according to those changes.

    In this example a checkbox field is provided to confirm that you do not want to modify your input. If you advance without clicking the checkbox you will not be able to complete the final step.

    Step 3

    Sidebar Navigation

    At any point you can return to a previous step to modify your input. The steps will automatically update according to those changes.

    In this example a checkbox field is provided to confirm that you do not want to modify your input. If you advance without clicking the checkbox you will not be able to complete the final step.

    Step 3

    Sidebar Navigation

    At any point you can return to a previous step to modify your input. The steps will automatically update according to those changes.

    In this example a checkbox field is provided to confirm that you do not want to modify your input. If you advance without clicking the checkbox you will not be able to complete the final step.

    Step 3

    Sidebar Navigation

    At any point you can return to a previous step to modify your input. The steps will automatically update according to those changes.

    In this example a checkbox field is provided to confirm that you do not want to modify your input. If you advance without clicking the checkbox you will not be able to complete the final step.

    Step 3

    Sidebar Navigation

    At any point you can return to a previous step to modify your input. The steps will automatically update according to those changes.

    In this example a checkbox field is provided to confirm that you do not want to modify your input. If you advance without clicking the checkbox you will not be able to complete the final step.

    Step 3

    Sidebar Navigation

    At any point you can return to a previous step to modify your input. The steps will automatically update according to those changes.

    In this example a checkbox field is provided to confirm that you do not want to modify your input. If you advance without clicking the checkbox you will not be able to complete the final step.

    Confirm

    Final Step

    This is the final step and the complete button below will display a customizable splash page. Any step with incomplete required input will load instead of the splash page and prevent the steps from being completed.

    Confirm

    Final Step

    This is the final step and the complete button below will display a customizable splash page. Any step with incomplete required input will load instead of the splash page and prevent the steps from being completed.

    Confirm

    Final Step

    This is the final step and the complete button below will display a customizable splash page. Any step with incomplete required input will load instead of the splash page and prevent the steps from being completed.

    Confirm

    Final Step

    This is the final step and the complete button below will display a customizable splash page. Any step with incomplete required input will load instead of the splash page and prevent the steps from being completed.

    Confirm

    Final Step

    This is the final step and the complete button below will display a customizable splash page. Any step with incomplete required input will load instead of the splash page and prevent the steps from being completed.

    Confirm

    Final Step

    This is the final step and the complete button below will display a customizable splash page. Any step with incomplete required input will load instead of the splash page and prevent the steps from being completed.

    Complete!
    An optional restart button can be provided on the spash page to restart the steps.

    Features

    About
      Getting Started

      Using The Page Inspector

      Choose a browser to get started.

      Choose an OS

      Choose an Operating system

      Tailor the instructions by choosing your operating system.

      Step 1

      Navigate to any web page

      Launch the Google Chrome browser on your computer. Enter the URL of the webpage you want to inspect in the address bar and press Enter to load the page.

      Step 1

      Navigate to any web page

      Launch the Safari web browser on your computer. Enter the URL of the webpage you want to inspect in the address bar and press Enter to load the page.

      Step 1

      Navigate to any web page

      Launch the Mozilla Firefox web browser on your computer. Enter the URL of the webpage you want to inspect in the address bar and press Enter to load the page.

      Step 1

      Navigate to any web page

      Launch the Microsoft Edge web browser on your computer. Enter the URL of the webpage you want to inspect in the address bar and press Enter to load the page.

      Step 1

      Navigate to any web page

      Launch the Opera web browser on your computer. Enter the URL of the webpage you want to inspect in the address bar and press Enter to load the page.

      Step 2

      Access the Chrome Menu

      Click on the three vertical dots (⋮) located at the top-right corner of the browser window.

      In the dropdown menu that appears, hover over the "More Tools" option.

      In the expanded submenu, click on "Developer Tools." Alternatively, you can use the keyboard shortcut:

      Ctrl
      +
      Shift
      +
      I
      Step 2

      Access the Chrome Menu

      Click on the three horizontal lines located at the top-right corner of the browser window.

      In the dropdown menu that appears, hover over the "More Tools" option.

      In the expanded submenu, click on "Developer Tools." Alternatively, you can use the keyboard shortcut:

      Cmd
      +
      Option
      +
      I
      Step 2

      Access the Develop Menu

      If you don't see the Develop menu in your Safari menu bar, you'll need to enable it first.

      • Go to the Safari menu in the top-left corner of the screen.
      • Select "Preferences."
      • Click on the "Advanced" tab.
      • Check the box next to "Show Develop menu in menu bar."

      Step 2

      Access the Firefox Menu

      Click on the three horizontal lines (☰) located at the top-right corner of the browser window.

      In the dropdown menu that appears, hover over the "Web Developer" option.

      In the expanded submenu, click on "Inspector." Alternatively, you can use the keyboard shortcut:

      Ctrl
      +
      Shift
      +
      C
      Step 2

      Access the Firefox Menu

      Click on the "Firefox" menu in the top-left corner of the screen.

      In the dropdown menu that appears, hover over the "Web Developer" option.

      In the expanded submenu, click on "Inspector." Alternatively, you can use the keyboard shortcut:

      Cmd
      +
      Option
      +
      C
      Step 2

      Access the Edge Menu

      Click on the three horizontal dots (⋯) located at the top-right corner of the browser window.

      In the dropdown menu that appears, hover over the "More Tools" option.

      In the expanded submenu, click on "Developer Tools." Alternatively, you can use the keyboard shortcut:

      Ctrl
      +
      Shift
      +
      I
      Step 2

      Access the Edge Menu

      Click on the "Edge" menu in the top-left corner of the screen.

      In the dropdown menu that appears, hover over the "More Tools" option.

      In the expanded submenu, click on "Developer Tools." Alternatively, you can use the keyboard shortcut:

      Cmd
      +
      Option
      +
      I
      Step 2

      Access the Opera Menu

      Click on the red "O" logo located at the top-left corner of the browser window.

      In the dropdown menu that appears, hover over the "Developer" option.

      In the expanded submenu, click on "Developer Tools." Alternatively, you can use the keyboard shortcut:

      Ctrl
      +
      Shift
      +
      I
      Step 2

      Access the Opera Menu

      Click on the "Opera" menu in the top-left corner of the screen.

      In the dropdown menu that appears, hover over the "Developer" option.

      In the expanded submenu, click on "Developer Tools." Alternatively, you can use the keyboard shortcut:

      Cmd
      +
      Option
      +
      I
      Step 3

      Open the Page Inspector

      Once the Developer Tools panel opens, you'll see a variety of tabs at the top. Look for the "Elements" tab. It might be named "Inspector" or "Elements" depending on the version of Chrome you're using.

      Click on the "Elements" tab to open the Page Inspector. This tab allows you to inspect and manipulate the HTML and CSS of the page.

      Step 3

      Open the Web Inspector

      After enabling the Develop menu, you'll see it in the menu bar.

      • Click on the "Develop" menu in the menu bar.
      • In the dropdown menu, you'll see a list of available devices and web pages that you can inspect.
      • Locate the webpage you want to inspect and hover over it.
      • Another submenu will appear, listing various options.
      • Click on "Show Web Inspector" for the webpage you want to inspect.

      Step 3

      Open the Page Inspector

      Once the Page Inspector panel opens, you'll see a split view.
      The left side of the panel displays the HTML structure of the page in a tree-like format.

      The right side of the panel shows the selected element's styles and properties.

      Step 3

      Open the Developer Tools

      Once the Developer Tools panel opens, you'll see a variety of tabs at the top. The default tab is usually "Elements," which corresponds to the Page Inspector.

      Step 3

      Open the Developer Tools

      Once the Developer Tools panel opens, you'll see a variety of tabs at the top. The default tab is usually "Elements," which corresponds to the Page Inspector.

      Step 4

      Explore the Page Inspector

      In the Page Inspector, you can navigate through the HTML structure of the page. You can select elements by clicking on them in the Elements panel or by hovering over elements on the actual webpage.

      On the right-hand side of the panel, you can see the styles associated with the selected element in the "Styles" section. You can modify these styles in real-time to see how they affect the appearance of the page.

      Step 4

      Explore the Page Inspector

      Once the Web Inspector panel opens, you'll see a variety of tabs at the top. The main tabs are usually "Elements," "Resources," "Network," "Console," and more.

      Click on the "Elements" tab to open the Web Inspector. This tab allows you to inspect and manipulate the HTML and CSS of the page.

      Step 4

      Explore the Page Inspector

      In the Page Inspector, you can navigate through the HTML structure of the page by clicking on elements in the left panel or by hovering over elements on the actual webpage.

      The right panel displays various information about the selected element, including its box model, applied styles, and computed values.

      Step 4

      Explore the Developer Tools

      In the Elements tab, you can navigate through the HTML structure of the page. Clicking on elements in the left panel or hovering over elements on the actual webpage will highlight their corresponding parts in the HTML.

      Step 4

      Explore the Developer Tools

      In the Elements tab, you can navigate through the HTML structure of the page. Clicking on elements in the left panel or hovering over elements on the actual webpage will highlight their corresponding parts in the HTML.

      Finished

      Modify Styles and Elements

      You can modify the styles of elements by editing the CSS properties in the right panel. Any changes you make will be reflected in real-time on the webpage.

      Note that the names of the options and the appearance might vary slightly based on the version of the browser you're using, but the fundamental steps for accessing and using the Page Inspector should remain consistent.

      report_gmailerrorred

      Input Validation

      Ensure user progress with mandatory input fields to move forward.

      alt_route

      Contextual Guidance

      Direct users to relevant steps based on their input with conditional logic.

      rule

      Visual Cues

      Use icon indicators to clearly signal step completion or incompleteness.

      post_add

      Versatile Content

      Add any content type to your steps without limitations

      menu_open

      Tailored Navigation

      Customize the sidebar menu for user-friendly navigation control.

      phonelink

      Adaptive Display

      Choose to collapse the sidebar at a set width or make it collapsed by default.

        Gather Ingredients

        First gather the necessary ingredients for the Cake:

        • 2 1/2 cups all-purpose flour
        • 1 1/2 cups granulated sugar
        • 1/2 cup unsalted butter, softened
        • 1/2 cup vegetable oil
        • 4 large eggs
        • 1 cup buttermilk
        • 1 teaspoon vanilla extract
        • 1/2 teaspoon almond extract (optional)
        • 2 teaspoons baking powder
        • 1/2 teaspoon baking soda
        • 1/2 teaspoon salt
        • 1 1/2 cups fresh strawberries, hulled and chopped

        For the Strawberry Frosting:

        • 1 cup unsalted butter, softened
        • 4 cups powdered sugar
        • 1/2 cup fresh strawberries, pureed
        • 1 teaspoon vanilla extract
        • A pinch of salt
        Stacks Image 5252
        Prepare the Cake
        Stacks Image 5260
        1. In a medium-sized bowl, whisk together the flour, baking powder, baking soda, and salt. Set this dry mixture aside.
        2. In a large mixing bowl, cream together the softened butter, granulated sugar, and vegetable oil until the mixture is light and fluffy.
        3. Add the eggs one at a time, mixing well after each addition. Stir in the vanilla extract (and almond extract if you're using it).
        4. Gradually add the dry mixture to the wet mixture, alternating with the buttermilk. Start and end with the dry mixture. Mix until just combined; do not overmix.
        5. Gently fold in the chopped fresh strawberries.
        Bake the Cake
        Stacks Image 5267
        1. Preheat your oven to 350°F (175°C). Grease and flour two 9-inch round cake pans.
        2. Divide the cake batter evenly between the prepared pans.
        3. Bake in the preheated oven for 25-30 minutes, or until a toothpick inserted into the center of the cakes comes out clean.
        4. Allow the cakes to cool in the pans for about 10 minutes, then remove them from the pans and place them on a wire rack to cool completely.
        Make the Frosting
        Stacks Image 5274
        1. While the cakes are cooling, prepare the strawberry frosting. In a mixing bowl, beat the softened butter until creamy and smooth.
        2. Gradually add the powdered sugar, one cup at a time, and beat until well combined.
        3. Add the strawberry puree, vanilla extract, and a pinch of salt. Mix until the frosting is smooth and has a spreadable consistency.
        Assemble the Cake
        Stacks Image 5281
        1. Once the cakes are completely cooled, place one layer on a serving plate or cake stand.
        2. Spread a layer of strawberry frosting on top of the first cake layer.
        3. Carefully place the second cake layer on top.
        4. Frost the top and sides of the cake with the remaining strawberry frosting. You can decorate the cake with additional sliced strawberries if desired.
        Serve and Enjoy!
        Stacks Image 5288

        Slice and serve your homemade strawberry cake. It's perfect for special occasions or as a delightful treat any day of the year!

        Enjoy your homemade strawberry cake!

        Style Examples

        About
          Getting Started

          Custom Heading

          Stacks Image 4114

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae.

          Preperation Guide

          Custom Heading

          Custom Subheading

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

          Starting The Activity

          Custom Heading

          Custom Subheading

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

          Winding Down

          Custom Heading

          Custom Subheading

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

          Finalizing The Event

          Custom Heading

          Custom Subheading

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

          Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

          Complete!
          Congratulations you have completed all of the steps successfully
            Step 1

            Custom Heading

            Stacks Image 4442

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae.

            Step 2

            Custom Heading

            Custom Subheading

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

            Step 3

            Custom Heading

            Custom Subheading

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

            Step 4

            Custom Heading

            Custom Subheading

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

            Step 5

            Custom Heading

            Custom Subheading

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

            Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

            Complete!
            Congratulations you have completed all of the steps successfully
              Step 1

              Custom Heading

              Stacks Image 4131

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae.

              Step 2

              Custom Heading

              Custom Subheading

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

              Step 3

              Custom Heading

              Custom Subheading

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

              Step 4

              Custom Heading

              Custom Subheading

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

              Step 5

              Custom Heading

              Custom Subheading

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

              Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

              Complete!
              Congratulations you have completed all of the steps successfully
                Step 1
                Stacks Image 4281

                Custom Heading

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae.

                Step 2

                Custom Heading

                Custom Subheading

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

                Step 3

                Custom Heading

                Custom Subheading

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

                Step 4

                Custom Heading

                Custom Subheading

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

                Step 5

                Custom Heading

                Custom Subheading

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

                Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

                Complete!
                Congratulations you have completed all of the steps successfully

                Step 2

                Purchase

                Purchase includes an example project file to show you how all the examples on this page were created.

                19.99

                More

                1LD Home
                Deluxe Stacks
                More Stacks
                RapidWeaver Projects
                RapidWeaver Themes

                Contact

                Have questions about the stack or need some help? Feel free to contact us at the link below. Most inquiries are replied to within 1-2 working days.

                Newsletter

                Join our newsletter to get notified when we have discounts, updates, and new releases!