Landing Page Documentation

Hi, Kevin. How is your day going? I’m doing well, thanks.

Oh, all you want is to know how to make landing pages? Okay 😔

I just thought it would be nice to talk. Since we’re friends. But I understand, it’s time to work now. Maybe we can hang out later? Possibly? 😃

Oh. 😕 Ok.

😔

Where to find stuff

The landing pages themselves are in the aptly named Dropbox folder, bambu-landing-data. The landing page data is written in a language called YAML, which is briefed below.

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:

  • Indentation is really important in YAML. Make sure not to change the indentation on any line.
  • HTML is technically allowed in text strings, but it should be used sparingly, mainly for typographic characters like a non-breaking space ( ) or em-dash (&em;).
  • Since colons are key part of YAML syntax, if text after the key contains a colon, you need to wrap the whole line in quotes. E.g.:
1
someKey: "A title: With a colon and subtitle."

Naming things

The filename for a YAML landing page file corresponds to it’s URL, so template-one.yml will create a page at https://lps.getbambu.com/template-one. In addition, if you create a folder named folder containing a page named page.yml, it will map to the URL lps.getbambu.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 two 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. Go to StageDroid and run a fast build. Your changes should be visible on https://lps-stage.sproutsocial.com shortly.

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 find the image you’d like to use.
  6. Copy the image name (in bold, above the image).
  7. Paste the copied name in the YAML file.
  8. Save.
  9. Go to StageDroid and run a fast build. Your changes should be visible on https://lps-stage.sproutsocial.com shortly.

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. Edit the text, images, and videos as desired and save.
  4. Go to StageDroid and run a fast build. Your changes should be visible on https://lps-stage.sproutsocial.com shortly.

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 StageDroid.