admin.html

---
layout: page-layout
title: "Admin"
tagline: "How to do all the things"
---
<style type="text/css">
  .form-group {
    color: inherit;
    font: inherit;
    padding-top: 5px;
    font-size: 1.5em;
  }
  input.pswd {
    width: 100%;
    padding: 5px;
  }
  input.buttn {
    background: transparent;
    border: none;
    text-transform: uppercase;
    line-height: normal;
  }
  img.metadata-img {
    max-width: 400px;
    padding: 10px 10px 10ox 0;
    /*margin-left: 50px;*/
  }
  .dropcap {
    float: left;
    font-size: 1em;
    line-height: inherit;
    margin: 0 0 0 0;
    padding-right: 10px;
    text-transform: uppercase;
    font-weight: bold;
  }
</style>
<!-- 768 -->
<div class="visible-xs">
  <div class="container topmargin-lg">
    <h3>Hey! It looks like your screen is a bit too small <span>...</span></h3>

    <h4>To use the admin interface tools and tutorials, you need to have a screen wider than 768 pixels.</h4>
    <h4><span><em>(and a keyboard would probably help a lot too)</em></span></h4>
    <p>Trust me, this will be much easier and save you some headache! 😊</p>

  </div>

</div>

<div class="hidden-xs" id="admin-access">
  <section class="topmargin-lg bottommargin-lg">
    <div class="container">

      <!-- BEGIN PASSWORD INPUT FIELD -->
      <div class="row" id="passwordSubmitWrapper">
        <div class="clearfix topmargin-lg"></div>
          <form id="passwordSubmit" class="form-inline">
            <div class="form-group col-md-4 col-md-offset-3 col-xs-9">
              <input class="pswd" type="password" placeholder="Password" id="passwordField"></input>
            </div>
            <div class="col-md-3 col-xs-3 form-group">
              <div class="button button-blue" style="  margin-top: 0px;">
                <input class="buttn" type="submit"></input>
              </div>
            </div>
          </form>
          <div class="clearfix bottommargin-sm"></div>
          <div class="col-md-9 col-md-offset-3">
            <div class="toggle">
              <div class="togglet"><i class="toggle-closed icon-line2-info"></i><i class="toggle-open icon-line-circle-cross"></i><h5>Trouble getting in?</h5></div>

              <div class="togglec" style="display: none;">
                <img style="max-width: 300px; float: right; margin-right: 30%; margin-bottom: 50px; padding-left: 10px; padding-bottom: 30px;" src="/img/site-images/http-security.png">
                <p>
                  Make sure the URL isn't set to `https`
                </p>

                <p>
                  <em>This login isn't meant to be a secure barrier - this is just a workflow, UI cue that only admins should work on this page.<br>
                  Actual security is handled by Github and only users with permissions will be able to edit.</em>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
        <!-- END PASSWORD INPUT FIELD -->

    </div>
  </section>
</div>

