Editing and creating landing pages

Where to find stuff

The landing pages themselves are in the aptly named Dropbox folder, landing-pages. In the level above this are a few other files that are used to reference images, videos, and sitewide (global) variables, such as the navbar and footer.

YAML Ain’t Markup Lanuage

Yes, that’s what YAML actually stands for. YAML is a simple human-readable language for storing data. Basically, it’s a set of key-value pairs. A key is followed by a colon and then a value, which can be a text string or number or a bunch of other more programmy data types.

In our context, the site generator finds keys in an HTML template and replaces them with the values you set.

A couple things to note:

Naming things

The filename for a YAML landing page file corresponds to it’s URL, so twitter-analytics.yml will create a page at http://lps.sproutsocial.com/twitter-analytics. In addition, if you create a folder named folder containing a page named page.yml, it will map to the URL http://lps.sproutsocial.com/folder/page.

Landing Page Templates

The template for any page is set by the layout key at the top of the YAML file. We currently have four templates that can be used to create landing pages. Look for the YAML files named template## to get an example of the content each template contains. You can see what each template looks like on stage:

Editing text content

  1. Open the YAML file for the page you want to edit.
  2. Using the template design as a reference, find the section you want edit.
  3. Locate the key for the text you want to change. The keys have semantic names, so they should be easy to find.
  4. Edit the text after the colon.
  5. Make sure you don’t change the key names or indentation.
  6. Save.
  7. After about 30 seconds, the stage site should finish building and you can view your changes online.

Editing images and videos

  1. Open the YAML file for the page you want to edit.
  2. Using the template design as a reference, find the section you want edit.
  3. Locate the key for the image or video you want to change. The keys have semantic names, so they should be easy to find.
  4. Highlight all the text after the colon.
  5. Go to the Assets Library and scroll to the section where you want to swap out the image or video.
  6. Use the dropdown menus to select the image or video you want.
  7. Click the copy button.
  8. Paste the copied code in the YAML file.
  9. Save.
  10. After about 30 seconds, the stage site should finish building and you can view your changes online.

Creating a new landing page

  1. Open a YAML file that uses the same template you want to use for the new landing page.
  2. Save as (Command + Shift + S) and choose a filename. Keep in mind that this filename will correspond to the landing page’s URL.
  3. As soon as the file is saved, the build process will begin and soon the page will be live at http://stage.lps.sproutsocial.com/file-name.
  4. Edit the text, images, and videos as desired and save.

Making it live

When you are satisfied with your changes, make sure you preview them on the stage site. When you’re ready, you can deploy the new site to production with one click through the deployment web app at stage.lps.sproutsocial.com/deploy.