I'm a big fan of little hacks, and this week I discovered a little hack at Signal that will take your landing pages from zero to hero in about fifteen minutes.

I'm going to show you how to add your own custom background image to an existing web landing page template in Signal so you can better customize the look and feel of your page without having to know CSS or HTML.

I've found this hack works really well with our Clean Slate template, so I started with that.

landing page template selection

To start, I navigate to Web > New Landing page, and use the WYSIWYG editor in the regular single column Clean Slate template to add my logo and choose which fields I'll be collecting on my web form.

wysiwyg landing page editor

After I'm done editing the customizable content section via the WYSIWYG editor in the landing page builder and selecting my form fields, the end result looks something like this:

swell machine landing page in clean slate one column

It looks okay, but I'm using my Signal landing page as a way to collect email addresses in advance of a website launch, so I want the page to feel more like a contemporary "coming soon" page versus a plain, mobile-optimized template for collecting, say, contest entries.

In order to change the background color to a more dynamic background image, I now have to update the landing page template.

To do this, I go to Web > Templates, and next to the single column Clean Slate template, hover over the gear icon and click "download." This downloads a copy of the Clean Slate template file to my desktop so I can edit it. This gets a little tricky, so I've created a series of steps to help you follow along.

1. Locate the template .zip file on your desktop and open it.

2. Find the Resources folder in the main template folder (the one you just unzipped) and open it.

3. Within the Resources folder, locate the landingpage.css document and open that using a text editor such as TextEdit or Notepad.

4. Find the 'body' tag which includes the 'background' rules (note that there may be more than one 'body' tag in the template, so keep scrolling if you don't see the 'background' rules):

Body tag in CSS

Change this background rule to reference the image you want to use:

Updated background for a body tag

Important: Your image should be 1600-2000px wide and ideally under 300k in size. There are a few image optimizers you can use to reduce the image size under 300k.

6. Save your landingpage.css document, with the changes you've just made, in the same Resources folder where you found it.

7. Add your image file, the one you referenced in the snippet of code above to the Resources folder, too.

8. Re-name the entire template folder — where your Resources folder is housed — so you can recognize it when you re-upload it, then compress it into a new .zip file.

modify existing web template folder

9. Once your folder is zipped, navigate to Web > Templates in your Signal account and click "new template." Follow the prompts and upload your .zip file as a new template.

10. Go to the original landing page you created and edit it. Switch the template from Clean Slate to the new template you created.

Now, when I revisit my landing page and hit "refresh," I can see the background image I just uploaded.

signal landing page with new background image

I think this page works great for a product launch page!

Combine it with a custom domain name or a vanity URL so you can control the URL, either using your own domain to host the landing page or creating an easy vanity URL in Signal (which looks like app.signalhq.com/lp/myvanityURL).

More customization:
Want to customize the link and button colors in a template?
Follow steps 1-4 above. Replace the button and link colors with hex numbers (six digits) for your desired colors. You can use an online hex picker to find the right numbers: http://www.colorpicker.com/

Katherine is the Community Manager at Signal.

Posted in Do it in Signal

Tags: , , ,