<div class="content-wrap hide hidden-xs" id="admin-page">
  <section class="bg">
    <div class="container clearfix">

      <div class="tabs side-tabs clearfix" id="tabs-6">

        <ul class="tab-nav tab-nav2 clearfix">
          <li><a href="#blog">Blogging</a></li>
          <li><a href="#clients">Adding Clients</a></li>
          <li><a href="#process">Adding & Editing Flip Cards</a></li>
          <li><a href="#services">Adding a New Services Page</a></li>
          <li><a href="#bio">Editing Bio Content</a></li>
          <li><a href="#pages">Editing Page Details</a></li>
          <li><a href="#google">Google Analytics & SEO</a></li>
        </ul>

        <div class="tab-container">

          <div class="tab-content clearfix" id="blog">
            <h4 style="margin-bottom: 5px;"><a href="http://prose.io/#edifyedu/edify/tree/master/_posts">Start Blogging Now <i class="icon-arrow-right"></i> </a></h4>
            <p><em>Click the link above to go directly to the Prose.io blog interface.</em></p>
            <div class="clearfix bottommargin"></div>


            <h4>Watch the Blogging tutorial</h4>
            <p>
              This tutorial goes through the workflow for creating a new blog post and touches on how to find and add blog post content.
            </p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/wiy0v8RKmTc" frameborder="0" allowfullscreen></iframe>
            <div class="clearfix bottommargin"></div>


            <h4>Learn about the important elements that make up a Blog Post</h4>
            <p>

            </p>
            <p>
              There are three parts to that make up a blog post and each is described below. <br>
              It's important to assemble these correctly as they will enable the code rendering the files to do so properly.
            </p>

            <div class="clearfix bottommargin-sm"></div>

            <h4>Part 1: The Content</h4>

            <h5>Files:</h5>
            <p>
              All blog post files live in the folder `_posts`.
            </p>
            <p>
              There are a few key things to know about the blog post files:
            </p>
            <ul class="iconlist">
              <li>
                <i class="icon-wrench"></i>
                The <strong>file ending</strong> is `.md` (short for markdown); <br>
                this enables you to use a shorthand type of html that's faster and easier to type (more on this in a moment).
              </li>
              <li>
                <i class="icon-wrench"></i>
                The <strong>file naming pattern</strong> is `YYYY-MM-DD-blog-post-name.md`; <br>
                this is important in Jekyll so it lists and renders post chronologically (newest on top).  <em>The url for each post will only show `blog/blog-post-name`.</em>
              </li>
              <li>
                <i class="icon-wrench"></i>
                An <strong>important thing about file naming</strong>: files names should have <strong>NO capital letters, NO spaces, and NO special characters</strong> <br>
                Characters like: <strong>?, /, &, $,</strong> will cause problems in any file name. However, dashes are encouraged. <em>for example: `2017-05-25-blog-post-name.md`</em>
              </li>
            </ul>


            <h5>Images:</h5>
            <p>
              Images are not necessary for a post to work, to make a post without an image, simply leave the image meta data blank.
            </p>
            <p>However, if you do have an image, follow these guidelines for best results:</p>
            <ul class="iconlist">
              <li>
                <i class="icon-wrench"></i>
                <strong>Image file names</strong> should have <strong>NO capital letters, NO spaces, and NO special characters</strong> <br>
                Characters like: <strong>?, /, &, $,</strong> will cause problems in any file name. However, dashes are encouraged. <em>for example: `image-file-name.jpg`</em>
              </li>
              <li>
                <i class="icon-wrench"></i>
                <strong>Image file formats</strong> try to stick with `.png` and `.jpg` file formats - some of the others can cause problems and these two are more than enough to get the job done!
              </li>
              <li>
                <i class="icon-wrench"></i>
                <strong>Image sizes:</strong>
                Images are rendered three different ways in the blog; on the post listing, in the sidebar, and in the body of the post itself. The image size defined here is intended to maximize load-time efficiency & accomodate layout proportions without compromising the image quality.
                <ul>
                  <li>
                    Image should be at least 4-5 inches tall in a landscape ratio (wider than tall) - css layout should adjust to accommodate some variation within these parameters.
                  </li>
                  <li>
                    Image size assumes the picture resolution is 72 (common web image resolution - as opposed to print resolution which is 300)
                  </li>
                </ul>
              </li>
              <li>
                <i class="icon-wrench"></i>
                <strong>Multiple images: </strong> currently, blog post pages are not optimized for more than one image per post. While it is totally possible to add multiple images, they may not align perfectly.  <em>(Though they may align just fine - it depends on the rest of the content.) <strong>*This is current as of 6/9/2017</strong> </em>

              </li>
              <li>
                <i class="icon-wrench"></i>
                <strong>Image file location: </strong> all blog and client images are saved in the folder named "img". This is set to default in Prose.io so you shouldn't need to do anything with this.
              </li>
            </ul>


            <h4>Part 2: The Meta Data</h4>
            <img style="float: right; height: 300px; margin-right: 2em;" src="/img/site-images/meta-data-icon.png">
            <p>
              Meta data (aka "FrontMatter" in Jekyll) is the list of variables that allow you to enter the information once and it can be duplicated all over the site - saving you a lot of time and effort.
            </p>

            <p>
              Prose has some very handy config options that make editing this super easy (watch the video to see the workflow) but here's a breakdown and description of each part of the meta data you will find in prose.
            </p>

            <p>
              You open the metadata panel by clicking the metadata icon in the upper right corner <i class="icon-arrow-right"></i>
            </p>
            <div class="clearfix bottommargin"></div>
            <div class="col-md-7">
              <ol class="metadata-description">
                <li>
                  <strong>Publish Date:</strong>
                  <p>
                    This is here so you can update a post (like the services post that the process cards link to) so the date will look current without having to rename a file.
                  </p>
                </li>
                <li>
                  <strong>Add Category:</strong>
                  <p>
                    This is set up using the tag feature in order to let you add your own categories by typing the name into the text field OR you can select an existing category from the dropdown menu. HOWEVER, the blog isn't set up to accept more than one category per post (we can create tags to do this if you want) so if you do accidentally add more than one category, the site will ignore all but the first category listed.
                  </p>
                  <p>
                    One other cool thing - you can just type the format you want to be displayed - no need to mess around with "alternative_learning", you can now use "Alternative Learning". Or whatever you want.
                  </p>
                </li>
                <li>
                  <strong>Feature Post:</strong>
                  <p>
                    Check this option to have a post be automatically included on the home page. It is designed to accommodate three posts. Fewer posts may look unbalanced but you may be able to set six to show up there if you wish.
                  </p>
                </li>
                <li>
                  <strong>Post Width:</strong>
                  <p>
                    This will determine the size of the image in the main post body - the default is "half-width". If you have a post where you want a full width image, I recommend making sure the image is on the larger size of the image size guidelines (above) and that the image quality is reasonably high.
                  </p>
                </li>
                <li>
                  <strong>Image File Name:</strong>
                  <p>
                    This is where you type the file name of the image you will download using the prose.io download feature. This allows the image to appear in all the other locations blog images appear that are not the body of the post itself.
                  </p>
                </li>
                <li>
                  <strong>Image Alt Text:</strong>
                  <p>
                    This is for Universal Design purposes - write a brief but descriptive bit about the image here.
                  </p>
                </li>
                <li>
                  <strong>Short Description:</strong>
                  <p>
                    This is the text that will appear on the blog page and on the category list pages.
                  </p>
                </li>
                <li>
                  <strong>Raw Metadata:</strong>
                  <p>
                    This is just a default of prose.io - you can just ignore it.
                  </p>
                </li>
              </ol>
            </div>
            <div class="col-md-5">
              <h5>This is the Metadata panel</h5>
              <p>
                <em>Click to view larger image</em>
              </p>
              <a href="/img/site-images/edify-meta-data.png" data-lightbox="image">
                <img src="/img/site-images/edify-meta-data.png" alt="Single Image">
                <div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
              </a>
              <!-- <img src="/img/site-images/edify-meta-data.png"> -->
            </div>

            <div class="clearfix bottommargin"></div>

            <h4>Part 3: The Body</h4>

            <p>
              The body of the text is done in "markdown" - which is a much more simple way of recording and formating content than HTML.
            </p>
            <p>
              You can find some basic prompts and guidelines in the prose.io editing panel here:
              <img src="/img/site-images/markdown-help.png">
            </p>
            <p>
              Here is another, more complete resource for markdown syntax: <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown Cheatsheet</a> by <a href="https://github.com/adam-p">Adam Pritchard</a>
            </p>
            <p>
              You can change the styles in the blog post body by adding HTML with inline css or pre-defined css classes.
            </p>
            <p>
              <strong>Note:</strong> html won't render properly in prose.io - you need to save it and then view it on the staging site
            </p>
          </div>


          <div class="tab-content clearfix" id="clients">

            <h4>Watch the tutorial on adding new clients</h4>
            <p>
              This tutorial goes through the workflow for adding a new client or editing content for an existing client.
            </p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PeRbonMg3rA" frameborder="0" allowfullscreen></iframe>
            <div class="clearfix bottommargin"></div>

            <h4>There are 4 steps to adding a new Client:</h4>

            <p>
              All client text content goes into the file 'clients.yml' file and client logos get uploaded in the same way as blog posts. <br>
              It's important to assemble these correctly as they will enable the code rendering the files to do so properly.
            </p>
            <img src="/img/site-images/clients.png" style="margin-bottom: 1em;">
            <div class="clearfix bottommargin-sm"></div>


            <h4>Step 1: Assemble your Content</h4>
            <p>
              Below are the data items you can include in a new client listing. Don't worry if you don't have all these pieces! You can leave a section blank by simply leaving empty quotes, like this => "".
            </p>
            <ol class="iconlist">
              <li>1. Client Company Name</li>
              <li>2. Project End Date</li>
              <li>3. Client Website URL</li>
              <li>4. Client Logo Image File</li>
              <li>5. Client Name (The person who gives the testimonial)</li>
              <li>6. Client Job Title</li>
              <li>7. Testimonial Text</li>
            </ol>


            <h5>Guidelines for Client Logo Image Files:</h5>
            <ul class="iconlist">
              <li>
                <i class="icon-wrench"></i>
                <strong>Image file names</strong> should have <strong>NO capital letters, NO spaces, and NO special characters</strong> <br>
                Characters like: <strong>?, /, &, $,</strong> will cause problems in any file name. However, dashes are encouraged. <em>for example: `image-file-name.jpg`</em>
              </li>
              <li>
                <i class="icon-wrench"></i>
                <strong>Image file formats</strong> <em>must be a `.png` file with a transparent background.</em>
              </li>
              <li>
                <i class="icon-wrench"></i>
                <strong>Image size requirements = 3 inches wide x 1 inch tall</strong> (set largest dimension to the limit and then enlarge the canvas size to meet size requirements)
              </li>
            </ul>

            <div class="clearfix bottommargin-sm"></div>

            <h4>Step 2: Copy the Template</h4>
            <p>
              Click the button below to copy the "New Client" template.<br>
              <em><strong>Important: </strong>the alignment of this is critical! The " - " must be as far to the left as possible and each subsequent line must match alignment indicated below.</em>
            </p>
            <button id="copyButton" class="btn">Copy the Template</button>
