Instructional Steps

Instructional steps for products.

Instructional steps are best displayed using a <section> with section-color section-color-complement styles applied to it.

  1. Create your spreadsheet

    Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the Use this template button.

    Drop dates, text and links to media into the appropriate columns. For more about working with our template, see our help docs.

    Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.

  2. Publish to the web

    Under the File menu, select Publish to the Web.

    In the next window, click the blue publish button. When asked, Are you sure…? click OK.

    Now, copy the URL that appears in the center of the window. You'll use this in the next step.

  3. Generate your timeline

    Copy/paste spreadsheet URL into the box below to generate your timeline.

    Make sure you've published the spreadsheet.

                
<section class="section-color section-color-complement">
    <ol class="instructional-steps">
        <li class="step grid">
            <div class="step-number column-2">
                <h6>Create your spreadsheet</h6>
            </div>
            <div class="step-details column-10">
                <p>Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the <mark>Use this template</mark> button.</p>
                <p>Drop dates, text and links to media into the appropriate columns. For more about working with our template, see our help docs.</p>
                <p class="note note-complement">Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p>
            </div>
        </li>
        <li class="step grid">
            <div class="step-number column-2">
                <h6>Publish to the web</h6>
            </div>
            <div class="step-details column-10">
                <p>Under the File menu, select <mark>Publish to the Web</mark>.</p>
                <p>In the next window, click the blue <mark>publish</mark> button. When asked, <mark>Are you sure…?</mark> click <mark>OK</mark>.</p>
                <p>Now, copy the URL that appears in the center of the window. You'll use this in the next step.</p>
            </div>
        </li>
        <li class="step grid">
            <div class="step-number column-2">
                <h6>Generate your timeline</h6>
            </div>
            <div class="step-details column-10">
                <p>Copy/paste spreadsheet URL into the box below to generate your timeline.</p>
                <p class="note note-complement">Make sure you've published the spreadsheet.</p>
            </div>
        </li>
    </ol>
</section>