<pre id="copyTarget">
- company_name: "Insert client name here"
  project_end_date: "Insert project end date here"
  website: "Insert client website here"

  logo: "insert client logo file name here"

  client_testimonial_name: "Insert client name here"
  client_testimonial_job_title: "Insert client job title here"

  testimonial: |
    "Insert testimonial text here"
</pre>
            <div class="clearfix bottommargin-sm"></div>

            <h4>Step 3: Paste & Edit the Template</h4>
            <p>
              Click the <a href="http://prose.io/#edifyedu/edify/edit/master/_data/clients.yml" target="_blank">link to open the "New Client" page</a>.
            </p>
            <p>
              Then paste the template at the bottom of the file and edit all the text fields.
            </p>
            <p>
              <strong>Leave the fields you don't have content for empty like this -> ""</strong>
            </p>
            <div class="clearfix bottommargin-sm"></div>

            <h4>Step 4: Upload the Client Logo file</h4>
            <p>
              This part is a bit unusual - Prose.io has a great interface for uploading images but it is only accessible through the blog posts section. Fortunately for us, we can upload a file without needing to publish a post!
            </p>
            <p>
              The method for uploading a client logo is identical to uploading an image for a blog post - just be sure to put client logos in this unpublished draft post, then save the file with the new image but don't publish it!
            </p>
            <p>
              Click the <a href="http://prose.io/#edifyedu/edify/blob/master/_posts/2017-06-12-draft-for-uploading-new-client-images-do-not-publish.md" target="_blank">link to open the draft post where client logos get uploaded.</a>.
            </p>
            <div class="clearfix bottommargin-sm"></div>
          </div>


          <div class="tab-content clearfix" id="process">
            <h4>Watch the tutorial on editing Flip Cards</h4>
            <p>
              This tutorial goes through the workflow for adding a new flip card or editing content for an existing flip card.
            </p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/RwikRepy6YU" frameborder="0" allowfullscreen></iframe>
            <div class="clearfix bottommargin"></div>

            <h4>About Flip Cards:</h4>

            <p>
              All client text content goes into the file 'questions.yml' file. <br>
              It's important to get the syntax correct so the code renders the text correctly.
            </p>
            <p>
              The flip cards are edited in the same way as the client data but with just two data points; the front side questions, and the back side answers.
            </p>
            <h4><a href="http://prose.io/#edifyedu/edify/edit/master/_data/questions.yml" target="_blank">Go directly to the editing page <i class="icon-arrow-right"></i></a></h4>
            <div class="clearfix bottommargin-sm"></div>

            <h4>Things to know about the Flip Cards:</h4>
            <ul class="iconlist">
              <li>
                <i class="icon-wrench"></i>
                <strong>Number of Flip Cards:</strong> You can have as many or as few cards as you want. The CSS is set up to render the files in rows of three, so the ideal number of cards is either 3, or 6. However, it will accommodate any number you wish.
              </li>
              <li>
                <i class="icon-wrench"></i>
                <strong>Number of characters per card: </strong> The styling is set up to accommodate a maximum number of characters without making the text flow off the cards. Character count includes spaces and special characters like <em>" , . - ? </em>etc.
                <ul>
                  <li>
                    <i class="icon-wrench"></i>
                    <strong>FRONT "question side":</strong> The maximum number of characters for the front side is 145 (though I recommend keeping the total number at or below 140 total characters)
                  </li>
                  <li>
                    <i class="icon-wrench"></i>
                    <strong>BACK "answer side":</strong> The maximum number of characters for the back side is 190 (though I recommend keeping the total number at or below 185 total characters)
                  </li>
                </ul>
              </li>
              <li>
                <i class="icon-wrench"></i>
                <strong>The "Learn More" Button:</strong> The button on the back links to <a href="/services-1">the blog post "services"</a> which can be <a href="http://prose.io/#edifyedu/edify/edit/master/services-1.md">edited here</a> to reflect the most current information about Edify services.<br>
                <em>This can be adjusted easily to go to the contact page, to a different page, or even to individual blog posts for each question/answer combo. If you decide you want to change this, contact me.</em>
              </li>
            </ul>

            <h4>Additional things to know about the Flip Cards:</h4>
            <h5>Below is a diagram of the additional elements you can now edit on the flip cards!</h5>
            <ul class="iconlist">
              <li>
                <img style="width: 200px; float: right; margin-right: 6em;" src="/img/flip-card-img-dimensions.png">
                <h6>Note about the flip card image dimensions:</h6>
                 they should be exactly 3 inches wide x 1.5 inches high
              </li>
              <li>
                <img src="/img/questions.png">
              </li>
            </ul>


          </div>


          <div class="tab-content clearfix" id="services">
            <h4>Watch the tutorial on adding a new services page</h4>
            <p>
              This tutorial goes through the workflow for adding a new services page.
            </p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/1VCZ4zB4aDE" frameborder="0" allowfullscreen></iframe>
            <div class="clearfix bottommargin-sm"></div>

            <h4>There are 4 steps to adding a New Services Page:</h4>

            <div class="clearfix bottommargin-sm"></div>

            <img style="float: right; width: 350px;" src="/img/site-images/root-folder.png">
            <h4>Step 1: Create a New Page</h4>
            <ul>
              <li>
                <span style="margin-left: -25px; padding-right: 10px;"><strong>1. </strong></span>
                Go to the <a href="http://prose.io/#edifyedu/edify" target="_blank">Edify Prose.io "root directory"</a>. This means you aren't in a folder and there isn't any bigger "container" you can click into. It should look something like the image to the right.
              </li>

              <li>
                <span style="margin-left: -25px; padding-right: 10px;"><strong>2. </strong></span>
                Click the green "New File" button. You will be taken to a new file page. Give the new services file a name - this should follow a somewhat simple and direct format - ideally it will begin with the word "services".
                <p>
                  <em>For example:<br>
                  <span style="margin-left: 2em;">
                    <strong>services-1.md</strong><br>
                  </span>
                  <span style="margin-left: 2em;">
                    <strong>services-2.md</strong><br>
                  </span>
                  <span style="margin-left: 2em;">
                    <strong>services-3.md</strong><br>
                  </span>
                    or <br>
                  <span style="margin-left: 2em;">
                    <strong>services-onboarding.md</strong><br>
                  </span>
                  <span style="margin-left: 2em;">
                    <strong>services-managers.md</strong><br>
                  </span>
                  <span style="margin-left: 2em;">
                    <strong>services-knowledge.md</strong> </em>
                  </span>
                </p>
                <img style="float: right; width: 500px; margin-top: 10px;" src="/img/site-images/file-name.png">
                <p>
                  The simpler and more consistent the file name, the easier it will be to find, update, and edit later on.
                </p>
              </li>

              <li>
                <span style="margin-left: -25px; padding-right: 10px;"><strong>3. </strong></span>
                Save the new file with a commit message the same way you do for any other save in Prose.
              </li>
              <div class="clearfix"></div>
            </ul>

            <div class="bottommargin-sm"></div>

            <h4>Step 2: Add "Meta Data"</h4>
            <p>
              At this point, your new services file will not have the "meta data" icon on the right. The Meta Data is critical for the page to render properly and link to the flip cards the way you want.
            </p>
            <p>
              To get this working correctly, you will need to add the Meta Data to the top of the body of the new file and then save it.
            </p>
            <h5>To Add Meta Data:</h5>
            <ul>
              <li>
                <span style="margin-left: -25px; padding-right: 10px;"><strong>1. </strong></span> Click the Copy Button below to put the Services Meta Data template into your paste buffer.
              </li>
              <div class="clearfix"></div>
              <li>
                <span style="margin-left: -25px; padding-right: 10px;"><strong>2. </strong></span> Paste the template into the very top of the body of your new file.
              </li>
              <div class="clearfix"></div>
              <li>
                <span style="margin-left: -25px; padding-right: 10px;"><strong>3. </strong></span> Make absolutely certain the aligment is correct - in this case, each new line (layout, title, meta_title, meta_tag, and published) are all the way to the left. The line above "layout" should be three dashes like this: '---' and the line after "published" should also have three dashes '---'.
              </li>
              <div class="clearfix"></div>
              <li>
                <span style="margin-left: -25px; padding-right: 10px;"><strong>4. </strong></span>  Now save this with a commit message. <br>
                <strong>Important Note:</strong> Remember your file name - although it will display as the name you gave it when you created it (so you can look in the root directory to check if you forget), once you add the Meta Data, the name of the file will appear as the title in the template you pasted in.
              </li>
            </ul>
            <p>
              Once you do this, the Meta Data icon should appear on the right. If you do not see it, try waiting about 30 seconds and then pressing "Command + Shift + R" or on a PC; "Control + Shift + R" to force the browser to display your most recent changes.
            </p>

            <button id="copyButton2" class="btn">Copy the Template</button>
<pre id="copyTarget2">
---
layout: services-page-layout
title: Services Edify Offers

meta_title: Edify Learning Design Process is data-driven & human-focused
meta_tag: >-
  At Edify, we believe that great learning design means; designing for people
  first, practicing empathy, anticipating needs, honoring diverse approaches,
  and providing scaffolding and offer accessible options.
published: true
---
</pre>

            <div class="clearfix bottommargin-sm"></div>


            <h4>Step 3: Add Page Content</h4>
            <img style="float: right; width: 100px;" src="/img/site-images/meta-data.png">
            <p>
              Now you can update your Meta Data. To do this, click the Meta Data icon on the right - it's the one with several horizontal lines.
            </p>
            <p>
              You can give the file a new title and a new meta_title and meta_tag. Click "Done" when you are finished.
            </p>
            <p>
              <em>For more info about the Meta Title and Meta Tag, check out the tutorial info in the "Google Analytics and SEO" tab on this page.</em>
            </p>
            <p>
              <strong>Important Note:</strong> Do Not change the top line labeled "layout" - changing this will cause the page to fail to render.
            </p>
            <img src="/img/site-images/meta-data-template.png">

            <div class="clearfix bottommargin-sm"></div>


            <h4>Step 4: Update Flip Card Button Link URL</h4>
            <p>
              Finally, you will need to change the URL for the corresponding flip card on the process page so that when people click the button on the back, they will be directed to the new services page.
            </p>
            <p>
              To do this, open the <a href="http://prose.io/#edifyedu/edify/edit/master/_data/questions.yml" target="_blank">questions.yml file in the _data folder</a> and find the question you want directed to the new services page.
            </p>

            <p>
              Change the "button_link" text to be the name of the new file.
            </p>
            <img style="margin-bottom: 15px;" src="/img/site-images/ services-button-link.png">
            <p>
              <strong>Important Note: </strong> Make sure you change the file name to the actual file name - not the title that shows up after you add the Meta Data. This is the file name that (ideally) begins with the word "services"
            </p>

            <div class="clearfix bottommargin-sm"></div>
          </div>


          <div class="tab-content clearfix" id="bio">
            <h4>How to Edit Personal Info:</h4>
            <p>
              The data file `kristens_info.yml` contains the personal info that gets populated all over the site.<br>
              The locations that get updated are:
            </p>
            <ul class="iconlist">
              <li>
                <i class="icon-arrow-right"></i>
                Contact page
              </li>
              <li>
                <i class="icon-arrow-right"></i>
                About page
              </li>
              <li>
                <i class="icon-arrow-right"></i>
                Footer
              </li>
              <li>
                <i class="icon-arrow-right"></i>
                Single post (the short bio at the bottom)
              </li>
            </ul>
            <h4><a href="http://prose.io/#edifyedu/edify/edit/master/_data/kristens_info.yml" target="_blank">Edit Bio Info Now <i class="icon-arrow-right"></i> </a></h4>

            <h5>Editing this content works exactly the same as adding new clients</h5>
            <p>
              You can update the bio image by uploading it in the exact same way you do for new client logos in <a href="http://prose.io/#edifyedu/edify/blob/master/_posts/2017-06-12-draft-for-uploading-new-client-images-do-not-publish.md" target="_blank">the same draft post</a>.
            </p>
            <img src="/img/site-images/bio-data-file.png">
          </div>


          <div class="tab-content clearfix" id="pages">
            <h4>Editing Page Details</h4>

            <p>
              Most of the page detail content you can edit will be found in the '_data' folder.
            </p>
            <h6>The Page Details You can Edit:</h6>
            <ul>
              <li>
                The <strong>Page Taglines & Headers</strong>: Taglines are found on each page in the gray section and headers are found at the start of sections on pages below the gray page title bar. <em><strong>(You can also edit the text on the home page banner in this data file!)</strong></em>
              </li>
              <li>
                The <strong>Services</strong> listed on the home page just below the main banner image
              </li>
              <li>
                The <strong>Values</strong> listed on the about page just below the slider on the about page.
              </li>
            </ul>

            <div class="clearfix bottommargin-sm"></div>

            <ul class="iconlist">
              <li>
                <i class="icon-arrow-right"></i>
                <h5><a href="http://prose.io/#edifyedu/edify/edit/master/_data/headers.yml" target="_blank">Edit Page Headers and Taglines</a></h5>
                <p>
                  The Headers page is a data file named `headers.yml` and is edited exactly like the `clients.yml` file and the bio info in  `kristens_info.yml` file.
                </p>
                <img src="/img/headers.png">
              </li>
            </ul>
            <div class="clearfix bottommargin-sm"></div>

            <ul class="iconlist">
              <li>
                <i class="icon-arrow-right"></i>
                <h5><a href="http://prose.io/#edifyedu/edify/edit/master/_data/services.yml" target="_blank">Edit Home Page Services Descriptions</a></h5>
                <p>
                  The services page is a data file named `services.yml` and is edited exactly like the `clients.yml` file and the bio info in  `kristens_info.yml` file.
                </p>
                <img style="max-width: 600px;" src="/img/services.png">
              </li>
            </ul>
            <div class="clearfix bottommargin-sm"></div>

            <ul class="iconlist">
              <li>
                <i class="icon-arrow-right"></i>
                <h5><a href="http://prose.io/#edifyedu/edify/edit/master/_data/values.yml" target="_blank">Edit About Page Values</a></h5>
                <p>
                  The values on the about page are in a data file named `values.yml` and is edited exactly like the `clients.yml` file and the bio info in  `kristens_info.yml` file.
                </p>
                <img style="max-width: 600px;" src="/img/values.png">
              </li>
            </ul>
            <div class="clearfix bottommargin-sm"></div>
          </div>


          <div class="tab-content clearfix" id="google">
            <h5>How to Find the Google Analytics Tracking Code & Add Users</h5>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/U3mO1Ov9hhw" frameborder="0" allowfullscreen></iframe>
            <div class="clearfix bottommargin"></div>

            <h4>Google Analytics: Flip Card Clicks </h4>
            <p>
              Each card has a unique title in the 'questions.yml' data file in order to identify cards in Google Analytics. You can view the data in the custom dashboard under the tab 'Customization' > 'Dashboards' > 'Flip Cards' or the 'Events' tab under 'Behavior' . 'Top Events'.
            </p>

            <img src="/img/site-images/flip-card-dashboard.png">
            <div class="clearfix bottommargin-sm"></div>
            <img src="/img/site-images/flip-card-click-data.png">
            <div class="clearfix bottommargin"></div>

            <h4>Google SEO: Meta Titles & Meta Descriptions</h4>

            <img style="float: right; height: 300px; margin-right: 2em;" src="/img/site-images/meta-data-icon.png">

            <p>
              The files in which you can edit meta titles and meta descriptions are all .html files found in the <a href="http://prose.io/#edifyedu/edify">main folder (or root directory)</a> of prose. To edit these files, click the links below to open the specific file and then click on the meta data icon on the right of the page to open the meta data editing panel.
            </p>
            <div class="bottommargin-sm"></div>

            <h5>What are meta titles?</h5>
            <p>
              "A title tag is an HTML element that specifies the title of a web page. Title tags are displayed on search engine results pages (SERPs) as the clickable headline for a given result, and are important for usability, SEO, and social sharing. The title tag of a web page is meant to be an accurate and concise description of a page's content." <br><em><a href="https://moz.com/learn/seo/title-tag">~ Moz SEO Tutorial on Title Tags</a></em>
            </p>
            <div class="bottommargin-sm"></div>

            <h5>What are meta descriptions?</h5>
            <p>
              "Meta descriptions are HTML attributes that provide concise summaries of webpages. They commonly appear underneath the blue clickable links in a search engine results page (SERP)." <br><em><a href="https://moz.com/learn/seo/meta-description">~ Moz SEO Tutorial on Meta descriptions</a></em>
            </p>
            <div class="clearfix bottommargin-sm"></div>

            <h5>Editing the Title Tags &/Or Meta Descriptions</h5>
            <p>
              Each page has metadata that can be accessed by clicking the metadata icon in exactly the same way as blog post meta data.
            </p>
            <ul>
              <li>
                <h4 style="margin-bottom: 10px; font-size: 1.25em;"><a href="http://prose.io/#edifyedu/edify/edit/master/about.html">Edit the About Page</a></h4>
                <img class="metadata-img" src="/img/site-images/about-meta.png">
              </li>
              <li>
                <h4 style="margin-bottom: 10px; font-size: 1.25em;"><a href="http://prose.io/#edifyedu/edify/edit/master/contact.html">Edit the Contact Page</a></h4>
                <img class="metadata-img" src="/img/site-images/contact-meta.png">
              </li>
              <li>
                <h4 style="margin-bottom: 10px; font-size: 1.25em;"><a href="http://prose.io/#edifyedu/edify/edit/master/process.html">Edit the Process Page</a></h4>
                <img class="metadata-img" src="/img/site-images/process-meta.png">
              </li>
              <li>
                <h4 style="margin-bottom: 10px; font-size: 1.25em;"><a href="http://prose.io/#edifyedu/edify/edit/master/blog.html">Edit the Blog Page</a></h4>
                <img class="metadata-img" src="/img/site-images/blog-meta.png">
              </li>
            </ul>
          </div>

        </div>

      </div>

    </div>
  </section>
</div>